Theming

Pick an accent#

Choose a hue and Junco picks the lightness that keeps text readable at 4.5:1 in both light and dark. The whole site re-themes as you drag.

:root {
  --primary: oklch(0.56 0.200 260);
  --primary-foreground: oklch(0.99 0 0);
  --ring: oklch(0.56 0.200 260);
}

.dark,
[data-theme="dark"] {
  --primary: oklch(0.60 0.180 260);
  --primary-foreground: oklch(0.15 0.030 260);
  --ring: oklch(0.60 0.180 260);
}

How it works#

Tokens live in @junco/tokens as plain CSS variables. Light values sit on :root; dark values on .dark and [data-theme="dark"]. @junco/tailwind maps each one to a utility, so --muted-foreground becomes text-muted-foreground. Names follow shadcn/ui, so shadcn themes drop straight in.

@import "tailwindcss";
@import "@junco/tailwind";

:root { --primary: oklch(0.55 0.2 150); }
.dark { --primary: oklch(0.72 0.17 150); }

Tokens also ship as a TypeScript object and as W3C design token JSON, for Figma and other tools:

import { tokens } from "@junco/tokens";
tokens.light.primary; // "oklch(0.55 0.2 260)"

// W3C (DTCG) JSON: @junco/tokens/tokens.json

Color tokens#

Contrast#

Every text and background pair Junco uses is checked by a test at 4.5:1 (WCAG AA) in both modes. If a token change breaks a pair, the build fails. Status colors have separate -text tokens for text on the page, because a solid amber that works as a fill can never pass as text on white.

Type#

Geist for UI and headings, Geist Mono for code and numbers. text-sm (14px) is the UI default; body copy is text-base.

Space, shape and depth#

Motion#

Every duration is multiplied by --motion-scale, which the data-motion switch and prefers-reduced-motion turn down. See Dark mode and motion.