Spacing and shape
Comb is built on a 4px grid. Space, corners and shadows come in a few fixed steps, each named for where it goes. Values in these tables are read from the live tokens.
Spacing
Every margin, padding and gap is a space token. Small steps sit inside controls, middle steps between items, large steps between parts of a page.
| Example | Token | Value | Usage |
|---|---|---|---|
Space 1--space-1 | Reading | Icon to text. | |
Space 2--space-2 | Reading | Inside compact controls; between a button pair. | |
Space 3--space-3 | Reading | Row padding and field gaps. | |
Space 4--space-4 | Reading | Button padding and small plates. | |
Space 5--space-5 | Reading | Plate padding and space below a field. | |
Space 6--space-6 | Reading | The page gutter; sections in a side panel. | |
Space 8--space-8 | Reading | Between groups on a page. | |
Space 10--space-10 | Reading | Between page sections. | |
Space 12--space-12 | Reading | Section block padding. | |
Space 16--space-16 | Reading | Major separators. | |
Space 20--space-20 | Reading | Top-level page padding. |
Radius
A corner says what kind of thing a shape is. These role tokens are in place; console call sites still use the older 8, 12 and 16px radii and move over in a later step.
| Example | Token | Value | Usage |
|---|---|---|---|
Radius XS--comb-radius-xs | Reading | Badges and checkboxes. | |
Radius S--comb-radius-sm | Reading | Lozenges, tags and tooltips. | |
Radius M--comb-radius-md | Reading | Buttons, inputs and nav items. | |
Radius L--comb-radius-lg | Reading | Cards, menus and popovers. | |
Radius XL--comb-radius-xl | Reading | Modals, panels and tables. | |
Radius full--comb-radius-full | Reading | Avatars and pills. |
Elevation
Four surfaces, each paired with its shadow. Shadows are warm umber, never neutral grey, and they mark state rather than decorate.
| Example | Token | Value | Usage |
|---|---|---|---|
Raised--shadow-sm | Reading | Cards and the queue list plate at rest; the primary button. | |
Hover--shadow-md | Reading | A raised plate or primary button under the pointer. | |
Overlay--shadow-lg | Reading | Menus, the command palette and dialogs. | |
Modal--shadow-xl | Reading | Full overlays on the public site. |
kb-plate--sunkenDesk rail and board columns. No shadow.kb-plateA plate on the ground with a warm hairline.kb-plate--raisedThe queue list and cards. One focal point per view.Focus ring
One ring for every control: 2px of gold, drawn 2px outside the element so it never covers the label, following the control's corners. It shows for keyboard focus, not a mouse click.
.kb-btn:focus-visible {
outline: 2px solid var(--comb-focus-color);
outline-offset: 2px;
}Using spacing and shape
- Pick a space token by band: 4 to 8px inside a control, 12 to 24px between items, 32 to 80px between parts of a page.
- Keep nested plates concentric: the inner radius is the outer radius minus the padding between them. A 16px tray with 4px padding holds a 12px core.
- Never put a plate inside a plate. Use a hairline or space to divide a plate instead.
- Use a shadow to show state: plates rest on the raised shadow and lift to hover. A flat card is a plate with a hairline.
- Never remove the focus ring without drawing a replacement.