The same design system, remapped onto a charcoal surface. Accents stay vibrant; text and surfaces flip. Everything below is the real component set on dark tokens.
Vibrant hues read even harder on dark than on paper. These are lifted a few points from the light-theme accents so they glow rather than sit.
Body text is a warm off-white, not pure white, so it does not vibrate against the charcoal. Secondary text drops to a muted slate. Emphasis stays bright. The through-line accent (teal) carries the hero and primary links, exactly as in the light theme.
On dark, tint fills go deeper and the accent text goes lighter — the inverse of the light theme's darkened-text-on-pale-tint.
Callouts and cards sit on a raised surface one step lighter than the page, so they lift off the charcoal without a heavy border.
The light theme put code on a dark surface. Here the page is already dark, so code drops to an even deeper charcoal to stay distinct.
# the page is dark, so code goes deeper still --paper: #1A1C20 # page --surface: #232630 # cards --surface-2: #2B2F3A # code wells accent: stays vibrant
Principle cards on the raised surface, each with its accent top-border, unchanged in structure from the light theme.
Paper becomes charcoal, ink becomes off-white, cards become a raised slate. The relationships hold.
Each hue rises a few points in brightness so it glows on dark instead of muddying.
The tint-and-text pairing flips: deeper fill, lighter accent text, for contrast on dark.
Spacing, type scale, radii, components, and voice are identical. Only the surface layer changes.
Dark mode is a token remap, not a redesign. Swap the surface and text variables, lift the accents, flip the tint pairs, and every component follows.
Back to the light theme →