Summary
Simplify design tokens (font-size, shadow, border-radius) while maintaining visual appearance.
Key changes:
| Token |
Before |
After |
| Base font |
14px |
16px |
| Font sizes |
14 |
8 |
| Shadows |
23 |
4 |
| Border radius |
12 |
4 |
| Total tokens |
49 |
20 |
User Stories
P1: Reduced Font Scale
- 8 sizes: xs (12px), sm (14px), base (16px), lg (18px), xl (24px), 2xl (32px), 3xl (48px), 4xl (64px)
- Base font becomes 16px (was 14px)
P2: Simplified Shadows
- 4 levels: sm, DEFAULT, lg, xl
- Brutalist offset-* kept as optional accent
P2: Constrained Border Radius
- 4 tokens: sm (8px), DEFAULT (16px), lg (24px), full
P3: Nested Color Tokens
ocobo.yellow.DEFAULT / ocobo.yellow.light
ocobo.mint.DEFAULT / ocobo.mint.light
ocobo.sky.DEFAULT / ocobo.sky.light
ocobo.coral.DEFAULT / ocobo.coral.light
Requirements
Token Mapping
Font sizes (current → new)
| Current |
Usages |
New |
| text-2xs (10px) |
106 |
text-xs (12px) |
| text-xs (11px) |
67 |
text-xs (12px) |
| text-sm (13px) |
118 |
text-sm (14px) |
| text-base (14px) |
13 |
text-base (16px) |
| text-lg (16px) |
58 |
text-lg (18px) |
| text-xl (20px) |
92 |
text-xl (24px) |
| text-2xl (22px) |
63 |
text-xl (24px) |
| text-3xl (30px) |
50 |
text-2xl (32px) |
| text-4xl (36px) |
38 |
text-2xl (32px) |
| text-5xl (48px) |
26 |
text-3xl (48px) |
| text-6xl (60px) |
14 |
text-4xl (64px) |
| text-7xl+ |
17 |
text-4xl (64px) |
Shadows (current → new)
| Current |
Usages |
New |
| shadow-sm |
32 |
shadow-sm |
| shadow-md/lg |
22 |
shadow (DEFAULT) |
| shadow-xl/soft-* |
45+ |
shadow-lg |
| shadow-2xl/soft-2xl+ |
39+ |
shadow-xl |
Border radius (current → new)
| Current |
Usages |
New |
| rounded-sm/md |
5 |
rounded-sm (8px) |
| rounded-lg/xl |
65 |
rounded (16px) |
| rounded-2xl+ |
88 |
rounded-lg (24px) |
| rounded-full |
144 |
rounded-full |
Success Criteria
- Token count: 49 → 20
- Zero visual regression
- Build passes
- All usages migrated
📄 Full spec: specs/001-design-system-rationalization/spec.md
