Floors for rooms that will outlast us.
This page is the Sonora design system rendered as tokens — colour, type, space, and rule — that every component is built on.
Palette
Every ratio was computed against WCAG 2.2, not estimated.
- Ivory Page ground Ink 13.41 : 1
- Bone Secondary surface Ink 12.19 : 1
- Limestone Hairlines, sunken Slate 5.12 : 1
- Stone Decorative on light On charcoal 9.42 : 1
- Clay Emphasis rule On charcoal 6.11 : 1
- Slate Muted text On ivory 6.51 : 1
- Walnut Warm accent On ivory 8.65 : 1
- Moss Trade, success On ivory 7.73 : 1
- Ink Body text On ivory 13.41 : 1
- Charcoal Headings, inverse Ivory on it 15.99 : 1
Type
Archivo for structure, Newsreader for voice. Fluid between 390 and 1440 pixels.
- Serif · 44–104
- Wide-plank white oak
- Serif · 34–68
- Wide-plank white oak
- Serif · 28–48
- Wide-plank white oak
- Sans · 24–34
- Wide-plank white oak
- Sans · 20–24
- Wide-plank white oak
- Serif · 18–20
- Wide-plank white oak
- Sans · 16–17
- Wide-plank white oak
- Sans · 12–13 · tracked
Inverse surfaces redefine tokens, not components.
One attribute flips the semantic layer. Walnut and moss are absent here because they fail contrast on charcoal.
Actions
Three variants, not five. Square corners. Tab through to see the focus ring.
Image
One proportional source ladder, cropped by its slot and guided by the attachment focal point.
Overlay
One native dialog at a time, with focus restored to the control that opened it.