Query & Quest · Foundation 1.0
A field guide to the design system.
The original brand colors stay intact. This system makes their use, typography, spacing, controls, and feedback states consistent and accessible.
Back to this week01 · Typography
A precise 1.25 scale
Sora carries headings; Manrope carries reading and interface text. Large text uses −0.02em tracking, body stays neutral, and small caps use +0.05em.
02 · Color
The existing palette, clarified
Forest is reserved for primary action, lake for information, and olive, mustard, and rust carry semantic emphasis. Text and controls target WCAG AA contrast in both themes.
Canvas
Primary page surface
Forest
Primary actions and strong headings
Olive
Success and supporting labels
Mustard
Highlights and warnings
Rust
Errors and editorial accents
Lake
Information and secondary emphasis
03 · Rhythm
Spacing and shape
Every gap and inset follows a 4px or 8px rhythm: 4, 8, 12, 16, 24, 32, 48, and 64px. Corners are limited to 2, 4, 8, 12, and 16px.
Spacing ladder
04 · Components
Controls with one visual language
Buttons use 32, 40, or 48px heights; inputs use 48px for touch comfort. Icons align to 16, 20, 24, or 32px.
05 · States
Clear feedback at every step
Loading, success, information, empty, and error treatments share the same radius, border, spacing, icon, and reading hierarchy.
Loading this week’s field notes…