- Page background: #F6F7F9
- Content surface (cards / article area): #FFFFFF
- Primary text: #111111
- Secondary text: #4B5563
- Border: #E5E7EB
- Link color: #0047FF (always underlined)
- Primary CTA background: #0047FF
- Primary CTA text: #FFFFFF
- Container width (site): 1120px
- Reading measure (text column): 68ch
- Desktop page padding: 32px
- Mobile page padding: 16px
- Grid: 12 columns desktop, 4 columns mobile
- Gutter: 24px desktop, 16px mobile
- Base spacing unit: 8px (use 4px only for micro spacing)
- Body font size: 16px
- Body line-height: 1.55
- Primary button height (mobile): 52px
- Primary button height (desktop): 44px
- Minimum touch target: 48px × 48px
- Default corner radius: 12px
- One primary action per screen: exactly one dominant CTA
Sweetspot Defaults
These defaults produce consistently readable, tappable, fast UI. Use them everywhere unless you have evidence to change them.
- Page background: #F6F7F9
- Content surface (cards / article area): #FFFFFF
- Primary text: #111111
- Secondary text: #4B5563
- Border: #E5E7EB
- Link color: #0047FF (always underlined)
- Primary CTA background: #0047FF
- Primary CTA text: #FFFFFF
- Container width (site): 1120px
- Reading measure (text column): 68ch
- Desktop page padding: 32px
- Mobile page padding: 16px
- Grid: 12 columns desktop, 4 columns mobile
- Gutter: 24px desktop, 16px mobile
- Base spacing unit: 8px (use 4px only for micro spacing)
- Body font size: 16px
- Body line-height: 1.55
- Primary button height (mobile): 52px
- Primary button height (desktop): 44px
- Minimum touch target: 48px × 48px
- Default corner radius: 12px
- One primary action per screen: exactly one dominant CTA