CSS-First Design Tokens with Tailwind v4 @theme
Structuring color contrast, editorial typography, and spacing variables directly in CSS without external config files.
csstailwinddesign-system
Tailwind CSS v4 replaces JavaScript configuration files with native CSS @theme declarations. Every token declared inside @theme becomes both a native CSS custom property (var(--color-ink)) and a utility class (text-ink, bg-surface, border-border).
Token Definition in src/styles/global.css
All color pairings in this monograph are verified against WCAG AA/AAA contrast ratios prior to use:
@import "tailwindcss";
@theme {
--color-canvas: #fbf9f5;
--color-surface: #f3efe6;
--color-border: #ddd7ca;
--color-border-strong: #bdb5a4;
--color-ink: #191816;
--color-muted: #57534e;
--color-accent: #a6381e;
--font-serif: "Newsreader", Georgia, serif;
--font-sans: "Plus Jakarta Sans", sans-serif;
--font-mono: "JetBrains Mono", monospace;
}Contrast Ledger
| Foreground Token | Background Token | Measured Ratio | WCAG Verdict |
|---|---|---|---|
--color-ink (#191816) |
--color-canvas (#FBF9F5) |
16.87 : 1 |
AAA Pass |
--color-muted (#57534E) |
--color-surface (#F3EFE6) |
6.65 : 1 |
AA / AAA Pass |
--color-accent (#A6381E) |
--color-canvas (#FBF9F5) |
6.23 : 1 |
AA Pass |
--color-accent (#A6381E) |
--color-surface (#F3EFE6) |
5.71 : 1 |
AA Pass |
Using semantic names (canvas, surface, ink, muted, accent) keeps templates concise when experimenting with new libraries or UI components.