Spacing & Layout

Spatial tokens that create consistent rhythm, depth hierarchy, and stacking order across all components and pages.

Spacing Scale

13-step scale based on a 4px grid. Used for padding, margin, gap, and all spatial relationships.

0
0px
0.5
2px
1
4px
1.5
6px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px

Spacing Hierarchy

Each level doubles the previous. This creates visual grouping through proximity.

Label \u2194 Value: space-y-1 (4px)
Items within group: space-y-2 (8px)
Groups within section: space-y-4 (16px)
Content sections: space-y-6 (24px)
Major page sections: space-y-8 to space-y-10 (32\u201340px)

Border Radius

Derived from a single --radius control point (0.625rem). All other values computed relative to it.

none0
smcalc(var(--radius) - 4px)
mdcalc(var(--radius) - 2px)
lgvar(--radius)
xlcalc(var(--radius) + 4px)
full9999px

Shadow Elevation

6-tier shadow scale. In dark mode, shadow opacity decreases while surface lightness differentiation increases (Atlassian elevation model).

none

Flat — inset, sunken surfaces

xs

Subtle lift — cards on hover

sm

Low elevation — dropdowns

md

Medium — popovers, menus

lg

High — dialogs, command palette

xl

Highest — modals, full-screen overlays

Z-Index Layers

9-layer semantic stacking hierarchy. Parallels the shadow elevation scale in the DOM stacking dimension.

0
basez-base

Page content, editor surface

10
raisedz-raised

Sidebar, resizable handles, badges

20
dropdownz-dropdown

Dropdown menus, context menus

30
stickyz-sticky

Sticky headers, floating toolbars

40
popoverz-popover

Popovers, tooltips, hover cards

50
overlayz-overlay

Sheet/dialog backdrop scrim

60
modalz-modal

Dialogs, sheets, drawers

70
command-palettez-command-palette

Command palette

80
notificationz-notification

Toast notifications

Border Widths

Three active widths plus none. Medium (2px) aligns with the focus ring standard (WCAG 2.4.13).

none

0px \u2014 No border

thin

1px \u2014 Standard — cards, inputs, dividers

medium

2px \u2014 Emphasis — focus rings, diff indicators

thick

3px \u2014 Strong — forced-colors, drag targets

Readable Measures

Maximum line lengths for different contexts, ensuring comfortable reading.

UI Text Max75ch

This paragraph demonstrates the maximum measure for UI text. Skill results, version history descriptions, and any prose content outside the screenplay editor should not exceed this width to maintain comfortable reading. The 75-character limit ensures approximately 12\u201315 words per line, which research shows is optimal for reading speed and comprehension.

Screenplay Measure60ch

Screenplay content uses a narrower 60-character measure, fixed by WGA standard. This matches approximately 55\u201360 characters per line at 12pt Courier.