Styles

Spacing & shape

The 4px spacing scale, layout measures, corner radii, hairline borders, and shadow tokens.

Spacing

4px base step

space-14px

space-28px

space-312px

space-416px

space-624px

space-832px

space-1248px

space-1664px

space-32128px

Layout measures

tokens/spacing.css

Token	Value	Usage
--space-section	8rem	Vertical rhythm between page bands
--page-inset	clamp(1rem, 5vw, 2.25rem)	Fluid page gutter
--section-pad-y	clamp(4.5rem, 14vw, 8rem)	Band padding
--measure-prose	900px	Article copy max width
--measure-wide	1200px	Article figures / grids
--measure-content	1400px	General content cap

Radii

tokens/radii.css

2px

radius-xsmedia frames

8px

radius-smcontrols

12px

radius-mdsection cards

16px

radius-lgglass header, cards

18px

radius-xlarticle cards

9999px

radius-pillchips, CTAs

Borders, shadows & glass

Token	Value	Usage
--border-hairline	1px	Every border is a hairline
--border-glass	1px solid rgba(255,255,255,0.1)	Glass surfaces over imagery
--shadow-header	0 8px 40px rgba(0,0,0,0.35)	Floating glass header
--shadow-card-hover	0 28px 70px rgba(0,0,0,0.35)	Lifted cards
--shadow-inverted-card	0 0 0 1px rgba(0,0,0,0.04), 0 16px 44px rgba(0,0,0,0.1)	White cards on dark
--blur-glass	blur(16px) saturate(150%)	Header backdrop filter

css — shape recipe

/* Cards are roomy, controls are small, chips are pills. */
.card   { border-radius: var(--radius-lg); }   /* 16px */
.control{ border-radius: var(--radius-sm); }   /* 8px  */
.chip   { border-radius: var(--radius-pill); } /* 9999px */

/* Lift is felt through the border brightening, not heavy shadow. */
.card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-card-hover);
}