Theming

Approach

• The token names are the standard shadcn set. A project that already has a shadcn theme needs no changes.
• Neutrals carry a slight warm tint, like paper and ink, so surfaces do not look blue-grey next to photographs.
• There is one accent, a vermilion. It is used for the focus ring and the first data series (ring and chart-1) and almost nowhere else.
• Depth comes from hairline borders first. Shadows are reserved for surfaces that float above the page.
• Corner radii derive from a single --radius value of 0.5rem.

Tokens

Changing the accent

Override the two accent tokens in your global stylesheet. Check the focus ring against both backgrounds: it needs a 3:1 contrast ratio to be visible.

:root {
  --ring: oklch(0.55 0.17 255);
  --chart-1: oklch(0.55 0.17 255);
}

.dark {
  --ring: oklch(0.72 0.14 255);
  --chart-1: oklch(0.72 0.14 255);
}

Dark mode

Dark values apply under a .dark class on any ancestor, usually html. Use a library such as next-themes to set it from the system preference. Dark mode is not an inversion: surfaces get lighter as they rise, and the accent is lightened so it keeps its contrast.

@custom-variant dark (&:is(.dark *));

Radius and type

Set --radius to change every corner at once. Components inherit the font from the page and use font-mono only for keyboard hints and code. They use tabular figures wherever numbers change in place.

:root {
  --radius: 0.375rem;
}