Skip to content
Acuity Experience Design
Menu

Tokens

Utilities

741 single-purpose classes generated from the tokens, in the beam.utilities layer. Each sets one property to one token.

Utilities are the CUBE “U”: apply them after compositions, for one-off adjustments — a colour, a radius, a bit of padding. If you find yourself stacking many on one element, it probably wants to be a block. Spacing utilities use the raw spacing-* scale; prefer composition data-space / data-gap for layout rhythm.

Radius 25

ClassSets
border-radius: var(--beam-border-radius-xxs);
border-radius: var(--beam-border-radius-xs);
border-radius: var(--beam-border-radius-sm);
border-radius: var(--beam-border-radius-md);
border-radius: var(--beam-border-radius-lg);
border-radius: var(--beam-border-radius-xl);
border-radius: var(--beam-border-radius-2xl);
border-radius: var(--beam-border-radius-3xl);
border-radius: var(--beam-border-radius-4xl);
border-radius: var(--beam-border-radius-full);
border-radius: var(--beam-radius-none);
border-radius: var(--beam-radius-sharp);
border-radius: var(--beam-radius-crisp);
border-radius: var(--beam-radius-soft);
border-radius: var(--beam-radius-pill);
border-radius: var(--beam-radius-rounded);
border-radius: var(--beam-radius-smooth);
border-radius: var(--beam-radius-plush);
border-radius: var(--beam-radius-outer-spacing);
border-radius: var(--beam-radius-outer-sharp);
border-radius: var(--beam-radius-outer-crisp);
border-radius: var(--beam-radius-outer-soft);
border-radius: var(--beam-radius-outer-rounded);
border-radius: var(--beam-radius-outer-smooth);
border-radius: var(--beam-radius-outer-plush);

Border colour 20

ClassSets
--_u-bw: var(--beam-border-width-0); border-width: var(--beam-border-width-0); border-style: solid;
--_u-bw: var(--beam-border-width-1); border-width: var(--beam-border-width-1); border-style: solid;
--_u-bw: var(--beam-border-width-2); border-width: var(--beam-border-width-2); border-style: solid;
--_u-bw: var(--beam-border-width-3); border-width: var(--beam-border-width-3); border-style: solid;
--_u-bw: var(--beam-border-width-4); border-width: var(--beam-border-width-4); border-style: solid;
--_u-bw: var(--beam-border-width-5); border-width: var(--beam-border-width-5); border-style: solid;
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-brand);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-brand_subtle);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-focus-ring);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-error);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-error_subtle);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-warning);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-success);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-info);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-neutral-primary);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-neutral-secondary);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-neutral-tertiary);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-neutral-disabled);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-neutral-disabled_subtle);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-border-neutral-separator);

Typography 25

ClassSets
font-weight: var(--beam-font-weight-regular);
font-weight: var(--beam-font-weight-medium);
font-weight: var(--beam-font-weight-semibold);
font-weight: var(--beam-font-weight-bold);
font-family: var(--beam-font-family-primary);
font-family: var(--beam-font-family-secondary);
font-family: var(--beam-font-family-mono);
font: var(--beam-type-display-2xl); letter-spacing: var(--beam-type-display-2xl-tracking);
font: var(--beam-type-display-xl); letter-spacing: var(--beam-type-display-xl-tracking);
font: var(--beam-type-display-lg); letter-spacing: var(--beam-type-display-lg-tracking);
font: var(--beam-type-h1); letter-spacing: var(--beam-type-h1-tracking);
font: var(--beam-type-h2); letter-spacing: var(--beam-type-h2-tracking);
font: var(--beam-type-h3); letter-spacing: var(--beam-type-h3-tracking);
font: var(--beam-type-h4); letter-spacing: var(--beam-type-h4-tracking);
font: var(--beam-type-h5); letter-spacing: var(--beam-type-h5-tracking);
font: var(--beam-type-h6); letter-spacing: var(--beam-type-h6-tracking);
font: var(--beam-type-body-lg); letter-spacing: var(--beam-type-body-lg-tracking);
font: var(--beam-type-body); letter-spacing: var(--beam-type-body-tracking);
font: var(--beam-type-body-sm); letter-spacing: var(--beam-type-body-sm-tracking);
font: var(--beam-type-caption); letter-spacing: var(--beam-type-caption-tracking);
font: var(--beam-type-overline); letter-spacing: var(--beam-type-overline-tracking);
font: var(--beam-type-code); letter-spacing: var(--beam-type-code-tracking);
font: var(--beam-type-label-lg); letter-spacing: var(--beam-type-label-lg-tracking);
font: var(--beam-type-label); letter-spacing: var(--beam-type-label-tracking);
font: var(--beam-type-label-sm); letter-spacing: var(--beam-type-label-sm-tracking);

Helpers 399

