Terafina
A rebuild that started at atomic elements and let the decisions scale. Completion rates improved 12%.
View project
hobbs.design v5 · foundations
Subatomic to system.
One source of truth. Raw values live in the subatomic layer, semantic roles alias them, components consume roles. Every spacing decision lands on an 8px grid, and every color pairing on this page passes WCAG AA. See the type scale
Typography
display · 80/88 · heavy · neue-haas-grotesk-display
Some of it is taste.
heading-xl · 56/64 · regular — editorial, calm, never aggressive
Systems that hold up under pressure.
heading-md · 24/32 · semibold
Accessibility is how I structure decisions.
body-lg · 24/32 · regular
Large body copy carries introductions and case study leads.
body · 16/24 · regular
Body copy at sixteen over twenty-four. Hierarchy is built through size and opacity, never through hue, and, with one display exception, never weight. Inline links are underlined, because color alone is not an affordance.
mono · JetBrains Mono — code and specimen labels
--text-size-display: var(--typography-font-size-80)
Color
One accent. The 500 red is display-scale only; body-size links use the 600,
which clears 4.5:1 on the page background. Muted text sits at 60%. The old
40% failed AA and survives only as disabled.
Space
Strict 8px foundation. No 4s, no 12s. If a gap isn't divisible by eight, it isn't in the system.
8 · 16 · 24 · 32 · 48 · 64 · 96 · 128
Grid
Atoms
Molecules & organisms
The project row is the first molecule. The nav at the top of this page and the footer below it are the first two organisms. Nav and project row carry their own component tokens; the footer runs on semantic tokens alone, because none of its values needed a component-level name.
Union Home Mortgage
A system built to be adopted, not interpreted. Automated tooling held every color pairing to WCAG contrast.
View project