# API index

> **Generated** from source by `scripts/gen-api-index.js` —
> run `npm run docs:api` to refresh. Do not edit by hand.

A single browseable catalogue of every public SLASHED element — design
**tokens** and **classes** — with stability tier, category, bundle membership
and a short description. The machine-readable companion (with all columns) is
[api-index.json](api-index.json); for the flat name list see
[registry.json](registry.json); for the tier contract see
[architecture.md](architecture.md).

**1069 elements** — 741 tokens, 328 classes.

| Tier | Count | Meaning |
|---|---|---|
| PUBLIC | 1019 | Everyday surface. SemVer-stable. |
| PUBLIC-ADVANCED | 49 | Same SemVer guarantee; niche/powerful. |
| INTERNAL | 1 | Implementation detail; may change without a major bump. |

## Tokens (741)

### Component tokens (46)

| Token | Tier | Role | Namespace | Default | Description |
|---|---|---|---|---|---|
| `--sf-btn-border-width` | PUBLIC | consumption | btn | `var(--sf-border-width-1)` | Border thickness for .sf-btn (used by all fill, outline, and secondary treatments). |
| `--sf-btn-font-scale` | PUBLIC | knob | btn | `1` | Uniform label-size multiplier for .sf-btn — scales every size's font-size by one factor while keeping the xs…xl ladder intact. The everyday 'bigger/smaller button text' knob. |
| `--sf-btn-font-size` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size. |
| `--sf-btn-font-weight` | PUBLIC | consumption | btn | `var(--sf-font-weight-interactive)` | Label font-weight for .sf-btn. Defaults to the interactive weight. |
| `--sf-btn-gap` | PUBLIC | consumption | btn | `var(--sf-space-2xs)` | Gap between an icon and the label inside .sf-btn. |
| `--sf-btn-l-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the large button (.sf-btn--l). Unset, falls through to --sf-text-l; set to retune this rung without touching the others. |
| `--sf-btn-l-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-l-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-l-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-m-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the default (medium) button (.sf-btn). Unset, falls through to --sf-text-m; set to retune this rung without touching the others. |
| `--sf-btn-m-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-m-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-m-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-min-height` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height. |
| `--sf-btn-padding-block` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block. |
| `--sf-btn-padding-inline` | PUBLIC-ADVANCED | knob | btn | `initial` | Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline. |
| `--sf-btn-radius` | PUBLIC | consumption | btn | `var(--sf-radius-m)` | Corner radius for .sf-btn. Defaults to --sf-radius-m; gives buttons a distinct radius from form fields without touching global tokens. |
| `--sf-btn-s-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the small button (.sf-btn--s). Unset, falls through to --sf-text-s; set to retune this rung without touching the others. |
| `--sf-btn-s-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-s-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-s-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-xl-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the extra-large button (.sf-btn--xl). Unset, falls through to --sf-text-xl; set to retune this rung without touching the others. |
| `--sf-btn-xl-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-xl-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-xl-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-xs-font-size` | PUBLIC | knob | btn | `initial` | Label font-size for the extra-small button (.sf-btn--xs). Unset, falls through to --sf-text-xs; set to retune this rung without touching the others. |
| `--sf-btn-xs-min-height` | PUBLIC | knob | btn | `initial` | Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-xs-padding-block` | PUBLIC | knob | btn | `initial` | Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-btn-xs-padding-inline` | PUBLIC | knob | btn | `initial` | Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone. |
| `--sf-card-avatar-size` | PUBLIC | knob | card | `2.5rem` | Diameter of .sf-card__avatar. Defaults to 2.5rem. |
| `--sf-card-bg` | PUBLIC | consumption | card | `var(--sf-color-surface)` | Background surface for .sf-card. Defaults to --sf-color-surface. |
| `--sf-card-border-color` | PUBLIC | consumption | card | `var(--sf-color-border)` | Border colour for .sf-card. Defaults to --sf-color-border. |
| `--sf-card-border-width` | PUBLIC | consumption | card | `var(--sf-border-width-1)` | Border thickness for .sf-card. |
| `--sf-card-gap` | PUBLIC | consumption | card | `var(--sf-space-m)` | Divider spacing for .sf-card__header / __footer (padding + margin around the rule). |
| `--sf-card-heading-size` | PUBLIC | consumption | card | `var(--sf-text-xl)` | Font-size for .sf-card__title. Defaults to --sf-text-xl. |
| `--sf-card-media-radius` | PUBLIC | consumption | card | `var(--sf-card-radius, var(--sf-radius-m))` | Corner radius for .sf-card__media. Mirrors the card's inner radius by default. |
| `--sf-card-media-ratio` | PUBLIC | consumption | card | `var(--sf-ratio-video)` | Aspect ratio for .sf-card__media. Defaults to --sf-ratio-video (16/9). |
| `--sf-card-padding` | PUBLIC | consumption | card | `var(--sf-space-l)` | Inner padding for .sf-card. Also feeds the concentric-radius math (outer = inner radius + padding). |
| `--sf-card-radius` | PUBLIC | consumption | card | `var(--sf-radius-m)` | Inner radius for .sf-card children such as __media. Combined with padding to derive the outer radius. |
| `--sf-card-radius-outer` | PUBLIC | consumption | card | `calc(var(--sf-card-radius) + var(--sf-card-padding))` | Outer corner radius of .sf-card. Concentric with the inner radius: calc(--sf-card-radius + --sf-card-padding). |
| `--sf-card-shadow` | PUBLIC | consumption | card | `var(--sf-shadow-s)` | Base drop shadow for .sf-card. Defaults to --sf-shadow-s. |
| `--sf-card-shadow--elevated` | PUBLIC | consumption | card | `var(--sf-shadow-l)` | Drop shadow applied by the .sf-card--elevated modifier (border hidden, larger shadow). |
| `--sf-card-shadow--hover` | PUBLIC | consumption | card | `var(--sf-shadow-l)` | Drop shadow applied on hover/focus by the .sf-card--interactive modifier. |
| `--sf-field-padding-block` | PUBLIC | consumption | field | `var(--sf-space-xs)` | Vertical (block) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule. |
| `--sf-field-padding-inline` | PUBLIC | consumption | field | `var(--sf-space-s)` | Horizontal (inline) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule. |
| `--sf-field-radius` | PUBLIC | consumption | field | `var(--sf-radius-m)` | Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule. |

### Core tokens (610)

