Design Tokens

The A11y Starter Kit uses oklch color tokens defined in CSS custom properties. All colors are designed to maintain WCAG AA contrast ratios in both light and dark modes.

Token File

All design tokens live in app/globals.css inside a @theme block:

@theme {
    --color-background: oklch(1 0 0);
    --color-foreground: oklch(0.145 0 0);
    --color-primary: oklch(0.205 0 0);
    --color-primary-foreground: oklch(0.985 0 0);
    --color-muted: oklch(0.96 0 0);
    --color-muted-foreground: oklch(0.556 0 0);
    /* ... more tokens */
}

Why oklch?

oklch (Oklab Lightness, Chroma, Hue) provides perceptually uniform colors:

• Consistent lightness -- changing the hue doesn't shift perceived brightness
• Predictable contrast -- you can calculate contrast ratios from lightness values
• Easy theming -- change one hue value and the entire palette shifts consistently

Light and Dark Mode

Dark mode tokens are defined in .dark:

.dark {
    --color-background: oklch(0.145 0 0);
    --color-foreground: oklch(0.985 0 0);
    /* Swapped foreground/background with adjusted values */
}

Every token pair is verified to meet WCAG AA contrast:

• Normal text: 4.5:1 minimum
• Large text: 3:1 minimum
• UI components: 3:1 minimum

Customizing Colors

To apply your own brand colors:

1. Open app/globals.css
2. Update the oklch values in the @theme block
3. Verify contrast ratios using the Color Contrast Checker
4. Test both light and dark modes

Example: Changing the Primary Color

/* Default: neutral black */
--color-primary: oklch(0.205 0 0);

/* Brand blue */
--color-primary: oklch(0.45 0.2 260);
--color-primary-foreground: oklch(0.985 0.01 260);

Always verify that your new primary / primary-foreground pair meets 4.5:1 contrast.

Typography

The kit uses the system font stack by default:

• Body: Inter (or system sans-serif fallback)
• Headings: DM Sans
• Code: JetBrains Mono

Fonts are configured in app/layout.tsx via next/font.

Using the Tailwind Theme Preview

Our Tailwind Theme Preview tool lets you:

1. Input your brand colors and fonts
2. Preview them on a live CRM layout
3. Export a Tailwind v4 @theme block

Paste the exported block directly into globals.css to rebrand the kit instantly.