Design Tokens
The shared visual vocabulary for Uploz. Each swatch is painted from its live CSS variable and labelled with both the custom-property name and the Tailwind utility. Source of truth: packages/ui/.../globals.css · 15 color tokens · 3 radius steps.
Status · Traffic-Light Scale
Readiness palette shared across product + cockpit. green = On Track (≥90% / fixed), amber = At Risk (75–89% / partial), red = Critical (<75% / blocked), bright-green = Confirmed (90–100%).
Status · Green
--status-green
bg-status-green
On Track — gate passing, coverage ≥ target.
light 142 71% 45% · dark 142 69% 52%
Status · Amber
--status-amber
bg-status-amber
At Risk — partial / in-progress / within tolerance band.
light 38 92% 50% · dark 38 92% 56%
Status · Red
--status-red
bg-status-red
Critical — blocked, failing, or below threshold.
light 0 72% 51% · dark 0 72% 58%
Status · Bright Green
--status-bright-green
bg-status-bright-green
Confirmed — verified keystone / fully signed off.
light 142 76% 36% · dark 142 71% 45%
Surfaces
Backgrounds and container fills, from the page canvas up to cards.
Background
--background
bg-background
Page canvas — the body backdrop.
light 0 0% 100% · dark 222 47% 8%
Card
--card
bg-card
Raised container fill (tiles, panels).
light 0 0% 100% · dark 222 47% 11%
Muted
--muted
bg-muted
Subtle fill — chips, inactive rows, skeletons.
light 210 40% 96% · dark 217 33% 17%
Primary
--primary
bg-primary
High-emphasis actions / solid buttons.
light 222 47% 11% · dark 210 40% 98%
Text & Foreground
Foreground colors for primary and de-emphasized copy.
The quick brown fox
Foreground
--foreground
text-foreground
Primary body + heading text.
light 222 47% 11% · dark 210 40% 98%
The quick brown fox
Muted Foreground
--muted-foreground
text-muted-foreground
Secondary text — captions, subtitles, hints.
light 215 16% 47% · dark 215 20% 65%
The quick brown fox
Primary Foreground
--primary-foreground
text-primary-foreground
Text/icon on a --primary fill.
light 210 40% 98% · dark 222 47% 11%
The quick brown fox
Card Foreground
--card-foreground
text-card-foreground
Text on a --card surface.
light 222 47% 11% · dark 210 40% 98%
Borders & Rings
Hairline borders, input outlines, and focus rings.
Border
--border
bg-border
Hairline dividers and card outlines.
light 214 32% 91% · dark 217 33% 20%
Input
--input
bg-input
Form-control borders.
light 214 32% 91% · dark 217 33% 20%
Ring
--ring
bg-ring
Keyboard-focus ring.
light 222 47% 11% · dark 213 27% 84%
Radius
Corner-radius scale derived from the single --radius base token.
Large
rounded-lg
var(--radius)
Cards, panels, modals.
Medium
rounded-md
calc(var(--radius) - 2px)
Buttons, inputs, badges.
Small
rounded-sm
calc(var(--radius) - 4px)
Tight chips, inline tags.