# Warm

> Cozy earth tones, cream background, terracotta/spice, organic rounded shapes.

- Skill: `jdsadminllc/warm` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/warm`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/warm/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/warm

---

# 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