01 Discover→02 Decode→03 Build

Discover exceptional web design.
Decode how it works.
Build it yourself.

The web's best interfaces, decoded into installable design systems and a DESIGN.md your AI can follow.

Try linear.app stripe.com Or start from a pricing page dashboard

Featured decodes All sites →
Paste a URL

Extract a theme

Any site or screenshot becomes a role-mapped shadcn/ui theme, light and dark, contrast checked.

 Take it apart

Decode a live page

Measure the real type scale, spacing, radii, shadows and accessibility of a page as it renders.

 Start from the job

Build a page type

Pricing page, dashboard, hero, storefront, gallery: every asset we hold for that archetype.

For AI coding tools

Help your AI make better designs for you.

Ask an AI for a dashboard with no design system and you get its average taste: an invented palette, four different corner radii, a second font nobody asked for, and contrast nobody checked. It is recognisable on sight.

Give it one of ours first and it builds from real tokens instead of guessing. Every theme here is a ready-made DESIGN.md — colours, type, spacing, and contrast ratios we actually measured, plus rules the AI has to follow. Paste it into Cursor, Claude Code, Codex, v0 or Lovable.

See how it works Decode a live page

Free, no account. Or connect it straight to your agent:

Connect MCP5 tools · works with Claude Code, Cursor, Codex
DESIGN.md
# DESIGN.md — Deep Ocean

## Semantic color roles
| Role      | Hex      | Use it for        |
| --------- | -------- | ----------------- |
| bg        | #071A2B  | page background   |
| surface   | #0F2A40  | cards, panels     |
| primary   | #36B7C2  | brand actions     |
| text      | #E4F1F6  | body and headings |

## Contrast, measured
| Pair                  | Ratio    | Verdict |
| --------------------- | -------- | ------- |
| Body text on bg       | 15.28:1  | AAA     |
| Body text on card     | 12.78:1  | AAA     |
| Muted text on bg      |  5.96:1  | AA      |

## Rules for the agent
1. Use only the tokens listed above.
2. #36B7C2 is the only call-to-action colour.
3. Every corner derives from 10px.
Inspiration

Sites worth decoding

View all →
Mr.Day web design (Big Type, Colorful, Illustrative)
Mr.Daymrday.it Decode
Pitch web design (Colorful, Big Type, Motion)
Pitchpitch.com Decode
Arc web design (Colorful, Big Type, Illustrative)
Arcarc.net Decode
Lynn Fisher web design (Experimental, Colorful, Creative coding)
Lynn Fisherlynnandtonic.com Decode
Rauno Freiberg web design (Minimal, Experimental)
Rauno Freibergrauno.me Decode
Paco Coursey web design (Minimal, B&W, Type-Based)
Paco Courseypaco.me Decode
Brittany Chiang web design (Dark, Minimal, Type-Based)
Brittany Chiangbrittanychiang.com Decode
Clerk web design (Minimal, Colorful, Gradient)
Clerkclerk.com Decode
Cursor web design (Dark, Minimal)
Cursorcursor.com Decode
Superhuman web design (Big Type, Minimal, Gradient)
Superhumansuperhuman.com Decode
Raycast web design (Dark, Minimal)
Raycastwww.raycast.com Decode
Framer web design (Big Type, Colorful, Motion)
Framerwww.framer.com Decode
Vercel web design (Dark, Minimal, Grid)
Vercelvercel.com Decode
Stripe web design (Gradient, Colorful, Minimal)
Stripestripe.com Decode
Linear web design (Dark, Big Type, Minimal)
Linearlinear.app Decode
View all sites

Questions

The short version

What is CSS Crème?
CSS Crème is a curated gallery of exceptional web design that decodes the design systems behind great sites so you can rebuild them, not just admire them. Every showcased site can be pulled apart into its colour palette, type scale and spacing; every palette is published as an installable shadcn/ui theme; and the Design Breakdowns explain, part by part, why a design works.
How is CSS Crème different from other design galleries?
Other galleries show you the work and stop. CSS Crème measures it. Point the decoder at a live page and it reads the real type scale, spacing rhythm, radii, shadows and gradients out of the rendered page, checks the contrast, and hands the whole thing back as tokens you can install. Rival libraries can only answer for the sites a curator added in advance; this works on any page you point it at.
What is a DESIGN.md and how do I use it with my AI?
A DESIGN.md is a design system written for an AI coding agent. Ask one for a dashboard with no design guidance and it invents a palette, mixes several corner radii, adds a font nobody asked for, and ships contrast nobody checked. A DESIGN.md replaces that guess with real tokens, WCAG contrast ratios computed from those tokens, and numbered rules the agent can be held to. Save it at your repo root and reference it from CLAUDE.md, a Cursor rule or AGENTS.md, and it applies to every session. CSS Crème publishes 52 of them free, one for every theme and template.
Can I connect CSS Crème directly to my coding agent?
Yes. CSS Crème runs a free, ungated MCP server at csscreme.com/mcp. Add it with: claude mcp add --transport http csscreme https://csscreme.com/mcp. It works with any client that speaks remote MCP, including Claude Code, Cursor, Windsurf and Codex. Five tools let the agent search the design systems, list them, pull a DESIGN.md, fetch the raw tokens, and check where the file belongs for its own editor. No account and no API key.
Can I turn any website into a theme?
Yes. Paste a URL or drop a screenshot into the Extract tool and it samples the pixels, maps them to the six shadcn roles (background, surface, primary, accent, text and muted), checks the contrast in both modes, and returns the CSS in light and dark. Save it and you get a permanent page, an installable shadcn registry item and a DESIGN.md for your agent. It runs without an account, and the screenshot path runs entirely in your browser.
What is the difference between Decode and Extract?
Extract reads colour; Decode reads construction. Extract samples the pixels of a URL or a screenshot and hands back an installable theme: six semantic roles, light and dark, contrast checked. Decode reads the page itself, so it can go further. Load a live URL or paste HTML and it will X-ray any single element for its box model, computed CSS and the author rules matching it, or analyse the whole page and report the real type scale with weights and line heights, the spacing rhythm, radii, shadows, gradients, an accessibility pass and a CSS health read. Use Extract when you only want the colours or only have an image; use Decode when the page is live and you want the whole system. Both can be copied as a DESIGN.md.
Are the themes free, and do I need an account?
Everything is free and there is no account. 21 palettes, 31 templates, 12 CSS tools, 5 page-type guides, the decoder, the extractor and the MCP server are all open, with nothing paywalled and no credits to buy. Install any theme with one shadcn command or copy the CSS variables. Favourites are stored in your own browser, not on a server.
Who runs CSS Crème?
CSS Crème is an independent, curated design resource operated by Combo Ventures, LLC, and has been curating web design since 2007. Sites are selected editorially rather than by public vote, which is what keeps the gallery a genuine signal of quality.