Home
DESIGN.mdStar on GitHub

Claude

Warm, editorial, human — an AI interface built to feel thoughtful rather than mechanical.

Colors
Brand
clay#D97757Accent, CTAs, mark
clay-deep#C15F3CHover / pressed
ink#141413Headings, text
text-2#3D3D3ASecondary text
Surfaces — warm paper
cream#F0EEE6Page canvas
card#FAF9F5Panels, chat
deep-cream#E8E6DCUser bubble, hover
border#CDC9BADividers, inputs
Warm neutrals & dark
muted#87867FMetadata
faint#B0AEA5Placeholders
dark-page#1F1E1CDark canvas (warm)
dark-card#262523Dark surface
Typography — Anthropic Serif ≈ Newsreader · Sans ≈ DM Sans · Mono ≈ JetBrains
serif-display
Newsreader · 500
Good evening, DJ
56pxserif
serif-quote
Newsreader · italic
Helpful, honest, and harmless.
italic
heading
DM Sans · 600
How can I help you today?
22px600
body
DM Sans · 400
Claude explains its reasoning clearly, in plain, unhurried prose.
15px400
mono / code
JetBrains Mono
const tip = bill * (pct / 100);
13pxmono
Components
Buttons
Suggested prompts
Write a haiku about the sea Summarize this PDF Build a tip calculator
Signature — Chat & Artifacts
Claude Claude Opus 4.8 ▾
Good evening — how can I help?
Claude Opus 4.8
tip-calculator.tsx

Tip calculator

Tip$10.51
Total$68.91

        

      

    

    
Click a suggested prompt (or type one) — Claude streams a reply. Build a tip calculator opens a live Artifact with Preview / Code tabs.

  


  
  

    
Guardrails

    

      

        
DO

        

          
Keep the canvas warm cream #F0EEE6 — surfaces are off-white #FAF9F5, never pure white.

          
Use clay #D97757 sparingly — ideally one primary action per view.

          
Lead greetings and headings with the serif; keep body in the sans.

          
Keep dark mode warm near-black #1F1E1C — never a cool blue-black.

          
Favor whitespace over borders; animate with ease curves under 200ms.

        

      

      

        
DON'T

        

          
Don't use blue as a primary color — it conflicts with the brand's warmth.

          
Don't render the Claude mark in any color but clay.

          
Don't use all-caps headings, heavy shadows, or glassmorphism.

          
Don't set body copy in the serif or long strings in the mono.

          
Don't crowd the layout — density reads as anxious; the brand is calm.