Matte white, one theme
One light theme, no dark mode toggle, built from three Tailwind neutral ramps: stone for the canvas, zinc for ink, neutral where something must be colourless.
The theme on this site is one light theme, no dark mode toggle, built out of three Tailwind neutral ramps: stone for the canvas, zinc for ink and UI chrome, and neutral wherever something needs to be genuinely colourless.
The three ramps, and what each one is for
- stone is warm. Its greys lean a little toward sand, which reads as
paper. It is the background:
stone-50for the page,whitefor cards. - zinc is cool. Its greys lean toward graphite, which reads as ink.
It is the text and the chrome:
zinc-900for headings,zinc-600for body copy,zinc-200for borders. - neutral is neither. It is the ramp to reach for when a surface must not lean either way — muted badges, disabled states, the occasional divider that should disappear into the background.
The shadcn tokens
The stock shadcn tokens are remapped onto those ramps in globals.css.
Nothing here is a custom colour: every value is a stock Tailwind neutral,
so the theme stays boring and swappable.
:root {
--background: var(--color-stone-50);
--foreground: var(--color-zinc-900);
--card: #ffffff;
--muted: var(--color-neutral-100);
--muted-foreground: var(--color-zinc-500);
--border: var(--color-zinc-200);
--primary: var(--color-zinc-900);
--primary-foreground: #ffffff;
--accent: var(--color-stone-100);
--ring: var(--color-zinc-400);
}
| Token | Value | Used for |
|---|---|---|
--background | stone-50 | page canvas |
--foreground | zinc-900 | primary text |
--card | white | card surfaces |
--muted | neutral-100 | muted surfaces |
--muted-foreground | zinc-500 | secondary text |
--border | zinc-200 | hairlines |
--primary | zinc-900 | primary buttons |
--primary-foreground | white | text on primary |
--accent | stone-100 | hover surfaces |
--ring | zinc-400 | focus rings |
Color Token Playground
matte-whiteExplore the 3 neutral ramps and test live combinations in the interactive sandbox.
Stone — Warm Paper Canvas
5 tokensStone provides the warm, organic substrate. Its greys lean subtly toward sandstone and bleached paper, making prolonged reading effortless on the eyes.
Warm paper background for pages, viewports & outer surfaces.
Hover surfaces, code blocks, table headers & secondary panels.
Whisper-thin dividers, secondary outlines & subtle frames.
Emphasized borders, quote rules & card contours.
Muted timestamps, author metadata & subtle captions.
Live Mini Sandbox
(Interactive token composition)The matte-white reading experience
A warm paper canvas paired with cool graphite typography. Notice how the hairline border provides subtle structure without heavy shadow.
Why no dark mode
A dark mode doubles the surface area of every decision: every border, shadow and image needs a second value, and the second value is usually wrong. This site is a blog and a demo host. It is read in one mode, and the one mode is the one that looks like paper.