---

name: warm description: Cozy earth tones, cream background, terracotta/spice, organic rounded shapes.

Warm

Mission

Wrap users in visual comfort — soft terracotta, rounded corners, and organic shapes that feel like a well-loved kitchen, not a cold interface.

Brand

🎨 Colors

• #C75B39 — Primary (terracotta)
• #E8A87C — Secondary (warm peach)
• #FFF8F0 — Background (cream)
• #FDEBD0 — Surface (light sand)
• #4A3728 — Text (warm charcoal)
• #D4956A — Accent (spice)

🔤 Typography

• Heading font: Fraunces (Google Fonts, warm soft-serif with character)
• Body font: Nunito (Google Fonts, rounded friendly sans)
• Type scale: xs 0.8125rem / sm 0.9375rem / base 1.0625rem / lg 1.25rem / xl 1.563rem / 2xl 2rem / 3xl 2.5rem

📐 Spacing

• Grid: Flexible 12-column, 16px base
• Section padding: 5rem vertical, 3rem horizontal
• Card gaps: 2rem

🧩 Components

• Buttons: Fully rounded (pill shape), terracotta fill, cream text, subtle scale-up hover. Secondary: cream fill with terracotta border.
• Cards: Soft-rounded (12px border-radius), sand-colored surface, subtle warm shadow, generous padding.
• Nav: Cream background, rounded links with terracotta hover background, gentle underline for active state.
• Hero: Large Fraunces headline, soft gradient from cream to light sand, optional botanical or textile illustration.
• Footer: Wide padding, rounded-top shape, slightly darker sand background, organic separator curve.

♿ Accessibility

• Terracotta on cream: verify 4.5:1 (darken terracotta if needed for small text)
• Warm charcoal on sand: typically passes 7:1+
• Focus rings: 2px solid terracotta, clearly visible, follows rounded shape
• prefers-reduced-motion: remove scale-up hover effects, keep color transitions

✍️ Writing Tone

Friendly, conversational, human. Contractions welcome. Use "we" and "you." Short sentences. No corporate jargon. Write like you're explaining over coffee.

Do / Don't

✅ Do

1. Use rounded corners everywhere — cards, buttons, inputs, images
2. Layer warm neutrals (cream, sand, beige) as the base palette
3. Add organic shapes: blobs, wavy dividers, curved section transitions
4. Use photography with warm natural lighting and human subjects
5. Keep typography slightly oversized and generously spaced

❌ Don't

1. Use stark white, pure black, or cool grays — everything gets warmed
2. Add sharp corners or hard geometric shapes
3. Use neon or electric colors — stay in the earth spectrum
4. Overuse drop shadows — keep them soft and warm, not harsh
5. Write in a formal or distant tone — warmth extends to the copy

Quality Gates

• No sharp corners — minimum 8px border-radius on all containers
• Color palette stays within warm earth tones (red→orange→brown→cream)
• Body text passes 4.5:1 on cream/sand backgrounds
• At least one organic curve or shape present
• Photography (if used) has warm lighting
• Tone of voice is conversational, not corporate