# Style Family: warm-content

**Signature**: Warm neutrals, comfortable reading, soft surfaces, low-pressure feel.
**Reference products**: Are.na, Notion light, Craft, Day One journal, Bear, Readwise.
**Best for**: personal sites, journaling apps, community tools, knowledge gardens, indie productivity.

## Token defaults

### Color
- **Background**: warm off-white — `#faf8f3` to `#f0ece2`. Cream, parchment, sand.
- **Primary**: soft and earthy — terracotta, dusty teal, deep moss, muted plum. Saturated tech colors don't belong.
- **Text**: warm dark — `#2d2a26`, `#3d3a35`. Pure black reads as clinical here.
- **Borders**: barely-there warm gray, often replaced by shadow or just spacing.

### Typography
- **Heading**: serif or warm humanist sans — Tiempos, Spectral, Sentinel, Söhne, Inter Display, GT Alpina.
- **Body**: serif or rounded humanist — Sentinel, Spectral, Söhne, Tiempos Text, Mulish.
- **Mono**: warm if used — Berkeley Mono, IBM Plex Mono.

### Radius
- **6 / 10 / 16 px**. Soft enough to feel human, not so much it feels childish.

### Spacing
- 4px base, scale 4 / 8 / 12 / 16 / 24 / 32.
- Density: balanced or spacious. Never compact.

### Shadow
- Soft and warm-tinted (`rgba(45, 42, 38, 0.06)`), not cold black shadows.
- Multiple elevation tiers OK but kept subtle.

### Motion
- Gentle. 200–400ms with ease-out curves. No snap, no bounce.
- Reveal animations on scroll are in family if subtle.

## Anti-patterns *within this family*

- Pure white backgrounds.
- Cool blue / cyan / neon palettes.
- Tech-style monospace as the heading font.
- Aggressive CTA colors (red, electric orange).
- Dense data tables.
- "Power user" keyboard shortcut UI as a primary surface.

## Typical surfaces

This family does well on:
- Personal blogs
- Note-taking apps
- Reading apps
- Journaling and reflection tools
- Community / forum surfaces
- Indie maker about pages

This family does poorly on:
- Enterprise dashboards
- High-frequency transactional UIs
- Anything where speed/efficiency must dominate feel
- Cold-tech marketing

## Notes

`warm-content` is what `editorial` becomes when the product is interactive (you make notes, organize, save) rather than purely consumed (you read). The two share serif typography and generous spacing but `warm-content` allows more UI affordance — buttons, inputs, lists.