# Colour system handoff — Cerulean

A semantic colour system generated by [paircolors](https://paircolors.com). Drop these files into your
project and point your AI coding tool (Claude Code, Cursor, v0, Bolt, Lovable, …) at this folder,
or hand it the prompt below.

## Paste this into your AI tool

> Fetch https://paircolors.com/p/eef6f9-a8d0db-0a2e3a-2b7a8f-f4a261/handoff.md and follow it — it's a semantic colour system for this project. Wire up its tokens (CSS variables or Tailwind theme), use the semantic token names instead of raw hex when you build or edit UI, and keep the contrast guarantees in its accessibility section.

Working from the files directly instead? Tell the tool: *"Read `handoff.md` and `skill.md` in this folder and apply the colour system."*

## At a glance

An energetic, expressive, crisp, high-contrast, cool light-first palette. Reference colours through the
semantic tokens (CSS variables / Tailwind theme / design tokens) — never raw hex in component code.
`primary-*` = user action & selection only, one CTA per screen, never a background. `accent-*` = secondary emphasis & illustration only — **not** text-safe.
`status-*` = feedback only, never decoration. Surfaces: page → `background-page`, cards → `background-surface`,
popovers → `background-elevated`. A synthesised dark mode ships under `.dark` — keep components mode-agnostic.

## Files

| File | What it is | What to do |
| --- | --- | --- |
| `handoff.md` | this file | read it first |
| `skill.md` | full usage guide — what every token is for, do/don't rules, the measured WCAG report | **give this to your AI tool as the source of truth** |
| `tokens.css` | CSS custom properties, `:root` + `.dark` | import into your global stylesheet |
| `tailwind.theme.css` | Tailwind v4 `@theme` block | Tailwind v4 projects — add to globals.css |
| `tailwind.config.ts` | Tailwind v3 `colors` config | Tailwind v3 projects |
| `shadcn.css` | shadcn/ui theme — `:root` + `.dark`, oklch | paste into your shadcn globals.css |
| `design-tokens.json` | W3C / Style-Dictionary design tokens | token pipelines / Figma |
| `colors.ts` | typed `colors` object | `import { colors } from './colors'` |
| `colors.swift` | SwiftUI `Color` extension | iOS / macOS projects |
| `color-system.json` | the whole system as data — every token, both modes, the audit | for tooling |

Pick the one export that matches your stack — they are all the same colours. Each file above is
also fetchable individually at `https://paircolors.com/p/eef6f9-a8d0db-0a2e3a-2b7a8f-f4a261/<filename>` (and the whole set at `https://paircolors.com/p/eef6f9-a8d0db-0a2e3a-2b7a8f-f4a261/bundle.zip`).

## How to apply

1. Add `tokens.css` (or the Tailwind / shadcn export that matches your stack) so the variables exist.
2. Replace raw hex and ad-hoc colour classes in components with the semantic token names —
   `background-page`, `background-surface`, `text-primary` / `text-secondary` / `text-muted`,
   `border-default`, `primary-solid` (+ `primary-solid-fg`), `primary-soft`, `accent-*`, `status-*`.
3. Whenever you put text or an icon on a coloured fill, use that fill's `*-fg` token — don't guess.
4. Follow the rules in `skill.md`: primary is for action & selection only (one CTA per screen),
   status colours are feedback only, every interactive element gets the `border-focus` ring.
5. The synthesised dark mode lives under `.dark`. Don't hardcode light/dark colours — reference tokens.

— Generated by paircolors · https://paircolors.com/p/eef6f9-a8d0db-0a2e3a-2b7a8f-f4a261