Shape
Five questions every design system answers about shape. These are Multi-brand’s answers, and each one points back to the reasons that chose it.
View all 6 shape tokens ↓The reasons this scheme answers from
- R1Business and productSells and converts, many
- R2BrandNeutral and adaptable, present
Question 1
Which shape roles does it need?
- Controls and containers
- Controls, badges and containers (chosen)
Why Multi-brand picks it: Each brand sets three corners.
becauseR1
Question 2
How many corner sizes exist?
- Two
- Three (chosen)
Why Multi-brand picks it: Control, badge and container.
becauseQ1
Question 3
How are corners set?
- Fixed for the product
- Set by each brand (chosen)
Why Multi-brand picks it: Each brand sets its own corners.
becauseR1
- Set by each brand
- 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 Multi-brand picks it: Rounded by default; each brand sets its own corner.
becauseR1
- control
- control
- → radius.4
- badge
- badge
- → radius.4
- container
- container
- → radius.8
- 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
- Buttons and badges (chosen)
Why Multi-brand picks it: Corners are the most visible brand difference.
becauseR2
- 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 (set by the brand). Not: A hard-coded radius. Each brand sets its own corner through the theme.
- Shape of a status badgeUse: radius.badge (set by the brand). Not: A hard-coded shape. The brand sets the badge shape.
All shape tokens
6 tokens · each decision and the primitive it points to
- radius · 3
radius.40.25rem · 4pxradius.80.5rem · 8pxradius.full9999px - border-width · 2
border-width.11pxborder-width.22px - Decisions · 6
radius.control{radius.4}radius.badge{radius.4}radius.container{radius.8}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 Multi-brand: rounded. Rounded by default; each brand sets its own corner. Corners are the most visible brand difference.