Shape
Five questions every design system answers about shape. These are Dense data’s answers, and each one points back to the reasons that chose it.
View all 6 shape tokens ↓The reasons this scheme answers from
- R1Tasks and flowsScan and compare, constantly
- R2Business and productRuns daily operations, one
- R3BrandPrecise, quiet
- R4Content and dataNumbers and records, a lot
Question 1
Which shape roles does it need?
- Controls and containers
- Controls, badges and containers (chosen)
Why Dense data picks it: Badges sit in columns and need their own corner.
becauseR1
Question 2
How many corner sizes exist?
- Two
- Three (chosen)
Why Dense data 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 Dense data picks it: One brand, one fixed 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 Dense data picks it: Small corners keep dense rows straight.
becauseR3
- control
- control
- → radius.2
- badge
- badge
- → radius.0
- container
- container
- → radius.4
- 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 (chosen)
- Controls and cards
- Buttons and badges
Why Dense data picks it: Corners show most on controls in dense rows.
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: radius.round. Small corners keep dense rows straight.
- Shape of a status badgeUse: radius.badge (rectangle). Not: A pill. Rectangles line up in a column.
All shape tokens
6 tokens · each decision and the primitive it points to
- radius · 4
radius.20.125rem · 2pxradius.00rem · 0pxradius.40.25rem · 4pxradius.full9999px - border-width · 2
border-width.11pxborder-width.22px - Decisions · 6
radius.control{radius.2}radius.badge{radius.0}radius.container{radius.4}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 Dense data: slightly rounded. Small corners keep dense rows straight. Corners show most on controls in dense rows.