{ "$description": "Keysat design tokens — W3C DTCG-shaped, distilled from design/_imports/2026-06-16-claude-design-system/colors_and_type.css (as-built values). Group-level $type is set where it maps cleanly to a DTCG primitive; a few groups (fontSize, letterSpacing, shadow) carry as-built CSS expressions (clamp(), em, multi-layer shadows) as strings and are intentionally left untyped pending a Style Dictionary build. See design/DESIGN.md for intent and rules.", "color": { "$type": "color", "navy": { "950": { "$value": "#0E1F33" }, "900": { "$value": "#142A47" }, "800": { "$value": "#1E3A5F", "$description": "core brand navy — wordmark, primary buttons, dominant ink" }, "700": { "$value": "#2A4A75" }, "600": { "$value": "#3A5C8A" }, "500": { "$value": "#5074A1" }, "400": { "$value": "#7892B8" }, "300": { "$value": "#A6B7CF" }, "200": { "$value": "#CBD5E2" }, "100": { "$value": "#E4EAF1" }, "50": { "$value": "#F2F5F9" } }, "cream": { "50": { "$value": "#FBF9F2", "$description": "elevated paper / card surface" }, "100": { "$value": "#F5F1E8", "$description": "core cream — default page background" }, "200": { "$value": "#EDE7D7" }, "300": { "$value": "#E1D8C0" }, "400": { "$value": "#C9BC9A" } }, "gold": { "700": { "$value": "#8A6F3D", "$description": "eyebrow labels / dark gold accent" }, "600": { "$value": "#A88652" }, "500": { "$value": "#BFA068", "$description": "core gold accent — sparing use only, never a primary button fill" }, "400": { "$value": "#D4B985" }, "300": { "$value": "#E5CFA5" }, "200": { "$value": "#F0E2C5" } }, "ink": { "900": { "$value": "#0E1F33", "$description": "primary text" }, "700": { "$value": "#2C3E54", "$description": "secondary text" }, "500": { "$value": "#5A6B7F", "$description": "tertiary / meta" }, "400": { "$value": "#7E8C9D", "$description": "disabled / hint" }, "300": { "$value": "#A4AEBB" } }, "semantic": { "success": { "$value": "#2D7A5F" }, "success-bg": { "$value": "#E3F0EA" }, "warning": { "$value": "#B8861F" }, "warning-bg": { "$value": "#F7EFD7" }, "danger": { "$value": "#B23A3A" }, "danger-bg": { "$value": "#F4E0E0" }, "info": { "$value": "{color.navy.700}" }, "info-bg": { "$value": "{color.navy.100}" } }, "surface": { "page": { "$value": "{color.cream.100}", "$description": "default page bg (apply with paper-texture grain)" }, "paper": { "$value": "{color.cream.50}" }, "elevated":{ "$value": "#FFFFFF", "$description": "forms, tables, code blocks — reserved white" }, "inverse": { "$value": "{color.navy.900}" }, "tint": { "$value": "{color.cream.200}" } }, "fg": { "primary": { "$value": "{color.ink.900}" }, "secondary": { "$value": "{color.ink.700}" }, "tertiary": { "$value": "{color.ink.500}" }, "hint": { "$value": "{color.ink.400}" }, "on-navy": { "$value": "{color.cream.50}" }, "on-gold": { "$value": "{color.navy.900}" } }, "accent": { "default": { "$value": "{color.navy.800}" }, "hover": { "$value": "{color.navy.900}" }, "press": { "$value": "{color.navy.950}" }, "soft": { "$value": "{color.navy.100}" }, "gold": { "$value": "{color.gold.500}" } }, "border": { "1": { "$value": "rgba(14, 31, 51, 0.12)", "$description": "hairline on cream" }, "2": { "$value": "rgba(14, 31, 51, 0.20)", "$description": "card border" }, "3": { "$value": "rgba(14, 31, 51, 0.35)", "$description": "focus / strong" }, "on-navy": { "$value": "rgba(245, 241, 232, 0.18)" } } }, "font": { "$type": "fontFamily", "display": { "$value": ["Manrope", "Helvetica Neue", "Arial", "sans-serif"], "$description": "canonical display face (README's 'Archivo' was a stale placeholder)" }, "body": { "$value": ["Inter", "Helvetica Neue", "Arial", "sans-serif"] }, "mono": { "$value": ["JetBrains Mono", "ui-monospace", "SF Mono", "Menlo", "monospace"] } }, "fontSize": { "$description": "as-built type scale; display sizes use CSS clamp() and are kept as strings", "display-xl": { "$value": "clamp(56px, 6vw, 88px)" }, "display": { "$value": "clamp(40px, 4.5vw, 64px)" }, "h1": { "$value": "44px" }, "h2": { "$value": "32px" }, "h3": { "$value": "24px" }, "h4": { "$value": "20px" }, "h5": { "$value": "17px" }, "body-lg": { "$value": "18px" }, "body": { "$value": "15px" }, "body-sm": { "$value": "13.5px" }, "meta": { "$value": "12px" }, "mono": { "$value": "13px" } }, "lineHeight": { "$type": "number", "display": { "$value": 1.02 }, "heading": { "$value": 1.15 }, "body": { "$value": 1.55 }, "tight": { "$value": 1.25 } }, "letterSpacing": { "$description": "em values kept as strings", "tight": { "$value": "-0.02em" }, "normal": { "$value": "0" }, "wide": { "$value": "0.04em" }, "eyebrow": { "$value": "0.18em" } }, "space": { "$type": "dimension", "1": { "$value": "4px" }, "2": { "$value": "8px" }, "3": { "$value": "12px" }, "4": { "$value": "16px" }, "5": { "$value": "20px" }, "6": { "$value": "24px" }, "7": { "$value": "32px" }, "8": { "$value": "40px" }, "9": { "$value": "56px" }, "10": { "$value": "72px" }, "11": { "$value": "96px" }, "12": { "$value": "128px" } }, "radius": { "$type": "dimension", "xs": { "$value": "3px" }, "sm": { "$value": "5px" }, "md": { "$value": "8px", "$description": "buttons" }, "lg": { "$value": "12px", "$description": "cards" }, "xl": { "$value": "18px", "$description": "max surface rounding — never exceed" }, "2xl": { "$value": "24px", "$description": "reserved; avoid in product UI" }, "pill": { "$value": "999px", "$description": "tags/badges only" } }, "shadow": { "$description": "paper-shadow system — multi-layer CSS strings, not glassy", "xs": { "$value": "0 1px 1px rgba(14,31,51,0.04)" }, "sm": { "$value": "0 1px 2px rgba(14,31,51,0.06), 0 1px 1px rgba(14,31,51,0.03)" }, "md": { "$value": "0 2px 4px rgba(14,31,51,0.06), 0 4px 12px rgba(14,31,51,0.06)" }, "lg": { "$value": "0 4px 8px rgba(14,31,51,0.07), 0 12px 32px rgba(14,31,51,0.10)" }, "xl": { "$value": "0 8px 16px rgba(14,31,51,0.10), 0 24px 64px rgba(14,31,51,0.14)" }, "inset": { "$value": "inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(14,31,51,0.05)" }, "ring-focus": { "$value": "0 0 0 3px rgba(30,58,95,0.25)" } }, "duration": { "$type": "duration", "fast": { "$value": "120ms", "$description": "hover transitions" }, "base": { "$value": "200ms", "$description": "default" }, "slow": { "$value": "360ms" } }, "easing": { "$type": "cubicBezier", "standard": { "$value": [0.2, 0.7, 0.2, 1] }, "out": { "$value": [0.16, 1, 0.3, 1] }, "in": { "$value": [0.7, 0, 0.84, 0] } } }