| Token | Tier | Role | Namespace | Default | Description |
|---|---|---|---|---|---|
| `--sf-animation-blink` | PUBLIC | consumption | animation | `sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite` | Blinking visibility loop. Use for cursor indicators or critical attention cues. Respect prefers-reduced-motion. |
| `--sf-animation-color-pulse` | PUBLIC | consumption | animation | `sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite` | Pulsing color loop. Use for live-status badges (recording, live). Respect prefers-reduced-motion. |
| `--sf-animation-fade-in` | PUBLIC | consumption | animation | `sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both` | Fade-in entrance animation shorthand. Use directly as animation property value. |
| `--sf-animation-fade-out` | PUBLIC | consumption | animation | `sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both` | Fade-out exit animation shorthand. |
| `--sf-animation-float` | PUBLIC | consumption | animation | `sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite` | Gentle floating / levitating loop. Use for hero illustrations or floating UI elements. Decorative — disable for prefers-reduced-motion. |
| `--sf-animation-ping` | PUBLIC | consumption | animation | `sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite` | Expanding ping / ripple loop. Use for notification badges and live-indicator dots. |
| `--sf-animation-scale-down` | PUBLIC | consumption | animation | `sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both` | Scale-down exit animation. Pairs with --sf-animation-scale-up for enter/leave transitions. |
| `--sf-animation-scale-up` | PUBLIC | consumption | animation | `sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both` | Scale-up entrance animation. Use for modals, popovers, and tooltips appearing. |
| `--sf-animation-shimmer` | PUBLIC | consumption | animation | `sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite` | Shimmer / skeleton-loading sweep. Apply on placeholder elements while content loads. |
| `--sf-animation-slide-in-down` | PUBLIC | consumption | animation | `sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both` | Slide-in from above. Use for dropdown menus and top-attached sheets. |
| `--sf-animation-slide-in-left` | PUBLIC | consumption | animation | `sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both` | Slide-in from the left. Use for left-side drawers and navigation panels. |
| `--sf-animation-slide-in-right` | PUBLIC | consumption | animation | `sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both` | Slide-in from the right. Use for right-side drawers and detail panels. |
| `--sf-animation-slide-in-up` | PUBLIC | consumption | animation | `sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both` | Slide-in from below. Use for bottom sheets, toasts, and floating action buttons. |
| `--sf-animation-slide-out-down` | PUBLIC | consumption | animation | `sf-slide-out-down var(--sf-duration-normal) var(--sf-ease-in) both` | Ready-made animation shorthand: slides the element out downward (sf-slide-out-down) at the normal duration with ease-in. |
| `--sf-animation-slide-out-left` | PUBLIC | consumption | animation | `sf-slide-out-left var(--sf-duration-normal) var(--sf-ease-in) both` | Ready-made animation shorthand: slides the element out to the left (sf-slide-out-left) at the normal duration with ease-in. |
| `--sf-animation-slide-out-right` | PUBLIC | consumption | animation | `sf-slide-out-right var(--sf-duration-normal) var(--sf-ease-in) both` | Ready-made animation shorthand: slides the element out to the right (sf-slide-out-right) at the normal duration with ease-in. |
| `--sf-animation-slide-out-up` | PUBLIC | consumption | animation | `sf-slide-out-up var(--sf-duration-normal) var(--sf-ease-in) both` | Ready-made animation shorthand: slides the element out upward (sf-slide-out-up) at the normal duration with ease-in. |
| `--sf-animation-spin` | PUBLIC | consumption | animation | `sf-spin var(--sf-duration-slower) linear infinite` | Continuous rotation loop. Use for loading spinners and progress indicators. |
| `--sf-blur` | PUBLIC | knob | blur | `12px` | Backdrop-filter blur amount for frosted-glass surfaces (navbars, overlays, dialogs). Default 12px. Pair with a semi-transparent background. |
| `--sf-body-color` | PUBLIC | consumption | body | `var(--sf-color-text)` | Text color for body copy. Alias of --sf-color-text. Override here to deviate body text from the global text color. |
| `--sf-body-em-style` | PUBLIC | knob | body | `italic` | font-style for <em> inside body text (italic by default). Override to suppress italics if your typeface has no italic variant. |
| `--sf-body-font-family` | PUBLIC | consumption | body | `var(--sf-font-body)` | Font family for body text. Alias of --sf-font-body. |
| `--sf-body-font-size` | PUBLIC | consumption | body | `var(--sf-text-m)` | Base font size for body paragraphs. Alias of --sf-text-m. |
| `--sf-body-font-weight` | PUBLIC | consumption | body | `var(--sf-font-weight-body)` | Font weight for body text. Alias of --sf-font-weight-body. |
| `--sf-body-line-height` | PUBLIC | consumption | body | `var(--sf-leading-normal)` | Line height for body paragraphs. Alias of --sf-leading-normal. |
| `--sf-body-strong-weight` | PUBLIC | consumption | body | `var(--sf-font-weight-strong)` | Font weight for <strong> inside body text. Override to choose a specific weight instead of inheriting bold. |
| `--sf-body-text-wrap` | PUBLIC | knob | body | `pretty` | text-wrap mode for body paragraphs. 'pretty' prevents orphaned last words; 'balance' equalises line lengths. |
| `--sf-border` | PUBLIC | consumption | border | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)` | Default border shorthand (width + solid + color). Apply directly to border property. |
| `--sf-border-scale` | PUBLIC | knob | border | `1` | Global border-width multiplier. Set to 0 for borderless UI; 0.5 for hairline-only; 2 to double all border widths across the system. |
| `--sf-border-strong` | PUBLIC | consumption | border | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)` | Strong-emphasis border shorthand. |
| `--sf-border-style` | PUBLIC | knob | border | `solid` | Global border-style default applied across all border tokens. |
| `--sf-border-subtle` | PUBLIC | consumption | border | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)` | Low-contrast subtle border shorthand. |
| `--sf-border-width-1` | PUBLIC | consumption | border | `calc(1px * var(--sf-border-scale, 1))` | Standard 1px border width. |
| `--sf-border-width-2` | PUBLIC | consumption | border | `calc(2px * var(--sf-border-scale, 1))` | Medium 2px border width. Common for focus outlines. |
| `--sf-border-width-3` | PUBLIC | consumption | border | `calc(3px * var(--sf-border-scale, 1))` | Thick 3px border width. |
| `--sf-border-width-4` | PUBLIC | consumption | border | `calc(4px * var(--sf-border-scale, 1))` | Extra-thick 4px border width for decorative borders. |
| `--sf-border-width-hairline` | PUBLIC | knob | border | `0.5px` | 1px border width (hairline). |
| `--sf-caret-color` | PUBLIC | consumption | caret | `var(--sf-color-action)` | Cursor caret color inside text inputs and contenteditable elements. |
| `--sf-code-font-size` | PUBLIC | knob | code | `0.875em` | Font size for inline <code> and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized. |
| `--sf-color-action` | PUBLIC | consumption | color | `light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces. |
| `--sf-color-action--active` | PUBLIC | consumption | color | `var(--sf-color-action-xdark)` | Action color at pressed/active brightness. |
| `--sf-color-action--hover` | PUBLIC | consumption | color | `var(--sf-color-action-darker)` | Action color at hover brightness. |
| `--sf-color-action-100` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` | Very light action shade. Hover fills on white surfaces, badge backgrounds. |
| `--sf-color-action-200` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` | Light action shade. Subtle fills and outlined badge backgrounds. |
| `--sf-color-action-300` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` | Light-mid action shade. Borders on light backgrounds, low-emphasis fills. |
| `--sf-color-action-400` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` | Mid-light action shade. Disabled state fills, decorative accents. |
| `--sf-color-action-50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` | Lightest action tint. Background fill for subtle action-tinted surfaces. |
| `--sf-color-action-500` | PUBLIC | consumption | color | `var(--sf-color-action)` | Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds. |
| `--sf-color-action-600` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` | Mid-dark action shade. Text on light surfaces, icon fills. |
| `--sf-color-action-700` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` | Dark action shade. Strong text and icon fills on light backgrounds. |
| `--sf-color-action-800` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` | Very dark action shade. High-contrast text on white. |
| `--sf-color-action-900` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` | Near-black action shade. Extreme contrast on white surfaces. |
| `--sf-color-action-950` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` | Darkest action tint. Near-black for dark-theme surface accents. |
| `--sf-color-action-a10` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.10)` | 10% opacity action tint. Subtle hover or selected-row background. |
| `--sf-color-action-a30` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.30)` | 30% opacity action tint. |
| `--sf-color-action-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.05)` | 5% opacity action tint. Barely-there hover highlight. |
| `--sf-color-action-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.50)` | 50% opacity action tint. Mid-transparency badge or overlay. |
| `--sf-color-action-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.80)` | 80% opacity action tint. |
| `--sf-color-action-darker` | PUBLIC | consumption | color | `var(--sf-color-action-600)` | Deep action shade for high-contrast contexts. |
| `--sf-color-action-lighter` | PUBLIC | consumption | color | `var(--sf-color-action-400)` | Light action shade for soft accents. |
| `--sf-color-action-muted` | PUBLIC | consumption | color | `var(--sf-color-action-a30)` | Medium action fill — outlined button hover backgrounds. |
| `--sf-color-action-source-dark` | PUBLIC | knob | color | `oklch(0.70 0.198 235)` | Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%. |
| `--sf-color-action-source-light` | PUBLIC | knob | color | `oklch(0.50 0.22 235)` | OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes. |
| `--sf-color-action-subtle` | PUBLIC | consumption | color | `var(--sf-color-action-a10)` | Lightest action tint — selected rows, active nav, chips. |
| `--sf-color-action-superdark` | PUBLIC | consumption | color | `var(--sf-color-action-950)` | Near-black action shade for maximum contrast on light surfaces. |
| `--sf-color-action-superlight` | PUBLIC | consumption | color | `var(--sf-color-action-50)` | Near-white action shade for maximum contrast on dark surfaces. |
| `--sf-color-action-tint` | PUBLIC | consumption | color | `var(--sf-color-action-a5)` | Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-action-xdark` | PUBLIC | consumption | color | `var(--sf-color-action-800)` | Extra-dark action shade. |
| `--sf-color-action-xlight` | PUBLIC | consumption | color | `var(--sf-color-action-200)` | Extra-light action shade. |
| `--sf-color-base` | PUBLIC | consumption | color | `light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))` | Mode-adaptive base surface color. Drives the page canvas and the surface elevation family; not an interactive/brand role. |
| `--sf-color-base--active` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)` | Pressed/active surface derived from --sf-color-base for subtle background interactions. |
| `--sf-color-base--hover` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)` | Hover-state surface derived from --sf-color-base for subtle background interactions. |
| `--sf-color-base-100` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.94 c h)` | Very light base-surface level. |
| `--sf-color-base-200` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.88 c h)` | Light base-surface level. |
| `--sf-color-base-300` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.78 c h)` | Light-mid base-surface level. |
| `--sf-color-base-400` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.65 c h)` | Mid-light base-surface level. |
| `--sf-color-base-50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.97 c h)` | Lightest base-surface level. |
| `--sf-color-base-500` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.50 c h)` | Mid base-surface level. |
| `--sf-color-base-600` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.37 c h)` | Mid-dark base-surface level. |
| `--sf-color-base-700` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.27 c h)` | Dark base-surface level. |
| `--sf-color-base-800` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.17 c h)` | Very dark base-surface level. |
| `--sf-color-base-900` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.11 c h)` | Near-black base-surface level. |
| `--sf-color-base-950` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) 0.06 c h)` | Darkest base-surface level. |
| `--sf-color-base-a10` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) l c h / 0.10)` | 10% opacity base-surface tint. |
| `--sf-color-base-a30` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) l c h / 0.30)` | 30% opacity base-surface tint. |
| `--sf-color-base-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) l c h / 0.05)` | 5% opacity base-surface tint. |
| `--sf-color-base-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) l c h / 0.50)` | 50% opacity base-surface tint. |
| `--sf-color-base-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) l c h / 0.80)` | 80% opacity base-surface tint. |
| `--sf-color-base-muted` | PUBLIC | consumption | color | `var(--sf-color-base-a30)` | Medium base-surface fill for muted containers or overlays. |
| `--sf-color-base-source-dark` | PUBLIC | knob | color | `oklch(0.22 0.003 250)` | Registered <color> dark counterpart of --sf-color-base. Keep near-black for dark-mode surfaces and elevation offsets. |
| `--sf-color-base-source-light` | PUBLIC | knob | color | `oklch(0.96 0.006 250)` | OKLCH source color for the light-mode base surface. Keep near-white so --sf-color-bg, --sf-color-surface, and raised/inset levels have room to separate. |
| `--sf-color-base-subtle` | PUBLIC | consumption | color | `var(--sf-color-base-a10)` | Subtle base-surface tint for low-emphasis backgrounds. |
| `--sf-color-base-tint` | PUBLIC | consumption | color | `var(--sf-color-base-a5)` | Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-bg` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(l + 0.02) c h)` | Base page / component background. The canvas all other surfaces layer on top of. |
| `--sf-color-bg--active` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.12)` | Background tint for pressed/active interactive elements. |
| `--sf-color-bg--disabled` | PUBLIC | consumption | color | `var(--sf-color-inset)` | Background for disabled interactive elements. |
| `--sf-color-bg--focus` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.06)` | Background tint for focused interactive elements. |
| `--sf-color-bg--hover` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.08)` | Background tint for hovered interactive elements (rows, list items, etc.). |
| `--sf-color-bg--selected` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.1)` | Background for selected items (checked rows, active nav links). |
| `--sf-color-black` | PUBLIC | knob | color | `oklch(0% 0 0)` | Absolute black reference value. |
| `--sf-color-border` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )` | Default border for dividers and component edges. |
| `--sf-color-border--disabled` | PUBLIC | consumption | color | `oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)` | Semi-transparent border for disabled element edges. |
| `--sf-color-border--focus` | PUBLIC | consumption | color | `var(--sf-color-action)` | Focus indicator border, used alongside --sf-focus-ring-color. |
| `--sf-color-border--strong` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )` | Stronger border for visually prominent edges and active outlines. |
| `--sf-color-border--subtle` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )` | Low-contrast border for subtle separation without strong visual weight. |
| `--sf-color-border--translucent` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.15)` | Translucent border for glass-morphism and frosted surfaces. |
| `--sf-color-code-bg` | PUBLIC | consumption | color | `var(--sf-color-inset)` | Background for inline <code> elements. Usually a subtle tint of the inset surface. |
| `--sf-color-code-text` | PUBLIC | consumption | color | `oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Text color for inline code and monospace preformatted text. |
| `--sf-color-danger` | PUBLIC | consumption | color | `light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Destructive / danger state color. Used for delete actions, error alerts, and critical warnings. |
| `--sf-color-danger-muted` | PUBLIC | consumption | color | `oklch(from var(--sf-color-danger) l c h / 0.3)` | Medium danger fill for icon backgrounds and badge fills. |
| `--sf-color-danger-source-dark` | PUBLIC | knob | color | `oklch(0.71 0.198 12)` | Registered <color> dark counterpart of --sf-color-danger. |
| `--sf-color-danger-source-light` | PUBLIC | knob | color | `oklch(0.48 0.22 12)` | OKLCH lightness source for the danger status color (covers destructive actions and form validation errors). |
| `--sf-color-danger-strong` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )` | High-contrast danger color for alert body text and icons. |
| `--sf-color-danger-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-danger) l c h / 0.12)` | Light danger tint for error row backgrounds and alert container fills. |
| `--sf-color-danger-tint` | PUBLIC | consumption | color | `oklch(from var(--sf-color-danger) l c h / 0.05)` | Near-transparent danger tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-dim` | PUBLIC | knob | color | `oklch(0 0 0 / 0.5)` | Backdrop overlay color for modals, drawers, and lightboxes. |
| `--sf-color-heading` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` | Heading text color. Slightly stronger contrast than body text for visual hierarchy. |
| `--sf-color-info` | PUBLIC | consumption | color | `light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Informational color for neutral tips, hints, and non-urgent notices. |
| `--sf-color-info-muted` | PUBLIC | consumption | color | `oklch(from var(--sf-color-info) l c h / 0.3)` | Medium info fill for info icons and hint chips. |
| `--sf-color-info-source-dark` | PUBLIC | knob | color | `oklch(0.71 0.162 235)` | Registered <color> dark counterpart of --sf-color-info. |
| `--sf-color-info-source-light` | PUBLIC | knob | color | `oklch(0.48 0.18 235)` | OKLCH lightness source for the info status color. |
| `--sf-color-info-strong` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )` | High-contrast info color for hint body text. |
| `--sf-color-info-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-info) l c h / 0.12)` | Light info tint for informational note backgrounds. |
| `--sf-color-info-tint` | PUBLIC | consumption | color | `oklch(from var(--sf-color-info) l c h / 0.05)` | Near-transparent info tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-inset` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(l - 0.02) c h)` | Slightly inset surface for nested areas — inputs, code blocks, sidebar panels. |
| `--sf-color-inverse` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(1 - l) c h)` | Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips. |
| `--sf-color-link` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )` | Default hyperlink color. |
| `--sf-color-link--active` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )` | Link color when actively pressed. |
| `--sf-color-link--disabled` | PUBLIC | consumption | color | `var(--sf-color-text--disabled)` | Disabled link color (low contrast, no interaction). |
| `--sf-color-link--hover` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )` | Link color on hover. |
| `--sf-color-link--underline` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) l c h / 0.3)` | Color of the link underline decoration. Defaults to a semi-transparent variant of the link color. |
| `--sf-color-link--visited` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )` | Visited link color. |
| `--sf-color-mark-bg` | PUBLIC | consumption | color | `oklch(from var(--sf-color-warning) l c h / 0.25)` | Background color for highlighted <mark> elements. |
| `--sf-color-mark-text` | PUBLIC | knob | color | `inherit` | Text color inside highlighted <mark> elements. |
| `--sf-color-neutral` | PUBLIC | consumption | color | `light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Neutral interactive color for low-emphasis actions and tertiary buttons. |
| `--sf-color-neutral--active` | PUBLIC | consumption | color | `var(--sf-color-neutral-xdark)` | Neutral color at pressed/active brightness. |
| `--sf-color-neutral--hover` | PUBLIC | consumption | color | `var(--sf-color-neutral-darker)` | Neutral color at hover brightness. |
| `--sf-color-neutral-100` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` | Very light neutral shade. |
| `--sf-color-neutral-200` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` | Light neutral shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds. |
| `--sf-color-neutral-300` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` | Light-mid neutral shade. |
| `--sf-color-neutral-400` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` | Mid-light neutral shade. |
| `--sf-color-neutral-50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` | Lightest neutral tint. |
| `--sf-color-neutral-500` | PUBLIC | consumption | color | `var(--sf-color-neutral)` | Mid neutral shade — the 'pure' hue. |
| `--sf-color-neutral-600` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` | Mid-dark neutral shade. |
| `--sf-color-neutral-700` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` | Dark neutral shade. |
| `--sf-color-neutral-800` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` | Very dark neutral shade. |
| `--sf-color-neutral-900` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` | Near-black neutral shade at step 900 on the numeric scale. Extreme contrast on light surfaces. |
| `--sf-color-neutral-950` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` | Darkest neutral tint. |
| `--sf-color-neutral-a10` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.10)` | 10% opacity neutral tint. |
| `--sf-color-neutral-a30` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.30)` | 30% opacity neutral tint. |
| `--sf-color-neutral-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.05)` | 5% opacity neutral tint. |
| `--sf-color-neutral-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.50)` | 50% opacity neutral tint. |
| `--sf-color-neutral-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) l c h / 0.80)` | 80% opacity neutral tint. |
| `--sf-color-neutral-darker` | PUBLIC | consumption | color | `var(--sf-color-neutral-600)` | Deep neutral shade for high-contrast contexts. |
| `--sf-color-neutral-lighter` | PUBLIC | consumption | color | `var(--sf-color-neutral-400)` | Light neutral shade for soft accents — alias of --sf-color-neutral-400. |
| `--sf-color-neutral-muted` | PUBLIC | consumption | color | `var(--sf-color-neutral-a30)` | Muted neutral fill for low-emphasis contexts. |
| `--sf-color-neutral-source-dark` | PUBLIC | knob | color | `oklch(0.69 0.0225 260)` | Registered <color> dark counterpart of --sf-color-neutral. |
| `--sf-color-neutral-source-light` | PUBLIC | knob | color | `oklch(0.52 0.025 260)` | OKLCH lightness source for the neutral color. |
| `--sf-color-neutral-subtle` | PUBLIC | consumption | color | `var(--sf-color-neutral-a10)` | Lightest neutral semantic tint. |
| `--sf-color-neutral-superdark` | PUBLIC | consumption | color | `var(--sf-color-neutral-950)` | Near-black neutral shade for maximum contrast on light surfaces — alias of --sf-color-neutral-950. |
| `--sf-color-neutral-superlight` | PUBLIC | consumption | color | `var(--sf-color-neutral-50)` | Near-white neutral shade. |
| `--sf-color-neutral-tint` | PUBLIC | consumption | color | `var(--sf-color-neutral-a5)` | Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-neutral-xdark` | PUBLIC | consumption | color | `var(--sf-color-neutral-800)` | Extra-dark neutral shade. |
| `--sf-color-neutral-xlight` | PUBLIC | consumption | color | `var(--sf-color-neutral-200)` | Extra-light neutral shade. |
| `--sf-color-overlay` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) l c h / 0.9)` | Overlay surface for floating panels, sheets, and modals. |
| `--sf-color-primary` | PUBLIC | consumption | color | `light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Primary brand palette color. Independent from --sf-color-action by default; override either source token to couple or separate brand and action roles. |
| `--sf-color-primary--active` | PUBLIC | consumption | color | `var(--sf-color-primary-xdark)` | Primary color at pressed/active brightness. |
| `--sf-color-primary--hover` | PUBLIC | consumption | color | `var(--sf-color-primary-darker)` | Primary color at hover brightness. |
| `--sf-color-primary-100` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` | Very light primary shade. |
| `--sf-color-primary-200` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` | Light primary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds. |
| `--sf-color-primary-300` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` | Light-mid primary shade. |
| `--sf-color-primary-400` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` | Mid-light primary shade. |
| `--sf-color-primary-50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` | Lightest primary tint. |
| `--sf-color-primary-500` | PUBLIC | consumption | color | `var(--sf-color-primary)` | Mid primary shade — the 'pure' hue. |
| `--sf-color-primary-600` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` | Mid-dark primary shade. |
| `--sf-color-primary-700` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` | Dark primary shade. |
| `--sf-color-primary-800` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` | Very dark primary shade. |
| `--sf-color-primary-900` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` | Near-black primary shade at step 900 on the numeric scale. Extreme contrast on light surfaces. |
| `--sf-color-primary-950` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` | Darkest primary tint. |
| `--sf-color-primary-a10` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.10)` | 10% opacity primary tint. |
| `--sf-color-primary-a30` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.30)` | 30% opacity primary tint. |
| `--sf-color-primary-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.05)` | 5% opacity primary tint. |
| `--sf-color-primary-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.50)` | 50% opacity primary tint. |
| `--sf-color-primary-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) l c h / 0.80)` | 80% opacity primary tint. |
| `--sf-color-primary-darker` | PUBLIC | consumption | color | `var(--sf-color-primary-600)` | Deep primary shade. |
| `--sf-color-primary-lighter` | PUBLIC | consumption | color | `var(--sf-color-primary-400)` | Light primary shade for soft accents — alias of --sf-color-primary-400. |
| `--sf-color-primary-muted` | PUBLIC | consumption | color | `var(--sf-color-primary-a30)` | Muted primary fill. |
| `--sf-color-primary-source-dark` | PUBLIC | knob | color | `oklch(0.715 0.243 264)` | Registered <color> dark counterpart of --sf-color-primary. |
| `--sf-color-primary-source-light` | PUBLIC | knob | color | `oklch(0.47 0.27 264)` | OKLCH lightness source for the primary color. |
| `--sf-color-primary-subtle` | PUBLIC | consumption | color | `var(--sf-color-primary-a10)` | Lightest primary semantic tint. |
| `--sf-color-primary-superdark` | PUBLIC | consumption | color | `var(--sf-color-primary-950)` | Near-black primary shade for maximum contrast on light surfaces — alias of --sf-color-primary-950. |
| `--sf-color-primary-superlight` | PUBLIC | consumption | color | `var(--sf-color-primary-50)` | Near-white primary shade. |
| `--sf-color-primary-tint` | PUBLIC | consumption | color | `var(--sf-color-primary-a5)` | Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-primary-xdark` | PUBLIC | consumption | color | `var(--sf-color-primary-800)` | Extra-dark primary shade. |
| `--sf-color-primary-xlight` | PUBLIC | consumption | color | `var(--sf-color-primary-200)` | Extra-light primary shade. |
| `--sf-color-raised` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(l + 0.04) c h)` | Elevated card surface that floats above the page background. |
| `--sf-color-scheme` | PUBLIC | knob | color | `light dark` | Preferred color scheme hint (light / dark / normal). Sent to the browser to influence UA chrome styling. |
| `--sf-color-secondary` | PUBLIC | consumption | color | `light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Raw secondary palette token for the secondary brand color. |
| `--sf-color-secondary--active` | PUBLIC | consumption | color | `var(--sf-color-secondary-xdark)` | Secondary color at pressed/active brightness. |
| `--sf-color-secondary--hover` | PUBLIC | consumption | color | `var(--sf-color-secondary-darker)` | Secondary color at hover brightness. |
| `--sf-color-secondary-100` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` | Very light secondary shade. |
| `--sf-color-secondary-200` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` | Light secondary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds. |
| `--sf-color-secondary-300` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` | Light-mid secondary shade. |
| `--sf-color-secondary-400` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` | Mid-light secondary shade. |
| `--sf-color-secondary-50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` | Lightest secondary tint. |
| `--sf-color-secondary-500` | PUBLIC | consumption | color | `var(--sf-color-secondary)` | Mid secondary shade — the 'pure' hue. |
| `--sf-color-secondary-600` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` | Mid-dark secondary shade. |
| `--sf-color-secondary-700` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` | Dark secondary shade. |
| `--sf-color-secondary-800` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` | Very dark secondary shade. |
| `--sf-color-secondary-900` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` | Near-black secondary shade at step 900 on the numeric scale. Extreme contrast on light surfaces. |
| `--sf-color-secondary-950` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` | Darkest secondary tint. |
| `--sf-color-secondary-a10` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.10)` | 10% opacity secondary tint. |
| `--sf-color-secondary-a30` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.30)` | 30% opacity secondary tint. |
| `--sf-color-secondary-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.05)` | 5% opacity secondary tint. |
| `--sf-color-secondary-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.50)` | 50% opacity secondary tint. |
| `--sf-color-secondary-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) l c h / 0.80)` | 80% opacity secondary tint. |
| `--sf-color-secondary-darker` | PUBLIC | consumption | color | `var(--sf-color-secondary-600)` | Deep secondary shade. |
| `--sf-color-secondary-lighter` | PUBLIC | consumption | color | `var(--sf-color-secondary-400)` | Light secondary shade for soft accents — alias of --sf-color-secondary-400. |
| `--sf-color-secondary-muted` | PUBLIC | consumption | color | `var(--sf-color-secondary-a30)` | Muted secondary fill. |
| `--sf-color-secondary-source-dark` | PUBLIC | knob | color | `oklch(0.84 0.036 264)` | Registered <color> dark counterpart of --sf-color-secondary. |
| `--sf-color-secondary-source-light` | PUBLIC | knob | color | `oklch(0.22 0.04 264)` | OKLCH lightness source for the secondary color. |
| `--sf-color-secondary-subtle` | PUBLIC | consumption | color | `var(--sf-color-secondary-a10)` | Lightest secondary semantic tint. |
| `--sf-color-secondary-superdark` | PUBLIC | consumption | color | `var(--sf-color-secondary-950)` | Near-black secondary shade for maximum contrast on light surfaces — alias of --sf-color-secondary-950. |
| `--sf-color-secondary-superlight` | PUBLIC | consumption | color | `var(--sf-color-secondary-50)` | Near-white secondary shade. |
| `--sf-color-secondary-tint` | PUBLIC | consumption | color | `var(--sf-color-secondary-a5)` | Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-secondary-xdark` | PUBLIC | consumption | color | `var(--sf-color-secondary-800)` | Extra-dark secondary shade. |
| `--sf-color-secondary-xlight` | PUBLIC | consumption | color | `var(--sf-color-secondary-200)` | Extra-light secondary shade. |
| `--sf-color-selection-bg` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action-source-light) l c h / 0.28), oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )` | Background color applied to browser text selections. |
| `--sf-color-selection-bg--alt` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55), oklch(from var(--sf-color-action-source-light) l c h / 0.28) )` | Alt selection background — the inverse-scheme highlight fill for surfaces that deliberately flip colour scheme (e.g. a dark hero in light mode). |
| `--sf-color-selection-text` | PUBLIC | knob | color | `inherit` | Text color inside browser text selections. |
| `--sf-color-selection-text--alt` | PUBLIC | knob | color | `inherit` | Alt selection text colour paired with --sf-color-selection-bg--alt; inherits by default so the underlying text colour shows through. |
| `--sf-color-success` | PUBLIC | consumption | color | `light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Positive / success color for confirmation messages and completed-state indicators. |
| `--sf-color-success-muted` | PUBLIC | consumption | color | `oklch(from var(--sf-color-success) l c h / 0.3)` | Medium success fill for success icons and status chips. |
| `--sf-color-success-source-dark` | PUBLIC | knob | color | `oklch(0.70 0.144 145)` | Registered <color> dark counterpart of --sf-color-success. |
| `--sf-color-success-source-light` | PUBLIC | knob | color | `oklch(0.50 0.16 145)` | OKLCH lightness source for the success status color. |
| `--sf-color-success-strong` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h), oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h) )` | High-contrast success color for confirmation message text. |
| `--sf-color-success-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-success) l c h / 0.12)` | Light success tint for confirmation backgrounds. |
| `--sf-color-success-tint` | PUBLIC | consumption | color | `oklch(from var(--sf-color-success) l c h / 0.05)` | Near-transparent success tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-surface` | PUBLIC | consumption | color | `var(--sf-color-base)` | Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level. |
| `--sf-color-tertiary` | PUBLIC | consumption | color | `light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Raw tertiary palette token for the third brand color. |
| `--sf-color-tertiary--active` | PUBLIC | consumption | color | `var(--sf-color-tertiary-xdark)` | Tertiary color at pressed/active brightness. |
| `--sf-color-tertiary--hover` | PUBLIC | consumption | color | `var(--sf-color-tertiary-darker)` | Tertiary color at hover brightness. |
| `--sf-color-tertiary-100` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` | Very light tertiary shade. |
| `--sf-color-tertiary-200` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` | Light tertiary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds. |
| `--sf-color-tertiary-300` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` | Light-mid tertiary shade. |
| `--sf-color-tertiary-400` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` | Mid-light tertiary shade. |
| `--sf-color-tertiary-50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` | Lightest tertiary tint. |
| `--sf-color-tertiary-500` | PUBLIC | consumption | color | `var(--sf-color-tertiary)` | Mid tertiary shade — the 'pure' hue. |
| `--sf-color-tertiary-600` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` | Mid-dark tertiary shade. |
| `--sf-color-tertiary-700` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` | Dark tertiary shade. |
| `--sf-color-tertiary-800` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` | Very dark tertiary shade. |
| `--sf-color-tertiary-900` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` | Near-black tertiary shade at step 900 on the numeric scale. Extreme contrast on light surfaces. |
| `--sf-color-tertiary-950` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` | Darkest tertiary tint. |
| `--sf-color-tertiary-a10` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.10)` | 10% opacity tertiary tint. |
| `--sf-color-tertiary-a30` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.30)` | 30% opacity tertiary tint. |
| `--sf-color-tertiary-a5` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.05)` | 5% opacity tertiary tint. |
| `--sf-color-tertiary-a50` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.50)` | 50% opacity tertiary tint. |
| `--sf-color-tertiary-a80` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) l c h / 0.80)` | 80% opacity tertiary tint. |
| `--sf-color-tertiary-darker` | PUBLIC | consumption | color | `var(--sf-color-tertiary-600)` | Deep tertiary shade. |
| `--sf-color-tertiary-lighter` | PUBLIC | consumption | color | `var(--sf-color-tertiary-400)` | Light tertiary shade for soft accents — alias of --sf-color-tertiary-400. |
| `--sf-color-tertiary-muted` | PUBLIC | consumption | color | `var(--sf-color-tertiary-a30)` | Muted tertiary fill. |
| `--sf-color-tertiary-source-dark` | PUBLIC | knob | color | `oklch(0.74 0.198 295)` | Registered <color> dark counterpart of --sf-color-tertiary. |
| `--sf-color-tertiary-source-light` | PUBLIC | knob | color | `oklch(0.42 0.22 295)` | OKLCH lightness source for the tertiary color. |
| `--sf-color-tertiary-subtle` | PUBLIC | consumption | color | `var(--sf-color-tertiary-a10)` | Lightest tertiary semantic tint. |
| `--sf-color-tertiary-superdark` | PUBLIC | consumption | color | `var(--sf-color-tertiary-950)` | Near-black tertiary shade for maximum contrast on light surfaces — alias of --sf-color-tertiary-950. |
| `--sf-color-tertiary-superlight` | PUBLIC | consumption | color | `var(--sf-color-tertiary-50)` | Near-white tertiary shade. |
| `--sf-color-tertiary-tint` | PUBLIC | consumption | color | `var(--sf-color-tertiary-a5)` | Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-tertiary-xdark` | PUBLIC | consumption | color | `var(--sf-color-tertiary-800)` | Extra-dark tertiary shade. |
| `--sf-color-tertiary-xlight` | PUBLIC | consumption | color | `var(--sf-color-tertiary-200)` | Extra-light tertiary shade. |
| `--sf-color-text` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` | Primary text color. Contrasts against --sf-color-bg for body copy. |
| `--sf-color-text--disabled` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )` | Text color for disabled UI elements. Intentionally low contrast. |
| `--sf-color-text--inverse` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )` | Text color for use on dark/inverted backgrounds. |
| `--sf-color-text--muted` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h), oklch(from var(--sf-color-neutral) clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h) )` | Muted text for metadata, timestamps, and low-priority annotations. |
| `--sf-color-text--on-action` | PUBLIC | consumption | color | `oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground color for text on action-colored backgrounds. |
| `--sf-color-text--on-base` | PUBLIC | consumption | color | `var(--sf-color-text)` | Accessible foreground for text on base-colored backgrounds. |
| `--sf-color-text--on-danger` | PUBLIC | consumption | color | `oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text on danger-colored backgrounds. |
| `--sf-color-text--on-info` | PUBLIC | consumption | color | `oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text on info-colored backgrounds. |
| `--sf-color-text--on-inverse` | PUBLIC | consumption | color | `oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text on inverted (dark-on-light / light-on-dark) backgrounds. |
| `--sf-color-text--on-neutral` | PUBLIC | consumption | color | `oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text placed on neutral-colored backgrounds. |
| `--sf-color-text--on-primary` | PUBLIC | consumption | color | `oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text placed on primary-colored backgrounds. |
| `--sf-color-text--on-secondary` | PUBLIC | consumption | color | `oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text placed on secondary-colored backgrounds. |
| `--sf-color-text--on-success` | PUBLIC | consumption | color | `oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text on success-colored backgrounds. |
| `--sf-color-text--on-tertiary` | PUBLIC | consumption | color | `oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text placed on tertiary-colored backgrounds. |
| `--sf-color-text--on-warning` | PUBLIC | consumption | color | `oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` | Accessible foreground for text on warning-colored backgrounds. |
| `--sf-color-text--placeholder` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )` | Placeholder text color for inputs and textareas. |
| `--sf-color-text--subtle` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` | De-emphasised, lower-emphasis text (captions, labels, supporting copy). Second tier below --sf-color-text; sits between it and --sf-color-text--muted. |
| `--sf-color-warning` | PUBLIC | consumption | color | `light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` | Warning / caution color for non-critical alerts and degraded-state indicators. |
| `--sf-color-warning-muted` | PUBLIC | consumption | color | `oklch(from var(--sf-color-warning) l c h / 0.3)` | Medium warning fill for icons and caution chips. |
| `--sf-color-warning-source-dark` | PUBLIC | knob | color | `oklch(0.65 0.153 80)` | Registered <color> dark counterpart of --sf-color-warning. |
| `--sf-color-warning-source-light` | PUBLIC | knob | color | `oklch(0.75 0.17 80)` | OKLCH lightness source for the warning status color. |
| `--sf-color-warning-strong` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h), oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h) )` | High-contrast warning color for caution text. |
| `--sf-color-warning-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-warning) l c h / 0.12)` | Light warning tint for warning notification backgrounds. |
| `--sf-color-warning-tint` | PUBLIC | consumption | color | `oklch(from var(--sf-color-warning) l c h / 0.05)` | Near-transparent warning tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
| `--sf-color-white` | PUBLIC | knob | color | `oklch(100% 0 0)` | Absolute white reference value. |
| `--sf-component-pad` | PUBLIC | consumption | component | `var(--sf-space-m)` | Standard inner padding for interactive components (buttons, form inputs, chips). |
| `--sf-container-default` | PUBLIC | knob | container | `75rem` | Default content container max-width (~1200px). |
| `--sf-container-full` | PUBLIC | knob | container | `100%` | Full-width container — removes the max-width constraint. |
| `--sf-container-narrow` | PUBLIC | knob | container | `38rem` | Narrow content max-width — ideal for article body and blog posts (~65ch). |
| `--sf-container-prose` | PUBLIC | knob | container | `65ch` | Prose max-width — optimised for readability (~75ch). |
| `--sf-container-wide` | PUBLIC | knob | container | `90rem` | Wide container for marketing / dashboard layouts (~1440px). |
| `--sf-content-gap` | PUBLIC | consumption | content | `var(--sf-space-s)` | Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once. |
| `--sf-contrast-bias` | PUBLIC-ADVANCED | knob | contrast | `0` | Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral). |
| `--sf-contrast-threshold` | PUBLIC-ADVANCED | knob | contrast | `0.6` | OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6. |
| `--sf-density` | PUBLIC-ADVANCED | knob | density | `1` | Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it). |
| `--sf-display-l-line-height` | PUBLIC | knob | display | `1` | Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes. |
| `--sf-display-m-line-height` | PUBLIC | knob | display | `1.05` | Line height for medium display text (--sf-text-display-m). |
| `--sf-display-s-line-height` | PUBLIC | consumption | display | `var(--sf-leading-tight)` | Line height for small display text (--sf-text-display-s). |
| `--sf-divider-color` | PUBLIC | consumption | divider | `var(--sf-color-border)` | Color of horizontal/vertical divider rules. |
| `--sf-divider-gap` | PUBLIC | consumption | divider | `var(--sf-space-m)` | Spacing (margin) around divider elements. |
| `--sf-divider-style` | PUBLIC | knob | divider | `solid` | Border style of dividers. |
| `--sf-divider-width` | PUBLIC | consumption | divider | `var(--sf-border-width-1)` | Stroke width of horizontal and vertical divider rules. |
| `--sf-drop-shadow-l` | PUBLIC | consumption | drop | `drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)))` | Large CSS filter: drop-shadow for prominent illustrated or cut-out elements. |
| `--sf-drop-shadow-m` | PUBLIC | consumption | drop | `drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7)))` | Medium CSS filter: drop-shadow for elevated icons and card thumbnails. |
| `--sf-drop-shadow-s` | PUBLIC | consumption | drop | `drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)))` | Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images. |
| `--sf-drop-shadow-xl` | PUBLIC | consumption | drop | `drop-shadow(0 16px 32px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)))` | Extra-large CSS filter: drop-shadow for hero-scale illustrated or cut-out elements. |
| `--sf-drop-shadow-xs` | PUBLIC | consumption | drop | `drop-shadow(0 0.5px 1px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1), 0.7)))` | Extra-small CSS filter: drop-shadow, for the subtlest depth on small icons and cutout images. |
| `--sf-duration-fast` | PUBLIC | consumption | duration | `calc(150ms * var(--sf-motion-scale))` | Fast duration (~150ms). Hover transitions, tooltip appear. |
| `--sf-duration-instant` | PUBLIC | consumption | duration | `calc(100ms * var(--sf-motion-scale))` | Near-instant duration (~100ms). Micro-interactions and cursor-follow effects. |
| `--sf-duration-none` | PUBLIC | knob | duration | `0ms` | 0ms duration. Disables transitions (respects prefers-reduced-motion). |
| `--sf-duration-normal` | PUBLIC | consumption | duration | `calc(250ms * var(--sf-motion-scale))` | Normal duration (~250ms). Default for most transitions. |
| `--sf-duration-slow` | PUBLIC | consumption | duration | `calc(400ms * var(--sf-motion-scale))` | Slow duration (~400ms). Emphasis transitions, drawers. |
| `--sf-duration-slower` | PUBLIC | consumption | duration | `calc(600ms * var(--sf-motion-scale))` | Extra-slow duration (~600ms). Page-level enter/exit transitions. |
| `--sf-ease-bounce` | PUBLIC | knob | ease | `linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)` | Bounce easing. Playful overshooting effect. |
| `--sf-ease-elastic` | PUBLIC | knob | ease | `linear(0, 0.3, 1.2, 0.9, 1.05, 1)` | Elastic easing. Spring-like overshooting effect. |
| `--sf-ease-in` | PUBLIC | knob | ease | `cubic-bezier(0.5, 0, 0.75, 0.25)` | Accelerating easing. Use for elements leaving the viewport. |
| `--sf-ease-in-out` | PUBLIC | knob | ease | `cubic-bezier(0.4, 0, 0.2, 1)` | Symmetric easing. Use for elements that move within the viewport. |
| `--sf-ease-linear` | PUBLIC | knob | ease | `linear` | Linear easing. Use for progress indicators and spinner rotations. |
| `--sf-ease-out` | PUBLIC | knob | ease | `cubic-bezier(0.25, 0, 0.15, 1)` | Decelerating easing. Use for elements entering the viewport. |
| `--sf-ease-overshoot` | PUBLIC | knob | ease | `linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)` | Subtle overshoot easing. Softer spring effect. |
| `--sf-ease-spring` | PUBLIC | knob | ease | `linear(0, 0.5, 1.1, 0.95, 1.02, 1)` | Spring easing. Natural physics-based motion. |
| `--sf-field-block` | PUBLIC | consumption | field | `var(--sf-space-xs)` | Vertical (block) padding inside form fields. |
| `--sf-field-required-marker` | PUBLIC | knob | field | `" *"` | CSS content value for required-field markers (e.g. " *"). Used by pseudo-elements in the .required utility pattern. |
| `--sf-fluid-max-vw` | PUBLIC-ADVANCED | knob | fluid | `90` | Maximum viewport width (in rem) at which the fluid scale clamps to its largest values. Default 90rem (~1440px). Part of the fluid scale engine. |
| `--sf-fluid-min-vw` | PUBLIC-ADVANCED | knob | fluid | `22.5` | Minimum viewport width (in rem) at which the fluid scale clamps to its smallest values. Default 22.5rem (~360px). Part of the fluid scale engine. |
| `--sf-fluid-width` | PUBLIC | knob | fluid | `100vw` | Fluid interpolation driver — the length term every fluid clamp() below measures against. Universal syntax ("*") not "<length>": a registered <length> requires a computationally-independent initial-value, and 100vw (viewport-dependent) is not one. The real default lives on… |
| `--sf-focus-ring-color` | PUBLIC | consumption | focus | `var(--sf-color-action)` | Color of the keyboard focus ring. Ensure sufficient contrast against all background surfaces. |
| `--sf-focus-ring-offset` | PUBLIC | knob | focus | `2px` | Gap between the element edge and the focus ring. |
| `--sf-focus-ring-shadow` | PUBLIC-ADVANCED | consumption | focus | `0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color)` | Computed box-shadow value for the focus ring — two-layer technique: offset shadow in bg color, then ring shadow in focus-ring color. Tune via --sf-focus-ring-width and --sf-focus-ring-color instead of overriding this directly. |
| `--sf-focus-ring-style` | PUBLIC | knob | focus | `solid` | Border style of the focus ring (solid, dashed, dotted). |
| `--sf-focus-ring-width` | PUBLIC | knob | focus | `2px` | Stroke width of the focus ring outline. |
| `--sf-font-body` | PUBLIC | knob | font | `system-ui, -apple-system, sans-serif` | Font family stack for body text. Override to set your primary typeface. |
| `--sf-font-display` | PUBLIC | consumption | font | `var(--sf-font-heading)` | Font family for display/marketing text. Override for large headline typefaces. |
| `--sf-font-features` | PUBLIC-ADVANCED | knob | font | `normal` | OpenType feature-settings string for body text (e.g. 'ss01', 'cv11'). Default 'normal'. Override on :root or a subtree to enable ligatures, alternate glyphs, etc. |
| `--sf-font-geometric` | PUBLIC | knob | font | `"Avenir", "Montserrat", "Corbel", "URW Gothic", source-sans-pro, sans-serif` | Geometric sans-serif slot — circular letterforms for brand alternates. |
| `--sf-font-heading` | PUBLIC | consumption | font | `var(--sf-font-body)` | Font family for headings. Defaults to display if not overridden separately. |
| `--sf-font-humanist` | PUBLIC | knob | font | `"Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif` | Humanist sans-serif slot — warm, readable alternate typeface. |
| `--sf-font-mono` | PUBLIC | knob | font | `ui-monospace, monospace` | Monospace font family for code, pre, and kbd elements. |
| `--sf-font-numeric` | PUBLIC | knob | font | `tabular-nums` | font-variant-numeric shorthand (e.g. tabular-nums) for aligned numeric data. |
| `--sf-font-slab` | PUBLIC | knob | font | `"Rockwell", "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif` | Slab-serif slot for editorial or display headings. |
| `--sf-font-variation` | PUBLIC-ADVANCED | knob | font | `normal` | Variable-font axis settings for body text (e.g. "wght" 450). Default 'normal'. Override on :root or a subtree to activate variable-font axes. |
| `--sf-font-weight-body` | PUBLIC | consumption | font | `var(--sf-font-weight-normal)` | Font weight for body text (typically 400 / normal). |
| `--sf-font-weight-bold` | PUBLIC | knob | font | `700` | Strong emphasis weight (700). |
| `--sf-font-weight-display` | PUBLIC | consumption | font | `var(--sf-font-weight-bold)` | Font weight for display-size text. |
| `--sf-font-weight-heading` | PUBLIC | consumption | font | `var(--sf-font-weight-semibold)` | Font weight for headings (typically 600–700). |
| `--sf-font-weight-interactive` | PUBLIC | consumption | font | `var(--sf-font-weight-semibold)` | Font weight for interactive role text — buttons, badges, and navigation labels. Defaults to semibold. |
| `--sf-font-weight-light` | PUBLIC | knob | font | `300` | Light weight (300). Use sparingly — check contrast at small sizes. |
| `--sf-font-weight-medium` | PUBLIC | knob | font | `500` | Medium weight (500). Subtle emphasis without full bold. |
| `--sf-font-weight-normal` | PUBLIC | knob | font | `400` | Normal / regular weight (400). |
| `--sf-font-weight-semibold` | PUBLIC | knob | font | `600` | Semibold weight (600). Common for labels and subheadings. |
| `--sf-font-weight-strong` | PUBLIC | consumption | font | `var(--sf-font-weight-bold)` | Font weight for strong/emphasis inline role. Defaults to bold. |
| `--sf-gap` | PUBLIC | consumption | gap | `var(--sf-space-m)` | Default gap between components (the loose rhythm). Layout primitives like cluster/grid/sidebar default to it. Override globally to retune them all at once, or set a primitive token (e.g. --sf-cluster-gap) for one element. |
| `--sf-gradient-action` | PUBLIC | consumption | gradient | `linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h))` | Gradient using action palette colors (light to saturated). Core-4 parity with the primary/secondary/tertiary gradients; drives the default .sf-btn--gradient fill. |
| `--sf-gradient-brand` | PUBLIC | consumption | gradient | `linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))` | Multi-stop brand gradient spanning primary and secondary palette colors. Use for hero backgrounds and brand accents. |
| `--sf-gradient-fade--b` | PUBLIC | consumption | gradient | `linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))` | Fade-to-bottom gradient (transparent → surface). Use to fade content into a background below (infinite scroll fade, content cutoff). |
| `--sf-gradient-fade--l` | PUBLIC | consumption | gradient | `linear-gradient(in oklch to left, transparent, var(--sf-color-bg))` | Fade-to-left gradient. Use to indicate left-side scrollable overflow. |
| `--sf-gradient-fade--r` | PUBLIC | consumption | gradient | `linear-gradient(in oklch to right, transparent, var(--sf-color-bg))` | Fade-to-right gradient. Use to indicate right-side scrollable overflow. |
| `--sf-gradient-fade--t` | PUBLIC | consumption | gradient | `linear-gradient(in oklch to top, transparent, var(--sf-color-bg))` | Fade-to-top gradient (transparent → surface). Use to fade content into a background above. |
| `--sf-gradient-primary` | PUBLIC | consumption | gradient | `linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))` | Gradient using primary palette colors (light to saturated). |
| `--sf-gradient-secondary` | PUBLIC | consumption | gradient | `linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))` | Gradient using secondary palette colors. |
| `--sf-gradient-surface` | PUBLIC | consumption | gradient | `linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))` | Subtle surface-color gradient for depth layering and glass effects. |
| `--sf-gradient-tertiary` | PUBLIC | consumption | gradient | `linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))` | Gradient using tertiary palette colors. |
| `--sf-gutter` | PUBLIC | consumption | gutter | `var(--sf-space-l)` | Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints. |
| `--sf-h1-font-weight` | PUBLIC | consumption | h1 | `var(--sf-font-weight-heading)` | Font weight for <h1>. |
| `--sf-h1-letter-spacing` | PUBLIC | consumption | h1 | `var(--sf-tracking-tight)` | Letter-spacing for <h1>. Typically slightly negative at large sizes. |
| `--sf-h1-line-height` | PUBLIC | consumption | h1 | `var(--sf-leading-tight)` | Line height for <h1>. Tighter than body to avoid excessive whitespace at large sizes. |
| `--sf-h1-max-width` | PUBLIC | knob | h1 | `none` | Max-inline-size cap for <h1>. Default none (unconstrained). Set to a ch value (e.g. 20ch) to prevent wide headings from spanning the full column on large screens. |
| `--sf-h1-size` | PUBLIC | consumption | h1 | `var(--sf-text-4xl)` | Font size for <h1>. |
| `--sf-h2-font-weight` | PUBLIC | consumption | h2 | `var(--sf-font-weight-heading)` | Font weight for <h2>. |
| `--sf-h2-letter-spacing` | PUBLIC | consumption | h2 | `var(--sf-tracking-tight)` | Letter-spacing for <h2>. |
| `--sf-h2-line-height` | PUBLIC | consumption | h2 | `var(--sf-leading-tight)` | Line height for <h2>. |
| `--sf-h2-max-width` | PUBLIC | knob | h2 | `none` | Max-inline-size cap for <h2>. Default none. |
| `--sf-h2-size` | PUBLIC | consumption | h2 | `var(--sf-text-3xl)` | Font size for <h2>. |
| `--sf-h3-font-weight` | PUBLIC | consumption | h3 | `var(--sf-font-weight-heading)` | Font weight for <h3>. |
| `--sf-h3-letter-spacing` | PUBLIC | consumption | h3 | `var(--sf-tracking-normal)` | Letter-spacing for <h3>. |
| `--sf-h3-line-height` | PUBLIC | consumption | h3 | `var(--sf-leading-snug)` | Line height for <h3>. |
| `--sf-h3-max-width` | PUBLIC | knob | h3 | `none` | Max-inline-size cap for <h3>. Default none. |
| `--sf-h3-size` | PUBLIC | consumption | h3 | `var(--sf-text-2xl)` | Font size for <h3>. |
| `--sf-h4-font-weight` | PUBLIC | consumption | h4 | `var(--sf-font-weight-heading)` | Font weight for <h4>. |
| `--sf-h4-letter-spacing` | PUBLIC | consumption | h4 | `var(--sf-tracking-normal)` | Letter-spacing for <h4>. |
| `--sf-h4-line-height` | PUBLIC | consumption | h4 | `var(--sf-leading-snug)` | Line height for <h4>. |
| `--sf-h4-max-width` | PUBLIC | knob | h4 | `none` | Max-inline-size cap for <h4>. Default none. |
| `--sf-h4-size` | PUBLIC | consumption | h4 | `var(--sf-text-xl)` | Font size for <h4>. |
| `--sf-h5-font-weight` | PUBLIC | consumption | h5 | `var(--sf-font-weight-heading)` | Font weight for <h5>. |
| `--sf-h5-letter-spacing` | PUBLIC | consumption | h5 | `var(--sf-tracking-normal)` | Letter-spacing for <h5>. |
| `--sf-h5-line-height` | PUBLIC | consumption | h5 | `var(--sf-leading-normal)` | Line height for <h5>. |
| `--sf-h5-max-width` | PUBLIC | knob | h5 | `none` | Max-inline-size cap for <h5>. Default none. |
| `--sf-h5-size` | PUBLIC | consumption | h5 | `var(--sf-text-l)` | Font size for <h5>. |
| `--sf-h6-font-weight` | PUBLIC | consumption | h6 | `var(--sf-font-weight-heading)` | Font weight for <h6>. |
| `--sf-h6-letter-spacing` | PUBLIC | consumption | h6 | `var(--sf-tracking-wide)` | Letter-spacing for <h6>. |
| `--sf-h6-line-height` | PUBLIC | consumption | h6 | `var(--sf-leading-normal)` | Line height for <h6>. |
| `--sf-h6-max-width` | PUBLIC | knob | h6 | `none` | Max-inline-size cap for <h6>. Default none. |
| `--sf-h6-size` | PUBLIC | consumption | h6 | `var(--sf-text-m)` | Font size for <h6>. |
| `--sf-header-height` | PUBLIC | consumption | header | `clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop))` | Total height of the sticky page header. Used by --sf-sticky-offset to prevent content from hiding under it. |
| `--sf-header-height-desktop` | PUBLIC | knob | header | `5rem` | Header height at desktop breakpoints. |
| `--sf-header-height-mobile` | PUBLIC | knob | header | `3.5rem` | Header height at mobile breakpoints. |
| `--sf-heading-color` | PUBLIC | consumption | heading | `var(--sf-color-heading)` | Text color for all headings (h1–h6). Alias of --sf-color-heading. |
| `--sf-heading-font-family` | PUBLIC | consumption | heading | `var(--sf-font-heading)` | Font family for all headings. Alias of --sf-font-heading. |
| `--sf-heading-text-wrap` | PUBLIC | knob | heading | `balance` | text-wrap for headings. 'balance' prevents orphaned short last lines in multi-line headings. |
| `--sf-hover-grow-scale` | PUBLIC | knob | hover | `1.05` | Scale factor applied by .sf-hover-grow on hover (>1 grows). |
| `--sf-hover-lift` | PUBLIC | knob | hover | `0.25em` | Translate distance for .sf-hover-float (up) and .sf-hover-sink (down) on hover. |
| `--sf-hover-shrink-scale` | PUBLIC | knob | hover | `0.95` | Scale factor applied by .sf-hover-shrink on hover (<1 shrinks). |
| `--sf-hover-slide` | PUBLIC | knob | hover | `0.5em` | Translate distance for .sf-hover-slide-start / .sf-hover-slide-end on hover. |
| `--sf-icon-2xl` | PUBLIC | knob | icon | `4em` | 2× large icon size (~40px+). Hero or onboarding icons. |
| `--sf-icon-l` | PUBLIC | knob | icon | `2em` | Large icon size (~24px). Standalone icon buttons. |
| `--sf-icon-m` | PUBLIC | knob | icon | `1.5em` | Medium icon size (~20px). Default for inline and button icons. |
| `--sf-icon-s` | PUBLIC | knob | icon | `1em` | Small icon size (~16px). Dense UI chrome. |
| `--sf-icon-xl` | PUBLIC | knob | icon | `3em` | Extra-large icon size (~32px). Feature icons. |
| `--sf-icon-xs` | PUBLIC | knob | icon | `0.875em` | Extra-small icon size (~12px). Inline indicators. |
| `--sf-is-dark` | INTERNAL | knob | is | `0` | Mode flag — 0 in light mode, 1 in dark mode. Set automatically by [data-theme='dark'] and prefers-color-scheme. Drives dark-mode formula branches in calc(). |
| `--sf-leading-normal` | PUBLIC | knob | leading | `1.5` | Normal line height (~1.5). Default for body text. |
| `--sf-leading-relaxed` | PUBLIC | knob | leading | `1.625` | Relaxed line height (~1.65). Long-form reading text. |
| `--sf-leading-snug` | PUBLIC | knob | leading | `1.3` | Snug line height (~1.35). Use for sub-headings. |
| `--sf-leading-taper` | PUBLIC-ADVANCED | knob | leading | `0` | Progressive leading tightener: each step up the type scale subtracts step-index × taper from its per-size line-height token. Default 0 keeps the curated defaults. |
| `--sf-leading-tight` | PUBLIC | knob | leading | `1.1` | Tight line height (~1.2). Use for large display headings. |
| `--sf-link-external-label` | PUBLIC | knob | link | `"opens in a new window or external site"` | Accessible name for the .sf-link-external marker glyph, read by screen readers via the CSS content alt-text syntax. Localise or clear alongside --sf-link-external-marker. |
| `--sf-link-external-marker` | PUBLIC | knob | link | `" \\2197"` | CSS content value appended to external links (e.g. " ↗"). Used by the .external-link pseudo-element pattern. |
| `--sf-link-underline-offset` | PUBLIC | knob | link | `0.15em` | Vertical offset of the link underline from the text baseline. |
| `--sf-link-underline-thickness` | PUBLIC | knob | link | `auto` | Stroke width of the link underline. |
| `--sf-lumlocker` | PUBLIC-ADVANCED | knob | lumlocker | `0.65` | OKLCH lightness lock value for light mode. When :root has [data-lumlocker], the 4 brand colors (primary, secondary, tertiary, action) are remapped to this L so their contrast remains constant as hues shift. Dark mode uses --sf-lumlocker-dark. |
| `--sf-lumlocker-dark` | PUBLIC-ADVANCED | knob | lumlocker | `clamp(0.5, calc(1.18 - var(--sf-lumlocker)), 0.92)` | OKLCH lightness lock value for dark mode under [data-lumlocker]. Defaults to clamp(0.5, calc(1.18 - var(--sf-lumlocker)), 0.92) — the mirror of the light L around the light/dark background midpoint — so the lock keeps equivalent contrast against the surface in both themes. Set explicitly to break the mirror. |
| `--sf-mask-scrim-end` | PUBLIC-ADVANCED | consumption | mask | `var(--sf-space-l)` | End stop for edge-fade mask gradients. Mirrors --sf-mask-scrim-start for the trailing edge of a scroll container. |
| `--sf-mask-scrim-start` | PUBLIC-ADVANCED | consumption | mask | `var(--sf-space-l)` | Start stop for edge-fade mask gradients on scroll reels / overflow containers. Use in mask-image: linear-gradient(..., transparent var(--sf-mask-scrim-start)) to fade content near the leading edge. |
| `--sf-media-radius` | PUBLIC | knob | media | `0` | Radius + space: <length> syntax enables CSS transitions on layout values — border-radius/padding/gap etc. now interpolate instead of snapping. Shadow: syntax:"*" (no <shadow> type in spec); inherits:true so :root values cascade normally; registers the properties formally for… |
| `--sf-motion-scale` | PUBLIC-ADVANCED | knob | motion | `1` | Global motion multiplier. All transition and animation durations multiply by this factor. Set to 0 to disable all motion; reduce below 1 for snappier feel. |
| `--sf-object-fit` | PUBLIC | knob | object | `cover` | Default object-fit value for replaced elements (img, video). |
| `--sf-object-position` | PUBLIC | knob | object | `50% 50%` | Default object-position for replaced elements. |
| `--sf-opacity-disabled` | PUBLIC | knob | opacity | `0.45` | Opacity for disabled UI elements (typically 0.4–0.5). |
| `--sf-opacity-muted` | PUBLIC | knob | opacity | `0.5` | General de-emphasis opacity for secondary content, ghost elements, or non-primary layers. Default 0.5. |
| `--sf-optical-sizing` | PUBLIC-ADVANCED | knob | optical | `auto` | CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing. |
| `--sf-palette-shade-l` | PUBLIC-ADVANCED | knob | palette | `0.1` | Absolute OKLCH lightness the shade steps (600-950) pull toward; sets how dark the darkest palette step can reach. Default 0.1. |
| `--sf-palette-tint-l` | PUBLIC-ADVANCED | knob | palette | `0.97` | Absolute OKLCH lightness the tint steps (50-400) pull toward; sets how light the lightest palette step can reach. Default 0.97. |
| `--sf-print-base-size` | PUBLIC-ADVANCED | knob | print | `11pt` | Base font size for @media print stylesheets. Default 11pt. Override on :root to adjust printed body text size. |
| `--sf-print-page-margin` | PUBLIC-ADVANCED | knob | print | `2cm` | Page margin for printed output. Default 2cm. Maps to @page margin. |
| `--sf-print-page-size` | PUBLIC-ADVANCED | knob | print | `a4` | Target paper size for printing. Default 'a4'. Maps to @page size. Common values: a4, letter, legal. |
| `--sf-radius-2xl` | PUBLIC | consumption | radius | `calc(24px * var(--sf-radius-scale))` | 2× large radius (~20px). Rounded card variants. |
| `--sf-radius-2xs` | PUBLIC | consumption | radius | `calc(1px * var(--sf-radius-scale))` | Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements. |
| `--sf-radius-3xl` | PUBLIC | consumption | radius | `calc(32px * var(--sf-radius-scale))` | 3× large radius (~24px). Large rounded surfaces. |
| `--sf-radius-4xl` | PUBLIC | consumption | radius | `calc(48px * var(--sf-radius-scale))` | 4× large radius (~32px). Near-pill rounding. |
| `--sf-radius-full` | PUBLIC | knob | radius | `9999px` | Full rounding (50%). For circular elements like avatars. |
| `--sf-radius-l` | PUBLIC | consumption | radius | `calc(12px * var(--sf-radius-scale))` | Large radius (~12px). Modals, popovers, panels. |
| `--sf-radius-m` | PUBLIC | consumption | radius | `calc(8px * var(--sf-radius-scale))` | Medium radius (~6–8px). Default — inputs, standard buttons, cards. |
| `--sf-radius-none` | PUBLIC | knob | radius | `0` | Zero border radius — square corners. |
| `--sf-radius-outer` | PUBLIC-ADVANCED | consumption | radius | `calc(var(--sf-radius-m) + var(--sf-component-pad))` | Concentric corner helper: outer radius for a container that wraps content with inner radius of --sf-radius-m. Computed as --sf-radius-m + --sf-component-pad so corners align visually. |
| `--sf-radius-pill` | PUBLIC | consumption | radius | `var(--sf-radius-full)` | Pill rounding (9999px). Tags, toggle pills, status badges. |
| `--sf-radius-s` | PUBLIC | consumption | radius | `calc(4px * var(--sf-radius-scale))` | Small radius (~4px). Badges, chips, small buttons. |
| `--sf-radius-scale` | PUBLIC-ADVANCED | knob | radius | `1` | Global border-radius multiplier. Scales the entire radius ramp up (>1) or down (<1) from one knob. Set to 0 for sharp corners everywhere. |
| `--sf-radius-xl` | PUBLIC | consumption | radius | `calc(16px * var(--sf-radius-scale))` | Extra-large radius (~16px). Prominent cards and feature blocks. |
| `--sf-radius-xs` | PUBLIC | consumption | radius | `calc(2px * var(--sf-radius-scale))` | Hairline radius (~2px). Subtle rounding for tight components. |
| `--sf-ratio-3-2` | PUBLIC | knob | ratio | `3 / 2` | 3:2 aspect ratio. Common for landscape photography. |
| `--sf-ratio-4-3` | PUBLIC | knob | ratio | `4 / 3` | 4:3 aspect ratio. Classic screen ratio. |
| `--sf-ratio-cinema` | PUBLIC | knob | ratio | `21 / 9` | 2.39:1 cinematic widescreen aspect ratio. |
| `--sf-ratio-golden` | PUBLIC | knob | ratio | `1.618 / 1` | 1.618:1 golden ratio. Harmonious proportions. |
| `--sf-ratio-portrait` | PUBLIC | knob | ratio | `3 / 4` | 2:3 portrait aspect ratio. |
| `--sf-ratio-square` | PUBLIC | knob | ratio | `1` | 1:1 square aspect ratio. Use for avatars, icon containers, and square thumbnails. |
| `--sf-ratio-video` | PUBLIC | knob | ratio | `16 / 9` | 16:9 widescreen video aspect ratio. Use for video embeds and video-thumbnail containers. |
| `--sf-safe-bottom` | PUBLIC-ADVANCED | knob | safe | `env(safe-area-inset-bottom, 0px)` | Device safe-area inset at the bottom edge (home indicator, gesture bar). Resolves to env(safe-area-inset-bottom, 0px). Use for fixed footers. |
| `--sf-safe-left` | PUBLIC-ADVANCED | knob | safe | `env(safe-area-inset-left, 0px)` | Device safe-area inset at the left edge. Resolves to env(safe-area-inset-left, 0px). |
| `--sf-safe-right` | PUBLIC-ADVANCED | knob | safe | `env(safe-area-inset-right, 0px)` | Device safe-area inset at the right edge (rounded corners, home indicator). Resolves to env(safe-area-inset-right, 0px). |
| `--sf-safe-top` | PUBLIC-ADVANCED | knob | safe | `env(safe-area-inset-top, 0px)` | Device safe-area inset at the top edge (notch, Dynamic Island). Resolves to env(safe-area-inset-top, 0px). Use for fixed headers on notched devices. |
| `--sf-scroll-timeline-range-end` | PUBLIC-ADVANCED | knob | scroll | `cover 30%` | animation-range end value for scroll-driven entrance effects. Default 'cover 30%'. Override on an element to control when its entrance animation finishes. |
| `--sf-scroll-timeline-range-exit-end` | PUBLIC | knob | scroll | `exit 100%` | Scroll-timeline range at which a scroll-out exit animation finishes. Default: exit 100%. |
| `--sf-scroll-timeline-range-exit-start` | PUBLIC | knob | scroll | `cover 70%` | Scroll-timeline range at which a scroll-out exit animation begins. Default: cover 70%. |
| `--sf-scroll-timeline-range-start` | PUBLIC-ADVANCED | knob | scroll | `entry 0%` | animation-range start value for scroll-driven entrance effects. Default 'entry 0%'. Override on an element to control when its entrance animation begins. |
| `--sf-scrollbar-thumb` | PUBLIC | consumption | scrollbar | `var(--sf-color-neutral)` | Color of the custom scrollbar thumb. |
| `--sf-scrollbar-track` | PUBLIC | knob | scrollbar | `transparent` | Color of the custom scrollbar track. |
| `--sf-section-pad` | PUBLIC | consumption | section | `var(--sf-section-pad--m)` | Default vertical padding for full-width page sections. |
| `--sf-section-pad--2xl` | PUBLIC | consumption | section | `calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale))` | 2× large section vertical padding for hero areas. |
| `--sf-section-pad--l` | PUBLIC | consumption | section | `calc(var(--sf-space-4xl) * var(--sf-section-scale))` | Large section vertical padding. |
| `--sf-section-pad--m` | PUBLIC | consumption | section | `calc(var(--sf-space-3xl) * var(--sf-section-scale))` | Medium section vertical padding. |
| `--sf-section-pad--s` | PUBLIC | consumption | section | `calc(var(--sf-space-2xl) * var(--sf-section-scale))` | Small section vertical padding. |
| `--sf-section-pad--xl` | PUBLIC | consumption | section | `calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale))` | Extra-large vertical section padding for hero and feature sections. |
| `--sf-section-pad--xs` | PUBLIC | consumption | section | `calc(var(--sf-space-xl) * var(--sf-section-scale))` | Extra-small vertical section padding for compact in-page modules. |
| `--sf-section-scale` | PUBLIC-ADVANCED | knob | section | `1` | Global multiplier applied to every --sf-section-pad--* size — one dial re-rhythms all section padding (default 1). |
| `--sf-shadow-2xl` | PUBLIC | consumption | shadow | `0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7))` | Largest shadow for hero cards, feature highlights, and marketing surfaces. |
| `--sf-shadow-color` | PUBLIC-ADVANCED | consumption | shadow | `oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h)` | Near-black shadow tint derived from the neutral palette. Inherits the neutral's chroma and hue so colorless neutrals produce colorless shadows. |
| `--sf-shadow-glow` | PUBLIC | consumption | shadow | `0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` | Glow box-shadow shorthand for decorative glow effects. |
| `--sf-shadow-glow-color` | PUBLIC-ADVANCED | consumption | shadow | `var(--sf-color-primary)` | Ambient glow tint used by --sf-shadow-glow. Override to retint all glow shadows; opacity and dark-mode boost are controlled by --sf-shadow-strength. |
| `--sf-shadow-inner` | PUBLIC | consumption | shadow | `inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` | Inset shadow for pressed states, inset inputs, and recessed surfaces. |
| `--sf-shadow-l` | PUBLIC | consumption | shadow | `0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` | Large shadow for drawers, sidebars, and prominent elevated surfaces. |
| `--sf-shadow-lightness` | PUBLIC | knob | shadow | `0.15` | OKLCH lightness component of the shadow color. Lower = denser-looking shadows. Tune this independently of --sf-shadow-strength to control tonal weight without affecting opacity. |
| `--sf-shadow-m` | PUBLIC | consumption | shadow | `0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` | Medium shadow for cards and content panels. |
| `--sf-shadow-none` | PUBLIC | knob | shadow | `none` | No box-shadow (resets inherited shadows). Use to explicitly remove elevation. |
| `--sf-shadow-s` | PUBLIC | consumption | shadow | `0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7))` | Small shadow for chips, tags, and inline elevated surfaces. |
| `--sf-shadow-strength` | PUBLIC-ADVANCED | knob | shadow | `calc(0.08 + var(--sf-is-dark) * 0.17)` | Base opacity for the entire shadow ramp. Auto-boosted in dark mode via --sf-is-dark. Override with calc() to preserve the adaptation: e.g. calc(0.12 + var(--sf-is-dark) * 0.17). |
| `--sf-shadow-xl` | PUBLIC | consumption | shadow | `0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))` | Extra-large shadow for modals, dialogs, and high-elevation sheets. |
| `--sf-shadow-xs` | PUBLIC | consumption | shadow | `0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))` | Extra-small shadow for barely-elevated elements (focused inputs, small chips). |
| `--sf-size-l` | PUBLIC | consumption | size | `calc(3rem * var(--sf-density))` | Large UI component height (~48px). Touch-friendly interactive elements. |
| `--sf-size-m` | PUBLIC | consumption | size | `calc(2.5rem * var(--sf-density))` | ~40px UI component height (scale rung `m`). The default `.sf-btn` min-height. |
| `--sf-size-s` | PUBLIC | consumption | size | `calc(2rem * var(--sf-density))` | Small UI component height (~32px). Compact buttons and input variants. |
| `--sf-size-xl` | PUBLIC | consumption | size | `calc(3.5rem * var(--sf-density))` | Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls. |
| `--sf-size-xs` | PUBLIC | consumption | size | `calc(1.5rem * var(--sf-density))` | Extra-small interactive component height (~24px). For very compact inline elements and micro-controls. |
| `--sf-space-2xl` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))` | 48px-equivalent spacing. Large section spacing. |
| `--sf-space-2xs` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))` | 4px-equivalent spacing. Tight inline gaps, icon-to-text padding. |
| `--sf-space-3xl` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))` | 64px-equivalent spacing. Extra-large layout gaps. |
| `--sf-space-4xl` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale))` | 96px-equivalent spacing. Hero / page-level section padding. |
| `--sf-space-base-max` | PUBLIC-ADVANCED | knob | space | `2` | Maximum base spacing unit (rem) at the widest viewport. Drives the top of the fluid spacing ramp. Part of the fluid scale engine. |
| `--sf-space-base-min` | PUBLIC-ADVANCED | knob | space | `1` | Minimum base spacing unit (rem) at the narrowest viewport. Drives the bottom of the fluid spacing ramp. Part of the fluid scale engine. |
| `--sf-space-l` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale))` | 24px-equivalent spacing. Card padding, section dividers. |
| `--sf-space-m` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale))` | 16px-equivalent spacing. Default unit, widely applicable. |
| `--sf-space-none` | PUBLIC | knob | space | `0` | Zero spacing. Explicit alias for clarity in utility classes. |
| `--sf-space-px` | PUBLIC | knob | space | `1px` | 1px spacing. Hairline offset for fine adjustments. |
| `--sf-space-ratio-max` | PUBLIC-ADVANCED | knob | space | `1.333` | Modular spacing ratio at the widest viewport. Controls step-to-step growth in the spacing ramp. Default 1.333 (perfect fourth). Part of the fluid scale engine. |
| `--sf-space-ratio-min` | PUBLIC-ADVANCED | knob | space | `1.25` | Modular spacing ratio at the narrowest viewport. Controls step-to-step growth in the spacing ramp. Default 1.25 (major third). Part of the fluid scale engine. |
| `--sf-space-s` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale))` | 12px-equivalent spacing. Form field inner padding, narrow gaps. |
| `--sf-space-scale` | PUBLIC-ADVANCED | knob | space | `1` | Global spacing multiplier. Scales the fluid spacing ramp. Increase above 1 for airier layouts; reduce below 1 for compact UIs. |
| `--sf-space-xl` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))` | 32px-equivalent spacing. Feature row gaps, generous section padding. |
| `--sf-space-xs` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))` | 8px-equivalent spacing. Compact list rows, tab padding. |
| `--sf-stagger-step` | PUBLIC | knob | stagger | `75ms` | Per-item delay increment for the .sf-stagger utility. One knob retunes the whole staggered sequence; the class multiplies it by each child's index and by --sf-motion-scale. |
| `--sf-sticky-offset` | PUBLIC | consumption | sticky | `clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))` | top offset for position: sticky elements, accounting for the header height. |
| `--sf-sticky-offset-desktop` | PUBLIC | consumption | sticky | `var(--sf-header-height-desktop)` | Sticky offset at desktop breakpoints. |
| `--sf-sticky-offset-mobile` | PUBLIC | consumption | sticky | `var(--sf-header-height-mobile)` | Sticky offset at mobile breakpoints. |
| `--sf-text-2xl` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale))` | 2× large font size (~24px). Section headings. |
| `--sf-text-2xl-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-heading)` | Font weight for 2×-large text. |
| `--sf-text-2xl-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-normal)` | Letter-spacing for 2×-large text. |
| `--sf-text-2xl-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper))` | Line height for 2×-large text. |
| `--sf-text-2xl-max-width` | PUBLIC | knob | text | `none` | Optimal line length for 2×-large text. |
| `--sf-text-2xs` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale))` | Extra-extra-small font size (~11px). Fine print, badges. |
| `--sf-text-2xs-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-body)` | Font weight for 2×-extra-small text. Override to deviate from the global weight at this size. |
| `--sf-text-2xs-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-normal)` | Letter-spacing for 2×-extra-small text. |
| `--sf-text-2xs-line-height` | PUBLIC | consumption | text | `var(--sf-leading-relaxed)` | Line height for 2×-extra-small text. |
| `--sf-text-2xs-max-width` | PUBLIC | knob | text | `55ch` | Optimal line length (max-width in ch) for 2×-extra-small text. |
| `--sf-text-3xl` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale))` | 3× large font size (~30px). Major headings. |
| `--sf-text-3xl-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-heading)` | Font weight for 3×-large text. |
| `--sf-text-3xl-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-tight)` | Letter-spacing for 3×-large text. Typically negative to tighten large headings. |
| `--sf-text-3xl-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper))` | Line height for 3×-large text. |
| `--sf-text-3xl-max-width` | PUBLIC | knob | text | `none` | Optimal line length for 3×-large text. |
| `--sf-text-4xl` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale))` | 4× large font size (~36px). Display-level headings. |
| `--sf-text-4xl-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-heading)` | Font weight for 4×-large text. |
| `--sf-text-4xl-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-tight)` | Letter-spacing for 4×-large text. |
| `--sf-text-4xl-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper))` | Line height for 4×-large text. |
| `--sf-text-4xl-max-width` | PUBLIC | knob | text | `none` | Optimal line length for 4×-large text. |
| `--sf-text-base-max` | PUBLIC-ADVANCED | knob | text | `1.25` | Maximum base font size (rem) at the widest viewport. End point for the fluid type scale at wide screens. Part of the fluid scale engine. |
| `--sf-text-base-min` | PUBLIC-ADVANCED | knob | text | `1` | Minimum base font size (rem) at the narrowest viewport. Starting point for the fluid type scale at narrow screens. Part of the fluid scale engine. |
| `--sf-text-display-base-max` | PUBLIC-ADVANCED | knob | text | `3` | Maximum display/hero font size (rem) at the widest viewport. Drives the ceiling of the fluid display type scale. Part of the fluid scale engine. |
| `--sf-text-display-base-min` | PUBLIC-ADVANCED | knob | text | `2.4` | Minimum display/hero font size (rem) at the narrowest viewport. Drives the floor of the fluid display type scale. Part of the fluid scale engine. |
| `--sf-text-display-l` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale))` | Large display font size (~68px+). Oversized hero text. |
| `--sf-text-display-m` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale))` | Medium display font size (~54px). Hero headings. |
| `--sf-text-display-s` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale))` | Small display font size (~42px). Hero sub-headings. |
| `--sf-text-display-scale` | PUBLIC-ADVANCED | knob | text | `1` | Multiplier applied only to the display/hero type scale (--sf-text-display-*). Tune headline impact independently of body text. |
| `--sf-text-l` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale))` | Large font size (~18px). Lead paragraphs, prominent labels. |
| `--sf-text-l-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-body)` | Font weight for large text. |
| `--sf-text-l-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-normal)` | Letter-spacing for large text. |
| `--sf-text-l-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper))` | Line height for large text. |
| `--sf-text-l-max-width` | PUBLIC | knob | text | `none` | Optimal line length for large text. |
| `--sf-text-m` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale))` | Medium / base font size (~16px). Typical body text. |
| `--sf-text-m-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-body)` | Font weight for medium (body) text. |
| `--sf-text-m-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-normal)` | Letter-spacing for medium text. |
| `--sf-text-m-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper))` | Line height for medium text. |
| `--sf-text-m-max-width` | PUBLIC | knob | text | `65ch` | Optimal reading line length for medium text (~65–75ch). |
| `--sf-text-ratio-max` | PUBLIC-ADVANCED | knob | text | `1.333` | Modular type scale ratio at the widest viewport. Controls step-to-step size growth. Default 1.333. Part of the fluid scale engine. |
| `--sf-text-ratio-min` | PUBLIC-ADVANCED | knob | text | `1.25` | Modular type scale ratio at the narrowest viewport. Controls step-to-step size growth in the fluid type ramp. Default 1.25. Part of the fluid scale engine. |
| `--sf-text-s` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale))` | Small font size (~14px). Secondary content, UI annotations. |
| `--sf-text-s-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-body)` | Font weight for small text. |
| `--sf-text-s-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-normal)` | Letter-spacing for small text. |
| `--sf-text-s-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper))` | Line height for small text. |
| `--sf-text-s-max-width` | PUBLIC | knob | text | `65ch` | Optimal line length for small text. |
| `--sf-text-scale` | PUBLIC-ADVANCED | knob | text | `1` | Global type-size multiplier. Scales the entire fluid type scale. 1.08 gives noticeably larger body text without breaking layout. |
| `--sf-text-shadow-l` | PUBLIC | consumption | text | `0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))` | Large text-shadow for high-contrast text over busy or dark image backgrounds. |
| `--sf-text-shadow-m` | PUBLIC | consumption | text | `0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` | Medium text-shadow. Use for text overlaid on images to improve legibility. |
| `--sf-text-shadow-none` | PUBLIC | knob | text | `none` | Removes text-shadow (use to explicitly reset inherited shadows). |
| `--sf-text-shadow-s` | PUBLIC | consumption | text | `0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7))` | Small text-shadow for subtle depth on display headings. |
| `--sf-text-shadow-xl` | PUBLIC | consumption | text | `0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7))` | Extra-large text-shadow for maximum legibility over busy or high-contrast image backgrounds. |
| `--sf-text-shadow-xs` | PUBLIC | consumption | text | `0 0.5px 1px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1), 0.7))` | Extra-small text-shadow for the subtlest depth on body text. |
| `--sf-text-xl` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale))` | Extra-large font size (~20px). Sub-headings, callout text. |
| `--sf-text-xl-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-body)` | Font weight for extra-large text. |
| `--sf-text-xl-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-normal)` | Letter-spacing for extra-large text. |
| `--sf-text-xl-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper))` | Line height for extra-large text. |
| `--sf-text-xl-max-width` | PUBLIC | knob | text | `none` | Optimal line length for extra-large text. |
| `--sf-text-xs` | PUBLIC | consumption | text | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale))` | Extra-small font size (~12px). Labels, captions, metadata. |
| `--sf-text-xs-font-weight` | PUBLIC | consumption | text | `var(--sf-font-weight-body)` | Font weight for extra-small text. |
| `--sf-text-xs-letter-spacing` | PUBLIC | consumption | text | `var(--sf-tracking-normal)` | Letter-spacing for extra-small text. |
| `--sf-text-xs-line-height` | PUBLIC | consumption | text | `calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper))` | Line height for extra-small text. |
| `--sf-text-xs-max-width` | PUBLIC | knob | text | `60ch` | Optimal line length for extra-small text. |
| `--sf-theme-transition-duration` | PUBLIC | consumption | theme | `calc(300ms * var(--sf-motion-scale))` | Duration of the .sf-theme-transition animated color-scheme crossfade. Scales with --sf-motion-scale so reduced-motion preferences are respected. Default 300ms. |
| `--sf-touch-target` | PUBLIC | knob | touch | `2.75rem` | Minimum touch-target size for interactive elements per WCAG 2.5.5. Fixed 44px anchor, independent of the --sf-size-* scale. |
| `--sf-tracking-normal` | PUBLIC | knob | tracking | `0` | Normal letter-spacing (0). Default for body text. |
| `--sf-tracking-tight` | PUBLIC | knob | tracking | `-0.025em` | Tight letter-spacing (slightly negative). Suitable for large headings. |
| `--sf-tracking-wide` | PUBLIC | knob | tracking | `0.025em` | Wide letter-spacing. Use for small-caps labels. |
| `--sf-tracking-wider` | PUBLIC | knob | tracking | `0.05em` | Wider letter-spacing for strongly spaced labels. |
| `--sf-tracking-widest` | PUBLIC | knob | tracking | `0.1em` | Widest letter-spacing for all-caps microcopy. |
| `--sf-transition-colors` | PUBLIC | consumption | transition | `color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out)` | Transition shorthand for color-related properties (color, background, border-color). |
| `--sf-transition-enter` | PUBLIC | consumption | transition | `color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out)` | Enter-phase transition (ease-out). Use on elements appearing in the viewport. |
| `--sf-transition-exit` | PUBLIC | consumption | transition | `color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in)` | Exit-phase transition (ease-in). Use on elements leaving the viewport. |
| `--sf-transition-fast` | PUBLIC | consumption | transition | `color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out)` | Fast-duration transition shorthand. |
| `--sf-transition-form-field` | PUBLIC | consumption | transition | `color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out)` | Transition shorthand optimised for form fields: color and background at normal pace so label color shifts feel natural; border, shadow, and opacity at fast pace so focus rings appear crisply. |
| `--sf-transition-opacity` | PUBLIC | consumption | transition | `opacity var(--sf-duration-normal) var(--sf-ease-out)` | Transition shorthand for opacity. |
| `--sf-transition-overlay` | PUBLIC | consumption | transition | `overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete` | Transition shorthand for overlay fades (opacity + visibility). |
| `--sf-transition-shadow` | PUBLIC | consumption | transition | `box-shadow var(--sf-duration-normal) var(--sf-ease-out)` | Transition shorthand for box-shadow. |
| `--sf-transition-slow` | PUBLIC | consumption | transition | `color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out)` | Slow-duration transition shorthand. |
| `--sf-transition-transform` | PUBLIC | consumption | transition | `transform var(--sf-duration-normal) var(--sf-ease-out)` | Transition shorthand for transform. |
| `--sf-z-base` | PUBLIC | knob | z | `0` | Base stacking level (1). Establishes a stacking context without elevation. |
| `--sf-z-below` | PUBLIC | knob | z | `-1` | Z-index below stacking context base. For decorative pseudo-elements. |
| `--sf-z-dropdown` | PUBLIC | knob | z | `1020` | Z-index for dropdown menus and select popups. |
| `--sf-z-fixed` | PUBLIC | knob | z | `1010` | Z-index for position: fixed elements. |
| `--sf-z-modal` | PUBLIC | knob | z | `1040` | Z-index for modal dialogs and their non-top-layer backdrop scrims. Sits above overlays and dropdowns. Default 1040. |
| `--sf-z-overlay` | PUBLIC | knob | z | `1030` | Z-index for modal / dialog backdrops. |
| `--sf-z-raised` | PUBLIC | knob | z | `1` | Raised elevation (50). Cards, sticky headers. |
| `--sf-z-sticky` | PUBLIC | knob | z | `1000` | Z-index for position: sticky elements (navbars, table headers). |
| `--sf-z-toast` | PUBLIC | knob | z | `1050` | Z-index for toast / snackbar notifications. |
| `--sf-z-tooltip` | PUBLIC | knob | z | `1060` | Z-index for tooltips and transient floating notifications. Highest named layer in the z-index stack. Default 1060. |

### Layout tokens (53)

| Token | Tier | Role | Namespace | Default | Description |
|---|---|---|---|---|---|
| `--sf-alternate-gap` | PUBLIC | consumption | alternate | `var(--sf-content-gap)` | Gap between items in the alternating zigzag layout. |
| `--sf-alternate-inner-gap` | PUBLIC | consumption | alternate | `var(--sf-gap)` | Gap between content and media within each zigzag item. |
| `--sf-bento-cols-default` | PUBLIC | knob | bento | `4` | Default column count for the bento grid. |
| `--sf-bento-gap` | PUBLIC | consumption | bento | `var(--sf-gap)` | Gap between bento grid cells. |
| `--sf-bento-row-compact` | PUBLIC | knob | bento | `6rem` | Row height for compact-variant bento items. |
| `--sf-bento-row-default` | PUBLIC | knob | bento | `10rem` | Default row height for standard bento grid cells. |
| `--sf-bento-row-tall` | PUBLIC | knob | bento | `16rem` | Tall row height for visually prominent or hero bento cells. |
| `--sf-bg-layer-fit` | PUBLIC | knob | bg | `cover` | object-fit applied to .sf-bg-layer when used as a bare media element, and to .sf-bg-layer > img / video / picture children. Defaults to cover. |
| `--sf-bg-layer-inset` | PUBLIC | knob | bg | `0px` | Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly. |
| `--sf-bg-layer-position` | PUBLIC | knob | bg | `50% 50%` | object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%). |
| `--sf-bg-layer-radius` | PUBLIC | knob | bg | `0` | border-radius applied to the .sf-bg-layer layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed. |
| `--sf-bg-layer-z` | PUBLIC | knob | bg | `-2` | z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background. |
| `--sf-box-border-color` | PUBLIC | consumption | box | `var(--sf-color-border)` | Border color for the box layout primitive. |
| `--sf-box-border-width` | PUBLIC | knob | box | `0` | Border width for the box layout primitive. |
| `--sf-box-padding` | PUBLIC | consumption | box | `var(--sf-space-m)` | Inner padding for the box layout primitive. |
| `--sf-breakout-width` | PUBLIC | consumption | breakout | `var(--sf-container-wide)` | Width of full-bleed breakout elements inside a content grid. |
| `--sf-center-gutter` | PUBLIC | consumption | center | `var(--sf-gutter)` | Minimum side gutter for the center layout. |
| `--sf-center-max` | PUBLIC | consumption | center | `var(--sf-container-default)` | Maximum width for the center layout. |
| `--sf-cluster-align` | PUBLIC | knob | cluster | `center` | Vertical alignment of cluster items (align-items value). |
| `--sf-cluster-gap` | PUBLIC | consumption | cluster | `var(--sf-gap)` | Gap between wrapped inline items in the cluster layout. |
| `--sf-cluster-justify` | PUBLIC | knob | cluster | `flex-start` | Horizontal justification of the cluster (justify-content value). |
| `--sf-content-width` | PUBLIC | consumption | content | `var(--sf-container-default)` | Max-width of the main content column in a content grid. |
| `--sf-cover-min-height` | PUBLIC | knob | cover | `100dvh` | Minimum height of the cover layout (typically 100svh). |
| `--sf-cover-padding` | PUBLIC | consumption | cover | `var(--sf-section-pad)` | Inner padding for the cover layout. |
| `--sf-equal-gap` | PUBLIC | consumption | equal | `var(--sf-gap)` | Gap between equal columns. |
| `--sf-equal-min-col` | PUBLIC | knob | equal | `16rem` | column-width floor for .sf-equal's flowing CSS multi-column layout (not a grid) — the browser won't go narrower than this. |
| `--sf-equal-rule-color` | PUBLIC | consumption | equal | `var(--sf-color-border)` | column-rule color between .sf-equal's flowing columns. |
| `--sf-equal-rule-style` | PUBLIC | knob | equal | `solid` | column-rule style between .sf-equal's flowing columns. |
| `--sf-equal-rule-width` | PUBLIC | knob | equal | `0` | column-rule width between .sf-equal's flowing columns. 0 (default) means no rule. |
| `--sf-frame-ratio` | PUBLIC | knob | frame | `16 / 9` | Aspect ratio for the frame (media container) layout. |
| `--sf-grid-gap` | PUBLIC | consumption | grid | `var(--sf-gap)` | Gap between auto-fill grid cells. |
| `--sf-grid-min` | PUBLIC | knob | grid | `16rem` | Minimum column width for the auto-fill grid. |
| `--sf-grid-min-2xl` | PUBLIC | knob | grid | `28rem` | Minimum column width at the 2× breakpoint. |
| `--sf-grid-min-l` | PUBLIC | knob | grid | `20rem` | Large minimum column width for the auto-fill grid. |
| `--sf-grid-min-m` | PUBLIC | knob | grid | `16rem` | Medium minimum column width for the auto-fill grid. |
| `--sf-grid-min-s` | PUBLIC | knob | grid | `13rem` | Small minimum column width for the auto-fill grid. |
| `--sf-grid-min-xl` | PUBLIC | knob | grid | `24rem` | Extra-large minimum column width for the auto-fill grid. Use for wide content cards. |
| `--sf-grid-min-xs` | PUBLIC | knob | grid | `10rem` | Extra-small minimum column width for the auto-fill grid. Use for very compact tile layouts (icon grids). |
| `--sf-icon-box-bg` | PUBLIC | consumption | icon | `var(--sf-color-inset)` | Background color for boxed icon containers. |
| `--sf-icon-box-border` | PUBLIC | consumption | icon | `var(--sf-border-width-1) solid var(--sf-color-border)` | Border for boxed icon containers. |
| `--sf-icon-box-pad` | PUBLIC | knob | icon | `0.5em` | Padding inside boxed icon containers. |
| `--sf-icon-box-radius` | PUBLIC | consumption | icon | `var(--sf-radius-s)` | Border radius for boxed icon containers. |
| `--sf-imposter-margin` | PUBLIC | consumption | imposter | `var(--sf-space-m)` | Margin between the imposter overlay and the viewport edges. |
| `--sf-prose-paragraph` | PUBLIC | consumption | prose | `var(--sf-content-gap)` | Max width of prose paragraphs (layout token for the prose layout). |
| `--sf-reel-gap` | PUBLIC | consumption | reel | `var(--sf-gap)` | Gap between items in the horizontal reel. |
| `--sf-reel-height` | PUBLIC | knob | reel | `auto` | Fixed height of the reel container. |
| `--sf-reel-item-width` | PUBLIC | knob | reel | `max-content` | Width of each item in the reel. |
| `--sf-sidebar-gap` | PUBLIC | consumption | sidebar | `var(--sf-gap)` | Gap between sidebar and main content column. |
| `--sf-sidebar-min-width` | PUBLIC | knob | sidebar | `50%` | Minimum sidebar width before the layout collapses to stacking. |
| `--sf-sidebar-width` | PUBLIC | knob | sidebar | `18rem` | Preferred width of the sidebar column. |
| `--sf-stack-gap` | PUBLIC | consumption | stack | `var(--sf-content-gap)` | Vertical gap between stacked block-level elements in the stack layout. |
| `--sf-switcher-gap` | PUBLIC | consumption | switcher | `var(--sf-gap)` | Gap between switcher columns / rows. |
| `--sf-switcher-threshold` | PUBLIC | knob | switcher | `30rem` | Inline-size threshold below which the switcher flips from horizontal to vertical. |

### Macro tokens (32)

| Token | Tier | Role | Namespace | Default | Description |
|---|---|---|---|---|---|
| `--sf-aspect` | PUBLIC | knob | aspect | `16 / 9` | Aspect ratio value for the .aspect-ratio macro. |
| `--sf-content-intrinsic-size` | PUBLIC | knob | content | `500px` | Intrinsic-size hint for content-visibility: auto (prevents layout shift on first reveal). |
| `--sf-flow-space` | PUBLIC | consumption | flow | `var(--sf-content-gap)` | Margin-block-start applied to all flow children except the first. |
| `--sf-line-clamp` | PUBLIC | knob | line | `3` | Number of visible lines before text is clipped with an ellipsis. |
| `--sf-overlap-pull` | PUBLIC | consumption | overlap | `var(--sf-space-xl)` | how far .sf-overlap pulls into the adjacent element. .sf-overlap-host's padding compensation defaults to this same value via a var() fallback in the rule itself (not aliased here — see core/macros.css), so one override on the host tunes both unless --sf-overlap-host-pad is set… |
| `--sf-prose-block-margin` | PUBLIC | consumption | prose | `var(--sf-space-m)` | Block margin between prose elements (h2, p, ul, etc.). |
| `--sf-prose-blockquote-border` | PUBLIC | consumption | prose | `var(--sf-border-width-2) solid var(--sf-color-border--subtle)` | Left border style for blockquotes inside prose. |
| `--sf-prose-blockquote-padding` | PUBLIC | consumption | prose | `var(--sf-space-m)` | Inner padding for blockquotes inside prose. |
| `--sf-prose-figcaption-size` | PUBLIC | consumption | prose | `var(--sf-text-s)` | Font size for figure captions inside .prose. Typically smaller than body text. |
| `--sf-prose-figure-margin` | PUBLIC | consumption | prose | `var(--sf-space-l)` | Block margin around <figure> elements inside .prose. |
| `--sf-prose-heading-gap` | PUBLIC | consumption | prose | `var(--sf-space-s)` | Space between a heading and the content that follows it inside .prose. |
| `--sf-prose-hr-margin` | PUBLIC | consumption | prose | `var(--sf-space-l)` | Block margin around <hr> rules inside .prose. |
| `--sf-prose-list-gap` | PUBLIC | consumption | prose | `var(--sf-space-xs)` | Gap between list items inside .prose. |
| `--sf-prose-marker-color` | PUBLIC | consumption | prose | `var(--sf-color-primary)` | Color of list bullets and ordered-list numbers inside .prose. |
| `--sf-prose-media-margin` | PUBLIC | consumption | prose | `var(--sf-space-m)` | Block margin around images, video, and figures inside .prose. |
| `--sf-prose-media-radius` | PUBLIC | consumption | prose | `var(--sf-radius-m)` | Border radius applied to images and media inside .prose. |
| `--sf-prose-nested-list-gap` | PUBLIC | consumption | prose | `var(--sf-space-2xs)` | Gap between items in nested lists inside .prose. |
| `--sf-prose-table-pad` | PUBLIC | consumption | prose | `var(--sf-space-xs)` | Cell padding for tables inside .prose. |
| `--sf-scrim-color` | PUBLIC | knob | scrim | `oklch(0 0 0 / 0.55)` | Base color of the gradient scrim overlay. |
| `--sf-scrim-direction` | PUBLIC | knob | scrim | `to top` | Direction of the scrim gradient (to bottom, to top, etc.). |
| `--sf-scrim-gradient` | PUBLIC | consumption | scrim | `linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent)` | Full gradient shorthand for the scrim. Override to customise the fade. |
| `--sf-scrim-text-shadow` | PUBLIC | knob | scrim | `0 1px 3px oklch(0 0 0 / 0.6)` | Text-shadow layered over the scrim gradient to ensure legibility for text placed directly on image backgrounds. |
| `--sf-scroll-shadow-size` | PUBLIC | knob | scroll | `2rem` | Size of the scroll-shadow fade effect on overflowing containers. |
| `--sf-surface-bg-animation` | PUBLIC | knob | surface | `none` | animation shorthand applied to the .sf-surface-bg layer, e.g. a slow pan. Default: none. |
| `--sf-surface-bg-attachment` | PUBLIC | knob | surface | `scroll` | background-attachment for the .sf-surface-bg image (scroll vs fixed). Default: scroll. |
| `--sf-surface-bg-color` | PUBLIC | knob | surface | `transparent` | Background colour slot for the .sf-surface-bg macro. Default: transparent. |
| `--sf-surface-bg-image` | PUBLIC | knob | surface | `none` | Background image slot for the .sf-surface-bg macro (e.g. url(…)). Default: none. |
| `--sf-surface-bg-overlay` | PUBLIC | knob | surface | `none` | Overlay layer composited above the image in .sf-surface-bg — e.g. a scrim gradient. Default: none. |
| `--sf-surface-bg-position` | PUBLIC | knob | surface | `center` | background-position for the .sf-surface-bg image. Default: center. |
| `--sf-surface-bg-repeat` | PUBLIC | knob | surface | `no-repeat` | background-repeat for the .sf-surface-bg image. Default: no-repeat. |
| `--sf-surface-bg-size` | PUBLIC | knob | surface | `cover` | background-size for the .sf-surface-bg image. Default: cover. |
| `--sf-surface-color` | PUBLIC | consumption | surface | `var(--sf-color-base)` | Input for the generic .sf-surface macro. Set any color (including palette shades); the macro derives background, auto-contrast foreground, and the contextual token set from it. |

## Classes (328)

### Accessibility (9)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.no-motion` | PUBLIC | accessibility | — | Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference. |
| `.sf-clickable-parent` | PUBLIC | accessibility | — | Makes the entire card or list-item clickable via an absolutely-positioned child overlay link. Apply to the container; place sf-clickable-parent__overlay on the <a>. |
| `.sf-clickable-parent__overlay` | PUBLIC | accessibility | — | The full-bleed overlay link inside an sf-clickable-parent. Stretches to cover the parent and uses pointer-events to let interactive children keep their own clicks. |
| `.sf-focus-parent` | PUBLIC | accessibility | — | Forwards focus-visible styling to this container when any descendant is keyboard-focused. Useful for custom controls that wrap a visually-hidden <input>. |
| `.sf-focus-shadow` | PUBLIC | accessibility | — | Applies the standard focus ring as a box-shadow to any element. Use on custom controls where the native :focus-visible ring doesn't render correctly. |
| `.sf-touch-target` | PUBLIC | accessibility | — | .sf-touch-target — the explicit opt-IN counterpart to the class-less floor above. Because the automatic floor deliberately never touches a control that carries a class, put this class on any control you own (a button with your own class, a third-party widget you can add a class… |
| `.skip-link` | PUBLIC | accessibility | — | Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in <body>. |
| `.sr-only` | PUBLIC | accessibility | — | Visually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs. |
| `.sr-only-focusable` | PUBLIC | accessibility | — | Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets. |

### Components (30)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-btn` | PUBLIC | component | .sf-btn | Interactive call-to-action button. Apply to <button> or <a>. Intrinsic width by default; owns its own styling (excluded from the classless <button> look). Three orthogonal axes — colour family, style treatment (fill/--soft/--outline), gradient — plus a size modifier. |
| `.sf-btn--action` | PUBLIC | component | .sf-btn | Button in the action colour family (same as the unmodified default, named explicitly). |
| `.sf-btn--base` | PUBLIC | component | .sf-btn | Button in the base (surface-neutral) colour family. |
| `.sf-btn--block` | PUBLIC | component | .sf-btn | Full-width button (100% inline size) everywhere. |
| `.sf-btn--block-cq` | PUBLIC | component | .sf-btn | Full-width button only inside a query container narrower than 20rem; intrinsic otherwise. |
| `.sf-btn--danger` | PUBLIC | component | .sf-btn | Button in the danger (destructive) colour family. |
| `.sf-btn--gradient` | PUBLIC | component | .sf-btn | Gradient axis: paints the fill (or, with --outline, the border ring) with the family's --sf-gradient-* token. Core-4 brand families (primary/secondary/tertiary/action); solid no-op for other families. Composes with any colour family. |
| `.sf-btn--info` | PUBLIC | component | .sf-btn | Button in the info colour family. |
| `.sf-btn--l` | PUBLIC | component | .sf-btn | Large button size. |
| `.sf-btn--neutral` | PUBLIC | component | .sf-btn | Button in the neutral colour family. |
| `.sf-btn--outline` | PUBLIC | component | .sf-btn | Outlined button (coloured border/text, transparent fill) that fills with the family colour on hover. Composes with any colour family. |
| `.sf-btn--primary` | PUBLIC | component | .sf-btn | Button in the primary brand colour family. |
| `.sf-btn--s` | PUBLIC | component | .sf-btn | Small button size. |
| `.sf-btn--secondary` | PUBLIC | component | .sf-btn | Button in the secondary brand colour family. |
| `.sf-btn--soft` | PUBLIC | component | .sf-btn | Soft tonal-fill button: a light wash of the family colour (subtle at rest, muted on hover), coloured text, no border. Lower-emphasis than the solid fill. Composes with any colour family. |
| `.sf-btn--success` | PUBLIC | component | .sf-btn | Button in the success (positive) colour family. |
| `.sf-btn--tertiary` | PUBLIC | component | .sf-btn | Button in the tertiary brand colour family. |
| `.sf-btn--warning` | PUBLIC | component | .sf-btn | Button in the warning (caution) colour family. |
| `.sf-btn--xl` | PUBLIC | component | .sf-btn | Extra-large button size. |
| `.sf-btn--xs` | PUBLIC | component | .sf-btn | Extra-small button size. |
| `.sf-card` | PUBLIC | component | .sf-card | Padded content container with optional __header/__body/__footer and __media/__avatar/__title subcomponents. Uses concentric radius math so inner corners stay proportional. |
| `.sf-card__avatar` | PUBLIC | component | .sf-card | Circular avatar image inside a card, sized via --sf-card-avatar-size. |
| `.sf-card__body` | PUBLIC | component | .sf-card | Card body slot. |
| `.sf-card__footer` | PUBLIC | component | .sf-card | Card footer slot with a top divider. |
| `.sf-card__header` | PUBLIC | component | .sf-card | Card header slot with a bottom divider. |
| `.sf-card__media` | PUBLIC | component | .sf-card | Full-width cover image/video for a card, cropped to --sf-card-media-ratio (16/9 by default). |
| `.sf-card__title` | PUBLIC | component | .sf-card | Card title heading, sized via --sf-card-heading-size. |
| `.sf-card--bordered` | PUBLIC | component | .sf-card | Flat, outlined card: keeps the border, drops the shadow. |
| `.sf-card--elevated` | PUBLIC | component | .sf-card | Floating card: hides the border, applies a larger shadow. |
| `.sf-card--interactive` | PUBLIC | component | .sf-card | Adds a pointer cursor and a shadow/translate lift on hover or keyboard focus. Pair with .sf-clickable-parent for a fully clickable card. Lift is suppressed under prefers-reduced-motion. |

### Forms (1)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-live-validate` | PUBLIC | form | — | Scopes native constraint-validation feedback to this subtree: within it, :user-invalid/:user-valid on input/select/textarea drive --sf-field-border-color (the same token .sf-is-invalid/.sf-is-valid set explicitly). Apply to a <form> or <fieldset>. Off by default so a still-empty required field isn't marked invalid before a submit is attempted. |

### Layout primitives (146)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-alternate` | PUBLIC | layout | — | Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint. |
| `.sf-bento` | PUBLIC | layout | — | Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid. |
| `.sf-bento--2` | PUBLIC | layout | — | Bento grid variant with a 2-column base layout. |
| `.sf-bento--3` | PUBLIC | layout | — | Bento grid variant with a 3-column base layout. |
| `.sf-bento--6` | PUBLIC | layout | — | Bento grid variant with a 6-column base layout. |
| `.sf-bento--row-compact` | PUBLIC | layout | — | Bento grid variant with shorter default row height. |
| `.sf-bento--row-tall` | PUBLIC | layout | — | Bento grid variant with taller default row height. |
| `.sf-bento-featured` | PUBLIC | layout | — | Span modifier for a bento item: takes up 2×2 cells (featured hero placement). |
| `.sf-bento-full` | PUBLIC | layout | — | Span modifier for a bento item: stretches across all columns (full-width banner). |
| `.sf-bento-tall` | PUBLIC | layout | — | Span modifier for a bento item: doubles the row height (tall card). |
| `.sf-bento-wide` | PUBLIC | layout | — | Span modifier for a bento item: spans 2 columns (wide card). |
| `.sf-bg-layer` | PUBLIC | layout | — | Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg-layer composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare <img class="sf-bg-layer"> or as a wrapper with a nested > img / > video / > picture. |
| `.sf-box` | PUBLIC | layout | — | Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room. |
| `.sf-breakout` | PUBLIC | layout | — | Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose. |
| `.sf-center` | PUBLIC | layout | — | Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content. |
| `.sf-center--intrinsic` | PUBLIC | layout | — | Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space). |
| `.sf-cluster` | PUBLIC | layout | — | Flex-wrap row of variable-width items with automatic gap. Children wrap when the container is too narrow. Use for tag lists, button groups, and icon rows. |
| `.sf-cluster--2xl` | PUBLIC | layout | — | Cluster variant with 2xl gap between items. |
| `.sf-cluster--between` | PUBLIC | layout | — | Cluster variant that distributes items with space-between alignment. |
| `.sf-cluster--center` | PUBLIC | layout | — | Cluster variant that centers the item row horizontally. |
| `.sf-cluster--end` | PUBLIC | layout | — | Cluster variant that aligns items to the inline end (right in LTR). |
| `.sf-cluster--l` | PUBLIC | layout | — | Cluster variant with large (l) gap between items. |
| `.sf-cluster--m` | PUBLIC | layout | — | Cluster variant with medium (m) gap between items. |
| `.sf-cluster--no-wrap` | PUBLIC | layout | — | Cluster variant that prevents item wrapping (single-line row). |
| `.sf-cluster--s` | PUBLIC | layout | — | Cluster variant with small (s) gap between items. |
| `.sf-cluster--xl` | PUBLIC | layout | — | Cluster variant with xl gap between items. |
| `.sf-cluster--xs` | PUBLIC | layout | — | Cluster variant with xs gap between items. |
| `.sf-container` | PUBLIC | layout | — | Max-width page container, centered with auto side gutters. Establishes a named inline-size container (cq-container) for container queries. Default width is --sf-container-m. |
| `.sf-container--full` | PUBLIC | layout | — | Container variant that spans the full viewport width (no max-width cap). |
| `.sf-container--narrow` | PUBLIC | layout | — | Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms. |
| `.sf-container--prose` | PUBLIC | layout | — | Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content. |
| `.sf-container--wide` | PUBLIC | layout | — | Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media. |
| `.sf-content-grid` | PUBLIC | layout | — | Holy-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column. |
| `.sf-cover` | PUBLIC | layout | — | Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections. |
| `.sf-cover__center` | PUBLIC | layout | — | The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport. |
| `.sf-cover--max` | PUBLIC | layout | — | Cover variant that uses a max-height instead of min-height for the viewport constraint. |
| `.sf-cover--min` | PUBLIC | layout | — | Cover variant that reduces the minimum height to half a viewport. |
| `.sf-cover--padding-l` | PUBLIC | layout | — | Cover variant with large vertical padding above and below the centered content. |
| `.sf-cover--padding-s` | PUBLIC | layout | — | Cover variant with small vertical padding above and below the centered content. |
| `.sf-cq` | PUBLIC | layout | — | Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens. |
| `.sf-divide` | PUBLIC | layout | — | Rules between direct children (a border on each child after the first), reusing .sf-divider's tokens — no per-gap markup needed. |
| `.sf-divide--vertical` | PUBLIC | layout | — | Vertical rules between direct children (inline-start borders), for row/horizontal layouts. |
| `.sf-divider` | PUBLIC | layout | — | Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation. |
| `.sf-divider--dashed` | PUBLIC | layout | — | Divider variant with a dashed stroke. |
| `.sf-divider--dotted` | PUBLIC | layout | — | Divider variant with a dotted stroke. |
| `.sf-divider--gradient` | PUBLIC | layout | — | Divider variant rendered as a gradient that fades to transparent at both ends. |
| `.sf-divider--soft` | PUBLIC | layout | — | Divider variant with reduced opacity (subtle separator). |
| `.sf-divider--strong` | PUBLIC | layout | — | Divider variant with stronger/darker color for a more prominent separator. |
| `.sf-divider--vertical` | PUBLIC | layout | — | Divider variant rendered as a vertical line. Use inside flex or grid containers. |
| `.sf-equal` | PUBLIC | layout | — | Flowing CSS multi-column layout (not a grid) — content distributes across columns like a newspaper instead of sitting in fixed cells. Reach for .sf-grid/.sf-grid--fit for discrete grid cells instead. |
| `.sf-equal--2` | PUBLIC | layout | — | Equal-columns variant locked to column-count: 2. |
| `.sf-equal--3` | PUBLIC | layout | — | Equal-columns variant locked to column-count: 3. |
| `.sf-equal--4` | PUBLIC | layout | — | Equal-columns variant locked to column-count: 4. |
| `.sf-equal--6` | PUBLIC | layout | — | Equal-columns variant locked to column-count: 6. |
| `.sf-fluid-cq` | PUBLIC | layout | — | .sf-fluid-cq: opt a subtree into a CONTAINER-relative fluid scale (issue #497). By default --sf-text-* / --sf-space-* interpolate against 100vw (the viewport); inside .sf-fluid-cq they interpolate against 100cqi (this box's inline size), so type + spacing track the container… |
| `.sf-frame` | PUBLIC | layout | — | Aspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9. |
| `.sf-frame--3-2` | PUBLIC | layout | — | Frame variant locked to a 3:2 aspect ratio. |
| `.sf-frame--4-3` | PUBLIC | layout | — | Frame variant locked to a 4:3 aspect ratio. |
| `.sf-frame--cinema` | PUBLIC | layout | — | Frame variant locked to a cinematic 21:9 aspect ratio. |
| `.sf-frame--golden` | PUBLIC | layout | — | Frame variant locked to the golden ratio (1.618:1). |
| `.sf-frame--portrait` | PUBLIC | layout | — | Frame variant locked to a portrait 2:3 aspect ratio. |
| `.sf-frame--square` | PUBLIC | layout | — | Frame variant locked to a square 1:1 aspect ratio. |
| `.sf-frame--video` | PUBLIC | layout | — | Frame variant locked to the standard 16:9 video aspect ratio. |
| `.sf-full-bleed` | PUBLIC | layout | — | Forces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds. |
| `.sf-gap` | PUBLIC | layout | — | Injects the default --sf-gap into an existing flex or grid container without imposing display:flex itself. Use when the parent is already a flex or grid. |
| `.sf-gap--2xl` | PUBLIC | layout | — | Gap injection variant with 2xl gap value. |
| `.sf-gap--l` | PUBLIC | layout | — | Gap injection variant with large (l) gap value. |
| `.sf-gap--m` | PUBLIC | layout | — | Gap injection variant with medium (m) gap value. |
| `.sf-gap--s` | PUBLIC | layout | — | Gap injection variant with small (s) gap value. |
| `.sf-gap--xl` | PUBLIC | layout | — | Gap injection variant with xl gap value. |
| `.sf-gap--xs` | PUBLIC | layout | — | Gap injection variant with xs gap value. |
| `.sf-grid` | PUBLIC | layout | — | Auto-fill CSS grid. Columns are sized with RAM pattern (Repeat, Auto-fill, Minmax) and wrap automatically. Default column min-width is --sf-grid-min-col. |
| `.sf-grid--2xl` | PUBLIC | layout | — | Grid variant with a 2xl minimum column width. |
| `.sf-grid--dense` | PUBLIC | layout | — | Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers. |
| `.sf-grid--fit` | PUBLIC | layout | — | Grid variant that switches from auto-fill to auto-fit, collapsing empty columns. |
| `.sf-grid--l` | PUBLIC | layout | — | Grid variant with a large (l) minimum column width. |
| `.sf-grid--m` | PUBLIC | layout | — | Grid variant with a medium (m) minimum column width. |
| `.sf-grid--s` | PUBLIC | layout | — | Grid variant with a small (s) minimum column width. |
| `.sf-grid--xl` | PUBLIC | layout | — | Grid variant with an xl minimum column width. |
| `.sf-grid--xs` | PUBLIC | layout | — | Grid variant with an xs minimum column width. |
| `.sf-grid-cols-1` | PUBLIC | layout | — | Single-column layout (forces all children to one column). |
| `.sf-grid-cols-1-2` | PUBLIC | layout | — | Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive. |
| `.sf-grid-cols-1-3` | PUBLIC | layout | — | Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive. |
| `.sf-grid-cols-2` | PUBLIC | layout | — | Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers. |
| `.sf-grid-cols-2-1` | PUBLIC | layout | — | Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive. |
| `.sf-grid-cols-3` | PUBLIC | layout | — | Responsive 3-column fixed grid. Collapses progressively on narrow containers. |
| `.sf-grid-cols-3-1` | PUBLIC | layout | — | Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive. |
| `.sf-grid-cols-4` | PUBLIC | layout | — | Responsive 4-column fixed grid. Collapses progressively on narrow containers. |
| `.sf-grid-cols-6` | PUBLIC | layout | — | Responsive 6-column fixed grid. Collapses progressively on narrow containers. |
| `.sf-grid-flex` | PUBLIC | layout | — | Flexbox alternative to .sf-grid for item counts that don't divide evenly: leftover last-row items stretch to fill the row by default, or stay fixed-width and centered with --center. |
| `.sf-grid-flex--2xl` | PUBLIC | layout | — | Grid-flex variant with a 2xl minimum item width. |
| `.sf-grid-flex--center` | PUBLIC | layout | — | Grid-flex variant that keeps last-row leftover items fixed-width and centered instead of stretching. |
| `.sf-grid-flex--l` | PUBLIC | layout | — | Grid-flex variant with a large (l) minimum item width. |
| `.sf-grid-flex--m` | PUBLIC | layout | — | Grid-flex variant with a medium (m) minimum item width. |
| `.sf-grid-flex--s` | PUBLIC | layout | — | Grid-flex variant with a small (s) minimum item width. |
| `.sf-grid-flex--xl` | PUBLIC | layout | — | Grid-flex variant with an xl minimum item width. |
| `.sf-grid-flex--xs` | PUBLIC | layout | — | Grid-flex variant with an xs minimum item width. |
| `.sf-header--l` | PUBLIC | layout | — | Header block padding at the l step (--sf-space-l). |
| `.sf-header--m` | PUBLIC | layout | — | Header block padding at the m step (--sf-space-m). |
| `.sf-header--s` | PUBLIC | layout | — | Header block padding at the s step (--sf-space-s). |
| `.sf-header--xl` | PUBLIC | layout | — | Header block padding at the xl step (--sf-space-xl). |
| `.sf-header--xs` | PUBLIC | layout | — | Header block padding at the xs step (--sf-space-xs). |
| `.sf-icon` | PUBLIC | layout | — | Inline icon sizing primitive. Sets width and height to --sf-icon-m via em-based tokens so the icon scales with the surrounding text. |
| `.sf-icon--2xl` | PUBLIC | layout | — | Icon variant sized to --sf-icon-2xl (extra-extra-large). |
| `.sf-icon--boxed` | PUBLIC | layout | — | Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons. |
| `.sf-icon--l` | PUBLIC | layout | — | Icon variant sized to --sf-icon-l (large). |
| `.sf-icon--m` | PUBLIC | layout | — | Icon variant sized to --sf-icon-m (medium, same as base sf-icon). |
| `.sf-icon--s` | PUBLIC | layout | — | Icon variant sized to --sf-icon-s (small). |
| `.sf-icon--xl` | PUBLIC | layout | — | Icon variant sized to --sf-icon-xl (extra-large). |
| `.sf-icon--xs` | PUBLIC | layout | — | Icon variant sized to --sf-icon-xs (extra-small). |
| `.sf-imposter` | PUBLIC | layout | — | Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels. |
| `.sf-imposter--contain` | PUBLIC | layout | — | Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent. |
| `.sf-imposter--fixed` | PUBLIC | layout | — | Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals. |
| `.sf-overlay` | PUBLIC | layout | — | Overlay layout helper — absolutely fills its positioned parent (`position: absolute; inset: 0`) for overlays, backdrops, and media scrims. |
| `.sf-pancake` | PUBLIC | layout | — | Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports. |
| `.sf-place-center` | PUBLIC | layout | — | Box-neutral centring primitive: display:grid + place-items:center centres an element's content on both axes without adopting cluster/stack/imposter semantics. Unlike sf-center (which centres itself), this centres the content; give the box a height for block-axis centring. The named form of the display:grid; place-items:center idiom. |
| `.sf-reel` | PUBLIC | layout | — | Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect. |
| `.sf-section` | PUBLIC | layout | — | Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands. |
| `.sf-section--2xl` | PUBLIC | layout | — | Section variant with 2xl vertical padding. |
| `.sf-section--collapse` | PUBLIC | layout | — | Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks). |
| `.sf-section--guttered` | PUBLIC | layout | — | Adds horizontal page gutters directly to a section — use when you want to skip a separate .sf-container wrapper (gutterless layout inside section). Neutralises container gutter to prevent double padding. |
| `.sf-section--l` | PUBLIC | layout | — | Section variant with large (l) vertical padding. |
| `.sf-section--m` | PUBLIC | layout | — | Section variant with medium (m) vertical padding. |
| `.sf-section--s` | PUBLIC | layout | — | Section variant with small (s) vertical padding. |
| `.sf-section--xl` | PUBLIC | layout | — | Section variant with xl vertical padding. |
| `.sf-section--xs` | PUBLIC | layout | — | Section variant with xs vertical padding. |
| `.sf-section-group` | PUBLIC | layout | — | Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges. |
| `.sf-sidebar` | PUBLIC | layout | — | Two-column sidebar layout: first child is the sidebar, second child is main content. The sidebar collapses below the breakpoint (--sf-sidebar-min-width). Default sidebar on the left. |
| `.sf-sidebar--narrow` | PUBLIC | layout | — | Sidebar variant with a narrower sidebar column. |
| `.sf-sidebar--right` | PUBLIC | layout | — | Sidebar variant with the sidebar on the right (second child becomes the sidebar). |
| `.sf-sidebar--wide` | PUBLIC | layout | — | Sidebar variant with a wider sidebar column. |
| `.sf-stack` | PUBLIC | layout | — | Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm. |
| `.sf-stack--2xl` | PUBLIC | layout | — | Stack variant with 2xl gap between children. |
| `.sf-stack--center` | PUBLIC | layout | — | Stack variant that centers children on the cross axis. |
| `.sf-stack--end` | PUBLIC | layout | — | Stack variant that aligns children to the cross-axis end (right in LTR). |
| `.sf-stack--l` | PUBLIC | layout | — | Stack variant with large (l) gap between children. |
| `.sf-stack--m` | PUBLIC | layout | — | Stack variant with medium (m) gap between children. |
| `.sf-stack--s` | PUBLIC | layout | — | Stack variant with small (s) gap between children. |
| `.sf-stack--stretch` | PUBLIC | layout | — | Stack variant that stretches children to fill the full available width. |
| `.sf-stack--xl` | PUBLIC | layout | — | Stack variant with xl gap between children. |
| `.sf-stack--xs` | PUBLIC | layout | — | Stack variant with xs gap between children. |
| `.sf-subgrid` | PUBLIC | layout | — | Passes the parent grid columns through to children via subgrid. Place on a grid item that should align its own children to the outer grid columns. |
| `.sf-subgrid-rows` | PUBLIC | layout | — | Passes the parent grid rows through to children via subgrid. Place on a grid item that should align its own children to the outer grid rows. |
| `.sf-switcher` | PUBLIC | layout | — | Flex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold. |
| `.sf-switcher--no-wrap` | PUBLIC | layout | — | Switcher variant that stays horizontal and never wraps (single-line regardless of container width). |
| `.sf-switcher--vertical` | PUBLIC | layout | — | Switcher variant that starts in the vertical (stacked) direction on all sizes. |

