{ "$description": "Proof of Work design tokens (W3C DTCG). Extracted document-as-is from the as-built Tailwind UI on 2026-06-19; red accent (#DC2626) and the two-tier radius rule are owner-driven. Neutral ramp is Tailwind 'zinc'. Hexes are the literal Tailwind values the code already uses.", "color": { "bg": { "canvas": { "$type": "color", "$value": "#0A0A0A", "$description": "App background; PWA theme_color and bg. The anchor value." }, "surface": { "$type": "color", "$value": "#18181B", "$description": "zinc-900 — default raised surface (cards, panels)." }, "raised": { "$type": "color", "$value": "#27272A", "$description": "zinc-800 — controls, chips, next step up / hover." }, "inset": { "$type": "color", "$value": "#09090B", "$description": "zinc-950 — rare deep wells, slightly below canvas." } }, "border": { "subtle": { "$type": "color", "$value": "#27272A", "$description": "zinc-800 — default hairline." }, "default": { "$type": "color", "$value": "#3F3F46", "$description": "zinc-700." }, "strong": { "$type": "color", "$value": "#52525B", "$description": "zinc-600 — emphasis/hover." } }, "text": { "primary": { "$type": "color", "$value": "#FFFFFF" }, "secondary": { "$type": "color", "$value": "#A1A1AA", "$description": "zinc-400." }, "muted": { "$type": "color", "$value": "#71717A", "$description": "zinc-500." }, "subtle": { "$type": "color", "$value": "#52525B", "$description": "zinc-600 — disabled/least emphasis." }, "inverted": { "$type": "color", "$value": "#000000", "$description": "Text on white/light surfaces (primary button)." } }, "accent": { "red": { "$type": "color", "$value": "#DC2626", "$description": "Canonical red — brand accent AND error/destructive (red-600). Distinguished by treatment, not by a second red." }, "red-strong": { "$type": "color", "$value": "#B91C1C", "$description": "red-700 — hover/pressed for the accent." }, "red-text": { "$type": "color", "$value": "#F87171", "$description": "red-400 — red text/icon on the dark canvas." }, "red-border": { "$type": "color", "$value": "#991B1B", "$description": "red-800 — error/destructive outlines." }, "red-wash": { "$type": "color", "$value": "rgba(127, 29, 29, 0.30)", "$description": "red-900/30 — error banner / destructive-hover background wash." } }, "state": { "success": { "$type": "color", "$value": "#34D399", "$description": "emerald-400 — success text/icon on dark." }, "success-fill": { "$type": "color", "$value": "#059669", "$description": "emerald-600 — success fill." }, "warning": { "$type": "color", "$value": "#FBBF24", "$description": "amber-400 — warning text/icon." }, "warning-edge": { "$type": "color", "$value": "#78350F", "$description": "amber-900 — warning border/wash edge." }, "info": { "$type": "color", "$value": "#60A5FA", "$description": "blue-400 — info text (used sparingly)." }, "info-wash": { "$type": "color", "$value": "#172554", "$description": "blue-950 — info wash background." } }, "action": { "primary-bg": { "$type": "color", "$value": "{color.text.primary}", "$description": "Primary button background is WHITE — not a hue." }, "primary-text": { "$type": "color", "$value": "{color.text.inverted}" }, "primary-hover-bg": { "$type": "color", "$value": "#E4E4E7", "$description": "zinc-200." }, "primary-disabled-bg": { "$type": "color", "$value": "#3F3F46", "$description": "zinc-700." }, "primary-disabled-text": { "$type": "color", "$value": "#71717A", "$description": "zinc-500." } } }, "font": { "family": { "display": { "$type": "fontFamily", "$value": "Bebas Neue", "$description": "var(--font-display). Headings, buttons, labels — always UPPERCASE + tracked." }, "body": { "$type": "fontFamily", "$value": "Space Grotesk", "$description": "var(--font-sans). All running text, data, numbers." } }, "size": { "xs": { "$type": "dimension", "$value": "12px" }, "sm": { "$type": "dimension", "$value": "14px" }, "base": { "$type": "dimension", "$value": "16px" }, "lg": { "$type": "dimension", "$value": "18px" }, "xl": { "$type": "dimension", "$value": "20px" }, "2xl": { "$type": "dimension", "$value": "24px" }, "3xl": { "$type": "dimension", "$value": "30px" }, "4xl": { "$type": "dimension", "$value": "36px" } }, "weight": { "normal": { "$type": "fontWeight", "$value": 400 }, "medium": { "$type": "fontWeight", "$value": 500 }, "semibold": { "$type": "fontWeight", "$value": 600 }, "bold": { "$type": "fontWeight", "$value": 700 } }, "letterSpacing": { "wider": { "$type": "dimension", "$value": "0.05em", "$description": "Tailwind tracking-wider — the signature pairing with UPPERCASE Bebas." } } }, "space": { "$description": "Tailwind 4px scale; the values the as-built UI leans on.", "1": { "$type": "dimension", "$value": "4px" }, "2": { "$type": "dimension", "$value": "8px" }, "3": { "$type": "dimension", "$value": "12px" }, "4": { "$type": "dimension", "$value": "16px" }, "5": { "$type": "dimension", "$value": "20px" }, "6": { "$type": "dimension", "$value": "24px" }, "8": { "$type": "dimension", "$value": "32px" } }, "radius": { "control": { "$type": "dimension", "$value": "4px", "$description": "Tailwind `rounded` — buttons, inputs, chips." }, "container": { "$type": "dimension", "$value": "8px", "$description": "Tailwind `rounded-lg` — cards, panels, modals, banners." }, "full": { "$type": "dimension", "$value": "9999px", "$description": "Pills, avatars, dots." } }, "size": { "sidebar-width": { "$type": "dimension", "$value": "240px", "$description": "CSS var --sidebar-width; desktop sidebar (md+)." }, "nav-height": { "$type": "dimension", "$value": "64px", "$description": "CSS var --nav-height." }, "bottom-nav-height": { "$type": "dimension", "$value": "64px", "$description": "CSS var --bottom-nav-height; mobile bottom nav." } }, "shadow": { "overlay": { "$type": "shadow", "$value": "0 10px 15px -3px rgba(0,0,0,0.5)", "$description": "Reserved for floating overlays ONLY (modals, popovers). Static cards use bg layering + borders, never a shadow. Value approximates Tailwind shadow-lg; the codebase also uses shadow-xl/2xl for overlays." } } }