Styling

A theme’s look comes from design tokens in src/styles/theme.css. Change a token and every button, heading, and section that uses it follows.

CSS files

File	Role
src/styles/theme.css	Tokens: colors, fonts, type scale, radii
src/styles/base.css	Element defaults, button styles, utilities
src/styles/global.css	Loads Tailwind, its plugins, then the two files above

There’s no tailwind.config.js. Tailwind v4 reads tokens straight from the @theme block in theme.css.

Colors

@theme {
  --color-bg: oklch(99% 0.002 260);
  --color-strong: oklch(16% 0.02 260);
  --color-brand: oklch(72% 0.14 220);
  --color-brand-fg: oklch(16% 0.02 260);
}

Group	Tokens
Surfaces	bg, surface, elevated, line, line-soft
Text	strong, text, soft, muted
Brand	brand, plus -hover, -active, -soft, -fg
Secondary, tertiary	Same five variants each
Status	success, warning, danger

Each token becomes a utility: bg-brand, text-soft, border-line. The -fg color is the text color that reads well on top of its fill.

Use tokens everywhere. Hard-coded hex values in components won’t follow your palette.

Fonts

Fonts are self-hosted with Fontsource, so there are no requests to Google Fonts. To swap one:

1. Install it: npm install @fontsource-variable/inter
2. Import it at the top of theme.css: @import "@fontsource-variable/inter";
3. Set the stack in identity.ts under fonts (sans, display, mono).

Type and buttons

The type scale is the --text-* tokens in theme.css. Headings use --font-display. For big headlines use the text-display and text-display-sm utilities, and text-eyebrow for small labels.

Button has six variants: brand, secondary, tertiary, outline, ghost, and link. Restyle them in base.css.

Forms and long-form text

Two Tailwind plugins are included:

• Forms uses the class strategy, so it only styles inputs you opt in with form-input, form-select, form-textarea, or form-checkbox.
• Typography styles blog posts and legal pages through the prose class. Its colors are mapped to your tokens at the bottom of base.css.