63 lines
2.3 KiB
Markdown
63 lines
2.3 KiB
Markdown
# 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.
|