/* ============================================================ SONA DESIGN TOKENS — single source of truth ============================================================ Framework-agnostic CSS custom properties. Works anywhere: Tailwind v4, Tailwind v3, Docusaurus, plain Vite/React, static HTML. SOURCE OF TRUTH: the Sona Marketing Site. - Ramps ........ Figma "Sona Labs Design System" QVW39KrbpkgKqYGAscQECZ - Role choices . Marketing Site STYLE_GUIDE.md + COLORS.md Marketing Site is the arbiter. If a value here ever disagrees with it, the Marketing Site wins and THIS FILE is the bug. Everything is prefixed --sona-* so it can never collide with an app's own variables. Tailwind users get short utility names via theme.css. TWO LAYERS — use the right one: 1. PRIMITIVES --sona-- the raw palette. Complete ramps. 2. ROLES --sona-brand-*, --sona-text-*, ... what to reach for. Prefer a ROLE token. Drop to a primitive only when no role fits. Never write a raw hex. ============================================================ */ /* ============================================================ 1. PRIMITIVES — color ramps Light (05) to dark (900). Verified against the Marketing Site's in-use values at every step it specifies. ============================================================ */ :root { /* ---- Neutral — text, borders, surfaces ---- */ --sona-neutral-05: #fdfdfd; --sona-neutral-10: #fafafa; --sona-neutral-20: #f5f5f6; --sona-neutral-30: #ebecec; --sona-neutral-40: #dfe0e1; --sona-neutral-50: #c1c3c5; --sona-neutral-60: #b2b4b7; --sona-neutral-70: #a6a8ab; --sona-neutral-80: #97999e; --sona-neutral-90: #888b90; --sona-neutral-100: #7a7c82; --sona-neutral-200: #6b6e74; --sona-neutral-300: #5c5f66; --sona-neutral-400: #50535a; --sona-neutral-500: #41454c; --sona-neutral-600: #343941; --sona-neutral-700: #232831; --sona-neutral-800: #141923; --sona-neutral-900: #080d17; /* ---- Primary (navy/indigo) — brand identity, CTAs, links, focus ---- */ --sona-primary-05: #fdfdff; --sona-primary-10: #fafbff; --sona-primary-20: #f6f7fd; --sona-primary-30: #f2f3fb; --sona-primary-40: #eeeffa; --sona-primary-50: #eaecf8; --sona-primary-60: #cfd4ef; --sona-primary-70: #a7b1e2; --sona-primary-80: #a0aae0; --sona-primary-90: #919ddb; --sona-primary-100: #8390d6; --sona-primary-200: #4d60c5; --sona-primary-300: #2940b9; --sona-primary-400: #1d2d82; --sona-primary-500: #192771; --sona-primary-600: #152160; --sona-primary-700: #111b4f; --sona-primary-800: #0d153e; --sona-primary-900: #090f2d; /* ---- Secondary (pink/magenta) — highlights, badges, accents ---- */ --sona-secondary-05: #fffdfe; --sona-secondary-10: #fffafc; --sona-secondary-20: #fef5f8; --sona-secondary-30: #fef0f5; --sona-secondary-40: #fdebf2; --sona-secondary-50: #fde6ef; --sona-secondary-60: #fbc8dc; --sona-secondary-70: #f796bf; --sona-secondary-80: #f68dba; --sona-secondary-90: #f57caf; --sona-secondary-100: #f36ba5; --sona-secondary-200: #ee2b7e; --sona-secondary-300: #eb0063; --sona-secondary-400: #a50045; --sona-secondary-500: #8f003c; --sona-secondary-600: #790033; --sona-secondary-700: #63002a; --sona-secondary-800: #4d0021; --sona-secondary-900: #370018; /* ---- Warning (orange) — form validation, app UI ---- */ --sona-warning-05: #fffefd; --sona-warning-10: #fffdfb; --sona-warning-20: #fffbf6; --sona-warning-30: #fff9f2; --sona-warning-40: #fff6ed; --sona-warning-50: #fff4e9; --sona-warning-60: #ffe6cd; --sona-warning-70: #ffd0a4; --sona-warning-80: #ffcc9d; --sona-warning-90: #ffc48e; --sona-warning-100: #ffbc7f; --sona-warning-200: #ffa048; --sona-warning-300: #ff8c22; --sona-warning-400: #b36218; --sona-warning-500: #9c5515; --sona-warning-600: #854812; --sona-warning-700: #6e3b0f; --sona-warning-800: #572e0c; --sona-warning-900: #402109; /* ---- Success (green) — form validation, app UI ---- Distinct from --sona-status-success (#22c55e), which is the Marketing analytics/status green. This ramp is the design system's Success family. */ --sona-success-10: #fcfefc; --sona-success-20: #f8fdf8; --sona-success-30: #f4fcf3; --sona-success-40: #effbed; --sona-success-50: #ebfce6; --sona-success-60: #c9f7bb; --sona-success-70: #aff396; --sona-success-80: #a1f185; --sona-success-90: #97ef78; --sona-success-100: #8dee6b; --sona-success-200: #5ce62b; --sona-success-300: #3be100; --sona-success-400: #299e00; --sona-success-500: #248900; --sona-success-600: #1f7500; --sona-success-700: #1a6100; --sona-success-800: #144d00; --sona-success-900: #0f3900; /* ---- Error (red) — form validation, app UI ---- */ --sona-error-05: #fffdfd; --sona-error-10: #fffafa; --sona-error-20: #fef5f4; --sona-error-30: #fef0ef; --sona-error-40: #fdeaea; --sona-error-50: #fce8e6; --sona-error-60: #f8cec9; --sona-error-70: #f3a296; --sona-error-80: #f1968a; --sona-error-90: #ef8b7e; --sona-error-100: #ee7b6b; --sona-error-200: #e6422b; --sona-error-300: #e11b00; --sona-error-400: #9e1300; --sona-error-500: #891000; --sona-error-600: #740d00; --sona-error-700: #5f0a00; --sona-error-800: #4a0700; --sona-error-900: #350400; /* ---- Off-ramp values the Marketing Site genuinely uses ---- Not in any Figma ramp, but present in shipped marketing markup, so they are canonical. Documented rather than silently rounded to the nearest ramp step. */ --sona-navy-hover: #172468; /* primary button hover; between primary-400 and -500 */ --sona-heading-alt: #21272a; /* secondary heading tone, alongside neutral-800 */ --sona-muted-cool: #8a90a2; /* fine print, cooler than neutral-100 */ --sona-border-cool: #e3e5ee; /* card outline, cooler than neutral-30 */ --sona-border-hair: #e8e8e8; /* nav + footer hairline; warmer than neutral-30 */ --sona-surface-hover: #f3f4f6; /* secondary button hover fill */ --sona-chrome: #f7f8fc; /* browser-chrome mock, subtle fills */ --sona-tint: #f9fafd; /* FAQ rows, tinted cards and chips */ --sona-muted-slate: #8f95a4; /* "Last updated" text, muted icon glyphs */ /* Sidebar / dark-panel gradient stops */ --sona-navy-panel-deep: #0d1c41; --sona-navy-panel-mid: #1b2b73; } /* ============================================================ 2. PRIMITIVES — tertiary accent ramps Charts, data-viz bars, decorative blobs, multi-series cycling. Mid steps (200-500) for fills, light steps (10-60) for tints. Source: COLORS.md "Tertiary accent ramps". ============================================================ */ :root { /* Magenta / Purple */ --sona-magenta-10: #fef9fd; --sona-magenta-20: #fcf3fb; --sona-magenta-30: #faedfa; --sona-magenta-40: #f8e7f8; --sona-magenta-50: #f6e1f6; --sona-magenta-60: #eebdec; --sona-magenta-70: #e492de; --sona-magenta-80: #df84d9; --sona-magenta-90: #d974d2; --sona-magenta-100: #d364cb; --sona-magenta-200: #b041a0; --sona-magenta-300: #8c3480; --sona-magenta-400: #6b2762; --sona-magenta-500: #541f4d; --sona-magenta-600: #44193f; --sona-magenta-700: #341330; --sona-magenta-800: #240d21; --sona-magenta-900: #140712; /* Cyan / Teal */ --sona-teal-10: #f0fbfc; --sona-teal-20: #e1f7f9; --sona-teal-30: #d2f3f6; --sona-teal-40: #c3eff3; --sona-teal-50: #b4ebf0; --sona-teal-60: #a5e7ed; --sona-teal-70: #96e3ea; --sona-teal-80: #87dfe7; --sona-teal-90: #78dbe4; --sona-teal-100: #69d7e1; --sona-teal-200: #06a9b9; --sona-teal-300: #058794; --sona-teal-400: #04656f; --sona-teal-500: #034b52; --sona-teal-900: #010b0d; /* Lime / Green */ --sona-lime-10: #f7fdee; --sona-lime-20: #f1fbe0; --sona-lime-30: #ebf9d2; --sona-lime-40: #e5f7c4; --sona-lime-50: #dbf4b2; --sona-lime-60: #c8ec8d; --sona-lime-70: #b6e568; --sona-lime-80: #a4dd42; --sona-lime-90: #9fd53e; --sona-lime-100: #99d53d; --sona-lime-200: #76a42f; --sona-lime-300: #5c8025; --sona-lime-400: #4a661d; --sona-lime-500: #3b5217; --sona-lime-600: #2e4112; --sona-lime-700: #22300d; --sona-lime-900: #0f1506; /* Amber / Yellow */ --sona-amber-10: #fff8e1; --sona-amber-20: #fff3cf; --sona-amber-30: #ffefbe; --sona-amber-40: #ffebad; --sona-amber-50: #ffe79c; --sona-amber-60: #ffdf85; --sona-amber-70: #ffd86e; --sona-amber-80: #ffd057; --sona-amber-90: #ffc940; --sona-amber-100: #ffc129; --sona-amber-200: #ffb347; --sona-amber-300: #f5a022; --sona-amber-400: #e08e1a; --sona-amber-500: #bd7716; --sona-amber-600: #996112; --sona-amber-700: #754a0e; --sona-amber-800: #52330a; --sona-amber-900: #2e1d06; /* Orange / Coral */ --sona-coral-10: #fff4f0; --sona-coral-20: #ffede6; --sona-coral-30: #ffe6db; --sona-coral-40: #ffdfd1; --sona-coral-50: #ffd8c6; --sona-coral-60: #ffceb8; --sona-coral-70: #ffc4aa; --sona-coral-80: #ffb99c; --sona-coral-90: #ffaf8d; --sona-coral-100: #ffa57f; --sona-coral-200: #ff7034; --sona-coral-300: #d65e2b; --sona-coral-400: #ad4c23; --sona-coral-500: #853a1b; --sona-coral-600: #6b2f15; --sona-coral-700: #522410; --sona-coral-800: #38190b; --sona-coral-900: #1f0e06; /* Chart cycle — use in this order for multi-series */ --sona-chart-1: var(--sona-teal-200); --sona-chart-2: var(--sona-coral-200); --sona-chart-3: var(--sona-magenta-200); --sona-chart-4: var(--sona-lime-200); --sona-chart-5: var(--sona-amber-300); } /* ============================================================ 3. ROLES — what to actually reach for Every value below is a Marketing Site decision, expressed as a pointer into the ramps above. THIS is the layer that resolves the drift between sites: same role name everywhere, one definition. ============================================================ */ :root { /* ---- Brand ---- */ --sona-brand-navy: var(--sona-primary-400); /* #1d2d82 filled primary buttons, brand */ --sona-brand-navy-hover: var(--sona-navy-hover); /* #172468 */ --sona-brand-navy-deep: var(--sona-primary-700); /* #111b4f dark gradient stops */ --sona-brand-blue-accent: var(--sona-primary-300); /* #2940b9 chip text, icons, legal links */ --sona-brand-pink: var(--sona-secondary-200); /* #ee2b7e highlight words, active pills */ --sona-brand-pink-logo: var(--sona-secondary-300); /* #eb0063 logo only */ --sona-brand-pink-link: var(--sona-secondary-100); /* #f36ba5 inline links on dark */ /* Navy hero gradient — even/dark sections and the announcement bar */ --sona-gradient-navy: linear-gradient(279deg, #1d2d82 6.59%, #111b4f 32.47%, #1d2d82 49.58%, #111b4f 67.11%, #1d2d82 93.41%); /* ---- Surfaces ---- */ --sona-surface-light: var(--sona-primary-10); /* #fafbff odd/light sections — default page bg */ --sona-surface-light-alt: var(--sona-primary-05); /* #fdfdff */ --sona-surface-card: #ffffff; /* card / app-window surface */ --sona-surface-inset: var(--sona-neutral-20); /* #f5f5f6 inputs, inset panels */ --sona-surface-hover-bg: var(--sona-surface-hover); /* #f3f4f6 secondary button hover */ --sona-surface-chrome: var(--sona-chrome); /* #f7f8fc browser-chrome mock */ --sona-surface-tint: var(--sona-tint); /* #f9fafd FAQ rows, tinted cards */ /* Dark sidebar / panel gradient */ --sona-gradient-sidebar: linear-gradient(45.71deg, #0d1c41 1.69%, #1b2b73 86.04%); /* ---- Text on LIGHT backgrounds ---- */ --sona-text-heading: var(--sona-neutral-800); /* #141923 */ --sona-text-heading-alt: var(--sona-heading-alt); /* #21272a */ --sona-text-body: var(--sona-neutral-600); /* #343941 default paragraph */ --sona-text-body-alt: var(--sona-neutral-500); /* #41454c long-form + legal body */ --sona-text-muted: var(--sona-neutral-400); /* #50535a captions */ --sona-text-muted-2: var(--sona-neutral-100); /* #7a7c82 */ --sona-text-fine: var(--sona-muted-cool); /* #8a90a2 fine print */ --sona-text-slate: var(--sona-muted-slate); /* #8f95a4 "last updated", muted icons. Near-duplicate of --sona-text-fine; worth consolidating one day. */ --sona-text-eyebrow: var(--sona-primary-80); /* #a0aae0 "01 / VISIBILITY" label */ /* ---- Text on DARK / navy backgrounds ---- */ --sona-text-on-dark-heading: var(--sona-neutral-05); /* #fdfdfd */ --sona-text-on-dark-body: var(--sona-neutral-30); /* #ebecec */ --sona-text-on-dark-body-2: var(--sona-neutral-40); /* #dfe0e1 */ /* ---- Borders ---- */ --sona-border-button: var(--sona-neutral-50); /* #c1c3c5 secondary button outline */ --sona-border-card: var(--sona-border-cool); /* #e3e5ee card outline */ --sona-border-divider: var(--sona-neutral-30); /* #ebecec dividers */ --sona-border-hairline: var(--sona-border-hair); /* #e8e8e8 nav + footer edge */ --sona-border-glass: rgba(255, 255, 255, 0.35); /* ---- Pills / chips ---- */ --sona-pill-bg: var(--sona-primary-40); /* #eeeffa product pill, nav hover */ --sona-pill-border: var(--sona-primary-60); /* #cfd4ef */ --sona-badge-bg: var(--sona-secondary-60); /* #fbc8dc section eyebrow badge */ --sona-badge-icon-bg: var(--sona-secondary-70); /* #f796bf inner icon circle */ /* ---- Status ---- Marketing's status palette is its own set, NOT the Warning/Error ramps. Warning/Error ramps are for form validation and app UI; these are for analytics cards and status rows. */ --sona-status-success: #22c55e; --sona-status-success-dark: #4ade80; /* on navy */ --sona-status-success-bg: rgba(34, 197, 94, 0.12); --sona-status-progress: #4a8ff5; --sona-status-progress-dark: #93b4ff; --sona-status-progress-bg: rgba(91, 139, 255, 0.15); --sona-status-alert: var(--sona-secondary-200); /* #ee2b7e */ --sona-status-alert-dark: #fda4af; --sona-status-alert-bg: rgba(238, 43, 126, 0.15); --sona-status-neutral: var(--sona-neutral-80); /* #97999e only grey that reads on navy */ } /* ============================================================ 4. TYPOGRAPHY Marketing scale from STYLE_GUIDE.md §1. ============================================================ */ :root { --sona-font-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif; --sona-font-ui: 'Inter', system-ui, sans-serif; /* dense in-product mockups ONLY */ --sona-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Weights ---- Satoshi ships 300/400/500/700/900. THERE IS NO 600 FILE. Asking for 600 makes the browser synthesize a fake bold that renders differently per engine. --sona-fw-semibold therefore maps to 700 on purpose. Do not change it to 600 without shipping a Satoshi SemiBold font file first. */ --sona-fw-light: 300; --sona-fw-regular: 400; --sona-fw-medium: 500; /* body, UI, button labels */ --sona-fw-semibold: 700; /* intentional alias — see note above */ --sona-fw-bold: 700; /* h2, h3, card numbers, content-page h1 */ --sona-fw-black: 900; /* marketing hero h1 ONLY */ /* ---- Marketing type scale (mobile -> desktop) ---- */ --sona-type-h1-size-mobile: 36px; --sona-type-h1-size: 64px; --sona-type-h1-lh: 1.2; --sona-type-h1-ls: -1.6px; --sona-type-h2-size-mobile: 28px; --sona-type-h2-size: 48px; --sona-type-h2-lh: 1.25; --sona-type-h2-ls: -1.2px; --sona-type-h3-size-mobile: 26px; --sona-type-h3-size: 36px; --sona-type-h3-lh: 1.15; --sona-type-h3-ls: -1px; --sona-type-lead-size: 20px; --sona-type-lead-lh: 1.5; /* hero subtitle, section lead */ --sona-type-body-size: 18px; --sona-type-body-lh: 1.5; /* capability body */ --sona-type-base-size: 16px; --sona-type-base-lh: 1.5; /* default body */ --sona-type-small-size: 15px; --sona-type-small-lh: 1.5; /* feature rows, button labels */ --sona-type-caption-size: 14px; --sona-type-caption-lh: 1.5; --sona-type-fine-size: 13px; --sona-type-eyebrow-size: 12px; --sona-type-eyebrow-ls: 1.2px; /* ---- Long-form article archetype (STYLE_GUIDE.md §1b) ---- */ --sona-type-article-h1-size: 48px; --sona-type-article-h1-size-mobile: 32px; --sona-type-article-h2-size: 36px; --sona-type-article-h2-size-mobile: 24px; --sona-type-article-body-size: 18px; --sona-type-article-body-lh: 1.6; --sona-type-article-measure: 960px; /* ---- Document / legal archetype ---- */ --sona-type-legal-h1-size: 40px; --sona-type-legal-h1-size-mobile: 32px; --sona-type-legal-h2-size: 20px; --sona-type-legal-body-size: 15px; --sona-type-legal-body-lh: 1.75; } /* ============================================================ 5. SPACING, RADII, SHADOWS, LAYOUT, MOTION From STYLE_GUIDE.md §3. ============================================================ */ :root { /* ---- Layout ---- */ --sona-max-content: 1440px; --sona-section-pad-x: 104px; --sona-section-pad-x-mobile: 16px; --sona-section-pad-y: 80px; --sona-section-pad-y-mobile: 48px; --sona-nav-height: 64px; --sona-header-offset: 108px; /* announcement bar (44) + nav (64) */ /* ---- Spacing scale ---- */ --sona-space-1: 4px; --sona-space-2: 8px; --sona-space-3: 12px; --sona-space-4: 16px; --sona-space-5: 20px; --sona-space-6: 24px; --sona-space-8: 32px; --sona-space-10: 40px; --sona-space-14: 56px; --sona-space-20: 80px; /* ---- Radii ---- Buttons and pills are FULLY ROUNDED on Sona, not 8px. */ --sona-radius-pill: 9999px; /* buttons, pills, chips — default for anything clickable */ --sona-radius-sm: 6px; --sona-radius-md: 8px; --sona-radius-analytics: 12px; /* chart / analytics cards */ --sona-radius-card: 16px; --sona-radius-feature: 20px; /* feature cards — the default card radius */ --sona-radius-showcase: 24px; --sona-radius-panel: 32px; /* white panel wrapping a product screenshot */ /* ---- Shadows ---- */ --sona-shadow-mid: 0px 4px 12px -2px rgba(10, 13, 18, 0.12); /* default card */ --sona-shadow-high: 0px 10px 28px -4px rgba(10, 13, 18, 0.18); /* elevated / hover */ --sona-shadow-window: 0 40px 90px rgba(29, 45, 130, 0.10), 0 12px 30px rgba(29, 45, 130, 0.04); --sona-shadow-dropdown: 0px 4px 12px -2px rgba(10, 13, 18, 0.12); --sona-shadow-pink: 0 8px 20px rgba(238, 43, 126, 0.28); --sona-shadow-analytics: 0 0 8px 0 rgba(41, 64, 185, 0.01), 0 0 6px 0 rgba(41, 64, 185, 0.02), 0 0 5px 0 rgba(41, 64, 185, 0.04), 0 0 4px 0 rgba(41, 64, 185, 0.08), 0 0 2px 0 rgba(41, 64, 185, 0.10); /* ---- Glass card on navy ---- */ --sona-glass-bg: rgba(253, 253, 253, 0.06); --sona-glass-border: rgba(255, 255, 255, 0.35); --sona-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(255, 255, 255, 0.1); /* Analytics glass on light */ --sona-glass-light-bg: rgba(255, 255, 255, 0.7); --sona-glass-light-border: rgba(255, 255, 255, 0.6); /* ---- Motion ---- */ --sona-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --sona-dur-fast: 150ms; --sona-dur-base: 200ms; --sona-dur-slow: 300ms; }