ClassSets
opacity: var(--beam-opacity-0);
opacity: var(--beam-opacity-5);
opacity: var(--beam-opacity-10);
opacity: var(--beam-opacity-20);
opacity: var(--beam-opacity-25);
opacity: var(--beam-opacity-40);
opacity: var(--beam-opacity-50);
opacity: var(--beam-opacity-60);
opacity: var(--beam-opacity-80);
opacity: var(--beam-opacity-100);
z-index: var(--beam-z-index-hide);
z-index: var(--beam-z-index-base);
z-index: var(--beam-z-index-raised);
z-index: var(--beam-z-index-dropdown);
z-index: var(--beam-z-index-sticky);
z-index: var(--beam-z-index-overlay);
z-index: var(--beam-z-index-modal);
z-index: var(--beam-z-index-toast);
font-size: var(--beam-icon-size-1); inline-size: var(--beam-icon-size-1); block-size: var(--beam-icon-size-1);
font-size: var(--beam-icon-size-2); inline-size: var(--beam-icon-size-2); block-size: var(--beam-icon-size-2);
font-size: var(--beam-icon-size-3); inline-size: var(--beam-icon-size-3); block-size: var(--beam-icon-size-3);
font-size: var(--beam-icon-size-4); inline-size: var(--beam-icon-size-4); block-size: var(--beam-icon-size-4);
font-size: var(--beam-icon-size-5); inline-size: var(--beam-icon-size-5); block-size: var(--beam-icon-size-5);
font-size: var(--beam-icon-size-6); inline-size: var(--beam-icon-size-6); block-size: var(--beam-icon-size-6);
font-size: var(--beam-icon-size-7); inline-size: var(--beam-icon-size-7); block-size: var(--beam-icon-size-7);
font-size: var(--beam-icon-size-8); inline-size: var(--beam-icon-size-8); block-size: var(--beam-icon-size-8);
font-size: var(--beam-icon-size-9); inline-size: var(--beam-icon-size-9); block-size: var(--beam-icon-size-9);
opacity: var(--beam-icon-opacity-1);
opacity: var(--beam-icon-opacity-2);
line-height: var(--beam-leading-none);
line-height: var(--beam-leading-tight);
line-height: var(--beam-leading-snug);
line-height: var(--beam-leading-normal);
line-height: var(--beam-leading-relaxed);
line-height: var(--beam-leading-loose);
margin-block-end: var(--beam-para-spacing-none);
letter-spacing: var(--beam-tracking-tighter);
letter-spacing: var(--beam-tracking-tight);
letter-spacing: var(--beam-tracking-normal);
letter-spacing: var(--beam-tracking-wide);
letter-spacing: var(--beam-tracking-wider);
letter-spacing: var(--beam-tracking-widest);
margin-block-end: var(--beam-para-spacing-sm);
margin-block-end: var(--beam-para-spacing-md);
margin-block-end: var(--beam-para-spacing-lg);
color: var(--beam-fg-white);
color: var(--beam-fg-brand-primary);
color: var(--beam-fg-brand-secondary);
color: var(--beam-fg-on-accent);
color: var(--beam-fg-error-primary);
color: var(--beam-fg-error-secondary);
color: var(--beam-fg-warning-primary);
color: var(--beam-fg-warning-secondary);
color: var(--beam-fg-success-primary);
color: var(--beam-fg-success-secondary);
color: var(--beam-fg-info-primary);
color: var(--beam-fg-info-secondary);
color: var(--beam-fg-neutral-primary);
color: var(--beam-fg-neutral-secondary);
color: var(--beam-fg-neutral-tertiary);
color: var(--beam-fg-neutral-quaternary);
color: var(--beam-fg-neutral-disabled);
color: var(--beam-fg-neutral-disabled_subtle);
color: var(--beam-fg-on-neutral-solid);
color: var(--beam-fg-brand);
background-color: var(--beam-decorative-tomato-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-tomato-border);
background-color: var(--beam-decorative-tomato-solid);
color: var(--beam-decorative-tomato-text);
background-color: var(--beam-decorative-tomato-on-solid);
background-color: var(--beam-decorative-red-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-red-border);
background-color: var(--beam-decorative-red-solid);
color: var(--beam-decorative-red-text);
background-color: var(--beam-decorative-red-on-solid);
background-color: var(--beam-decorative-ruby-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-ruby-border);
background-color: var(--beam-decorative-ruby-solid);
color: var(--beam-decorative-ruby-text);
background-color: var(--beam-decorative-ruby-on-solid);
background-color: var(--beam-decorative-crimson-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-crimson-border);
background-color: var(--beam-decorative-crimson-solid);
color: var(--beam-decorative-crimson-text);
background-color: var(--beam-decorative-crimson-on-solid);
background-color: var(--beam-decorative-pink-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-pink-border);
background-color: var(--beam-decorative-pink-solid);
color: var(--beam-decorative-pink-text);
background-color: var(--beam-decorative-pink-on-solid);
background-color: var(--beam-decorative-plum-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-plum-border);
background-color: var(--beam-decorative-plum-solid);
color: var(--beam-decorative-plum-text);
background-color: var(--beam-decorative-plum-on-solid);
background-color: var(--beam-decorative-purple-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-purple-border);
background-color: var(--beam-decorative-purple-solid);
color: var(--beam-decorative-purple-text);
background-color: var(--beam-decorative-purple-on-solid);
background-color: var(--beam-decorative-violet-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-violet-border);
background-color: var(--beam-decorative-violet-solid);
color: var(--beam-decorative-violet-text);
background-color: var(--beam-decorative-violet-on-solid);
background-color: var(--beam-decorative-iris-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-iris-border);
background-color: var(--beam-decorative-iris-solid);
color: var(--beam-decorative-iris-text);
background-color: var(--beam-decorative-iris-on-solid);
background-color: var(--beam-decorative-indigo-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-indigo-border);
background-color: var(--beam-decorative-indigo-solid);
color: var(--beam-decorative-indigo-text);
background-color: var(--beam-decorative-indigo-on-solid);
background-color: var(--beam-decorative-blue-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-blue-border);
background-color: var(--beam-decorative-blue-solid);
color: var(--beam-decorative-blue-text);
background-color: var(--beam-decorative-blue-on-solid);
background-color: var(--beam-decorative-cyan-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-cyan-border);
background-color: var(--beam-decorative-cyan-solid);
color: var(--beam-decorative-cyan-text);
background-color: var(--beam-decorative-cyan-on-solid);
background-color: var(--beam-decorative-teal-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-teal-border);
background-color: var(--beam-decorative-teal-solid);
color: var(--beam-decorative-teal-text);
background-color: var(--beam-decorative-teal-on-solid);
background-color: var(--beam-decorative-jade-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-jade-border);
background-color: var(--beam-decorative-jade-solid);
color: var(--beam-decorative-jade-text);
background-color: var(--beam-decorative-jade-on-solid);
background-color: var(--beam-decorative-green-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-green-border);
background-color: var(--beam-decorative-green-solid);
color: var(--beam-decorative-green-text);
background-color: var(--beam-decorative-green-on-solid);
background-color: var(--beam-decorative-grass-bg);
background-color: var(--beam-decorative-grass-solid);
color: var(--beam-decorative-grass-text);
background-color: var(--beam-decorative-grass-on-solid);
background-color: var(--beam-decorative-brown-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-brown-border);
background-color: var(--beam-decorative-brown-solid);
color: var(--beam-decorative-brown-text);
background-color: var(--beam-decorative-brown-on-solid);
background-color: var(--beam-decorative-bronze-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-bronze-border);
background-color: var(--beam-decorative-bronze-solid);
color: var(--beam-decorative-bronze-text);
background-color: var(--beam-decorative-bronze-on-solid);
background-color: var(--beam-decorative-gold-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-gold-border);
background-color: var(--beam-decorative-gold-solid);
color: var(--beam-decorative-gold-text);
background-color: var(--beam-decorative-gold-on-solid);
background-color: var(--beam-decorative-sky-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-sky-border);
background-color: var(--beam-decorative-sky-solid);
color: var(--beam-decorative-sky-text);
background-color: var(--beam-decorative-sky-on-solid);
background-color: var(--beam-decorative-mint-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-mint-border);
background-color: var(--beam-decorative-mint-solid);
color: var(--beam-decorative-mint-text);
background-color: var(--beam-decorative-mint-on-solid);
background-color: var(--beam-decorative-lime-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-lime-border);
background-color: var(--beam-decorative-lime-solid);
color: var(--beam-decorative-lime-text);
background-color: var(--beam-decorative-lime-on-solid);
background-color: var(--beam-decorative-yellow-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-yellow-border);
background-color: var(--beam-decorative-yellow-solid);
color: var(--beam-decorative-yellow-text);
background-color: var(--beam-decorative-yellow-on-solid);
background-color: var(--beam-decorative-amber-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-amber-border);
background-color: var(--beam-decorative-amber-solid);
color: var(--beam-decorative-amber-text);
background-color: var(--beam-decorative-amber-on-solid);
background-color: var(--beam-decorative-orange-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-orange-border);
background-color: var(--beam-decorative-orange-solid);
color: var(--beam-decorative-orange-text);
background-color: var(--beam-decorative-orange-on-solid);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-grass-border);
background-color: var(--beam-decorative-rebecca-bg);
border: var(--_u-bw, var(--beam-border-width-2)) solid var(--beam-decorative-rebecca-border);
background-color: var(--beam-decorative-rebecca-solid);
color: var(--beam-decorative-rebecca-text);
background-color: var(--beam-decorative-rebecca-on-solid);
background-color: var(--beam-overlay-primary);
background-color: var(--beam-overlay-scrim);
background-color: var(--beam-overlay-secondary);
background-color: var(--beam-overlay-tertiary);
font-size: var(--beam-ms-0);
font-size: var(--beam-ms--1);
font-size: var(--beam-ms--2);
font-size: var(--beam-ms--3);
font-size: var(--beam-ms-1);
font-size: var(--beam-ms-2);
font-size: var(--beam-ms-3);
font-size: var(--beam-ms-4);
font-size: var(--beam-ms-5);
font-size: var(--beam-ms-6);
font-size: var(--beam-ms-7);
font-size: var(--beam-ms-8);
padding-block-start: var(--beam-spacing-none);
padding-block-end: var(--beam-spacing-none);
padding-inline-start: var(--beam-spacing-none);
padding-inline-end: var(--beam-spacing-none);
margin-inline-start: var(--beam-spacing-none);
margin-inline-end: var(--beam-spacing-none);
padding-block-start: var(--beam-spacing-xxs);
padding-block-end: var(--beam-spacing-xxs);
padding-inline-start: var(--beam-spacing-xxs);
padding-inline-end: var(--beam-spacing-xxs);
margin-inline-start: var(--beam-spacing-xxs);
margin-inline-end: var(--beam-spacing-xxs);
padding-block-start: var(--beam-spacing-xs);
padding-block-end: var(--beam-spacing-xs);
padding-inline-start: var(--beam-spacing-xs);
padding-inline-end: var(--beam-spacing-xs);
margin-inline-start: var(--beam-spacing-xs);
margin-inline-end: var(--beam-spacing-xs);
padding-block-start: var(--beam-spacing-sm);
padding-block-end: var(--beam-spacing-sm);
padding-inline-start: var(--beam-spacing-sm);
padding-inline-end: var(--beam-spacing-sm);
margin-inline-start: var(--beam-spacing-sm);
margin-inline-end: var(--beam-spacing-sm);
padding-block-start: var(--beam-spacing-md);
padding-block-end: var(--beam-spacing-md);
padding-inline-start: var(--beam-spacing-md);
padding-inline-end: var(--beam-spacing-md);
margin-inline-start: var(--beam-spacing-md);
margin-inline-end: var(--beam-spacing-md);
padding-block-start: var(--beam-spacing-lg);
padding-block-end: var(--beam-spacing-lg);
padding-inline-start: var(--beam-spacing-lg);
padding-inline-end: var(--beam-spacing-lg);
margin-inline-start: var(--beam-spacing-lg);
margin-inline-end: var(--beam-spacing-lg);
padding-block-start: var(--beam-spacing-xl);
padding-block-end: var(--beam-spacing-xl);
padding-inline-start: var(--beam-spacing-xl);
padding-inline-end: var(--beam-spacing-xl);
margin-inline-start: var(--beam-spacing-xl);
margin-inline-end: var(--beam-spacing-xl);
padding-block-start: var(--beam-spacing-2xl);
padding-block-end: var(--beam-spacing-2xl);
padding-inline-start: var(--beam-spacing-2xl);
padding-inline-end: var(--beam-spacing-2xl);
margin-inline-start: var(--beam-spacing-2xl);
margin-inline-end: var(--beam-spacing-2xl);
padding-block-start: var(--beam-spacing-3xl);
padding-block-end: var(--beam-spacing-3xl);
padding-inline-start: var(--beam-spacing-3xl);
padding-inline-end: var(--beam-spacing-3xl);
margin-inline-start: var(--beam-spacing-3xl);
margin-inline-end: var(--beam-spacing-3xl);
padding-block-start: var(--beam-spacing-4xl);
padding-block-end: var(--beam-spacing-4xl);
padding-inline-start: var(--beam-spacing-4xl);
padding-inline-end: var(--beam-spacing-4xl);
margin-inline-start: var(--beam-spacing-4xl);
margin-inline-end: var(--beam-spacing-4xl);
padding-block-start: var(--beam-spacing-5xl);
padding-block-end: var(--beam-spacing-5xl);
padding-inline-start: var(--beam-spacing-5xl);
padding-inline-end: var(--beam-spacing-5xl);
margin-inline-start: var(--beam-spacing-5xl);
margin-inline-end: var(--beam-spacing-5xl);
padding-block-start: var(--beam-spacing-6xl);
padding-block-end: var(--beam-spacing-6xl);
padding-inline-start: var(--beam-spacing-6xl);
padding-inline-end: var(--beam-spacing-6xl);
margin-inline-start: var(--beam-spacing-6xl);
margin-inline-end: var(--beam-spacing-6xl);
padding-block-start: var(--beam-spacing-7xl);
padding-block-end: var(--beam-spacing-7xl);
padding-inline-start: var(--beam-spacing-7xl);
padding-inline-end: var(--beam-spacing-7xl);
margin-inline-start: var(--beam-spacing-7xl);
margin-inline-end: var(--beam-spacing-7xl);
padding-block-start: var(--beam-spacing-8xl);
padding-block-end: var(--beam-spacing-8xl);
padding-inline-start: var(--beam-spacing-8xl);
padding-inline-end: var(--beam-spacing-8xl);
margin-inline-start: var(--beam-spacing-8xl);
margin-inline-end: var(--beam-spacing-8xl);
padding-block-start: var(--beam-spacing-9xl);
padding-block-end: var(--beam-spacing-9xl);
padding-inline-start: var(--beam-spacing-9xl);
padding-inline-end: var(--beam-spacing-9xl);
margin-inline-start: var(--beam-spacing-9xl);
margin-inline-end: var(--beam-spacing-9xl);
padding-block-start: var(--beam-spacing-10xl);
padding-block-end: var(--beam-spacing-10xl);
padding-inline-start: var(--beam-spacing-10xl);
padding-inline-end: var(--beam-spacing-10xl);
margin-inline-start: var(--beam-spacing-10xl);
margin-inline-end: var(--beam-spacing-10xl);
padding-block-start: var(--beam-spacing-11xl);
padding-block-end: var(--beam-spacing-11xl);
padding-inline-start: var(--beam-spacing-11xl);
padding-inline-end: var(--beam-spacing-11xl);
margin-inline-start: var(--beam-spacing-11xl);
margin-inline-end: var(--beam-spacing-11xl);
row-gap: var(--beam-stack-xs);
row-gap: var(--beam-stack-sm);
row-gap: var(--beam-stack-md);
row-gap: var(--beam-stack-lg);
row-gap: var(--beam-stack-xl);
row-gap: var(--beam-stack-2xl);
column-gap: var(--beam-inline-xs);
column-gap: var(--beam-inline-sm);
column-gap: var(--beam-inline-md);
column-gap: var(--beam-inline-lg);
column-gap: var(--beam-gutter-sm);
column-gap: var(--beam-gutter-md);
column-gap: var(--beam-gutter-lg);
padding: var(--beam-inset-none);
padding: var(--beam-inset-xs);
padding: var(--beam-inset-sm);
padding: var(--beam-inset-md);
padding: var(--beam-inset-lg);
padding: var(--beam-inset-xl);
padding-block: var(--beam-region-xs);
padding-block: var(--beam-region-sm);
padding-block: var(--beam-region-md);
padding-block: var(--beam-region-lg);
padding-block: var(--beam-region-xl);
inline-size: var(--beam-width-xxs);
inline-size: var(--beam-width-xs);
inline-size: var(--beam-width-sm);
inline-size: var(--beam-width-md);
inline-size: var(--beam-width-lg);
inline-size: var(--beam-width-xl);
inline-size: var(--beam-width-2xl);
inline-size: var(--beam-width-3xl);
inline-size: var(--beam-width-4xl);
inline-size: var(--beam-width-5xl);
inline-size: var(--beam-width-6xl);
inline-size: var(--beam-width-3xs);
transition-duration: var(--beam-duration-base);
transition-duration: var(--beam-duration-deliberate);
transition-duration: var(--beam-duration-fast-1);
transition-duration: var(--beam-duration-fast-2);
transition-duration: var(--beam-duration-instant);
transition-duration: var(--beam-duration-slow-1);
transition-duration: var(--beam-duration-slow-2);
transition-timing-function: var(--beam-ease-enter);
transition-timing-function: var(--beam-ease-exit);
transition-timing-function: var(--beam-ease-linear);
transition-timing-function: var(--beam-ease-spring);
transition-timing-function: var(--beam-ease-standard);
transition-delay: var(--beam-stagger-1);
transition-delay: var(--beam-stagger-2);
transition-delay: var(--beam-stagger-3);
box-shadow: var(--beam-ring-brand);
box-shadow: var(--beam-glow-brand);
box-shadow: var(--beam-ring-error);
box-shadow: var(--beam-glow-error);
box-shadow: var(--beam-ring-warning);
box-shadow: var(--beam-glow-warning);
box-shadow: var(--beam-ring-success);
box-shadow: var(--beam-glow-success);
box-shadow: var(--beam-ring-info);
box-shadow: var(--beam-glow-info);
background-image: var(--beam-gradient-tonal-rebecca-depth);
background-image: var(--beam-gradient-tonal-iris-depth);
background-image: var(--beam-gradient-tonal-teal-depth);
background-image: var(--beam-gradient-tonal-amber-depth);
background-image: var(--beam-gradient-tonal-slate-depth);
background-image: var(--beam-gradient-analogous-violet-hour);
background-image: var(--beam-gradient-analogous-deep-sea);
background-image: var(--beam-gradient-analogous-lagoon);
background-image: var(--beam-gradient-analogous-meadow);
background-image: var(--beam-gradient-analogous-rosebud);
background-image: var(--beam-gradient-analogous-ember);
background-image: var(--beam-gradient-signature-twilight);
background-image: var(--beam-gradient-signature-flare);
background-image: var(--beam-gradient-signature-abyss);
background-image: var(--beam-gradient-signature-dawn);
background-image: var(--beam-gradient-wash-petal);
background-image: var(--beam-gradient-wash-coast);
background-image: var(--beam-gradient-wash-sunset);
background-image: var(--beam-gradient-wash-orchid);
background-image: var(--beam-gradient-tri-stop-sunset-run);
background-image: var(--beam-gradient-tri-stop-ocean-run);
background-image: var(--beam-gradient-tri-stop-aurora-run);
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-wrap: balance;

