Skip to content
PLANOVI Docs

Design System & Asset Management

The PLANOVI Webpage utilizes a lightweight Vanilla CSS design system (css/style.css) built on modern CSS variables, responsive typography, and glassmorphic card containers.

1. CSS Custom Property Tokens

The design system maintains dedicated color schemes for dark and light modes via data-theme attributes:

:root, [data-theme="dark"] {
    --bg-primary: #0b0f19;
    --bg-secondary: #111827;
    --card-bg: rgba(17, 24, 39, 0.7);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --accent: #10b981;
    --accent-glow: rgba(16, 185, 129, 0.25);
    --nav-bg: rgba(11, 15, 25, 0.85);
}


[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-border: rgba(0, 0, 0, 0.08);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #059669;
    --accent-glow: rgba(5, 150, 105, 0.2);
    --nav-bg: rgba(255, 255, 255, 0.85);
}

2. Glassmorphic Card Containers (.glass-card)

Glassmorphism provides depth and layering over the particle animation canvas:

.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 32px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}


.glass-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 12px 30px var(--accent-glow);
}

3. Iconography (Phosphor Icons)

The webpage integrates Phosphor Icons via CDN:

<script src="https://unpkg.com/@phosphor-icons/web"></script>

Usage in templates:

<i class="ph ph-lightning"></i>
<i class="ph ph-shield-check"></i>
<i class="ph ph-sun"></i>
<i class="ph ph-arrow-right"></i>

4. Typography & Responsive Breakpoints

  • Font Family: Modern system UI stack with Inter / Outfit fallbacks: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  • Breakpoints:
    • Desktop: > 1024px (multi-column grids, fixed navbar controls)
    • Tablet: 768px - 1024px (2-column layouts)
    • Mobile: < 768px (single-column flow, collapsible overlay menu)