### Macro classes (51)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-aspect` | PUBLIC | macro | — | Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class. |
| `.sf-content-auto` | PUBLIC | macro | — | Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages. |
| `.sf-drop-shadow-l` | PUBLIC | macro | — | Large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-l). |
| `.sf-drop-shadow-m` | PUBLIC | macro | — | Medium filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-m). |
| `.sf-drop-shadow-s` | PUBLIC | macro | — | Small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-s). |
| `.sf-drop-shadow-xl` | PUBLIC | macro | — | Extra-large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xl). |
| `.sf-drop-shadow-xs` | PUBLIC | macro | — | Extra-small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xs). |
| `.sf-equal-height` | PUBLIC | macro | — | Forces all flex children to equal height (align-items: stretch). Use on a flex row to make cards in a grid share the tallest card's height. |
| `.sf-flow` | PUBLIC | macro | — | Applies --sf-flow-space as margin-block-start to all direct children except the first. Establishes consistent vertical rhythm in prose-like containers. |
| `.sf-line-clamp-2` | PUBLIC | macro | — | Clamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2. |
| `.sf-line-clamp-3` | PUBLIC | macro | — | Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3. |
| `.sf-line-clamp-N` | PUBLIC | macro | — | Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines. |
| `.sf-link--reverse` | PUBLIC | macro | — | Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse. |
| `.sf-link--subtle` | PUBLIC | macro | — | Link color modifier: renders the link in the body text color instead of the default action color. Underline still indicates the link on hover. |
| `.sf-link-external` | PUBLIC | macro | — | Automatically appends an external-link icon (via ::after content) to indicate the link opens in a new tab or goes to an external domain. |
| `.sf-no-tap-highlight` | PUBLIC | macro | — | Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state. |
| `.sf-not-prose` | PUBLIC | macro | — | Opt-out of sf-prose typography styles within a prose block. Apply to an element that should keep default browser or component styles. |
| `.sf-overflow-fade` | PUBLIC | macro | — | Adds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container. |
| `.sf-overflow-fade--block` | PUBLIC | macro | — | Overflow fade variant: fades both the top and bottom edges simultaneously (block axis). |
| `.sf-overflow-fade--bottom` | PUBLIC | macro | — | Overflow fade variant: fades the bottom (block-end) edge. |
| `.sf-overflow-fade--inline` | PUBLIC | macro | — | Overflow fade variant: fades both the left and right edges simultaneously (inline axis). |
| `.sf-overflow-fade--left` | PUBLIC | macro | — | Overflow fade variant: fades the left (inline-start) edge. |
| `.sf-overflow-fade--right` | PUBLIC | macro | — | Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour. |
| `.sf-overflow-fade--top` | PUBLIC | macro | — | Overflow fade variant: fades the top (block-start) edge. |
| `.sf-overlap` | PUBLIC | macro | — | Overlap recipe — pulls the element upward (negative block-start margin) so it overlaps the previous sibling by --sf-overlap-pull. |
| `.sf-overlap--down` | PUBLIC | macro | — | Overlap recipe — pulls following content up (negative block-end margin) so this element overlaps the sibling below it. |
| `.sf-overlap-host` | PUBLIC | macro | — | Card-container recipe — the receiving side of an overlap: an isolated stacking context with block-start padding compensation so in-flow content clears an element intruding from above. The padding knob defaults to the pull knob so one override tunes both. |
| `.sf-prose` | PUBLIC | macro | LIST MARKER COLOUR (.sf-marker--*) | Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose. |
| `.sf-scrim` | PUBLIC | macro | — | Overlay container with a gradient darkening scrim behind text placed on an image or colored background. |
| `.sf-scrim__content` | PUBLIC | macro | — | Content area inside an sf-scrim. Positioned above the gradient overlay layer. |
| `.sf-scrim--bottom` | PUBLIC | macro | — | Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade). |
| `.sf-scrim--full` | PUBLIC | macro | — | Scrim variant that covers the entire surface with a uniform translucent overlay. |
| `.sf-scrim--top` | PUBLIC | macro | — | Scrim variant with the gradient emanating from the top edge (top-to-bottom fade). |
| `.sf-scroll-shadow` | PUBLIC | macro | — | Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below. |
| `.sf-scroll-snap` | PUBLIC | macro | — | Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align. |
| `.sf-surface` | PUBLIC | macro | — | Generic semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes. |
| `.sf-surface--action` | PUBLIC | macro | — | Surface variant using the action color palette (button/CTA primary color). |
| `.sf-surface--danger` | PUBLIC | macro | — | Surface variant using the danger status palette. |
| `.sf-surface--info` | PUBLIC | macro | — | Surface variant using the info status palette. |
| `.sf-surface--inverse` | PUBLIC | macro | — | Surface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode. |
| `.sf-surface--neutral` | PUBLIC | macro | — | Surface variant using the neutral palette (muted/gray). |
| `.sf-surface--primary` | PUBLIC | macro | — | Surface variant using the primary brand color palette. |
| `.sf-surface--secondary` | PUBLIC | macro | — | Surface variant using the secondary brand color palette. |
| `.sf-surface--success` | PUBLIC | macro | — | Surface variant using the success status palette. |
| `.sf-surface--tertiary` | PUBLIC | macro | — | Surface variant using the tertiary brand color palette. |
| `.sf-surface--warning` | PUBLIC | macro | — | Surface variant using the warning status palette. |
| `.sf-surface-bg` | PUBLIC | macro | — | Named background surface preset (issue #523). Composes the --sf-surface-bg-* token set (see tokens.macros.css) into one reusable, named background: base colour + image/gradient/pattern, sizing, an optional overlay layered above the image, and an optional animation. Inert until… |
| `.sf-tabular-nums` | PUBLIC | macro | — | Forces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows. |
| `.sf-text-gradient` | PUBLIC | macro | — | Applies a brand gradient to inline text. Sets the background to the gradient, clips it to the text, and makes the text color transparent. |
| `.sf-text-protect` | PUBLIC | macro | — | Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image. |
| `.sf-truncate` | PUBLIC | macro | — | Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis). |

