Colors.

A semantic color system powered by Tailwind v4 variables. We separate 'Primitives' (the raw values) from 'Semantics' (their function) to allow for safe theming and dark mode adaptation.

bg-primary text-primary-foreground

Configuration

Why Semantic?
Instead of using bg-green-500, we use bg-accent. This allows us to change the brand color in one place (`globals.css`) without refactoring 50 components.

Tailwind v4
We use the new @theme block to inject these variables directly into the utility engine.

Semantic Aliases (The API)

Copy Class

Primary

--primary

Main Actions (Buttons)

Copy Class

Accent

--accent

Active States & Brand Elements

Copy Class

Background

--background

App Canvas

Copy Class

Surface

--card

Cards & Modals

Copy Class

Muted

--muted

Secondary Backgrounds

Primitive Tokens (Source of Truth)

Forest Green#025a4e

Vermilion#E35028

Warm Beige#EDEBE8

Off White#F9F9F8

Ink Black#1D1D1F

CSS-as-an-API

I treat CSS variables as a strict API. Components consume semantic tokens (e.g., --radius-interaction), never magic numbers. This decouples the design decisions from the component logic.

Oklch & P3 Gamut

Future-proofing the system. While currently using Hex for compatibility, the infrastructure is set up to migrate to OKLCH for wider color gamut support on modern displays.

globals.css

@theme {
  /* Semantic Mapping */
  --color-primary: var(--p-vermilion-500);
  --color-accent: var(--p-green-500);
  
  /* Radius System */
  --radius-interaction: 9999px; /* Pill */
  --radius-surface: 1.5rem;     /* Cards */
}