Text colour 16

ClassSets
color: var(--beam-text-white);
color: var(--beam-text-brand-primary);
color: var(--beam-text-brand-secondary);
color: var(--beam-text-on-accent);
color: var(--beam-text-error);
color: var(--beam-text-warning);
color: var(--beam-text-success);
color: var(--beam-text-info);
color: var(--beam-text-neutral-primary);
color: var(--beam-text-neutral-secondary);
color: var(--beam-text-neutral-tertiary);
color: var(--beam-text-neutral-placeholder);
color: var(--beam-text-neutral-placeholder_subtle);
color: var(--beam-text-neutral-disabled);
color: var(--beam-text-on-neutral-solid);
color: var(--beam-text-brand);

Background 62

ClassSets
background-color: var(--beam-background-overlay);
background-color: var(--beam-background-surface);
background-color: var(--beam-background-panel);
background-color: var(--beam-background-brand-primary);
background-color: var(--beam-background-brand-secondary);
background-color: var(--beam-background-brand-solid);
background-color: var(--beam-background-brand-solid_hover);
background-color: var(--beam-background-brand-solid_hover);
background-color: var(--beam-background-error-primary);
background-color: var(--beam-background-error-secondary);
background-color: var(--beam-background-error-solid);
background-color: var(--beam-background-error-solid_hover);
background-color: var(--beam-background-error-solid_hover);
background-color: var(--beam-background-warning-primary);
background-color: var(--beam-background-warning-secondary);
background-color: var(--beam-background-warning-solid);
background-color: var(--beam-background-success-primary);
background-color: var(--beam-background-success-secondary);
background-color: var(--beam-background-success-solid);
background-color: var(--beam-background-info-primary);
background-color: var(--beam-background-info-secondary);
background-color: var(--beam-background-info-solid);
background-color: var(--beam-background-neutral-primary);
background-color: var(--beam-background-neutral-primary_hover);
background-color: var(--beam-background-neutral-primary_hover);
background-color: var(--beam-background-neutral-primary-solid);
background-color: var(--beam-background-neutral-secondary);
background-color: var(--beam-background-neutral-secondary_hover);
background-color: var(--beam-background-neutral-secondary_hover);
background-color: var(--beam-background-neutral-secondary-solid);
background-color: var(--beam-background-neutral-tertiary);
background-color: var(--beam-background-neutral-quaternary);
background-color: var(--beam-background-neutral-active);
background-color: var(--beam-background-neutral-disabled);
background-color: var(--beam-background-neutral-disabled_subtle);
background-color: var(--beam-background-brand-solid_active);
background-color: var(--beam-background-brand-solid_active);
background-color: var(--beam-background-error-solid_active);
background-color: var(--beam-background-error-solid_active);
background-color: var(--beam-background-info-solid_active);
background-color: var(--beam-background-info-solid_active);
background-color: var(--beam-background-info-solid_hover);
background-color: var(--beam-background-info-solid_hover);
background-color: var(--beam-background-neutral-quaternary_hover);
background-color: var(--beam-background-neutral-quaternary_hover);
background-color: var(--beam-background-neutral-tertiary_hover);
background-color: var(--beam-background-neutral-tertiary_hover);
background-color: var(--beam-background-success-solid_active);
background-color: var(--beam-background-success-solid_active);
background-color: var(--beam-background-success-solid_hover);
background-color: var(--beam-background-success-solid_hover);
background-color: var(--beam-background-warning-solid_active);
background-color: var(--beam-background-warning-solid_active);
background-color: var(--beam-background-warning-solid_hover);
background-color: var(--beam-background-warning-solid_hover);
background-color: var(--beam-background-neutral-primary-solid_hover);
background-color: var(--beam-background-neutral-primary-solid_hover);
background-color: var(--beam-background-neutral-primary-solid_active);
background-color: var(--beam-background-neutral-primary-solid_active);
background-color: var(--beam-background-brand-faint);
background-color: var(--beam-background-brand-subtle);
background-color: var(--beam-background-brand-soft);