### Motion / animation (22)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-color-pulse` | PUBLIC | motion | — | Applies a gentle color-pulse animation to draw attention to a dynamic value change (e.g. a counter updating). Scoped to users who have not requested reduced motion. |
| `.sf-entrance--fade` | PUBLIC | motion | — | Scroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline. |
| `.sf-entrance--fade-down` | PUBLIC | motion | — | Scroll-driven entrance: element fades in while moving downward into position. |
| `.sf-entrance--fade-left` | PUBLIC | motion | — | Scroll-driven entrance: element fades in while moving from the right toward the left. |
| `.sf-entrance--fade-right` | PUBLIC | motion | — | Scroll-driven entrance: element fades in while moving from the left toward the right. |
| `.sf-entrance--fade-up` | PUBLIC | motion | — | Scroll-driven entrance: element fades in while moving upward into position. |
| `.sf-entrance--scale-up` | PUBLIC | motion | — | Scroll-driven entrance: element fades in while scaling up from a slightly smaller size. |
| `.sf-exit--fade` | PUBLIC | motion | — | Scroll-out exit animation: fades the element out in place (sf-fade-out). |
| `.sf-exit--fade-down` | PUBLIC | motion | — | Scroll-out exit animation: fades out while sliding downward (sf-slide-out-down). |
| `.sf-exit--fade-left` | PUBLIC | motion | — | Scroll-out exit animation: fades out while sliding to the left (sf-slide-out-left). |
| `.sf-exit--fade-right` | PUBLIC | motion | — | Scroll-out exit animation: fades out while sliding to the right (sf-slide-out-right). |
| `.sf-exit--fade-up` | PUBLIC | motion | — | Scroll-out exit animation: fades out while sliding upward (sf-slide-out-up). |
| `.sf-exit--scale-down` | PUBLIC | motion | — | Scroll-out exit animation: fades out while shrinking (sf-scale-down). |
| `.sf-fade-in` | PUBLIC | motion | — | One-shot fade-in animation (opacity 0 → 1). Scoped to no-preference so it stops automatically for reduced-motion users. |
| `.sf-fade-out` | PUBLIC | motion | — | One-shot fade-out animation (opacity 1 → 0). Scoped to no-preference. |
| `.sf-scale-down` | PUBLIC | motion | — | One-shot scale-down animation (element shrinks from full size). Scoped to no-preference. |
| `.sf-scale-up` | PUBLIC | motion | — | One-shot scale-up animation (element grows from smaller size). Scoped to no-preference. |
| `.sf-slide-in-down` | PUBLIC | motion | — | One-shot slide-in-from-above animation. Scoped to no-preference. |
| `.sf-slide-in-left` | PUBLIC | motion | — | One-shot slide-in-from-right animation (slides to the left). Scoped to no-preference. |
| `.sf-slide-in-right` | PUBLIC | motion | — | One-shot slide-in-from-left animation (slides to the right). Scoped to no-preference. |
| `.sf-slide-in-up` | PUBLIC | motion | — | One-shot slide-in-from-below animation. Scoped to no-preference. |
| `.sf-stagger` | PUBLIC | motion | — | Stagger — choreography, not the animation itself. Put .sf-stagger on a PARENT; every direct child gets an incrementing animation-delay so a time-based entrance (.sf-fade-in / .sf-slide-in-*) plays in sequence. Children WITHOUT an animation just carry an inert delay (no-op), so… |

