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.
64 lines
2.7 KiB
CSS
64 lines
2.7 KiB
CSS
/*
|
|
* Proof of Work — canonical design tokens as CSS custom properties.
|
|
* Generated-by-hand mirror of design/tokens.tokens.json (the source of truth).
|
|
* Import once at the app root so surfaces reference var(--pow-*) instead of inlining hexes.
|
|
* Hexes are the literal Tailwind values the as-built UI already uses (neutral ramp = zinc).
|
|
*/
|
|
|
|
:root {
|
|
/* Backgrounds / surfaces (depth = stepping up in lightness, not shadow) */
|
|
--pow-bg-canvas: #0A0A0A; /* app background; PWA theme_color */
|
|
--pow-bg-surface: #18181B; /* zinc-900 — cards, panels */
|
|
--pow-bg-raised: #27272A; /* zinc-800 — controls, chips, hover */
|
|
--pow-bg-inset: #09090B; /* zinc-950 — rare deep wells */
|
|
|
|
/* Borders */
|
|
--pow-border-subtle: #27272A; /* zinc-800 — default hairline */
|
|
--pow-border-default: #3F3F46; /* zinc-700 */
|
|
--pow-border-strong: #52525B; /* zinc-600 — emphasis */
|
|
|
|
/* Text */
|
|
--pow-text-primary: #FFFFFF;
|
|
--pow-text-secondary: #A1A1AA; /* zinc-400 */
|
|
--pow-text-muted: #71717A; /* zinc-500 */
|
|
--pow-text-subtle: #52525B; /* zinc-600 — disabled */
|
|
--pow-text-inverted: #000000; /* on white surfaces */
|
|
|
|
/* Accent / error (one canonical red, told apart by treatment) */
|
|
--pow-accent-red: #DC2626; /* red-600 — accent fills/edges + destructive */
|
|
--pow-accent-red-strong: #B91C1C; /* red-700 — hover/pressed */
|
|
--pow-accent-red-text: #F87171; /* red-400 — red text on dark */
|
|
--pow-accent-red-border: #991B1B; /* red-800 — outlines */
|
|
--pow-accent-red-wash: rgba(127, 29, 29, 0.30); /* red-900/30 — banners/hover */
|
|
|
|
/* Other semantic state */
|
|
--pow-success: #34D399; /* emerald-400 */
|
|
--pow-success-fill: #059669; /* emerald-600 */
|
|
--pow-warning: #FBBF24; /* amber-400 */
|
|
--pow-warning-edge: #78350F; /* amber-900 */
|
|
--pow-info: #60A5FA; /* blue-400 */
|
|
--pow-info-wash: #172554; /* blue-950 */
|
|
|
|
/* Primary action = white, not a hue */
|
|
--pow-action-primary-bg: #FFFFFF;
|
|
--pow-action-primary-text: #000000;
|
|
--pow-action-primary-hover-bg: #E4E4E7; /* zinc-200 */
|
|
--pow-action-primary-disabled-bg: #3F3F46; /* zinc-700 */
|
|
--pow-action-primary-disabled-text: #71717A;/* zinc-500 */
|
|
|
|
/* Typography */
|
|
--pow-font-display: var(--font-display), 'Bebas Neue', sans-serif;
|
|
--pow-font-body: var(--font-sans), 'Space Grotesk', system-ui, sans-serif;
|
|
--pow-tracking-wider: 0.05em;
|
|
|
|
/* Radius (two-tier) */
|
|
--pow-radius-control: 4px; /* buttons, inputs, chips */
|
|
--pow-radius-container: 8px; /* cards, panels, modals */
|
|
--pow-radius-full: 9999px; /* pills, avatars */
|
|
|
|
/* Layout (mirrors globals.css; the app already defines these) */
|
|
--pow-sidebar-width: 240px;
|
|
--pow-nav-height: 64px;
|
|
--pow-bottom-nav-height: 64px;
|
|
}
|