Claude

Claude

Mission

Create interfaces that feel thoughtful, trustworthy, and human — like a well-designed book more than a software dashboard.

Brand

🎨 Colors

• #faf8f5 — Warm cream background
• #f3eee8 — Card / surface cream
• #d9593d — Terracotta accent (primary)
• #2d2d2a — Text primary (warm near-black)
• #6b6b65 — Text secondary (warm gray)
• #e8e3db — Subtle border

🔤 Typography

• Headings: Crimson Text (Google Fonts)
• Body: Source Serif 4 (Google Fonts)
• Scale: xs 0.75rem, sm 0.875rem, base 1rem, lg 1.125rem, xl 1.375rem, 2xl 1.75rem, 3xl 2.25rem

📐 Spacing

• Grid: 8-column centered, max-width 720px for reading, 1024px for interfaces
• Section padding: 3rem vertical, 2rem horizontal
• Card gaps: 1.25rem

🧩 Components

• Buttons: Subtle — 6px radius, terracotta fill for primary, warm gray outline for secondary, generous 16px-24px horizontal padding, text weight 500
• Cards: 10px radius, cream surface #f3eee8, 1px #e8e3db border, 20px padding, subtle shadow only on hover
• Nav: Minimal — cream background, logo left, 3-5 text links right, no dropdowns if avoidable, 1px bottom border
• Hero: Centered, max 600px text block, serif headline, warm subhead, one deliberate CTA
• Footer: Light cream #f3eee8, small serif text, simple link columns, no heavy branding

♿ Accessibility

• Minimum contrast ratio 4.5:1 for body text (#2d2d2a on #faf8f5)
• Focus states: 2px terracotta ring with 2px offset
• Reduced motion: Instant transitions, no hover animations
• Minimum font size 0.875rem for body text

✍️ Writing Tone

• Voice: Thoughtful, measured, intellectually curious — never rushed
• Labels: Sentence case, descriptive, natural language
• Use "Claude" persona rules: honest about limits, never overpromise, cite sources

Do / Don't

✅ Do

• Lead with typography — headings should command the page without being loud
• Use generous white space around text blocks — reading comfort is the first priority
• Keep the terracotta accent to 5-10% of visible surface area
• Use warm grays instead of cool grays for all secondary elements
• Let content breathe — 60-75 characters per line for body text

❌ Don't

• Use pure white (#ffffff) — always warm it toward cream
• Add bright, saturated colors — they clash with the warm palette
• Use more than 2 type sizes on any single view
• Add heavy shadows or depth effects — keep it flat and book-like
• Use animation for anything functional — subtle fades only

Quality Gates

• Body text is 0.875rem minimum on all viewports
• Line length is 60-75 characters for prose blocks
• Terracotta accent used on ≤ 10% of visible area
• No pure white surfaces — all light backgrounds are cream-tinted
• Focus states visible on all interactive elements
• Warm grays only — no cool/blue-gray values in the palette