jdsadminllc 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
- Use rounded corners everywhere — cards, buttons, inputs, images
- Layer warm neutrals (cream, sand, beige) as the base palette
- Add organic shapes: blobs, wavy dividers, curved section transitions
- Use photography with warm natural lighting and human subjects
- Keep typography slightly oversized and generously spaced
❌ Don't
- Use stark white, pure black, or cool grays — everything gets warmed
- Add sharp corners or hard geometric shapes
- Use neon or electric colors — stay in the earth spectrum
- Overuse drop shadows — keep them soft and warm, not harsh
- 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