A warm-canvas editorial interface

Cream, coral and dark navy — the trinity behind claude.com. A tinted canvas instead of cool white, serif display type at regular weight, and real product chrome shown rather than illustrated.

Explore the tokens Read the spec

#faf9f5 canvas #cc785c coral #181715 navy

The token system

Three surface modes alternate band by band. The cream-to-dark contrast is the page’s pacing mechanism — never two the same in a row.

canvas#faf9f5

surface-card#efe9de

primary#cc785c

primary-active#a9583e

surface-dark#181715

ink#141413

tokens.css

 1 /* warm, deliberately not cool white */
 2 :root {
 3   --canvas:        #faf9f5;
 4   --surface-card:  #efe9de;
 5   --surface-dark:  #181715;
 6   --primary:       #cc785c;
 7   --ink:           #141413;
 8   /* weight 400. never 700. */
 9   --display-xl:    64px/1.05;
10   --display-xl-ls: -1.5px;
11   --section:       96px;
12 }

73 DESIGN.md files · MIT tokens resolved

Cream canvasThe default body floor

Light cream cardsFeature and content surfaces

Dark navyCode, terminals, the footer

Claude

awesome-design-md

Drop it in. Ship the whole look.

One Markdown file in your project root, and a coding agent has the palette, the type ramp, the radius hierarchy and the pacing rules — before it writes a line of markup.

Back to the start github.com/VoltAgent/awesome-design-md

Style exercise — not official Anthropic material DESIGN.md documents publicly visible CSS values and is provided as is. Display type substitutes EB Garamond for the licensed Copernicus face.