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.
Spacing Hierarchy
Each level roughly doubles the previous. This creates visual grouping through proximity — the Gestalt principle of proximity.
space-y-1
space-y-2
space-y-4
space-y-6
space-y-8 to space-y-10
Border Radius
Derived from a single --radius control point (0.625rem). All other values computed relative to it.
0
calc(var(--radius) - 4px)
calc(var(--radius) - 2px)
var(--radius)
calc(var(--radius) + 4px)
9999px
Shadow Elevation
6-tier shadow scale. In dark mode, shadow opacity decreases while surface lightness differentiation increases.
none
Flat — inset, sunken surfaces
xs
Subtle lift — cards at rest
sm
Low elevation — dropdowns
md
Medium — popovers, menus
lg
High — dialogs, command palette
xl
Highest — modals, overlays
Z-Index Layers
9-layer semantic stacking hierarchy. Parallels the shadow elevation scale.
Page content, editor surface
Sidebar, handles, badges
Dropdown menus, context menus
Sticky headers, floating toolbars
Popovers, tooltips, hover cards
Sheet/dialog backdrop scrim
Dialogs, sheets, drawers
Command palette
Toast notifications
Border Widths
Three active widths plus none. Medium (2px) aligns with the focus ring standard (WCAG 2.4.13).
none
0px — No border
thin
1px — Standard — cards, inputs, dividers
medium
2px — Emphasis — focus rings, diff indicators
thick
3px — Strong — forced-colors, drag targets
Readable Measures
Maximum line lengths for different contexts, ensuring comfortable reading.
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. The 75-character limit ensures approximately 12–15 words per line, which research shows is optimal for reading speed and comprehension.
Screenplay content uses a narrower 60-character measure, fixed by WGA standard. This matches approximately 55–60 characters per line at 12pt Courier.