Spacing & layout

The compact spacing scale, the canonical gap rules (which gap goes where), control / icon sizes, and page-layout tokens. Border radii derive from --radius (6px).

Scale

Compact scale — class numbers don't map to standard Tailwind pixels.

  • 00px
  • 12px
  • 26px
  • 310px
  • 414px
  • 518px
  • 620px
  • 724px
  • 828px
  • 936px
  • 1040px
  • 1144px
  • 1248px
  • 0.51px
  • 1.54px
  • 2.58px
  • 3.512px

Conventions — which gap goes where

Pick spacing by intent, not by eyeballing the scale. These are the canonical rules every component follows.

RuleValueClassUsed by
Control padding (horizontal)8 / 10 / 12pxpx-2 · px-2.5 · px-3Button, Select, Toggle, Input (sm / md / lg)
Internal gap (icon ↔ text)6pxgap-1.5Button, Badge, SelectTrigger
Group gap (sibling controls)4pxgap-1TabsList, ToggleGroup, Pagination
List-item gap (menu rows)2pxgap-0.5MenuItem, DropdownMenu
Form stack (Field)6pxgap-2Field — Label → control → description
Section rhythm (page)40pxspace-y-10Between top-level page sections

Control & icon sizes

Control heights

sm
md
lg

Icon sizes

sm
md
lg

Radius

sm
4px
DEFAULT
6px
md
8px
lg
10px
xl
12px
popover
12px
full
9999px
none
0px

Layout tokens

TokenValuePurpose
--header-height56pxPage header AND Sidebar / SidePanel header heights — keeps cross-column header strokes aligned.
--control-h-sm / md / lg28 / 32 / 36pxCanonical interactive-control heights. Inputs use min-h-[var(--control-h-md)].
--icon-sm / md / lg12 / 16 / 20pxIcon sizes — sm/md for control icons, lg for standalone emphasis icons.
--page-max-width48remStandard content column width (max-w-page).
--page-max-width-prose42remNarrower column for prose-heavy pages (max-w-page-prose).

Shadows

sm
DEFAULT
md
lg
xl
2xl
inner
overlay
input-inner