Spacing and sizing
A 4px spacing scale, a handful of control heights and icon sizes, and two line weights. Use the tokens and every gap on a page agrees.
- CSS
css/tokens.css
01 — Spacing
The scale
A 4px base. Gaps inside a component use 1 to 4, gaps between components 5 to 7, and gaps between sections 8 to 10.
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8--space-9--space-10Stack and cluster
Spacing between elements comes from the parent, never from margins on the children. .stack spaces a column; .cluster spaces a row that wraps. Set the gap with --stack-gap or --cluster-gap.
.stack · --space-3
First paragraph.
Second paragraph.
.cluster · --space-2
02 — Control heights
Heights
Controls share five heights. On touch screens, buttons, tabs and menu items grow to 44px, and every control keeps a tap area of at least --hit-min.
--control-h-xs--control-h-sm--control-h--control-h-touch--control-h-lg--hit-min03 — Icon sizes
Icons
Icons are hairline outlines (--icon-stroke, 1.25) in the text color. 16px inside buttons and fields, 22px in the header and the floating button, 28px in drop zones and empty states.
--icon-xs--icon-sm--icon-md--icon-lg04 — Radius
Corners
Mostly square. Pills are for tags, badges and the round search. Content panels have their own shape: see Panels and surfaces.
--radius-0--radius-1--radius-2--radius-3--radius-pill--radius-round05 — Rules
Lines
A 1px hairline for edges and dividers. A 2px rule marks what’s selected or current: the open tab, the current page, a notice’s tone, a focused field.
--hairline--rule-strong06 — Density
Compact
Jewel’s spacing is editorial. For dashboards and dense tools, data-density="compact" on <html>, a region or one panel steps down panel padding, form gaps, buttons and table rows together. Touch screens keep 44px targets.
prod-east
- Pods
- 18
- Nodes
- 3
| Pod | State | CPU |
|---|---|---|
| api-7f9c | Running | 120m |
| worker-5b8d | Pending | 340m |
| web-66c9 | Running | 80m |
prod-east
- Pods
- 18
- Nodes
- 3
| Pod | State | CPU |
|---|---|---|
| api-7f9c | Running | 120m |
| worker-5b8d | Pending | 340m |
| web-66c9 | Running | 80m |
<html lang="en" data-theme="dark" data-density="compact">
What changes
| Token | Default | Compact |
|---|---|---|
--panel-padding | 24–48px | 16px |
--panel-stack-gap | 16px | 12px |
--density-gap | 24px | 12px |
--control-h | 40px | 32px |
--control-h-touch | 44px | 36px with a mouse, 44px on touch |
| Table rows | 44px | 32px, like .table--compact |
07 — Usage
Use it for
- The spacing tokens for every margin, padding and gap.
.stackand.clusterto space groups of elements.--control-h*for anything a person presses, and--hit-minfor its tap area.
Avoid
- Pixel values, or numbers between the steps of the scale.
- Margins on elements inside a
.stack. The stack sets the gap. - Controls shorter than 44px on touch screens.
08 — Tokens
| Token | Value | What it’s for |
|---|---|---|
--space-1 | Hairline gaps | |
--space-2 | Icon to label | |
--space-3 | Tight groups | |
--space-4 | Default gap | |
--space-5 | Between components | |
--space-6 | Between blocks | |
--space-7 | Between groups | |
--space-8 | Between sections | |
--space-9 | Large sections | |
--space-10 | Page breaks | |
--control-h-xs | Tags, chips | |
--control-h-sm | Touch tags, compact controls | |
--control-h | Buttons, tabs, menu items | |
--control-h-touch | Fields, and every control on touch screens | |
--control-h-lg | Floating button, chat composer | |
--density-gap | Between fields in a form | |
--hit-min | Minimum tap area | |
--icon-xs | Spinners, chevrons | |
--icon-sm | Icons in buttons and fields | |
--icon-md | Header, floating button | |
--icon-lg | Drop zone, empty states | |
--icon-stroke | Icon line weight | |
--radius-0 | Most things | |
--radius-1 | Small details | |
--radius-2 | Chips | |
--radius-3 | Larger cards | |
--radius-pill | Tags, badges | |
--radius-round | Dots, avatars | |
--hairline | Edges and dividers | |
--rule-strong | Selected and current |