Foundations

Spacing & Layout

Space

Large steps, mostly for section padding.

--space-3xsclamp(0.3rem, calc(0.6429vw + 0.1714rem), 0.75rem)4.8 → 12px

--space-2xsclamp(0.4rem, calc(0.8571vw + 0.2286rem), 1rem)6.4 → 16px

--space-xsclamp(0.5rem, calc(1.0714vw + 0.2857rem), 1.25rem)8 → 20px

--space-smclamp(1rem, calc(2.1429vw + 0.5714rem), 2.5rem)16 → 40px

--space-mdclamp(2rem, calc(4.2857vw + 1.1429rem), 5rem)32 → 80px

--space-lgclamp(3rem, calc(6.4286vw + 1.7143rem), 7.5rem)48 → 120px

--space-xlclamp(4rem, calc(8.5714vw + 2.2857rem), 10rem)64 → 160px

--space-2xlclamp(5rem, calc(10.7143vw + 2.8571rem), 12.5rem)80 → 200px

--space-3xlclamp(6rem, calc(12.8571vw + 3.4286rem), 15rem)96 → 240px

--space-none0px0px

Size

Gaps, icons and component sizes.

--size-5xsclamp(0.125rem, calc(0.1786vw + 0.0893rem), 0.25rem)2 → 4px

--size-4xsclamp(0.1875rem, calc(0.2679vw + 0.1339rem), 0.375rem)3 → 6px

--size-3xsclamp(0.25rem, calc(0.3571vw + 0.1786rem), 0.5rem)4 → 8px

--size-2xsclamp(0.625rem, calc(0.1786vw + 0.5893rem), 0.75rem)10 → 12px

--size-xsclamp(0.75rem, calc(0.1786vw + 0.7143rem), 0.875rem)12 → 14px

--size-smclamp(0.875rem, calc(0.1786vw + 0.8393rem), 1rem)14 → 16px

--size-mdclamp(1rem, calc(0.3571vw + 0.9286rem), 1.25rem)16 → 20px

--size-lgclamp(1.25rem, calc(0.3571vw + 1.1786rem), 1.5rem)20 → 24px

--size-xlclamp(1.5rem, calc(0.7143vw + 1.3571rem), 2rem)24 → 32px

--size-2xlclamp(2rem, calc(0.7143vw + 1.8571rem), 2.5rem)32 → 40px

--size-3xlclamp(2.5rem, calc(0.7143vw + 2.3571rem), 3rem)40 → 48px

--size-4xlclamp(3rem, calc(1.4286vw + 2.7143rem), 4rem)48 → 64px

--size-5xlclamp(3.5rem, calc(1.4286vw + 3.2143rem), 4.5rem)56 → 72px

--size-displayclamp(4.5rem, calc(2.5vw + 4rem), 6.25rem)72 → 100px

--size-divider1px1px

Layout Widths

Content widths, from narrow text to the full site.

--layout-width-32020rem320px

--layout-width-48030rem480px

--layout-width-64040rem640px

--layout-width-76848rem768px

--layout-width-96060rem960px

--layout-width-128080rem1280px

--layout-width-144090rem1440px

--layout-width-1600100rem1600px

--layout-width-1920120rem1920px

Aspect Ratio

Width-to-height shapes for images and media.

.aspect-squareaspect-ratio: 1 / 1;

.aspect-portraitaspect-ratio: 3 / 4;

.aspect-photo-portraitaspect-ratio: 2 / 3;

.aspect-landscapeaspect-ratio: 4 / 3;

.aspect-photoaspect-ratio: 3 / 2;

.aspect-videoaspect-ratio: 16 / 9;

.aspect-wideaspect-ratio: 21 / 9;

.aspect-autoaspect-ratio: auto;