Allie Paschal
Jun 17, 2024

--

I didn't include primitive values in the demo, but it doesn't mean you can't use them (even between modes like desktop/mobile).

Font size and line-height could come from the same primitive values. You could t-shirt size from smallest (XXS = 12px) to largest (XXL = 60px). Then, match the primitive variables to their semantic counterparts.

I would recommend setting up an Excel spreadsheet while doing this to make sure you don't miss any values between modes.

--

--

Allie Paschal
Allie Paschal

Written by Allie Paschal

UX/UI | Design Systems | Enterprise Products | Web Accessibility | Figma

No responses yet