page.radius-none | 0 | | — |
page.radius-default | calc(var(--spacing) * 4) | 16px @4px. Page radius — formula-based, scales with density. | spacing×4 layout radius |
page.margin-large | calc(var(--spacing) * 6) | 24px. | base×1.5 spacing×6 |
page.margin-default | calc(var(--spacing) * 4) | 16px. Apple HIG iPhone margin (16pt). | tier-basespacing×4 |
page.margin-small | calc(var(--spacing) * 3) | 12px. | base×0.75 spacing×3 |
page.padding-large | calc(var(--spacing) * 6) | 24px. | base×1.5 spacing×6 |
page.padding-default | calc(var(--spacing) * 4) | 16px. Apple HIG (16pt). | tier-basespacing×4 |
page.padding-small | calc(var(--spacing) * 2) | 8px. | base×0.5 spacing×2 |
page.stack-gap-xlarge | calc(var(--spacing) * 12) | 48px. Hero/major section breaks. | base×3.0 spacing×12 2× rule |
page.stack-gap-large | calc(var(--spacing) * 8) | 32px. Page-level hierarchy. | base×2.0 spacing×8 2× rule |
page.stack-gap-default | calc(var(--spacing) * 6) | 24px. Major content block gap. | base×1.5 spacing×6 |
page.stack-gap-small | calc(var(--spacing) * 4) | 16px. | tier-basespacing×4 2× rule |
page.inline-gap-default | calc(var(--spacing) * 3) | 12px. | base×0.75 spacing×3 |
page.inline-gap-small | calc(var(--spacing) * 2) | 8px. | base×0.5 spacing×2 |
page.grid-row-gap | calc(var(--spacing) * 4) | 16px. | tier-basespacing×4 |
page.grid-column-gap | calc(var(--spacing) * 3) | 12px. | base×0.75 spacing×3 |
section.radius-default | calc(var(--spacing) * 4) | 16px @4px. Section + stat-card radius — formula-based. | spacing×4 concentric |
section.radius-small | calc(var(--spacing) * 3) | 12px @4px — formula-based. | spacing×3 |
section.margin-default | calc(var(--spacing) * 4) | 16px. | tier-basespacing×4 |
section.margin-large | calc(var(--spacing) * 5) | 20px. | base×1.25 spacing×5 |
section.padding-large | calc(var(--spacing) * 5) | 20px. | base×1.25 spacing×5 |
section.padding-default | calc(var(--spacing) * 4) | 16px. Section/stat-card internal padding. Apple HIG 16pt. | tier-basespacing×4 |
section.padding-small | calc(var(--spacing) * 2) | 8px. | base×0.5 spacing×2 |
section.stack-gap-large | calc(var(--spacing) * 5) | 20px. | base×1.25 spacing×5 |
section.stack-gap-default | calc(var(--spacing) * 4) | 16px. | tier-basespacing×4 2× rule |
section.stack-gap-small | calc(var(--spacing) * 2) | 8px. | base×0.5 spacing×2 |
section.inline-gap-default | calc(var(--spacing) * 4) | 16px. Unified = stack-gap-default. | tier-basespacing×4 unified-gap |
section.inline-gap-small | calc(var(--spacing) * 2) | 8px. | base×0.5 spacing×2 |
section.grid-row-gap | calc(var(--spacing) * 4) | 16px. | tier-basespacing×4 |
section.grid-column-gap | calc(var(--spacing) * 3) | 12px. | base×0.75 spacing×3 |
group.radius-default | calc(var(--spacing) * 3) | 12px @4px. Card-within-section radius — formula-based. | spacing×3 concentric |
group.radius-small | calc(var(--spacing) * 2) | 8px @4px — formula-based. | spacing×2 |
group.margin-default | calc(var(--spacing) * 3) | 12px. | tier-basespacing×3 |
group.margin-large | calc(var(--spacing) * 4) | 16px. | base×1.33 spacing×4 |
group.padding-large | calc(var(--spacing) * 6) | 24px. | base×2.0 spacing×6 |
group.padding-default | calc(var(--spacing) * 4) | 16px. Card internal padding. Apple HIG (16pt). | base×1.33 spacing×4 |
group.padding-small | calc(var(--spacing) * 3) | 12px. | tier-basespacing×3 |
group.stack-gap-large | calc(var(--spacing) * 4) | 16px. | base×1.33 spacing×4 2× rule |
group.stack-gap-default | calc(var(--spacing) * 3) | 12px. Card internal content gap. | tier-basespacing×3 |
group.stack-gap-small | calc(var(--spacing) * 2) | 8px. | base×0.67 spacing×2 2× rule |
group.inline-gap-default | calc(var(--spacing) * 3) | 12px. Unified = stack-gap-default. | tier-basespacing×3 unified-gap |
group.inline-gap-small | var(--spacing) | 4px. | base×0.33 spacing×1 |
group.grid-row-gap | calc(var(--spacing) * 3) | 12px. | tier-basespacing×3 |
group.grid-column-gap | calc(var(--spacing) * 3) | 12px. Unified = grid-row-gap. | tier-basespacing×3 unified-gap |
comp.radius | calc(var(--spacing) * 2) | 8px @4px. Button/input radius — formula-based. | spacing×2 |
comp.radius-capsule | 9999px | Capsule/chip shape. iOS 26 primary button. | capsule9999px |
comp.radius-small | calc(var(--spacing) * 2) | 8px @4px. Checkbox/tag/chip radius — rounded square, not circular. | spacing×2 |
comp.margin-default | calc(var(--spacing) * 2) | 8px. | tier-basespacing×2 |
comp.padding-large | calc(var(--spacing) * 4) | 16px. | base×2.0 spacing×4 |
comp.padding-default | calc(var(--spacing) * 4) | 16px. Apple HIG 16pt / MD3 16dp. | base×2.0 spacing×4 |
comp.padding-small | calc(var(--spacing) * 2) | 8px. | tier-basespacing×2 2× rule |
comp.padding-xsmall | var(--spacing) | 4px. Absolute floor. | base×0.5 spacing×1 |
comp.stack-gap-default | calc(var(--spacing) * 2) | 8px. Form field gap. | tier-basespacing×2 |
comp.stack-gap-small | var(--spacing) | 4px. Label/hint gap. | base×0.5 spacing×1 |
comp.inline-gap-default | calc(var(--spacing) * 2) | 8px. Button group gap. | tier-basespacing×2 |
comp.inline-gap-small | var(--spacing) | 4px. Icon+text gap. | base×0.5 spacing×1 |
comp.height-default | 44px | Standard interactive height. | fixedApple HIG 44pt |
comp.height-large | 48px | Large interactive height. | fixedMD3 48dp |
comp.height-small | 36px | Compact interactive height. | fixedMD3 density-1 |
interaction.touch-target-min | 44px | Min touch target. | fixedApple HIG 44pt WCAG 2.5.8 |
interaction.target-spacing | calc(var(--spacing) * 2) | 8px. Min spacing between interactive elements. | spacing×2 Apple+MD3 |