Keysat
7fda9ceb7e
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.
94 lines
6.4 KiB
JSON
94 lines
6.4 KiB
JSON
{
|
|
"$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." }
|
|
}
|
|
}
|