Foundations
Shape and borders
Soft, rounded shapes. Controls are pills; surfaces nest their radii so inner media never fights the outer corner.
Corner radius
sm · 10px
md · 14px
lg · 18px
xl · 22px
2xl · 28px
full · 9999px
| Buttons and inputs | Pill |
|---|---|
| Cards | 24px, with nested media at 16px |
| Collection card | 16px shell, 12px cover |
| Dialog and menu | Menu 12px |
| Accordion | 12px |
| Tag shape | 6px (Badge, Chip) |
Border weight
Borders are 1px. Highlight strokes on filled and outlined controls use a gradient to read as light and shadow edges.
Interactive surface tokens
| sheen-opacity | 15% |
|---|---|
| hover-overlay-opacity | 10% |
| filled-stroke-opacity | 20% |
| outlined-fill-opacity | 20% |
| outlined-stroke-opacity | 20% |
Unit warning. In the Figma file the pill radii are stored as float values labelled as percentages: pill-lg 4000%, pill-md 2000%, pill-sm 1400%, border weight 100%. They are used as pixels (40, 20, 14, 1).