Semantic spacing
The spacing, radius and border tokens.
Space
Every padding, margin and gap comes from the spacing scale: nine steps from 2 to 32 px on a 4 px base. The number divided by 100 is the count of 4 px units, so space.300 is 12 px.
- Parts of a detail panel sit 12 px apart (
space.300), and blocks of a pane 24 px apart (space.600). - Panels sit 12 px from the screen edge and from each other (
size.panel-gap, on Layout).
space.0502 pxspace.1004 pxspace.1506 pxspace.2008 pxspace.30012 pxspace.40016 pxspace.50020 pxspace.60024 pxspace.80032 px
Radius
Radius grows with the size of the thing it rounds.
| Token | Value |
|---|---|
radius.xsSmall marks and ticks | 4 px |
radius.smCorners of line badges | 6 px |
radius.mdButtons, inputs, icon buttons, segments | 8 px |
radius.lgCards and inset boxes | 12 px |
radius.xlFloating panels, sheets and dialogs | 16 px |
radius.fullPills: chips, tags, counts | 9999 px |
Border widths
Two widths, numbered like the spacing scale: border.width.025 is a quarter of 4 px, border.width.050 half. Hairlines and the edges of inputs, cards and panels take the thin one. The focus ring, the selected state of a control and the line of a chart take the thick one.
| Token | Value |
|---|---|
border.width.025Hairlines, borders of inputs, cards and panels | 1 px |
border.width.050The focus ring, the selected state of a control, the line of a chart | 2 px |
Focus ring
The ring is a solid outline, focus.width wide and focus.offset from the element, in color.border.focus. perron.css draws it on :focus-visible for every element; a component that draws its own ring uses the same three tokens.
| Token | Value |
|---|---|
focus.widthWidth of the focus ring | 2 pxborder.width.050 |
focus.offsetGap between the focused element and its ring | 2 px |