/* NowVertical Design System — Tokens * Source: 2025 Brand Guidelines v1.0 (01.07.25) * Import this file FIRST in any document that consumes the system, after fonts.css. */ :root { /* ======================================================================== * COLOR — CORE * ------------------------------------------------------------------------ * The palette is intentionally small. Primary 1 carries all emphasis; * Primary 2 is reserved for dense secondary accents and dark surfaces. * Expand the palette through transparency, not by inventing new hues. * ====================================================================== */ --nv-primary-1: #362DFE; /* Electric blue — primary highlight, CTAs, key stats */ --nv-primary-2: #000064; /* Deep navy — secondary highlight, headings, dark surfaces */ --nv-surface: #F2F2F2; /* Soft grey — page background in light UI */ --nv-ink: #0A0A1E; /* Near-black for body text (sits between pure black and navy) */ --nv-paper: #FFFFFF; /* Pure white — cards, callouts, inputs */ /* ======================================================================== * COLOR — TRANSPARENCY LADDER * ------------------------------------------------------------------------ * The guide explicitly calls out 5% and 10% as key secondary colours. * Use these instead of inventing a tint. Full ladder provided for callouts, * hover states, and chart fills. * ====================================================================== */ --nv-primary-1-05: rgba(54, 45, 254, 0.05); --nv-primary-1-10: rgba(54, 45, 254, 0.10); --nv-primary-1-15: rgba(54, 45, 254, 0.15); --nv-primary-1-25: rgba(54, 45, 254, 0.25); --nv-primary-1-50: rgba(54, 45, 254, 0.50); --nv-primary-2-05: rgba(0, 0, 100, 0.05); --nv-primary-2-10: rgba(0, 0, 100, 0.10); --nv-primary-2-15: rgba(0, 0, 100, 0.15); --nv-primary-2-25: rgba(0, 0, 100, 0.25); --nv-primary-2-50: rgba(0, 0, 100, 0.50); --nv-ink-60: rgba(10, 10, 30, 0.60); /* Muted body */ --nv-ink-40: rgba(10, 10, 30, 0.40); /* Tertiary, captions */ --nv-ink-15: rgba(10, 10, 30, 0.15); /* Hairlines on light */ --nv-ink-08: rgba(10, 10, 30, 0.08); /* Card borders, dividers */ /* ======================================================================== * COLOR — SEMANTIC / STATUS * ------------------------------------------------------------------------ * Not in the source guide, but required for product UI. Tuned to sit * alongside the brand blue without fighting it. Use sparingly. * ====================================================================== */ --nv-success: #0C8A5F; --nv-success-bg: rgba(12, 138, 95, 0.10); --nv-warning: #B8740A; --nv-warning-bg: rgba(184, 116, 10, 0.10); --nv-danger: #C6223C; --nv-danger-bg: rgba(198, 34, 60, 0.10); --nv-info: var(--nv-primary-1); --nv-info-bg: var(--nv-primary-1-10); /* ======================================================================== * COLOR — DATA VIZ * ------------------------------------------------------------------------ * "High contrast line on mixed charts" — Primary, Secondary, Tertiary * is the canonical trio from the guidelines. The extended scale below * preserves brand feel for longer series. * ====================================================================== */ --nv-viz-1: #362DFE; /* Primary */ --nv-viz-2: #000064; /* Secondary */ --nv-viz-3: #9B98FF; /* Tertiary — primary at ~50% over white */ --nv-viz-4: #5D56FE; /* Primary mid */ --nv-viz-5: #00B3D1; /* Cyan accent for 5+ series */ --nv-viz-6: #FFB020; /* Warm accent for 6+ series (use sparingly) */ /* ======================================================================== * GRADIENT * ------------------------------------------------------------------------ * Hero / header use only. Never behind detailed content or callouts. * ====================================================================== */ --nv-gradient: linear-gradient(135deg, #000064 0%, #362DFE 100%); --nv-gradient-soft: linear-gradient(135deg, rgba(0,0,100,0.04) 0%, rgba(54,45,254,0.10) 100%); /* ======================================================================== * TYPOGRAPHY * ------------------------------------------------------------------------ * Circular Std for display + headings. Outfit/Aptos are editable-document * fallbacks per the guidelines. System stack ensures graceful degradation. * ====================================================================== */ --nv-font-display: 'Circular Std', 'Outfit', 'Aptos', system-ui, sans-serif; --nv-font-body: 'Circular Std', 'Outfit', 'Aptos', system-ui, sans-serif; --nv-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Weights — Circular Std shipped: 400 Book, 500 Medium, 700 Bold, 900 Black */ --nv-weight-book: 400; --nv-weight-medium: 500; --nv-weight-bold: 700; --nv-weight-black: 900; /* Type scale — based on 1rem = 16px, 1.200 minor third for body, larger steps for display to support slide/hero use. Line-heights tuned for Circular Std's tall x-height. */ --nv-text-xs: 0.75rem; /* 12 */ --nv-text-sm: 0.875rem; /* 14 */ --nv-text-base: 1rem; /* 16 */ --nv-text-md: 1.125rem; /* 18 */ --nv-text-lg: 1.375rem; /* 22 */ --nv-text-xl: 1.75rem; /* 28 */ --nv-text-2xl: 2.25rem; /* 36 */ --nv-text-3xl: 3rem; /* 48 */ --nv-text-4xl: 4rem; /* 64 */ --nv-text-5xl: 5.5rem; /* 88 — reserved for hero stats */ --nv-leading-tight: 1.08; --nv-leading-snug: 1.2; --nv-leading-body: 1.5; --nv-leading-loose: 1.65; --nv-tracking-tight: -0.02em; /* Display */ --nv-tracking-normal: 0; --nv-tracking-label: 0.04em; /* Small uppercase labels */ /* ======================================================================== * SPACING — 4px base grid * ------------------------------------------------------------------------ * The guidelines call out "significant padding, beyond Microsoft defaults". * Lean generous — container padding is typically --nv-space-7 (32px) or more. * ====================================================================== */ --nv-space-1: 4px; --nv-space-2: 8px; --nv-space-3: 12px; --nv-space-4: 16px; --nv-space-5: 20px; --nv-space-6: 24px; --nv-space-7: 32px; --nv-space-8: 40px; --nv-space-9: 56px; --nv-space-10: 72px; --nv-space-11: 96px; --nv-space-12: 128px; /* ======================================================================== * RADII * ------------------------------------------------------------------------ * "Corners should have reduced rounding" — this is the single most * distinguishing choice vs. generic SaaS. Keep it small. * ====================================================================== */ --nv-radius-xs: 2px; --nv-radius-sm: 4px; /* Default for inputs, buttons, chips */ --nv-radius-md: 6px; /* Cards */ --nv-radius-lg: 10px; /* Large containers / hero blocks */ --nv-radius-pill: 999px; /* Tags / dots only */ /* ======================================================================== * BORDERS / LINES * ------------------------------------------------------------------------ * "Lines should be thin" — prefer 1px hairlines. * ====================================================================== */ --nv-border-hairline: 1px solid var(--nv-ink-08); --nv-border-soft: 1px solid var(--nv-ink-15); --nv-border-strong: 1px solid var(--nv-primary-2); --nv-border-brand: 1.5px solid var(--nv-primary-1); /* ======================================================================== * SHADOWS * ------------------------------------------------------------------------ * "Shadows should be blurred" — no hard offsets. Use long blur, low alpha, * tinted navy (not black) so they read as brand-native. * ====================================================================== */ --nv-shadow-xs: 0 1px 2px rgba(0, 0, 100, 0.05); --nv-shadow-sm: 0 2px 8px rgba(0, 0, 100, 0.06); --nv-shadow-md: 0 6px 24px rgba(0, 0, 100, 0.08); --nv-shadow-lg: 0 16px 48px rgba(0, 0, 100, 0.10); --nv-shadow-focus: 0 0 0 3px var(--nv-primary-1-25); /* ======================================================================== * MOTION * ------------------------------------------------------------------------ * Subtle — this is enterprise. Nothing bouncy. * ====================================================================== */ --nv-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --nv-dur-fast: 120ms; --nv-dur-base: 200ms; --nv-dur-slow: 360ms; /* ======================================================================== * LAYOUT * ====================================================================== */ --nv-container-max: 1200px; --nv-container-pad: var(--nv-space-8); --nv-slide-w: 1920px; --nv-slide-h: 1080px; --nv-slide-pad: 80px; /* Generous, per guidelines */ } /* ========================================================================== * BASE * ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--nv-font-body); font-weight: var(--nv-weight-book); font-size: var(--nv-text-base); line-height: var(--nv-leading-body); color: var(--nv-ink); background: var(--nv-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Type utility classes — mirror tokens for quick use in preview files. * Production consumers should bind directly to the CSS variables. */ .nv-display-1 { font-family: var(--nv-font-display); font-weight: var(--nv-weight-bold); font-size: var(--nv-text-4xl); line-height: var(--nv-leading-tight); letter-spacing: var(--nv-tracking-tight); color: var(--nv-primary-2); } .nv-display-2 { font-family: var(--nv-font-display); font-weight: var(--nv-weight-bold); font-size: var(--nv-text-3xl); line-height: var(--nv-leading-tight); letter-spacing: var(--nv-tracking-tight); color: var(--nv-primary-2); } .nv-h1 { font-family: var(--nv-font-display); font-weight: var(--nv-weight-bold); font-size: var(--nv-text-2xl); line-height: var(--nv-leading-snug); letter-spacing: var(--nv-tracking-tight); color: var(--nv-primary-2); } .nv-h2 { font-family: var(--nv-font-display); font-weight: var(--nv-weight-bold); font-size: var(--nv-text-xl); line-height: var(--nv-leading-snug); color: var(--nv-primary-2); } .nv-h3 { font-family: var(--nv-font-display); font-weight: var(--nv-weight-medium); font-size: var(--nv-text-lg); line-height: var(--nv-leading-snug); color: var(--nv-primary-2); } .nv-body { font-size: var(--nv-text-base); line-height: var(--nv-leading-body); color: var(--nv-ink); } .nv-body-sm { font-size: var(--nv-text-sm); line-height: var(--nv-leading-body); color: var(--nv-ink-60); } .nv-label { font-size: var(--nv-text-xs); font-weight: var(--nv-weight-medium); letter-spacing: var(--nv-tracking-label); text-transform: uppercase; color: var(--nv-ink-60); } .nv-stat-number { font-family: var(--nv-font-display); font-weight: var(--nv-weight-bold); font-size: var(--nv-text-5xl); line-height: 0.95; letter-spacing: var(--nv-tracking-tight); color: var(--nv-primary-1); }