/* ============================================================ Novakid-DS tokens — extracted from Figma on 2026-04-18 ------------------------------------------------------------ Source of truth (verified via Figma Plugin API / MCP): - Product file : Dfpf1puzA96g9dS1FZxoWa (Novakid · Hi-Fi frames) - DS library : yG30rMNehBGG3Y2MZI5psN (Novakid-DS · Foundations node 226:13679 "Color") Extraction method: - get_variable_defs on hi-fi primary frames (290:574, 290:575, 111:2, 472:9, 481:7, 486:7, 489:7, 496:7) to capture the tokens actually consumed in layouts. - get_variable_defs on DS Foundations node 226:13679 to capture the canonical color system (text / icon / bg / border × default / brand / neutral / positive / warning / danger / promo / highlight / info). Tokens below are organised so values used by prototype surfaces resolve first (brand-*, state-*, space-*, radius-*). The long SDS semantic role set (for full-parity React work) follows. Anything NOT discoverable from get_variable_defs on the queried nodes (type scale, motion, shadows) is flagged with TODO and set to a sensible default from codebase convention. ============================================================ */ :root { /* ------------------------------------------------------------ 1 · Brand core (verified — Hi-Fi frames) ------------------------------------------------------------ */ --brand-purple-cta: #6c4ee8; /* primary action / CTA */ --brand-purple-deep: #4221b8; /* headings, active text */ --brand-purple-hover: #573bd0; /* CTA hover (from DS) */ --brand-purple-darker: #351997; /* "Brand Deep / Hover" in DS */ --brand-yellow: #ffe606; /* Promo / moment highlight */ --brand-yellow-hover: #cfba05; --brand-yellow-soft: #fff3a0; /* Promo secondary */ --brand-yellow-tint: #fffbe0; /* Promo tertiary bg */ /* ------------------------------------------------------------ 2 · Data / product palette (verified — used in prototypes) ------------------------------------------------------------ */ --data-lavender: #c6d2ff; /* soft cool accent */ --data-lavender-soft: #e1dbfb; /* brand secondary bg */ --data-lavender-tint: #f4f2fd; /* brand tertiary bg */ --data-highlight: #b8c6f2; /* "Highlight" default */ --data-highlight-soft: #e0e5fc; --data-highlight-tint: #f0f2ff; --data-mint: #a2ffa6; /* growth accent fill */ --data-soft-blue: #aac6f7; /* Info secondary hover */ --data-coral: #f4a8aa; /* caution / attention (non-error) */ --data-sage: #bbf7d0; /* positive secondary */ /* ------------------------------------------------------------ 3 · Semantic / state (verified) Novakid brand rule: no red for "attention"; use warning yellow. ------------------------------------------------------------ */ --state-positive-fg: #047857; /* green 700-ish */ --state-positive-bg: #e8f7e9; --state-positive-strong: #166534; --state-positive-accent: #22c55e; --state-warning-fg: #b45309; /* on-track / nudge text */ --state-warning-bg: #fef3c7; --state-warning-strong: #713f12; --state-attention-fg: #854d0e; /* Novakid "attention" = deep amber */ --state-attention-bg: #fef08a; --state-info-fg: #0b4c9e; --state-info-bg: #e7f0fd; /* ------------------------------------------------------------ 4 · Text (verified — product file uses Notion-like greys; DS semantic neutrals are listed under §9) ------------------------------------------------------------ */ --text-primary: #1e1e1e; /* SDS text-default-default */ --text-secondary: #484848; /* product file secondary */ --text-tertiary: #787774; /* product file tertiary */ --text-disabled: #b3b3b3; --text-on-brand: #f4f2fd; /* light on deep purple */ --text-on-deep: var(--text-on-brand); /* ------------------------------------------------------------ 5 · Surface / background (verified) ------------------------------------------------------------ */ --surface-default: #ffffff; --surface-raised: #ffffff; --surface-muted: #f5f5f5; /* secondary bg */ --surface-sunken: #e6e6e6; /* secondary-hover */ --surface-neutral-tint:#e2e8f0; --surface-overlay: #00000080; --surface-blanket: #000000b2; --surface-scrim: #ffffffcc; /* ------------------------------------------------------------ 6 · Border (verified) ------------------------------------------------------------ */ --border-default: #d9d9d9; --border-secondary: #757575; --border-strong: #383838; --border-brand: #6c4ee8; --border-brand-strong: #4221b8; --border-focus: #6c4ee8; /* WCAG 2.4.11 focus ring */ /* ------------------------------------------------------------ 7 · Spacing — 4px base grid (verified from Hi-Fi frames) ------------------------------------------------------------ */ --space-1: 2px; /* space/2 */ --space-2: 4px; /* space/4 */ --space-3: 8px; /* space/8 */ --space-4: 12px; /* space/12 */ --space-5: 16px; /* space/16 */ --space-6: 20px; /* space/20 */ --space-7: 24px; /* space/24 */ --space-8: 28px; /* space/28 */ --space-9: 32px; /* space/32 */ --space-10: 40px; /* space/40 */ --space-12: 48px; /* space/48 */ --space-14: 56px; /* space/56 */ --space-20: 80px; /* space/80 */ --space-32: 128px; /* TODO: verify — not seen in queried frames, kept for 8px scale completeness */ /* ------------------------------------------------------------ 8 · Radius (verified) ------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; /* containers, cards — Novakid default */ --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 999px; --radius-full: 9999px; /* ------------------------------------------------------------ 9 · SDS semantic roles (full DS set, verified from node 226:13679). Use these when you need role/state parity with the component library. The section-2..6 tokens above are prototype-facing aliases. ------------------------------------------------------------ */ /* background */ --sds-bg-default-default: #ffffff; --sds-bg-default-default-hover: #f5f5f5; --sds-bg-default-secondary: #f5f5f5; --sds-bg-default-secondary-hover:#e6e6e6; --sds-bg-default-tertiary: #d9d9d9; --sds-bg-default-tertiary-hover: #b3b3b3; --sds-bg-disabled-default: #d9d9d9; --sds-bg-brand-default: #6c4ee8; --sds-bg-brand-hover: #573bd0; --sds-bg-brand-secondary: #e1dbfb; --sds-bg-brand-secondary-hover: #cabff8; --sds-bg-brand-tertiary: #f4f2fd; --sds-bg-brand-tertiary-hover: #e1dbfb; --sds-bg-brand-deep: #4221b8; --sds-bg-brand-deep-hover: #351997; --sds-bg-neutral-default: #334155; --sds-bg-neutral-hover: #1e293b; --sds-bg-neutral-secondary: #cbd5e1; --sds-bg-neutral-tertiary: #e2e8f0; --sds-bg-positive-default: #22c55e; --sds-bg-positive-hover: #16a34a; --sds-bg-positive-secondary: #bbf7d0; --sds-bg-positive-tertiary: #dcfce7; --sds-bg-warning-default: #facc15; --sds-bg-warning-hover: #eab308; --sds-bg-warning-secondary: #fef08a; --sds-bg-warning-tertiary: #fef9c3; --sds-bg-danger-default: #c62e33; --sds-bg-danger-secondary: #f4a8aa; --sds-bg-danger-tertiary: #fce8e9; --sds-bg-info-default: #0f62ca; --sds-bg-info-secondary: #d0e0fb; --sds-bg-info-tertiary: #e7f0fd; --sds-bg-promo-default: #ffe606; --sds-bg-promo-hover: #cfba05; --sds-bg-promo-secondary: #fff3a0; --sds-bg-promo-tertiary: #fffbe0; --sds-bg-highlight-default: #b8c6f2; --sds-bg-highlight-secondary: #e0e5fc; --sds-bg-highlight-tertiary: #f0f2ff; /* text */ --sds-text-default-default: #1e1e1e; --sds-text-default-secondary: #757575; --sds-text-default-tertiary: #757575; --sds-text-disabled-default: #b3b3b3; --sds-text-brand-default: #4221b8; --sds-text-brand-secondary: #6c4ee8; --sds-text-brand-tertiary: #a98cec; --sds-text-brand-on-brand: #f4f2fd; --sds-text-neutral-default: #0f172a; --sds-text-neutral-secondary: #334155; --sds-text-neutral-tertiary: #475569; --sds-text-positive-default: #166534; --sds-text-warning-default: #713f12; --sds-text-danger-default: #900b09; --sds-text-info-default: #0b4c9e; --sds-text-promo-default: #665c03; --sds-text-highlight-default: #4d61a8; /* border */ --sds-border-default-default: #d9d9d9; --sds-border-default-secondary: #757575; --sds-border-default-tertiary: #383838; --sds-border-brand-default: #6c4ee8; --sds-border-brand-secondary: #4221b8; --sds-border-brand-tertiary: #a98cec; --sds-border-neutral-default: #0f172a; --sds-border-neutral-secondary: #475569; --sds-border-neutral-tertiary: #94a3b8; --sds-border-positive-default: #166534; --sds-border-warning-default: #713f12; --sds-border-danger-default: #e0464a; --sds-border-info-default: #093873; --sds-border-promo-default: #665c03; --sds-border-highlight-default: #4d61a8; --sds-border-utilities-swatch: #0000003d; /* icon (same palette as text, kept for semantic parity) */ --sds-icon-default-default: #1e1e1e; --sds-icon-brand-default: #4221b8; --sds-icon-brand-secondary: #6c4ee8; --sds-icon-brand-on-brand: #f4f2fd; --sds-icon-neutral-default: #0f172a; --sds-icon-positive-default: #166534; --sds-icon-warning-default: #713f12; --sds-icon-danger-default: #e0464a; --sds-icon-info-default: #093873; --sds-icon-promo-default: #665c03; --sds-icon-highlight-default: #4d61a8; /* utility scrims / swatches */ --sds-util-scrim: #ffffffcc; --sds-util-blanket: #000000b2; --sds-util-overlay: #00000080; --sds-black-100: #0c0c0d0d; --sds-black-200: #0c0c0d1a; /* ------------------------------------------------------------ 10 · Typography ------------------------------------------------------------ VERIFIED: - Mono family name bound in DS as "HvDTrial Mikado" (var(--sds-typography-family-mono)). Mikado is Novakid's branded face. Ship with 'Mikado', 'HvDTrial Mikado' fallback chain so dev machines without the trial license still render the shipping font. - Base body size token sds-typography-scale-03 = 16px. - Weights: regular 400, bold 700. TODO: full type scale (display/h1..h6/body/caption) and line-heights are not exposed on the primary-concept nodes queried. Defaults below follow Novakid-DS convention (modular 1.25/1.333 scale on 16px base). Verify against Novakid-DS · Typography page if a subsequent session captures it. ------------------------------------------------------------ */ --font-display: "Mikado", "HvDTrial Mikado", "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-weight-regular: 400; --font-weight-medium: 500; /* TODO: verify — common in DS kits */ --font-weight-bold: 700; /* Sizes — base scale-03 = 16 verified; rest = convention */ --text-xs: 12px; /* TODO: verify in Novakid-DS Typography page */ --text-sm: 14px; /* TODO: verify */ --text-md: 16px; /* verified: sds-typography-scale-03 */ --text-lg: 20px; /* TODO: verify */ --text-xl: 24px; /* TODO: verify */ --text-2xl: 32px; /* TODO: verify */ --text-3xl: 40px; /* TODO: verify */ --text-4xl: 56px; /* TODO: verify */ --leading-tight: 1.2; --leading-snug: 1.35; /* verified: "Component notes" style uses 1.4 */ --leading-normal: 1.5; --leading-relaxed:1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ------------------------------------------------------------ 11 · Elevation / shadow ------------------------------------------------------------ VERIFIED as two DS effect styles (Drop Shadow/200 and /300): Drop Shadow/200 = layered 0,2/6/-1 @ 0c0c0d0d + 0,1/4/0 @ 0c0c0d1a Drop Shadow/300 uses the same pair with depth tokens (0,4). Focus ring = 3px, brand @ 50% (Novakid-DS Focus/Ring style). ------------------------------------------------------------ */ --shadow-sm: 0 1px 2px 0 rgba(12,12,13,0.06); --shadow-md: 0 2px 6px -1px rgba(12,12,13,0.05), 0 1px 4px 0 rgba(12,12,13,0.10); --shadow-lg: 0 4px 12px -2px rgba(12,12,13,0.08), 0 2px 6px 0 rgba(12,12,13,0.12); --shadow-xl: 0 12px 32px -8px rgba(12,12,13,0.18), 0 4px 12px 0 rgba(12,12,13,0.08); --focus-ring: 0 0 0 3px rgba(108, 78, 232, 0.5); /* WCAG 2.4.11 */ /* ------------------------------------------------------------ 12 · Motion ------------------------------------------------------------ TODO: verify — Novakid-DS Foundations does not expose motion tokens via Plugin API on the queried nodes. Defaults follow Material / Nothing-Design conventions used elsewhere in the portfolio and feel correct for this prototype. ------------------------------------------------------------ */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-medium: 240ms; --duration-slow: 360ms; --duration-scene: 600ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasize: cubic-bezier(0.3, 0, 0.1, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); /* ------------------------------------------------------------ 13 · Layout ------------------------------------------------------------ */ --max-content: 1200px; --max-narrative: 720px; /* body measure, 560-800 rule */ --container-gutter: 24px; --stroke-hair: 1px; color-scheme: light; } /* ============================================================ Dark mode hook (future) — tokens above resolve to light mode. When dark is implemented, flip surface/text/border roles via [data-theme="dark"] scope. Brand purple/yellow remain brand- locked across themes. ============================================================ */