### Print (4)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.no-print` | PUBLIC | print | — | Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper. |
| `.print-color-exact` | PUBLIC | print | — | Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print. |
| `.print-no-color` | PUBLIC | print | — | Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills. |
| `.print-only` | PUBLIC | print | — | Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen. |

### State classes (15)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-is-disabled` | PUBLIC | state | INTERACTIVITY | Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events. |
| `.sf-is-draggable` | PUBLIC | state | DRAG & DROP | Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins. |
| `.sf-is-dragging` | PUBLIC | state | DRAG & DROP | Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event. |
| `.sf-is-drop-target` | PUBLIC | state | DRAG & DROP | Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events. |
| `.sf-is-empty` | PUBLIC | state | EMPTY STATE | Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty. |
| `.sf-is-error` | PUBLIC | state | VALIDATION / FEEDBACK | Error state — general (not form-field-specific) negative feedback. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid. |
| `.sf-is-highlighted` | PUBLIC | state | SELECTED / HIGHLIGHTED | Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists. |
| `.sf-is-info` | PUBLIC | state | VALIDATION / FEEDBACK | Info status state — applies info color tokens. Use for neutral informational messages and hints. |
| `.sf-is-invalid` | PUBLIC | state | VALIDATION / FEEDBACK | Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to sf-is-error; the name signals form-field context. |
| `.sf-is-loading` | PUBLIC | state | LOADING / ASYNC FEEDBACK | Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results. |
| `.sf-is-selected` | PUBLIC | state | SELECTED / HIGHLIGHTED | Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles. |
| `.sf-is-shimmer` | PUBLIC | state | LOADING / ASYNC FEEDBACK | Shimmer loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements. (Renamed from .sf-is-skeleton so "skeleton" refers only to the planned .sf-skeleton component.) |
| `.sf-is-success` | PUBLIC | state | VALIDATION / FEEDBACK | Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback. |
| `.sf-is-valid` | PUBLIC | state | VALIDATION / FEEDBACK | Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to sf-is-success; the name signals form-field context. |
| `.sf-is-warning` | PUBLIC | state | VALIDATION / FEEDBACK | Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts. |

