For Anthropic’s Claude Code
Give Claude Code a design system, not a vibe.
Anthropic’s terminal and IDE coding agent. Ask it for UI with no design context and you get the model’s average taste: a purple gradient, four radii, and contrast nobody checked. A DESIGN.md replaces that with real tokens, measured contrast ratios and constraints the agent can be held to.
Wiring it into Claude Code
Where it goes CLAUDE.md at the project root, plus any file you point it at.
- Save the theme file at your repo root:
curl -O https://csscreme.com/d/deep-ocean.md - Reference it from
CLAUDE.mdso every session picks it up:See DESIGN.md for the design system. Follow its rules exactly. - Or hand it over inline for a one-off:
Read DESIGN.md, then build the settings page.
Claude Code reads `CLAUDE.md` automatically at session start. Pointing that file at your DESIGN.md is the difference between design rules that apply once and design rules that apply every time.
The first lines of Deep Ocean. Every number in it is computed from the palette at build time, so the agent is following measurements rather than adjectives.
# DESIGN.md — Deep Ocean
> Design context for AI coding agents. Paste this file into Cursor, Claude Code, Codex, v0 or Lovable
> before asking for UI, or commit it at your repo root as `DESIGN.md`.
- **Source:** [Deep Ocean on CSS Crème](https://csscreme.com/themes/deep-ocean)
- **Default mode:** dark
- **Tags:** dark, blue, calm
- **Install as a real shadcn/ui theme:** `npx shadcn@latest add https://csscreme.com/r/deep-ocean.json`
A restrained, professional blue palette — trustworthy without the corporate stiffness.
---
## Semantic color roles
Six roles carry the identity. Everything else in this file is derived from them.
| Role | Hex | OKLCH | Use it for |
| --- | --- | --- | --- |
| `bg` | `#071A2B` | `oklch(21.2% 0.042 247.8)` | page background |
| `surface` | `#0F2A40` | `oklch(27.6% 0.052 245.9)` | cards, panels, popovers |
| `primary` | `#36B7C2` | `oklch(71.6% 0.109 203.5)` | brand actions: primary buttons, links, focus rings |
| `accent` | `#5BA7F7` | `oklch(71.4% 0.140 251.4)` | secondary emphasis only, never a second primary |
| `text` | `#E4F1F6` | `oklch(95.0% 0.015 222.7)` | body and heading text |
| `muted` | `#7E9AAC` | `oklch(67.1% 0.041 236.4)` | secondary text, borders, disabled states |Not the theme you want? There are 21 of them, each at
/d/<theme>.md, and the extractor will build one from any URL or
screenshot you give it.
Why a file beats a prompt
It persists
A prompt applies to one message. A file at the repo root applies to every session, every task, and every teammate who opens the project.
It is checkable
Rules like “one primary action per view” and “every corner derives from 10px” can be diffed against the output. “Make it clean” cannot.
The contrast is measured
Every ratio in the file is computed from the tokens, not asserted. If a pair fails WCAG AA, the file says so instead of quietly shipping it.
It installs for real
The same theme is a shadcn/ui registry item, so after the agent writes the components, one command writes the tokens.
Connect Claude Code directly
Rather than fetching files by hand, point the agent at our MCP server and let it search the catalogue itself. Free, no account, no key.
claude mcp add --transport http csscreme https://csscreme.com/mcp Five tools: search_themes, list_themes, get_design_md, get_theme_tokens, how_to_use. Any client that speaks remote MCP can use it. More on the format →