Shape & depth
Corners, spacing, glass and shadow, each on a short scale. Round is one token; a corner is never a number someone made up.
Radius
Eleven steps. --mf-radius-full is the only way to write round.
xs
4px
sm
6px
md
8px
lg
10px
xl
12px
2xl
14px
3xl
16px
4xl
20px
5xl
24px
6xl
28px
full
round
Spacing
A 4px grid with the same names as Tailwind, so p-4 and --mf-space-4 are both 16px.
--mf-space-14px--mf-space-28px--mf-space-312px--mf-space-416px--mf-space-520px--mf-space-624px--mf-space-728px--mf-space-832px--mf-space-1040px--mf-space-1248px--mf-space-1664px--mf-space-0_52px--mf-space-1_56px--mf-space-2_510px--mf-space-3_514pxGlass
Floating chrome is frosted: the float surface at 62% (light) or 70% (dark), a 9px blur for a one-line pill and 18px for a panel that covers half the screen. A bright top edge gives it thickness.
Shadow
--mf-shadow-pill--mf-shadow-card--mf-shadow-card-hover--mf-shadow-knobShared measures
Sizes more than one surface must agree on, so the top bars line up and a field is the same height everywhere.
| Token | Value |
|---|---|
--mf-pill-top-h | 44px |
--mf-pill-bottom-h | 54px |
--mf-field-h | 48px |
--mf-field-h-compact | 40px |
--mf-bubble-radius | 18px |
--mf-bubble-tail | 4px |