Surface 7

ClassSets
background-color: var(--beam-surface-default);
background-color: var(--beam-surface-raised);
background-color: var(--beam-surface-overlay);
background-color: var(--beam-surface-sunken);
background-color: var(--beam-surface-primary);
background-color: var(--beam-surface-secondary);
background-color: var(--beam-surface-tertiary);

Spacing 155

ClassSets
gap: var(--beam-spacing-none);
padding: var(--beam-spacing-none);
padding-inline: var(--beam-spacing-none);
padding-block: var(--beam-spacing-none);
margin: var(--beam-spacing-none);
margin-inline: var(--beam-spacing-none);
margin-block: var(--beam-spacing-none);
margin-block-start: var(--beam-spacing-none);
margin-block-end: var(--beam-spacing-none);
gap: var(--beam-spacing-xxs);
padding: var(--beam-spacing-xxs);
padding-inline: var(--beam-spacing-xxs);
padding-block: var(--beam-spacing-xxs);
margin: var(--beam-spacing-xxs);
margin-inline: var(--beam-spacing-xxs);
margin-block: var(--beam-spacing-xxs);
margin-block-start: var(--beam-spacing-xxs);
margin-block-end: var(--beam-spacing-xxs);
gap: var(--beam-spacing-xs);
padding: var(--beam-spacing-xs);
padding-inline: var(--beam-spacing-xs);
padding-block: var(--beam-spacing-xs);
margin: var(--beam-spacing-xs);
margin-inline: var(--beam-spacing-xs);
margin-block: var(--beam-spacing-xs);
margin-block-start: var(--beam-spacing-xs);
margin-block-end: var(--beam-spacing-xs);
gap: var(--beam-spacing-sm);
padding: var(--beam-spacing-sm);
padding-inline: var(--beam-spacing-sm);
padding-block: var(--beam-spacing-sm);
margin: var(--beam-spacing-sm);
margin-inline: var(--beam-spacing-sm);
margin-block: var(--beam-spacing-sm);
margin-block-start: var(--beam-spacing-sm);
margin-block-end: var(--beam-spacing-sm);
gap: var(--beam-spacing-md);
padding: var(--beam-spacing-md);
padding-inline: var(--beam-spacing-md);
padding-block: var(--beam-spacing-md);
margin: var(--beam-spacing-md);
margin-inline: var(--beam-spacing-md);
margin-block: var(--beam-spacing-md);
margin-block-start: var(--beam-spacing-md);
margin-block-end: var(--beam-spacing-md);
gap: var(--beam-spacing-lg);
padding: var(--beam-spacing-lg);
padding-inline: var(--beam-spacing-lg);
padding-block: var(--beam-spacing-lg);
margin: var(--beam-spacing-lg);
margin-inline: var(--beam-spacing-lg);
margin-block: var(--beam-spacing-lg);
margin-block-start: var(--beam-spacing-lg);
margin-block-end: var(--beam-spacing-lg);
gap: var(--beam-spacing-xl);
padding: var(--beam-spacing-xl);
padding-inline: var(--beam-spacing-xl);
padding-block: var(--beam-spacing-xl);
margin: var(--beam-spacing-xl);
margin-inline: var(--beam-spacing-xl);
margin-block: var(--beam-spacing-xl);
margin-block-start: var(--beam-spacing-xl);
margin-block-end: var(--beam-spacing-xl);
gap: var(--beam-spacing-2xl);
padding: var(--beam-spacing-2xl);
padding-inline: var(--beam-spacing-2xl);
padding-block: var(--beam-spacing-2xl);
margin: var(--beam-spacing-2xl);
margin-inline: var(--beam-spacing-2xl);
margin-block: var(--beam-spacing-2xl);
margin-block-start: var(--beam-spacing-2xl);
margin-block-end: var(--beam-spacing-2xl);
gap: var(--beam-spacing-3xl);
padding: var(--beam-spacing-3xl);
padding-inline: var(--beam-spacing-3xl);
padding-block: var(--beam-spacing-3xl);
margin: var(--beam-spacing-3xl);
margin-inline: var(--beam-spacing-3xl);
margin-block: var(--beam-spacing-3xl);
margin-block-start: var(--beam-spacing-3xl);
margin-block-end: var(--beam-spacing-3xl);
gap: var(--beam-spacing-4xl);
padding: var(--beam-spacing-4xl);
padding-inline: var(--beam-spacing-4xl);
padding-block: var(--beam-spacing-4xl);
margin: var(--beam-spacing-4xl);
margin-inline: var(--beam-spacing-4xl);
margin-block: var(--beam-spacing-4xl);
margin-block-start: var(--beam-spacing-4xl);
margin-block-end: var(--beam-spacing-4xl);
gap: var(--beam-spacing-5xl);
padding: var(--beam-spacing-5xl);
padding-inline: var(--beam-spacing-5xl);
padding-block: var(--beam-spacing-5xl);
margin: var(--beam-spacing-5xl);
margin-inline: var(--beam-spacing-5xl);
margin-block: var(--beam-spacing-5xl);
margin-block-start: var(--beam-spacing-5xl);
margin-block-end: var(--beam-spacing-5xl);
gap: var(--beam-spacing-6xl);
padding: var(--beam-spacing-6xl);
padding-inline: var(--beam-spacing-6xl);
padding-block: var(--beam-spacing-6xl);
margin: var(--beam-spacing-6xl);
margin-inline: var(--beam-spacing-6xl);
margin-block: var(--beam-spacing-6xl);
margin-block-start: var(--beam-spacing-6xl);
margin-block-end: var(--beam-spacing-6xl);
gap: var(--beam-spacing-7xl);
padding: var(--beam-spacing-7xl);
padding-inline: var(--beam-spacing-7xl);
padding-block: var(--beam-spacing-7xl);
margin: var(--beam-spacing-7xl);
margin-inline: var(--beam-spacing-7xl);
margin-block: var(--beam-spacing-7xl);
margin-block-start: var(--beam-spacing-7xl);
margin-block-end: var(--beam-spacing-7xl);
gap: var(--beam-spacing-8xl);
padding: var(--beam-spacing-8xl);
padding-inline: var(--beam-spacing-8xl);
padding-block: var(--beam-spacing-8xl);
margin: var(--beam-spacing-8xl);
margin-inline: var(--beam-spacing-8xl);
margin-block: var(--beam-spacing-8xl);
margin-block-start: var(--beam-spacing-8xl);
margin-block-end: var(--beam-spacing-8xl);
gap: var(--beam-spacing-9xl);
padding: var(--beam-spacing-9xl);
padding-inline: var(--beam-spacing-9xl);
padding-block: var(--beam-spacing-9xl);
margin: var(--beam-spacing-9xl);
margin-inline: var(--beam-spacing-9xl);
margin-block: var(--beam-spacing-9xl);
margin-block-start: var(--beam-spacing-9xl);
margin-block-end: var(--beam-spacing-9xl);
gap: var(--beam-spacing-10xl);
padding: var(--beam-spacing-10xl);
padding-inline: var(--beam-spacing-10xl);
padding-block: var(--beam-spacing-10xl);
margin: var(--beam-spacing-10xl);
margin-inline: var(--beam-spacing-10xl);
margin-block: var(--beam-spacing-10xl);
margin-block-start: var(--beam-spacing-10xl);
margin-block-end: var(--beam-spacing-10xl);
gap: var(--beam-spacing-11xl);
padding: var(--beam-spacing-11xl);
padding-inline: var(--beam-spacing-11xl);
padding-block: var(--beam-spacing-11xl);
margin: var(--beam-spacing-11xl);
margin-inline: var(--beam-spacing-11xl);
margin-block: var(--beam-spacing-11xl);
margin-block-start: var(--beam-spacing-11xl);
margin-block-end: var(--beam-spacing-11xl);
padding-inline: var(--beam-container-padding);
margin-inline: auto;

