Shape
Five questions every design system answers about shape. These are Brand expressive’s answers, and each one points back to the reasons that chose it.
View all 6 shape tokens ↓The reasons this scheme answers from
- R1BrandBold, loud
- R2Business and productSells and converts, one
Question 1
Which shape roles does it need?
- Controls and containers (chosen)
- Controls, badges and containers
Why Brand expressive picks it: Pills everywhere; badges share the control corner.
becauseR1
Question 2
How many corner sizes exist?
- Two (chosen)
- Three
Why Brand expressive picks it: Pill controls and large container corners.
becauseQ1
Question 3
How are corners set?
- Fixed for the product (chosen)
- Set by each brand
Why Brand expressive 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
- Pill (chosen)
Why Brand expressive picks it: Pill controls feel playful.
becauseR1
- control
- control
- → radius.999
- badge
- badge
- → radius.999
- container
- container
- → radius.24
- 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
- Buttons and badges (chosen)
Why Brand expressive picks it: Pill buttons are the signature shape.
becauseR1
- 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 (pill). Not: Sharp corners. Pills feel playful.
- Shape of a status badgeUse: radius.badge (pill). Not: A rectangle. Pills match the controls.
All shape tokens
6 tokens · each decision and the primitive it points to
- radius · 3
radius.9999999pxradius.241.5rem · 24pxradius.full9999px - border-width · 2
border-width.22pxborder-width.33px - Decisions · 6
radius.control{radius.999}radius.badge{radius.999}radius.container{radius.24}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 Brand expressive: pill. Pill controls feel playful. Pill buttons are the signature shape.