### Theme utilities (3)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-theme-dark` | PUBLIC | theme | — | Forces dark colour scheme on the element and its subtree (class alias of [data-theme="dark"]). |
| `.sf-theme-light` | PUBLIC | theme | — | Forces light colour scheme on the element and its subtree (class alias of [data-theme="light"]). |
| `.sf-theme-transition` | PUBLIC | theme | — | Opt-in animated light/dark theme crossfade. Apply to <html> (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration. |

### Utilities (47)

| Class | Tier | Kind | Group | Description |
|---|---|---|---|---|
| `.sf-h1` | PUBLIC | utility | HEADING HELPER CLASSES (.sf-h1 | Applies h1-level typography (size, line-height, weight, tracking, max-width) to any element without changing its semantic level. |
| `.sf-h2` | PUBLIC | utility | HEADING HELPER CLASSES (.sf-h1 | Applies h2-level typography to any element without changing its semantic level. |
| `.sf-h3` | PUBLIC | utility | HEADING HELPER CLASSES (.sf-h1 | Applies h3-level typography to any element without changing its semantic level. |
| `.sf-h4` | PUBLIC | utility | HEADING HELPER CLASSES (.sf-h1 | Applies h4-level typography to any element without changing its semantic level. |
| `.sf-h5` | PUBLIC | utility | HEADING HELPER CLASSES (.sf-h1 | Applies h5-level typography to any element without changing its semantic level. |
| `.sf-h6` | PUBLIC | utility | HEADING HELPER CLASSES (.sf-h1 | Applies h6-level typography to any element without changing its semantic level. |
| `.sf-hover-float` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: translates the element up slightly on hover. |
| `.sf-hover-grow` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: scales the element up slightly on hover. |
| `.sf-hover-shrink` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: scales the element down slightly on hover. |
| `.sf-hover-sink` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: translates the element down slightly on hover. |
| `.sf-hover-slide-end` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: translates the element toward the inline-end on hover. |
| `.sf-hover-slide-start` | PUBLIC | utility | HOVER-TRANSFORM UTILITIES (.sf-hover-*) | Hover-triggered transform: translates the element toward the inline-start on hover. |
| `.sf-invisible` | PUBLIC | utility | VISIBILITY HELPERS (.sf-invisible / .sf-visible) | Visibility helper (optional/utilities.css) — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden). Not a runtime state: no JS/ARIA condition of its own. |
| `.sf-list-none` | PUBLIC | utility | LIST RESET (.sf-list-none) | Drops marker + inline start-padding in one class, on any <ul>/<ol> (or element with list-style applied). |
| `.sf-marker--action` | PUBLIC | utility | LIST MARKER COLOUR (.sf-marker--*) | Colours list ::markers with the action colour. |
| `.sf-marker--primary` | PUBLIC | utility | LIST MARKER COLOUR (.sf-marker--*) | Colours list ::markers with the primary brand colour. |
| `.sf-marker--secondary` | PUBLIC | utility | LIST MARKER COLOUR (.sf-marker--*) | Colours list ::markers with the secondary brand colour. |
| `.sf-marker--tertiary` | PUBLIC | utility | LIST MARKER COLOUR (.sf-marker--*) | Colours list ::markers with the tertiary brand colour. |
| `.sf-selection--alt` | PUBLIC | utility | ALTERNATE SELECTION COLOUR (.sf-selection--alt) | Overrides the ::selection custom properties (core/base.css) on the element and its descendants, for surfaces where the default selection colours land with poor contrast (e.g. a dark card on a light page). Backed by --sf-color-selection-*--alt (core/tokens.css). |
| `.sf-sticky` | PUBLIC | utility | STICKY POSITIONING (.sf-sticky) | position: sticky pinned at the header-aware --sf-sticky-offset. |
| `.sf-sticky--l` | PUBLIC | utility | STICKY POSITIONING (.sf-sticky) | Sticky positioning with an extra large gap (--sf-space-l) above the header-aware offset. |
| `.sf-sticky--m` | PUBLIC | utility | STICKY POSITIONING (.sf-sticky) | Sticky positioning with an extra medium gap (--sf-space-m) above the header-aware offset. |
| `.sf-sticky--s` | PUBLIC | utility | STICKY POSITIONING (.sf-sticky) | Sticky positioning with an extra small gap (--sf-space-s) above the header-aware offset. |
| `.sf-text-2xl` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the 2xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-2xs` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the 2xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-3xl` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the 3xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-4xl` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the 4xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-l` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the l text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-m` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the m (body) text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-s` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the s text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-xl` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-text-xs` | PUBLIC | utility | TEXT-SIZE UTILITIES (.sf-text-2xs | Applies the xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class. |
| `.sf-visible` | PUBLIC | utility | VISIBILITY HELPERS (.sf-invisible / .sf-visible) | Visibility helper (optional/utilities.css) — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent. |
| `.sf-width-10` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-20` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-30` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-40` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-50` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-60` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-70` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-80` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-90` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-auto` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-fit` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-full` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-max` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |
| `.sf-width-min` | PUBLIC | utility | CONTENT-WIDTH UTILITIES (.sf-width-*) | Constrain an element to a fraction of the content column (--sf-content-width) and centre it in normal flow. inline-size:100% lets it shrink below the cap on a narrower parent; margin-inline:auto absorbs the leftover space to centre it. The keyword variants map to CSS width… |