For Lovable’s Lovable
Give Lovable a design system, not a vibe.
Prompt-to-app builder with a Tailwind output. 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 Lovable
Where it goes Pasted context, plus the project knowledge panel.
- Copy the file from
https://csscreme.com/d/deep-ocean.md - Paste it into the project’s knowledge or instructions panel so it persists across prompts.
- Ask for screens afterwards; the Tailwind v4 block at the bottom of the file is the part it uses.
Lovable outputs Tailwind, so the `@theme inline` block near the end of the file matters more here than the raw CSS variables above it.
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`
- **Fingerprint:** `fnv1a-b613a475` — a hash of the token set below. It changes only when a token changes.
- **Verify this copy:** call the MCP tool `verify_design_md` with `{ "id": "deep-ocean", "fingerprint": "fnv1a-b613a475" }`
at `https://csscreme.com/mcp`, or refetch https://csscreme.com/d/deep-ocean.md. A stale copy is worse than none: an agent will follow it faithfully.
- **Also available as:** [DTCG tokens](https://csscreme.com/d/deep-ocean.tokens.json) for Tokens Studio / Figma Variables · [agent rules block](https://csscreme.com/d/deep-ocean.rules.md) for CLAUDE.md, AGENTS.md or .cursor/rules
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 |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 Lovable 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.
https://csscreme.com/mcp 11 tools, each one linked to what it does:
search_themes, list_themes, get_design_md, get_theme_tokens, how_to_use, get_install_command, get_agent_rules, decode_url, get_design_md_for_url, decode_site, verify_design_md.
Any client that speaks remote MCP can use it. Try it live →
Prompts to paste into Lovable
Three worked prompts with the real file and theme names in them. Copy one, change the theme or the page you want, and go.
Fetch https://csscreme.com/d/deep-ocean.md and save it at the repo root as DESIGN.md. Read it in full, then build a settings page. Use only the tokens in its table, one primary action per view, and keep every corner on the --radius token.
Paste https://csscreme.com/d/deep-ocean.rules.md into the project instructions, so every future prompt reads DESIGN.md before touching UI.
Before building, read the Fingerprint line in DESIGN.md and call the CSS Crème MCP tool verify_design_md with the theme id and that fingerprint. If it is not current, replace DESIGN.md with the refetched file first.