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; for the flat name list see
registry.json; for the tier contract see
architecture.md.
1042 elements — 734 tokens, 308 classes.
Tier
Count
Meaning
PUBLIC
996
Everyday surface. SemVer-stable.
PUBLIC-ADVANCED
45
Same SemVer guarantee; niche/powerful.
INTERNAL
1
Implementation detail; may change without a major bump.
Tokens (734)
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.
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.
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
~0.5px hairline border. Browsers snap border-width to the nearest device pixel (rounding up to a minimum of 1 device pixel), so the rendered width is device-pixel- and browser-dependent: on 1x DPR it rounds up to 1px (visually matching –sf-border-width-1); at DPRs where 0.5px lands on a whole device-pixel boundary (2x, 4x, …) it renders as a true 0.5px hairline; at other DPRs (e.g. 3x) the snapped result is close to but not exactly 0.5px. Use for subtle separators where sub-pixel precision doesn’t matter.
--sf-code-font-size
PUBLIC
knob
code
0.875em
Font size for inline and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized.
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 — alias of –sf-color-action-600.
--sf-color-action-lighter
PUBLIC
consumption
color
var(--sf-color-action-400)
Light action shade for soft accents — alias of –sf-color-action-400.
--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 dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without 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 — alias of –sf-color-action-950.
--sf-color-action-superlight
PUBLIC
consumption
color
var(--sf-color-action-50)
Near-white action shade — alias of –sf-color-action-50.
--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 — alias of –sf-color-action-a5.
--sf-color-action-xdark
PUBLIC
consumption
color
var(--sf-color-action-800)
Extra-dark action shade — alias of –sf-color-action-800.
--sf-color-action-xlight
PUBLIC
consumption
color
var(--sf-color-action-200)
Extra-light action shade — alias of –sf-color-action-200.
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 — alias of –sf-color-secondary-600.
--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 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 — alias of –sf-color-secondary-50.
--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 — alias of –sf-color-secondary-a5.
--sf-color-secondary-xdark
PUBLIC
consumption
color
var(--sf-color-secondary-800)
Extra-dark secondary shade — alias of –sf-color-secondary-800.
--sf-color-secondary-xlight
PUBLIC
consumption
color
var(--sf-color-secondary-200)
Extra-light secondary shade — alias of –sf-color-secondary-200.
--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.
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 “": a registered 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.
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-heading
PUBLIC
consumption
font
var(--sf-font-body)
Font family for headings. Defaults to display if not overridden separately.
--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-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.
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.
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.
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.
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
Opt-in global corner radius for /. 0 (off) by default; set it to a –sf-radius-* value to round media globally. Applied via :where() so it never fights .sf-bg-layer or a component’s own radius.
--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-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.
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-offset-gap
PUBLIC
consumption
scroll
var(--sf-space-m)
Breathing room added below the header when scrolling to an in-page anchor (scroll-padding). Defaults to –sf-space-m so a heading lands a comfortable gap under the sticky header; set to 0 for the heading flush under the header, or any length to tune the gap without overriding the whole scroll-padding rule.
--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.
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
knob
size
3rem
Large UI component height (~48px). Touch-friendly interactive elements.
--sf-size-m
PUBLIC
knob
size
2.5rem
~40px UI component height (scale rung m). The default .sf-btn min-height.
--sf-size-s
PUBLIC
knob
size
2rem
Small UI component height (~32px). Compact buttons and input variants.
--sf-size-xl
PUBLIC
knob
size
3.5rem
Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls.
--sf-size-xs
PUBLIC
knob
size
1.5rem
Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.
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.
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.
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.
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).
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.
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).
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 (31)
Token
Tier
Role
Namespace
Default
Description
--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-marker-color
PUBLIC
consumption
marker
var(--sf-color-primary)
Shared list-marker (::marker) colour — single source of truth for the .sf-marker–* utilities and .sf-prose markers alike. Defaults to the primary brand colour; set it on any list (or globally) to retune every marker at once.
--sf-prose-block-margin
PUBLIC
consumption
prose
var(--sf-space-m)
Block margin between prose elements (h2, p, ul, etc.).
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 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-marker-color)
Color of list bullets and ordered-list numbers inside .sf-prose. Defaults to the shared –sf-marker-color; override per-instance for prose-scoped marker colour.
--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.).
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 (308)
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 .
.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 .
.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
.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 (145)
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 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-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 (47)
Class
Tier
Kind
Group
Description
.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-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-render-lazy
PUBLIC
macro
—
Defers rendering of off-screen content via content-visibility: auto. The browser skips layout+paint for content outside the viewport, improving LCP for long pages.
.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 (1)
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.
State classes (12)
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-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-hidden-if-empty
PUBLIC
state
HIDE-IF-EMPTY
Hides the element when it has no child nodes (:empty). An action-on-state helper (the name states the behaviour) for dynamic lists or containers that may render empty.
.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 (38)
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-auto
PUBLIC
utility
CONTENT-WIDTH UTILITIES (.sf-width-*)
Intrinsic auto width (inline-size:auto) — sizes to the box’s normal layout.
.sf-width-fit
PUBLIC
utility
CONTENT-WIDTH UTILITIES (.sf-width-*)
Width sized to its own content (fit-content).
.sf-width-full
PUBLIC
utility
CONTENT-WIDTH UTILITIES (.sf-width-*)
Full width, uncapped (inline-size:100%, max-inline-size:none).
.sf-width-max
PUBLIC
utility
CONTENT-WIDTH UTILITIES (.sf-width-*)
Widest content-driven width (max-content) — grows to full intrinsic width, no wrapping.
.sf-width-min
PUBLIC
utility
CONTENT-WIDTH UTILITIES (.sf-width-*)
Narrowest content-driven width (min-content) — shrinks to the longest unbreakable content.