Width 14

ClassSets
max-inline-size: var(--beam-width-xxs);
max-inline-size: var(--beam-width-xs);
max-inline-size: var(--beam-width-sm);
max-inline-size: var(--beam-width-md);
max-inline-size: var(--beam-width-lg);
max-inline-size: var(--beam-width-xl);
max-inline-size: var(--beam-width-2xl);
max-inline-size: var(--beam-width-3xl);
max-inline-size: var(--beam-width-4xl);
max-inline-size: var(--beam-width-5xl);
max-inline-size: var(--beam-width-6xl);
max-inline-size: var(--beam-container-max-width); margin-inline: auto;
max-inline-size: var(--beam-paragraph-max-width);
max-inline-size: var(--beam-width-3xs);

Depth 18

ClassSets
box-shadow: var(--beam-depth-low);
box-shadow: var(--beam-depth-mid);
box-shadow: var(--beam-depth-high);
box-shadow: var(--beam-depth-low-around);
box-shadow: var(--beam-depth-low-up);
box-shadow: var(--beam-depth-low-start);
box-shadow: var(--beam-depth-low-end);
box-shadow: var(--beam-depth-mid-around);
box-shadow: var(--beam-depth-mid-up);
box-shadow: var(--beam-depth-mid-start);
box-shadow: var(--beam-depth-mid-end);
box-shadow: var(--beam-depth-high-around);
box-shadow: var(--beam-depth-high-up);
box-shadow: var(--beam-depth-high-start);
box-shadow: var(--beam-depth-high-end);
box-shadow: var(--beam-depth-ring);
box-shadow: var(--beam-depth-inset-low);
box-shadow: var(--beam-depth-inset-mid);

Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81