Example system for collaborative/consumer apps
Personality: Warmth & Approachability Foundation: Warm (stone) Depth: Subtle shadows
Base: 4px Scale: 8, 12, 16, 24, 32, 48 (generous)
--foreground: stone-900
--secondary: stone-600
--muted: stone-400
--faint: stone-200
--accent: orange-500
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08)
Scale: 8px, 12px, 16px (soft, friendly)
Font: Inter (approachable, readable) Scale: 13, 14, 15, 16 (base), 18, 20, 24 Weights: 400, 500, 600
- Height: 40px (comfortable)
- Padding: 12px 20px
- Radius: 8px
- Font: 15px, 500 weight
- Shadow: subtle
- Border: none
- Padding: 20px
- Radius: 12px
- Shadow: 0 1px 3px rgba(0,0,0,0.08)
- Background: white on stone-50
- Height: 44px
- Padding: 12px 16px
- Radius: 8px
- Border: 1.5px solid (faint)
| Decision | Rationale | Date |
|---|---|---|
| Subtle shadows | Gentle depth, approachable feel | 2026-01-15 |
| Generous spacing | Focused tasks, not cramming info | 2026-01-15 |
| Warm foundation | Human, comfortable, inviting | 2026-01-15 |