Shape
Five questions every design system answers about shape. These are Accessible first’s answers, and each one points back to the reasons that chose it.
View all 6 shape tokens ↓The reasons this scheme answers from
- R1Human factorsLow effort to understand, they see it fresh each time
- R2Business and productServes the public, one
- R3BrandCalm and clear, quiet
- R4Content and dataForms and tasks, one idea at a time
Question 1
Which shape roles does it need?
- Controls and containers
- Controls, badges and containers (chosen)
Why Accessible first picks it: Badges keep a clear rectangle.
becauseR1
Question 2
How many corner sizes exist?
- Two
- Three (chosen)
Why Accessible first picks it: Control, badge and container corners differ.
becauseQ1
Question 3
How are corners set?
- Fixed for the product (chosen)
- Set by each brand
Why Accessible first picks it: One brand, one set of corners.
becauseR2
- Fixed for the product
- from radius
- from border-width
Decisions point at primitives, so the rule lives in one place.
Question 4
What should control corners say?
- Sharp
- Slightly rounded (chosen)
- Rounded
- Pill
Why Accessible first picks it: Clear, slightly rounded controls.
becauseR3
- control
- control
- → radius.6
- badge
- badge
- → radius.4
- container
- container
- → radius.8
- round
- round
- → radius.full
- default
- default
- → border-width.2
- focus
- focus
- → border-width.3
Question 5
Where does shape show most?
- Controls in dense rows
- Controls and cards (chosen)
- Buttons and badges
Why Accessible first picks it: Corners show on controls and step cards.
becauseR4
- button · 1 keys
- input · 1 keys
- control · 1 keys
- badge · 1 keys
- card · 1 keys
- overlay · 1 keys
When to use
- Corners of buttons and inputsUse: radius.control. Not: A pill. Clear rectangles read as fields and buttons.
- Shape of a status badgeUse: radius.badge (rectangle). Not: A pill. Clear shapes with a word inside.
All shape tokens
6 tokens · each decision and the primitive it points to
- radius · 4
radius.60.375rem · 6pxradius.40.25rem · 4pxradius.80.5rem · 8pxradius.full9999px - border-width · 2
border-width.22pxborder-width.33px - Decisions · 6
radius.control{radius.6}radius.badge{radius.4}radius.container{radius.8}radius.round{radius.full}border-width.default{border-width.2}border-width.focus{border-width.3}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Shape in Accessible first: slightly rounded. Clear, slightly rounded controls. Corners show on controls and step cards.