Shape
Five questions every design system answers about shape. These are Content 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
- R1BrandWarm, present
- R2Business and productInforms and publishes, one
- R3Content and dataLong-form text, one idea at a time
Question 1
Which shape roles does it need?
- Controls and containers
- Controls, badges and containers (chosen)
Why Content first picks it: Pill badges differ from controls.
becauseR1
Question 2
How many corner sizes exist?
- Two
- Three (chosen)
Why Content 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 Content 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
- Rounded (chosen)
- Pill
Why Content first picks it: Rounded corners feel friendly.
becauseR1
- control
- control
- → radius.8
- badge
- badge
- → radius.999
- container
- container
- → radius.12
- round
- round
- → radius.full
- default
- default
- → border-width.1
- focus
- focus
- → border-width.2
Question 5
Where does shape show most?
- Controls in dense rows
- Controls and cards (chosen)
- Buttons and badges
Why Content first picks it: Corners show on buttons and article cards.
becauseR3
- 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 (rounded). Not: Sharp corners. Rounded corners feel friendly.
- Shape of a status badgeUse: radius.badge (pill). Not: A rectangle. Pills sit softly next to text.
All shape tokens
6 tokens · each decision and the primitive it points to
- radius · 4
radius.80.5rem · 8pxradius.9999999pxradius.120.75rem · 12pxradius.full9999px - border-width · 2
border-width.11pxborder-width.22px - Decisions · 6
radius.control{radius.8}radius.badge{radius.999}radius.container{radius.12}radius.round{radius.full}border-width.default{border-width.1}border-width.focus{border-width.2}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Shape in Content first: rounded. Rounded corners feel friendly. Corners show on buttons and article cards.