design: extract document-as-is UI contract (DESIGN.md + DTCG tokens)

Case-B extract of the as-built dark UI into design/: 9-section DESIGN.md, W3C DTCG tokens.tokens.json, brand/palette.css + assets, and inspiration/ provenance (incl. the rendered red-shade decision). Two owner calls layered in: red elevated to the single brand accent (#DC2626), two-tier radius (4px controls / 8px containers). AGENTS.md gains the read-before-UI Design line + design/ in the layout tree; ROADMAP gains the design-checker cleanup backlog. No UI code changed.
2026-06-19 12:14:51 -05:00
parent a36ca12318
commit 7fda9ceb7e
10 changed files with 583 additions and 0 deletions
@@ -0,0 +1,93 @@
+{
+  "$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 <body> 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." }
+  }
+}