Tokens
Spacing, radius, type
Everything measurable is keyed by pixels. A design says 16 and the code says 16, with nothing to translate.
Spacing
Keyed by pixels. A design says 16 and the code says 16.
spacing[0]0pxspacing[1]1pxspacing[2]2pxspacing[4]4pxspacing[6]6pxspacing[8]8pxspacing[10]10pxspacing[12]12pxspacing[14]14pxspacing[16]16pxspacing[18]18pxspacing[20]20pxspacing[24]24pxspacing[28]28pxspacing[32]32pxspacing[36]36pxspacing[40]40pxspacing[44]44pxspacing[48]48pxspacing[56]56pxspacing[64]64px0 is a token for the same reason the rest are. Without it padding: 0 has to be a raw value, which is exactly the escape hatch a scale exists to close.Radius
Also pixels, plus two names that are not measurements: half is the roundest a square can be at any size, full is a pill at any height. These swatches are pinned to the medium scale, so they keep showing the values the scale defines while the radius dial moves everything else.
borderRadius[0]0pxborderRadius[2]2pxborderRadius[4]4pxborderRadius[6]6pxborderRadius[8]8pxborderRadius[10]10pxborderRadius[12]12pxborderRadius[16]16pxborderRadius[24]24pxborderRadius[36]36pxborderRadius.half50%borderRadius.full999pxType
Fourteen sizes and four weights, keyed the same way. Text and Heading pair them with line heights.
fontSize[12]12pxDesign systemfontSize[13]13pxDesign systemfontSize[14]14pxDesign systemfontSize[15]15pxDesign systemfontSize[16]16pxDesign systemfontSize[17]17pxDesign systemfontSize[18]18pxDesign systemfontSize[20]20pxDesign systemfontSize[22]22pxDesign systemfontSize[24]24pxDesign systemfontSize[28]28pxDesign systemfontSize[34]34pxDesign systemfontSize[40]40pxDesign systemfontSize[60]60pxDesign systemFont family
Three faces. The token names them; loading them is the application's job.
fontFamily.mainDesign systemDesign System
0123
fontFamily.serifDesign systemDesign System
0123
fontFamily.monoDesign systemDesign System
0123
fontFamily.main // 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-seriffontFamily.serif // 'Pretendard Serif', 'Nanum Myeongjo', 'Apple SD Gothic Neo', Georgia, 'Times New Roman', seriffontFamily.mono // 'SFMono-Regular', ui-monospace, 'SF Mono', Menlo, Consolas, monospaceThe token names the face; fetching it is the application's job, the same way Tailwind names
font-sans and leaves the @font-face to you. This site loads Pretendard from a CDN in its own layout.tsx.