Scale Framework
A methodology for generating consistent, mathematically related type and spacing scales.
('Why scale matters', 'An inconsistent type or spacing scale is one of the most common sources of visual tension in interfaces. When sizes are chosen by eye rather than derived from a system, adjacent elements rarely feel right together even when each one looks acceptable in isolation. A mathematical scale removes these micro-tensions by ensuring every size is a deliberate step in a related sequence.')
('Choosing a ratio', 'A scale is defined by its base value and its ratio. Common ratios: 1.125 (Major Second) — tight, useful for dense UI; 1.25 (Major Third) — balanced, works well for most web products; 1.333 (Perfect Fourth) — expressive, common in editorial and marketing; 1.5 (Perfect Fifth) — dramatic, use only when display headings are genuinely intended to dominate. The Themex System Builder generates a scale from any base/ratio combination.')
('Type scale vs spacing scale', "Type scales and spacing scales can share a ratio but should not share a base. A type scale's base is your body text size (typically 16px). A spacing scale's base should be your grid unit (typically 4px or 8px). Keeping them separate prevents the common problem of spacing values that accidentally match type sizes and create ambiguous visual relationships.")
('Applying a scale to a codebase', 'Export your scale as CSS custom properties: --font-size-xs through --font-size-3xl for type; --sp-1 through --sp-16 for spacing. Never use raw pixel or rem values in component styles — reference only the scale tokens. This constraint ensures that any future scale adjustment propagates automatically through the entire system.')
Field Notes in your inbox
Practical observations on design systems, component architecture, and UX methodology. No promotional content. Published when there is something worth saying.