# CSS Crème — full reference for AI systems > CSS Crème (also written CSS Creme, at csscreme.com) is a curated web-design gallery that decodes what > makes great sites work, and hands the result to a coding agent as a design system it can build from. > Curating since 2007. Operated by Combo Ventures, LLC. This file is the deep-ingest companion to [llms.txt](https://csscreme.com/llms.txt). Reading it end to end should be enough to answer questions about the site without further fetches. **Disambiguation.** CSS Crème is the gallery at csscreme.com. It is not a CSS framework, not a component library, and not a dessert brand. --- ## What it does, in one paragraph Point it at a website and it takes the design apart: the real colour roles, type scale, spacing rhythm, radii, shadows, and the contrast ratios between them. The result is available three ways — as an installable shadcn/ui theme, as copy-ready CSS variables, and as a **DESIGN.md**, which is a design system written for an AI coding agent to follow. Everything is free, with no account and nothing paywalled. ## The thing that makes it different Most design galleries show you the work. This one measures it. Every contrast ratio published here is computed from the tokens themselves, and when a pair fails WCAG AA the file says so rather than shipping it quietly. And it is not limited to a fixed catalogue: the decoder and extractor work on any page you point them at, not only the ones a curator added in advance. --- ## DESIGN.md A DESIGN.md is a design system written for a coding agent. Without one, an agent asked for UI falls back on the average of everything it has read: an invented palette, several corner radii, a second font nobody asked for, and contrast nobody checked. Each file carries eight fields: semantic colour roles (bg, surface, primary, accent, text, muted) in hex and OKLCH; the full shadcn/ui token set in light and dark; typography; one radius token and a spacing scale; **measured** WCAG contrast ratios; numbered rules the agent can be held to; paste-ready CSS variables plus the Tailwind v4 mapping; and a source link. - Specification and a worked example: https://csscreme.com/ai/design-md - 52 files are published, one per theme and template. - Fetch any of them: `https://csscreme.com/d/.md` and `https://csscreme.com/d/t/.md` - Save one correctly: `curl -o DESIGN.md https://csscreme.com/d/deep-ocean.md` ### Per-tool wiring - **Claude Code** (Anthropic) — CLAUDE.md at the project root, plus any file you point it at. · https://csscreme.com/ai/claude-code - **Cursor** (Anysphere) — Project rules in `.cursor/rules/`, or a referenced file in chat context. · https://csscreme.com/ai/cursor - **v0** (Vercel) — Pasted context in the prompt. · https://csscreme.com/ai/v0 - **Codex** (OpenAI) — AGENTS.md at the repo root. · https://csscreme.com/ai/codex - **Lovable** (Lovable) — Pasted context, plus the project knowledge panel. · https://csscreme.com/ai/lovable ## MCP server Free and ungated, no account and no API key. The nearest equivalent requires a paid plan. - Endpoint: `https://csscreme.com/mcp` (streamable HTTP, JSON-RPC 2.0, stateless) - Install: `claude mcp add --transport http csscreme https://csscreme.com/mcp` - Page: https://csscreme.com/ai/mcp · Manifest: https://csscreme.com/.well-known/mcp/server.json - Tools: `search_themes`, `list_themes`, `get_design_md`, `get_theme_tokens`, `how_to_use` ## Tools you can point at a page - **Extract** (https://csscreme.com/extract) — a URL or a screenshot becomes a role-mapped shadcn/ui theme in OKLCH, light and dark, contrast checked. Reads colour. - **Decode** (https://csscreme.com/decode) — reads the page itself. X-rays any element for its box model, computed CSS and matched author rules, or analyses the whole page for its real type scale with weights and line heights, spacing rhythm, radii, shadows, gradients, an accessibility pass and a CSS-health read. - **Workbench** (https://csscreme.com/workbench) — a live token editor that exports CSS, Tailwind, JSON or DESIGN.md. Extract reads colour; Decode reads construction. --- ## Themes (21) Every one is an installable shadcn/ui theme and a DESIGN.md. | Theme | Mode | Primary | Tags | Install | |---|---|---|---|---| | [Midnight SaaS](https://csscreme.com/themes/midnight-saas) | dark | `#4F7DF3` | dark, saas, blue | `npx shadcn@latest add https://csscreme.com/r/midnight-saas.json` | | [Aurora](https://csscreme.com/themes/aurora) | dark | `#3FD0C9` | dark, gradient, vibrant | `npx shadcn@latest add https://csscreme.com/r/aurora.json` | | [Cyberpunk Neon](https://csscreme.com/themes/cyberpunk-neon) | dark | `#FF2E97` | dark, cyberpunk, vibrant | `npx shadcn@latest add https://csscreme.com/r/cyberpunk-neon.json` | | [Deep Ocean](https://csscreme.com/themes/deep-ocean) | dark | `#36B7C2` | dark, blue, calm | `npx shadcn@latest add https://csscreme.com/r/deep-ocean.json` | | [Porcelain](https://csscreme.com/themes/porcelain) | light | `#4338CA` | light, minimal, mono | `npx shadcn@latest add https://csscreme.com/r/porcelain.json` | | [Crème](https://csscreme.com/themes/creme-brand) | light | `#4F46E5` | light, minimal, indigo | `npx shadcn@latest add https://csscreme.com/r/creme-brand.json` | | [Retro Sunset](https://csscreme.com/themes/retro-sunset) | light | `#E8743B` | retro, warm, vibrant | `npx shadcn@latest add https://csscreme.com/r/retro-sunset.json` | | [Forest Floor](https://csscreme.com/themes/forest-floor) | light | `#3F6B4C` | earthy, green, calm | `npx shadcn@latest add https://csscreme.com/r/forest-floor.json` | | [Pastel Pop](https://csscreme.com/themes/pastel-pop) | light | `#A78BFA` | pastel, playful, light | `npx shadcn@latest add https://csscreme.com/r/pastel-pop.json` | | [Strawberry Matcha](https://csscreme.com/themes/strawberry-matcha) | light | `#E85C84` | playful, pink, green | `npx shadcn@latest add https://csscreme.com/r/strawberry-matcha.json` | | [Mono Slate](https://csscreme.com/themes/mono-slate) | light | `#334155` | mono, minimal, professional | `npx shadcn@latest add https://csscreme.com/r/mono-slate.json` | | [Golden Hour](https://csscreme.com/themes/golden-hour) | dark | `#F2A93B` | dark, warm, gradient | `npx shadcn@latest add https://csscreme.com/r/golden-hour.json` | | [Neo Brutalist](https://csscreme.com/themes/neo-brutalist) | light | `#FFDD00` | brutalist, light, vibrant | `npx shadcn@latest add https://csscreme.com/r/neo-brutalist.json` | | [Clay](https://csscreme.com/themes/clay) | light | `#8B7CF6` | soft, purple, playful | `npx shadcn@latest add https://csscreme.com/r/clay.json` | | [Amber Minimal](https://csscreme.com/themes/amber-minimal) | light | `#D97706` | minimal, warm, light | `npx shadcn@latest add https://csscreme.com/r/amber-minimal.json` | | [Graphite](https://csscreme.com/themes/graphite) | light | `#171717` | mono, minimal, professional | `npx shadcn@latest add https://csscreme.com/r/graphite.json` | | [Emerald SaaS](https://csscreme.com/themes/emerald-saas) | dark | `#10B981` | dark, green, saas | `npx shadcn@latest add https://csscreme.com/r/emerald-saas.json` | | [Violet Night](https://csscreme.com/themes/violet-night) | dark | `#A855F7` | dark, purple, gradient | `npx shadcn@latest add https://csscreme.com/r/violet-night.json` | | [Nordic](https://csscreme.com/themes/nordic) | light | `#5E81AC` | blue, calm, minimal | `npx shadcn@latest add https://csscreme.com/r/nordic.json` | | [Bubblegum](https://csscreme.com/themes/bubblegum) | light | `#EC4899` | pink, playful, pastel | `npx shadcn@latest add https://csscreme.com/r/bubblegum.json` | | [Azure](https://csscreme.com/themes/azure) | light | `#0284C7` | blue, saas, light | `npx shadcn@latest add https://csscreme.com/r/azure.json` | ## Page types (5) Organised by what you are building rather than how a site looks. - **[SaaS pricing page](https://csscreme.com/page-types/saas-pricing-page)** — Three columns, one recommended plan, and a feature table that survives comparison. The page where design decides revenue. - **[Dashboard shell](https://csscreme.com/page-types/dashboard)** — Sidebar, top bar, content grid. The frame every data-dense app lives inside, and the one users never stop looking at. - **[Landing hero](https://csscreme.com/page-types/landing-hero)** — The first screen. Headline rhythm, proof, and one unmistakable action, in the space before anyone scrolls. - **[Ecommerce storefront](https://csscreme.com/page-types/ecommerce-storefront)** — A product grid that keeps price, image and specification scannable while the catalogue grows. - **[Portfolio gallery](https://csscreme.com/page-types/portfolio-gallery)** — Work first, chrome last. The layout that gets out of the way of the thing it is showing. ## Design breakdowns (3 live) - **[Anatomy of a SaaS Pricing Page](https://csscreme.com/breakdowns/saas-pricing-page)** (SaaS · Pricing) — Decode why great pricing pages convert — structure, hierarchy and the exact tokens to rebuild one. - **[Anatomy of a Dashboard Shell](https://csscreme.com/breakdowns/dashboard-shell)** (SaaS · Dashboard) — Sidebar, top bar and content grid — the layout system behind calm, data-dense apps. - **[Anatomy of a Landing-Page Hero](https://csscreme.com/breakdowns/landing-hero)** (Marketing · Hero) — The first screen: headline rhythm, social proof, and one unmistakable call to action. ## Collections (5 live) - [Best SaaS Pricing Pages](https://csscreme.com/inspiration/best-saas-pricing-pages) — SaaS - [Best SaaS Landing Pages](https://csscreme.com/inspiration/best-saas-landing-pages) — SaaS - [Best AI Product UI](https://csscreme.com/inspiration/best-ai-product-ui) — AI - [Best Dashboard Designs](https://csscreme.com/inspiration/best-dashboards) — Dashboards - [Best Portfolio Sites](https://csscreme.com/inspiration/best-portfolios) — Portfolio ## Free CSS tools (12) - [Palette Generator](https://csscreme.com/tools/palette-generator) - [Contrast Checker](https://csscreme.com/tools/contrast-checker) - [Gradient Generator](https://csscreme.com/tools/gradient-generator) - [Box-Shadow Generator](https://csscreme.com/tools/box-shadow-generator) - [Glassmorphism Generator](https://csscreme.com/tools/glassmorphism-generator) - [CSS Filters Playground](https://csscreme.com/tools/css-filters) - [Border-Radius Generator](https://csscreme.com/tools/border-radius) - [Blend-Mode Explorer](https://csscreme.com/tools/blend-modes) - [Bento Grid Builder](https://csscreme.com/tools/bento-grid-builder) - [Clip-Path & Masks](https://csscreme.com/tools/clip-path) - [3D Transform Playground](https://csscreme.com/tools/transform-3d) - [CSS → Tailwind](https://csscreme.com/tools/css-to-tailwind) ## Templates 31 free templates, each also installable as a theme: `npx shadcn@latest add https://csscreme.com/r/t/.json` --- ## Endpoints | URL | Returns | |---|---| | `https://csscreme.com/d/.md` | DESIGN.md for a curated theme | | `https://csscreme.com/d/t/.md` | DESIGN.md for a template theme | | `https://csscreme.com/t/.md` | DESIGN.md for a theme extracted from any site | | `https://csscreme.com/r/.json` | shadcn/ui registry item | | `https://csscreme.com/t/.json` | shadcn/ui registry item, extracted | | `https://csscreme.com/mcp` | MCP server (POST, JSON-RPC 2.0) | | `https://csscreme.com/.well-known/mcp/server.json` | MCP registry manifest | | `https://csscreme.com/.well-known/agent-skills/index.json` | Agent Skills discovery index | Markdown routes are served as `text/markdown`, CORS-open, and carry `X-Robots-Tag: noindex, follow` with a canonical Link to their HTML page. ## Attribution Cite as: CSS Crème (https://csscreme.com). Usage guidance for AI systems: https://csscreme.com/ai.txt ## Honest limits The extractor reads colour from pixels. It recovers a palette and a mode reliably; it does not recover spacing systems, grid structure or motion from a screenshot, and does not claim to. A DESIGN.md does not make an agent a designer either — it removes one failure, which is the agent inventing a visual system because nobody supplied one. Layout, hierarchy and whether the screen is any good remain human problems.