Design System Studio

The single brand action color — links, primary buttons, focus. Kept to one hue.

Text and icons that sit on top of the accent; near-white for AA contrast on blue.

The base page canvas — pure white in light, near-black zinc-950 in dark. Everything else stacks on top.

Cards and panels sitting on the background — one step off the canvas to imply depth.

A nested tone for containers-on-cards — a filter well or control track that reads one level deeper than the surface it sits in.

Primary text; the strongest contrast pair against surface for long-form reading.

Secondary text and labels — the exact zinc-500 tone the Upskills app uses for muted copy.

Hairline separators and card edges — low contrast so structure reads as calm.

Positive state — confirmations, passing checks. A confident but unsaturated green.

Caution state — amber that stays legible on both surfaces without shouting.

Destructive and error state — the only high-chroma red, reserved for real stakes.