Portfolio (Clarest Health, Spacing & Grid)

Michael Gregoire

Spacing & Grid

Every gap and every column is a named token. Nine spacing steps — xxxs through xxxl carry the rhythm. A grid system, named percentages plus fractional divisions like 3rd and 6th, carry horizontal layout, composing into rows without arithmetic. Engineers pick names, not pixels or percentages. That is how the interface stays consistent screen to screen, feature to feature.

Spacing

xxxs

size: 0.125rem

xxs

size: 0.25rem

xs

size: 0.5rem

s

size: 0.75rem

m

size: 1rem

l

size: 1.5rem

xl

size: 2rem

xxl

size: 3rem

xxxl

size: 3rem

Grid

width: undefined
w: 10
width: 90
width: 20
width: 80
width: 25
width: 75
width: 30
width: 70
width: 40
width: 60
width: 50
width: 50
width: 3rd
width: 3rd
width: 6th
width: 6th