Design system: Warmth

Guidedesign quality

Example system for collaborative/consumer apps

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Design System - Warmth & Approachability

Example system for collaborative/consumer apps

## Direction

**Personality:** Warmth & Approachability
**Foundation:** Warm (stone)
**Depth:** Subtle shadows

## Tokens

### Spacing
Base: 4px
Scale: 8, 12, 16, 24, 32, 48 (generous)

### Colors
```
--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)
```

### Radius
Scale: 8px, 12px, 16px (soft, friendly)

### Typography
Font: Inter (approachable, readable)
Scale: 13, 14, 15, 16 (base), 18, 20, 24
Weights: 400, 500, 600

## Patterns

### Button
- Height: 40px (comfortable)
- Padding: 12px 20px
- Radius: 8px
- Font: 15px, 500 weight
- Shadow: subtle

### Card
- Border: none
- Padding: 20px
- Radius: 12px
- Shadow: 0 1px 3px rgba(0,0,0,0.08)
- Background: white on stone-50

### Input
- Height: 44px
- Padding: 12px 16px
- Radius: 8px
- Border: 1.5px solid (faint)

## Decisions

| 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 |

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From Interface Design skill (MIT, commit 2f9be32).View source