SPACING-BORDERS

Spacing and border tokens live in app/css/theme.css.

Spacing

Token	Utility step	Size
Token`--spacing-1`	Utility step`1`	Size4px
Token`--spacing-2`	Utility step`2`	Size8px
Token`--spacing-3`	Utility step`3`	Size12px
Token`--spacing-4`	Utility step`4`	Size16px
Token`--spacing-6`	Utility step`6`	Size24px
Token`--spacing-8`	Utility step`8`	Size32px
Token`--spacing-12`	Utility step`12`	Size48px
Token`--spacing-16`	Utility step`16`	Size64px

SOURCE

<div style={{display:'grid',gap:'8px',width:'100%'}}>
    <span className="ds-space-bar" style={{width:'var(--spacing-1)'}} />
    <span className="ds-space-bar" style={{width:'var(--spacing-2)'}} />
    <span className="ds-space-bar" style={{width:'var(--spacing-3)'}} />
    <span className="ds-space-bar" style={{width:'var(--spacing-4)'}} />
    <span className="ds-space-bar" style={{width:'var(--spacing-6)'}} />
    <span className="ds-space-bar" style={{width:'var(--spacing-8)'}} />
    <span className="ds-space-bar" style={{width:'var(--spacing-12)'}} />
    <span className="ds-space-bar" style={{width:'var(--spacing-16)'}} />
  </div>

Golden-ratio spacing

Page rhythm steps through one set of tokens, each the previous times --phi (1.618). Gaps, padding, heading margins and the two-column splits on the guitar module, /links and the design system all read them.

Token	Value	Size
Token`--phi-space-1`	Value0.5rem	Size8px
Token`--phi-space-2`	Value`--phi-space-1` × `--phi`	Size13px
Token`--phi-space-3`	Value`--phi-space-2` × `--phi`	Size21px
Token`--phi-space-4`	Value`--phi-space-3` × `--phi`	Size34px
Token`--phi-text-1`	Value`--text-xs` × `--phi-root` (1.272)	Sizeabout 15px
Token`--phi-inv`	Value1 ÷ `--phi`	Size0.618
Token`--phi-pair-columns`	Value`minmax(0, 1.618fr) minmax(0, 1fr)`	Size1.618 : 1

SOURCE

<div style={{display:'grid',gap:'8px',width:'100%'}}>
    <span className="ds-space-bar" style={{width:'var(--phi-space-1)'}} />
    <span className="ds-space-bar" style={{width:'var(--phi-space-2)'}} />
    <span className="ds-space-bar" style={{width:'var(--phi-space-3)'}} />
    <span className="ds-space-bar" style={{width:'var(--phi-space-4)'}} />
  </div>

SOURCE

<div style={{display:'grid',gridTemplateColumns:'var(--phi-pair-columns)',gap:'var(--phi-space-2)',width:'100%'}}>
    <span className="ds-space-bar" style={{height:'var(--phi-space-3)'}} />
    <span className="ds-space-bar" style={{height:'var(--phi-space-3)',opacity:0.5}} />
  </div>

Whole-page type does not use phi: a 1.618 step from a 12px base jumps to 19px and then 31px, too coarse for dense monospace text. Only --phi-text-1 takes the half step, for stat values. Pairs split 1.618 : 1 from 1024px and stack below it; on a phone every level is one centered column.

Touch target

--spacing-target is 44px, the minimum width and height of every control. --spacing-target-compact is 28px for dense, non-primary controls.

Layout tokens

Responsive tokens live in the :root block of app/css/theme.css; every page container reads them. The header, every page body and the footer share one safe zone: --measure-page wide, centered, with --space-gutter on each side, so their content starts and ends on the same vertical lines at every width.

Token	Below 768px	From 768px
Token`--space-gutter`	Below 768px`clamp(16px, 4vw, 24px)`	From 768px`clamp(16px, 4vw, 24px)`
Token`--space-page-top`	Below 768px32px	From 768px48px
Token`--space-section`	Below 768px32px	From 768px48px
Token`--measure-page`	Below 768px1200px (the safe zone: header, every page, footer)	From 768px1200px
Token`--measure-read`	Below 768px72ch (line length of text blocks, never a container width)	From 768px72ch

Line heights: --leading-page-tight 1.1, --leading-page-snug 1.35, --leading-body 1.6. The page-scoped names keep Tailwind's built-in leading-tight and leading-snug scale intact.

Borders

Token	Value	Use
Token`--border-width`	Value1px	UseBorders and dividers
Token`--radius-none`	Value0	UseSharp controls
Token`--radius-control`	Value2px	UseMaximum control radius

The 2px ceiling is the control-radius token, not a claim that nothing round exists: the DAW mixer's 30px knobs are circular (rounded-full), and the traffic-light dots in WindowChrome are round dots rather than a radius token.

Focus

Keyboard focus uses :focus-visible with a 2px signal outline and a 2px offset. Never remove the outline without a replacement of equal contrast.