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

From a screenshot

Extract a theme

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

 From a live page

Decode a page

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

 From an archetype

Build a page type

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

Pick a site. Read its system.

All sites →
ThumbCrafted web design

Decoded 19 Sept 2026

ThumbCrafted

thumbcrafted.com
#22d3ee#1f2a3a#9aa8bb#67e8f9#e8eaf0#8b90a0
Type
DM Sans + Sora
Sizes
22 · 24 · 26 · 27 · 28 · 29 · 38 · 44 px
Spacing
6 · 8 · 9 · 10 · 12 · 14 · 16 px
Radius
6 · 8 · 9 · 10 px

82 colours · 9 font stacks · 40 spacing values, read from 73 KB of its CSS

Decode it → See the breakdown

For AI coding tools

Give your AI better taste.

Every decoded interface becomes a DESIGN.md: real tokens, type, spacing and contrast we measured, plus rules the agent has to follow. Hand it to Claude Code, Cursor, Codex or the agent you already use, and it builds from a system instead of its own average taste.

See how it works Everything for agents
Connect MCPFree12 tools · 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.
What a decode produces

We don't just save the screenshot.

Every site here is read three ways: the CSS it declares, the styles the browser computes, and the pixels it renders. This is Gyre, measured on 18 Sept 2026.

Gyre homepage, our render, with the measured elements outlined Display typeOswald · 90/87 · 500 Primary action#ff0049 · radius 102px · 22/34 padding Running textGilroy · 20/30
Our render of gyre.pro at 1440x1000. Each box is an element the script measured, not one we chose to draw.

Computed on the rendered page

Display typeOswald · 90/87 · 500

Primary action#ff0049 · radius 102px · 22/34 padding

Running textGilroy · 20/30

Declared in its stylesheets

#ff0049#d3ff55#eaeaea#181818#3f4254#e1e3ea

Type scale64 · 70 · 72 · 80 · 84 · 90 · 110 · 132

Spacing8 · 10 · 12 · 15 · 16 · 20 · 30

Radius10 · 12 · 20 · 30

What you leave with

DESIGN.mdDTCG tokens shadcn registryCSS variables
Explore the full breakdown → or decode it yourself
Inspiration

Sites worth decoding

View all →
Gyre web design (Dark, Big Type, Type-Based) ★ Design of the Week
Gyregyre.pro Decode
KB Cafe web design (Minimal, Type-based)
KB Cafekbcafe.com Decode
yank.info web design (Big Type, Colorful, Type-Based)
yank.infoyank.info Decode
Electronic Materials Office web design (Big Type, Minimal, Motion)
Electronic Materials Officeelectronicmaterialsoffice.com Decode
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

Before you ask

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.
Are the themes free, and do I need an account?
Everything is free and there is no account. 21 palettes, 31 templates, 26 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.
What is the difference between a DESIGN.md and design tokens?
Design tokens are the values: a JSON or CSS file of named colours, radii, fonts and spacing that a build step turns into code. A DESIGN.md is written for a reader that can follow instructions, not just consume values, so it carries the tokens and also the rules for using them, the measured WCAG contrast of every pair an agent will actually produce, and a fingerprint that says whether a saved copy is still current. CSS Crème publishes both for every theme: W3C DTCG tokens for Tokens Studio or Figma Variables, a shadcn registry item for one-command install, and the DESIGN.md that ties them together. Use tokens when a build pipeline reads them; use the DESIGN.md when an AI is about to write UI.
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. 12 tools (search_themes, list_themes, get_design_md, get_theme_tokens, how_to_use, get_install_command, get_agent_rules, decode_url, css_feature, get_design_md_for_url, decode_site, verify_design_md) let the agent search the design systems, pull a DESIGN.md with its fingerprint, verify a saved copy is still current, get a rules block for CLAUDE.md or AGENTS.md, and install the tokens. 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. When the site declares its own design tokens, Decode reads those instead of pixels and hands you a one-command install, DTCG tokens, a globals.css and a Figma recipe for that URL. 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.
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.