# SLASHED v0.7.29 > SLASHED is a pure-CSS, token-driven styling framework — BEM-first, cascade-layered, zero runtime JS. This file is a distilled, machine-generated reference of SLASHED’s complete token and class vocabulary for this exact version, so an AI coding assistant can use real `--sf-*` token and `.sf-*` class names instead of guessing or hallucinating them. Generated from source by `npm run docs` — do not edit by hand. Full prose guide: https://github.com/codeslash-dev/SLASHED/blob/main/docs/llm-guide.md · Machine-readable index: https://github.com/codeslash-dev/SLASHED/blob/main/docs/api-index.json ## Conventions - **Tokens** are `--sf-*` CSS custom properties: set the *knob* tokens (literal inputs), read the *consumption* tokens (derived via `var(--sf-…)`). - **Classes** are `.sf-*` (structural, BEM `block__element--modifier`) and `.sf-is-*` (runtime states toggled by JS/ARIA). Unprefixed helpers (`sr-only`, `skip-link`, …) also ship. - **Stability tiers:** PUBLIC (stable), PUBLIC-ADVANCED (stable but low-level / niche), INTERNAL (no guarantees, omitted here). - **Cascade layers**, lowest→highest precedence: `tokens` → `reset` → `base` → `forms` → `components` → `layout` → `macros` → `utilities` → `states` → `themes` → `motion` → `accessibility` → `print` → `legacy` → `overrides`. Author overrides belong in `slashed.overrides` (or any unlayered rule) and always win. - Prefer tokens over raw values, and BEM classes / macros over utility classes. Utilities and most component families ship from `optional/` (opt-in). ## Tokens 740 tokens (PUBLIC + PUBLIC-ADVANCED), grouped by area. Names are self-descriptive; defaults, derivations and per-token notes live in the full guide and api-index.json. ### Layout tokens (53) ``` --sf-alternate-gap --sf-alternate-inner-gap --sf-bento-cols-default --sf-bento-gap --sf-bento-row-compact --sf-bento-row-default --sf-bento-row-tall --sf-bg-layer-fit --sf-bg-layer-inset --sf-bg-layer-position --sf-bg-layer-radius --sf-bg-layer-z --sf-box-border-color --sf-box-border-width --sf-box-padding --sf-breakout-width --sf-center-gutter --sf-center-max --sf-cluster-align --sf-cluster-gap --sf-cluster-justify --sf-content-width --sf-cover-min-height --sf-cover-padding --sf-equal-gap --sf-equal-min-col --sf-equal-rule-color --sf-equal-rule-style --sf-equal-rule-width --sf-frame-ratio --sf-grid-gap --sf-grid-min --sf-grid-min-2xl --sf-grid-min-l --sf-grid-min-m --sf-grid-min-s --sf-grid-min-xl --sf-grid-min-xs --sf-icon-box-bg --sf-icon-box-border --sf-icon-box-pad --sf-icon-box-radius --sf-imposter-margin --sf-prose-paragraph --sf-reel-gap --sf-reel-height --sf-reel-item-width --sf-sidebar-gap --sf-sidebar-min-width --sf-sidebar-width --sf-stack-gap --sf-switcher-gap --sf-switcher-threshold ``` ### Core tokens (609) ``` --sf-animation-blink --sf-animation-color-pulse --sf-animation-fade-in --sf-animation-fade-out --sf-animation-float --sf-animation-ping --sf-animation-scale-down --sf-animation-scale-up --sf-animation-shimmer --sf-animation-slide-in-down --sf-animation-slide-in-left --sf-animation-slide-in-right --sf-animation-slide-in-up --sf-animation-slide-out-down --sf-animation-slide-out-left --sf-animation-slide-out-right --sf-animation-slide-out-up --sf-animation-spin --sf-blur --sf-body-color --sf-body-em-style --sf-body-font-family --sf-body-font-size --sf-body-font-weight --sf-body-line-height --sf-body-strong-weight --sf-body-text-wrap --sf-border --sf-border-scale --sf-border-strong --sf-border-style --sf-border-subtle --sf-border-width-1 --sf-border-width-2 --sf-border-width-3 --sf-border-width-4 --sf-border-width-hairline --sf-caret-color --sf-code-font-size --sf-color-action --sf-color-action--active --sf-color-action--hover --sf-color-action-100 --sf-color-action-200 --sf-color-action-300 --sf-color-action-400 --sf-color-action-50 --sf-color-action-500 --sf-color-action-600 --sf-color-action-700 --sf-color-action-800 --sf-color-action-900 --sf-color-action-950 --sf-color-action-a10 --sf-color-action-a30 --sf-color-action-a5 --sf-color-action-a50 --sf-color-action-a80 --sf-color-action-darker --sf-color-action-lighter --sf-color-action-muted --sf-color-action-source-dark --sf-color-action-source-light --sf-color-action-subtle --sf-color-action-superdark --sf-color-action-superlight --sf-color-action-tint --sf-color-action-xdark --sf-color-action-xlight --sf-color-base --sf-color-base--active --sf-color-base--hover --sf-color-base-100 --sf-color-base-200 --sf-color-base-300 --sf-color-base-400 --sf-color-base-50 --sf-color-base-500 --sf-color-base-600 --sf-color-base-700 --sf-color-base-800 --sf-color-base-900 --sf-color-base-950 --sf-color-base-a10 --sf-color-base-a30 --sf-color-base-a5 --sf-color-base-a50 --sf-color-base-a80 --sf-color-base-muted --sf-color-base-source-dark --sf-color-base-source-light --sf-color-base-subtle --sf-color-base-tint --sf-color-bg --sf-color-bg--active --sf-color-bg--disabled --sf-color-bg--focus --sf-color-bg--hover --sf-color-bg--selected --sf-color-black --sf-color-border --sf-color-border--disabled --sf-color-border--focus --sf-color-border--strong --sf-color-border--subtle --sf-color-border--translucent --sf-color-code-bg --sf-color-code-text --sf-color-danger --sf-color-danger-muted --sf-color-danger-source-dark --sf-color-danger-source-light --sf-color-danger-strong --sf-color-danger-subtle --sf-color-danger-tint --sf-color-dim --sf-color-heading --sf-color-info --sf-color-info-muted --sf-color-info-source-dark --sf-color-info-source-light --sf-color-info-strong --sf-color-info-subtle --sf-color-info-tint --sf-color-inset --sf-color-inverse --sf-color-link --sf-color-link--active --sf-color-link--disabled --sf-color-link--hover --sf-color-link--underline --sf-color-link--visited --sf-color-mark-bg --sf-color-mark-text --sf-color-neutral --sf-color-neutral--active --sf-color-neutral--hover --sf-color-neutral-100 --sf-color-neutral-200 --sf-color-neutral-300 --sf-color-neutral-400 --sf-color-neutral-50 --sf-color-neutral-500 --sf-color-neutral-600 --sf-color-neutral-700 --sf-color-neutral-800 --sf-color-neutral-900 --sf-color-neutral-950 --sf-color-neutral-a10 --sf-color-neutral-a30 --sf-color-neutral-a5 --sf-color-neutral-a50 --sf-color-neutral-a80 --sf-color-neutral-darker --sf-color-neutral-lighter --sf-color-neutral-muted --sf-color-neutral-source-dark --sf-color-neutral-source-light --sf-color-neutral-subtle --sf-color-neutral-superdark --sf-color-neutral-superlight --sf-color-neutral-tint --sf-color-neutral-xdark --sf-color-neutral-xlight --sf-color-overlay --sf-color-primary --sf-color-primary--active --sf-color-primary--hover --sf-color-primary-100 --sf-color-primary-200 --sf-color-primary-300 --sf-color-primary-400 --sf-color-primary-50 --sf-color-primary-500 --sf-color-primary-600 --sf-color-primary-700 --sf-color-primary-800 --sf-color-primary-900 --sf-color-primary-950 --sf-color-primary-a10 --sf-color-primary-a30 --sf-color-primary-a5 --sf-color-primary-a50 --sf-color-primary-a80 --sf-color-primary-darker --sf-color-primary-lighter --sf-color-primary-muted --sf-color-primary-source-dark --sf-color-primary-source-light --sf-color-primary-subtle --sf-color-primary-superdark --sf-color-primary-superlight --sf-color-primary-tint --sf-color-primary-xdark --sf-color-primary-xlight --sf-color-raised --sf-color-scheme --sf-color-secondary --sf-color-secondary--active --sf-color-secondary--hover --sf-color-secondary-100 --sf-color-secondary-200 --sf-color-secondary-300 --sf-color-secondary-400 --sf-color-secondary-50 --sf-color-secondary-500 --sf-color-secondary-600 --sf-color-secondary-700 --sf-color-secondary-800 --sf-color-secondary-900 --sf-color-secondary-950 --sf-color-secondary-a10 --sf-color-secondary-a30 --sf-color-secondary-a5 --sf-color-secondary-a50 --sf-color-secondary-a80 --sf-color-secondary-darker --sf-color-secondary-lighter --sf-color-secondary-muted --sf-color-secondary-source-dark --sf-color-secondary-source-light --sf-color-secondary-subtle --sf-color-secondary-superdark --sf-color-secondary-superlight --sf-color-secondary-tint --sf-color-secondary-xdark --sf-color-secondary-xlight --sf-color-selection-bg --sf-color-selection-bg--alt --sf-color-selection-text --sf-color-selection-text--alt --sf-color-success --sf-color-success-muted --sf-color-success-source-dark --sf-color-success-source-light --sf-color-success-strong --sf-color-success-subtle --sf-color-success-tint --sf-color-surface --sf-color-tertiary --sf-color-tertiary--active --sf-color-tertiary--hover --sf-color-tertiary-100 --sf-color-tertiary-200 --sf-color-tertiary-300 --sf-color-tertiary-400 --sf-color-tertiary-50 --sf-color-tertiary-500 --sf-color-tertiary-600 --sf-color-tertiary-700 --sf-color-tertiary-800 --sf-color-tertiary-900 --sf-color-tertiary-950 --sf-color-tertiary-a10 --sf-color-tertiary-a30 --sf-color-tertiary-a5 --sf-color-tertiary-a50 --sf-color-tertiary-a80 --sf-color-tertiary-darker --sf-color-tertiary-lighter --sf-color-tertiary-muted --sf-color-tertiary-source-dark --sf-color-tertiary-source-light --sf-color-tertiary-subtle --sf-color-tertiary-superdark --sf-color-tertiary-superlight --sf-color-tertiary-tint --sf-color-tertiary-xdark --sf-color-tertiary-xlight --sf-color-text --sf-color-text--disabled --sf-color-text--inverse --sf-color-text--muted --sf-color-text--on-action --sf-color-text--on-base --sf-color-text--on-danger --sf-color-text--on-info --sf-color-text--on-inverse --sf-color-text--on-neutral --sf-color-text--on-primary --sf-color-text--on-secondary --sf-color-text--on-success --sf-color-text--on-tertiary --sf-color-text--on-warning --sf-color-text--placeholder --sf-color-text--subtle --sf-color-warning --sf-color-warning-muted --sf-color-warning-source-dark --sf-color-warning-source-light --sf-color-warning-strong --sf-color-warning-subtle --sf-color-warning-tint --sf-color-white --sf-component-pad --sf-container-default --sf-container-full --sf-container-narrow --sf-container-prose --sf-container-wide --sf-content-gap --sf-contrast-bias --sf-contrast-threshold --sf-density --sf-display-l-line-height --sf-display-m-line-height --sf-display-s-line-height --sf-divider-color --sf-divider-gap --sf-divider-style --sf-divider-width --sf-drop-shadow-l --sf-drop-shadow-m --sf-drop-shadow-s --sf-drop-shadow-xl --sf-drop-shadow-xs --sf-duration-fast --sf-duration-instant --sf-duration-none --sf-duration-normal --sf-duration-slow --sf-duration-slower --sf-ease-bounce --sf-ease-elastic --sf-ease-in --sf-ease-in-out --sf-ease-linear --sf-ease-out --sf-ease-overshoot --sf-ease-spring --sf-field-block --sf-field-required-marker --sf-fluid-max-vw --sf-fluid-min-vw --sf-fluid-width --sf-focus-ring-color --sf-focus-ring-offset --sf-focus-ring-shadow --sf-focus-ring-style --sf-focus-ring-width --sf-font-body --sf-font-display --sf-font-features --sf-font-geometric --sf-font-heading --sf-font-humanist --sf-font-mono --sf-font-numeric --sf-font-slab --sf-font-variation --sf-font-weight-body --sf-font-weight-bold --sf-font-weight-display --sf-font-weight-heading --sf-font-weight-interactive --sf-font-weight-light --sf-font-weight-medium --sf-font-weight-normal --sf-font-weight-semibold --sf-font-weight-strong --sf-gap --sf-gradient-action --sf-gradient-brand --sf-gradient-fade--b --sf-gradient-fade--l --sf-gradient-fade--r --sf-gradient-fade--t --sf-gradient-primary --sf-gradient-secondary --sf-gradient-surface --sf-gradient-tertiary --sf-gutter --sf-h1-font-weight --sf-h1-letter-spacing --sf-h1-line-height --sf-h1-max-width --sf-h1-size --sf-h2-font-weight --sf-h2-letter-spacing --sf-h2-line-height --sf-h2-max-width --sf-h2-size --sf-h3-font-weight --sf-h3-letter-spacing --sf-h3-line-height --sf-h3-max-width --sf-h3-size --sf-h4-font-weight --sf-h4-letter-spacing --sf-h4-line-height --sf-h4-max-width --sf-h4-size --sf-h5-font-weight --sf-h5-letter-spacing --sf-h5-line-height --sf-h5-max-width --sf-h5-size --sf-h6-font-weight --sf-h6-letter-spacing --sf-h6-line-height --sf-h6-max-width --sf-h6-size --sf-header-height --sf-header-height-desktop --sf-header-height-mobile --sf-heading-color --sf-heading-font-family --sf-heading-text-wrap --sf-hover-grow-scale --sf-hover-lift --sf-hover-shrink-scale --sf-hover-slide --sf-icon-2xl --sf-icon-l --sf-icon-m --sf-icon-s --sf-icon-xl --sf-icon-xs --sf-leading-normal --sf-leading-relaxed --sf-leading-snug --sf-leading-taper --sf-leading-tight --sf-link-external-label --sf-link-external-marker --sf-link-underline-offset --sf-link-underline-thickness --sf-lumlocker --sf-lumlocker-dark --sf-mask-scrim-end --sf-mask-scrim-start --sf-media-radius --sf-motion-scale --sf-object-fit --sf-object-position --sf-opacity-disabled --sf-opacity-muted --sf-optical-sizing --sf-palette-shade-l --sf-palette-tint-l --sf-print-base-size --sf-print-page-margin --sf-print-page-size --sf-radius-2xl --sf-radius-2xs --sf-radius-3xl --sf-radius-4xl --sf-radius-full --sf-radius-l --sf-radius-m --sf-radius-none --sf-radius-outer --sf-radius-pill --sf-radius-s --sf-radius-scale --sf-radius-xl --sf-radius-xs --sf-ratio-3-2 --sf-ratio-4-3 --sf-ratio-cinema --sf-ratio-golden --sf-ratio-portrait --sf-ratio-square --sf-ratio-video --sf-safe-bottom --sf-safe-left --sf-safe-right --sf-safe-top --sf-scroll-timeline-range-end --sf-scroll-timeline-range-exit-end --sf-scroll-timeline-range-exit-start --sf-scroll-timeline-range-start --sf-scrollbar-thumb --sf-scrollbar-track --sf-section-pad --sf-section-pad--2xl --sf-section-pad--l --sf-section-pad--m --sf-section-pad--s --sf-section-pad--xl --sf-section-pad--xs --sf-section-scale --sf-shadow-2xl --sf-shadow-color --sf-shadow-glow --sf-shadow-glow-color --sf-shadow-inner --sf-shadow-l --sf-shadow-lightness --sf-shadow-m --sf-shadow-none --sf-shadow-s --sf-shadow-strength --sf-shadow-xl --sf-shadow-xs --sf-size-l --sf-size-m --sf-size-s --sf-size-xl --sf-size-xs --sf-space-2xl --sf-space-2xs --sf-space-3xl --sf-space-4xl --sf-space-base-max --sf-space-base-min --sf-space-l --sf-space-m --sf-space-none --sf-space-px --sf-space-ratio-max --sf-space-ratio-min --sf-space-s --sf-space-scale --sf-space-xl --sf-space-xs --sf-stagger-step --sf-sticky-offset --sf-sticky-offset-desktop --sf-sticky-offset-mobile --sf-text-2xl --sf-text-2xl-font-weight --sf-text-2xl-letter-spacing --sf-text-2xl-line-height --sf-text-2xl-max-width --sf-text-2xs --sf-text-2xs-font-weight --sf-text-2xs-letter-spacing --sf-text-2xs-line-height --sf-text-2xs-max-width --sf-text-3xl --sf-text-3xl-font-weight --sf-text-3xl-letter-spacing --sf-text-3xl-line-height --sf-text-3xl-max-width --sf-text-4xl --sf-text-4xl-font-weight --sf-text-4xl-letter-spacing --sf-text-4xl-line-height --sf-text-4xl-max-width --sf-text-base-max --sf-text-base-min --sf-text-display-base-max --sf-text-display-base-min --sf-text-display-l --sf-text-display-m --sf-text-display-s --sf-text-display-scale --sf-text-l --sf-text-l-font-weight --sf-text-l-letter-spacing --sf-text-l-line-height --sf-text-l-max-width --sf-text-m --sf-text-m-font-weight --sf-text-m-letter-spacing --sf-text-m-line-height --sf-text-m-max-width --sf-text-ratio-max --sf-text-ratio-min --sf-text-s --sf-text-s-font-weight --sf-text-s-letter-spacing --sf-text-s-line-height --sf-text-s-max-width --sf-text-scale --sf-text-shadow-l --sf-text-shadow-m --sf-text-shadow-none --sf-text-shadow-s --sf-text-shadow-xl --sf-text-shadow-xs --sf-text-xl --sf-text-xl-font-weight --sf-text-xl-letter-spacing --sf-text-xl-line-height --sf-text-xl-max-width --sf-text-xs --sf-text-xs-font-weight --sf-text-xs-letter-spacing --sf-text-xs-line-height --sf-text-xs-max-width --sf-theme-transition-duration --sf-touch-target --sf-tracking-normal --sf-tracking-tight --sf-tracking-wide --sf-tracking-wider --sf-tracking-widest --sf-transition-colors --sf-transition-enter --sf-transition-exit --sf-transition-fast --sf-transition-form-field --sf-transition-opacity --sf-transition-overlay --sf-transition-shadow --sf-transition-slow --sf-transition-transform --sf-z-base --sf-z-below --sf-z-dropdown --sf-z-fixed --sf-z-modal --sf-z-overlay --sf-z-raised --sf-z-sticky --sf-z-toast --sf-z-tooltip ``` ### Macro tokens (32) ``` --sf-aspect --sf-content-intrinsic-size --sf-flow-space --sf-line-clamp --sf-overlap-pull --sf-prose-block-margin --sf-prose-blockquote-border --sf-prose-blockquote-padding --sf-prose-figcaption-size --sf-prose-figure-margin --sf-prose-heading-gap --sf-prose-hr-margin --sf-prose-list-gap --sf-prose-marker-color --sf-prose-media-margin --sf-prose-media-radius --sf-prose-nested-list-gap --sf-prose-table-pad --sf-scrim-color --sf-scrim-direction --sf-scrim-gradient --sf-scrim-text-shadow --sf-scroll-shadow-size --sf-surface-bg-animation --sf-surface-bg-attachment --sf-surface-bg-color --sf-surface-bg-image --sf-surface-bg-overlay --sf-surface-bg-position --sf-surface-bg-repeat --sf-surface-bg-size --sf-surface-color ``` ### Component tokens (46) ``` --sf-btn-border-width --sf-btn-font-scale --sf-btn-font-size --sf-btn-font-weight --sf-btn-gap --sf-btn-l-font-size --sf-btn-l-min-height --sf-btn-l-padding-block --sf-btn-l-padding-inline --sf-btn-m-font-size --sf-btn-m-min-height --sf-btn-m-padding-block --sf-btn-m-padding-inline --sf-btn-min-height --sf-btn-padding-block --sf-btn-padding-inline --sf-btn-radius --sf-btn-s-font-size --sf-btn-s-min-height --sf-btn-s-padding-block --sf-btn-s-padding-inline --sf-btn-xl-font-size --sf-btn-xl-min-height --sf-btn-xl-padding-block --sf-btn-xl-padding-inline --sf-btn-xs-font-size --sf-btn-xs-min-height --sf-btn-xs-padding-block --sf-btn-xs-padding-inline --sf-card-avatar-size --sf-card-bg --sf-card-border-color --sf-card-border-width --sf-card-gap --sf-card-heading-size --sf-card-media-radius --sf-card-media-ratio --sf-card-padding --sf-card-radius --sf-card-radius-outer --sf-card-shadow --sf-card-shadow--elevated --sf-card-shadow--hover --sf-field-padding-block --sf-field-padding-inline --sf-field-radius ``` ## Classes 328 classes, grouped by area, each with a one-line purpose. `--variant` names are BEM modifiers of the base class above them. ### Accessibility (9) - `.no-motion` — 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` — 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` — 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` — 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` — 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` — .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` — Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in . - `.sr-only` — 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` — Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets. ### Print (4) - `.no-print` — Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper. - `.print-color-exact` — 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` — 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` — 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. ### Layout primitives (146) - `.sf-alternate` — 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` — 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` — Bento grid variant with a 2-column base layout. - `.sf-bento--3` — Bento grid variant with a 3-column base layout. - `.sf-bento--6` — Bento grid variant with a 6-column base layout. - `.sf-bento--row-compact` — Bento grid variant with shorter default row height. - `.sf-bento--row-tall` — Bento grid variant with taller default row height. - `.sf-bento-featured` — Span modifier for a bento item: takes up 2×2 cells (featured hero placement). - `.sf-bento-full` — Span modifier for a bento item: stretches across all columns (full-width banner). - `.sf-bento-tall` — Span modifier for a bento item: doubles the row height (tall card). - `.sf-bento-wide` — Span modifier for a bento item: spans 2 columns (wide card). - `.sf-bg-layer` — 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` — Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room. - `.sf-breakout` — 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` — Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content. - `.sf-center--intrinsic` — Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space). - `.sf-cluster` — 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` — Cluster variant with 2xl gap between items. - `.sf-cluster--between` — Cluster variant that distributes items with space-between alignment. - `.sf-cluster--center` — Cluster variant that centers the item row horizontally. - `.sf-cluster--end` — Cluster variant that aligns items to the inline end (right in LTR). - `.sf-cluster--l` — Cluster variant with large (l) gap between items. - `.sf-cluster--m` — Cluster variant with medium (m) gap between items. - `.sf-cluster--no-wrap` — Cluster variant that prevents item wrapping (single-line row). - `.sf-cluster--s` — Cluster variant with small (s) gap between items. - `.sf-cluster--xl` — Cluster variant with xl gap between items. - `.sf-cluster--xs` — Cluster variant with xs gap between items. - `.sf-container` — 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` — Container variant that spans the full viewport width (no max-width cap). - `.sf-container--narrow` — Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms. - `.sf-container--prose` — Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content. - `.sf-container--wide` — Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media. - `.sf-content-grid` — 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` — Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections. - `.sf-cover__center` — The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport. - `.sf-cover--max` — Cover variant that uses a max-height instead of min-height for the viewport constraint. - `.sf-cover--min` — Cover variant that reduces the minimum height to half a viewport. - `.sf-cover--padding-l` — Cover variant with large vertical padding above and below the centered content. - `.sf-cover--padding-s` — Cover variant with small vertical padding above and below the centered content. - `.sf-cq` — Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens. - `.sf-divide` — 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` — Vertical rules between direct children (inline-start borders), for row/horizontal layouts. - `.sf-divider` — Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation. - `.sf-divider--dashed` — Divider variant with a dashed stroke. - `.sf-divider--dotted` — Divider variant with a dotted stroke. - `.sf-divider--gradient` — Divider variant rendered as a gradient that fades to transparent at both ends. - `.sf-divider--soft` — Divider variant with reduced opacity (subtle separator). - `.sf-divider--strong` — Divider variant with stronger/darker color for a more prominent separator. - `.sf-divider--vertical` — Divider variant rendered as a vertical line. Use inside flex or grid containers. - `.sf-equal` — 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` — Equal-columns variant locked to column-count: 2. - `.sf-equal--3` — Equal-columns variant locked to column-count: 3. - `.sf-equal--4` — Equal-columns variant locked to column-count: 4. - `.sf-equal--6` — Equal-columns variant locked to column-count: 6. - `.sf-fluid-cq` — .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` — 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` — Frame variant locked to a 3:2 aspect ratio. - `.sf-frame--4-3` — Frame variant locked to a 4:3 aspect ratio. - `.sf-frame--cinema` — Frame variant locked to a cinematic 21:9 aspect ratio. - `.sf-frame--golden` — Frame variant locked to the golden ratio (1.618:1). - `.sf-frame--portrait` — Frame variant locked to a portrait 2:3 aspect ratio. - `.sf-frame--square` — Frame variant locked to a square 1:1 aspect ratio. - `.sf-frame--video` — Frame variant locked to the standard 16:9 video aspect ratio. - `.sf-full-bleed` — 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` — 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` — Gap injection variant with 2xl gap value. - `.sf-gap--l` — Gap injection variant with large (l) gap value. - `.sf-gap--m` — Gap injection variant with medium (m) gap value. - `.sf-gap--s` — Gap injection variant with small (s) gap value. - `.sf-gap--xl` — Gap injection variant with xl gap value. - `.sf-gap--xs` — Gap injection variant with xs gap value. - `.sf-grid` — 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` — Grid variant with a 2xl minimum column width. - `.sf-grid--dense` — Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers. - `.sf-grid--fit` — Grid variant that switches from auto-fill to auto-fit, collapsing empty columns. - `.sf-grid--l` — Grid variant with a large (l) minimum column width. - `.sf-grid--m` — Grid variant with a medium (m) minimum column width. - `.sf-grid--s` — Grid variant with a small (s) minimum column width. - `.sf-grid--xl` — Grid variant with an xl minimum column width. - `.sf-grid--xs` — Grid variant with an xs minimum column width. - `.sf-grid-cols-1` — Single-column layout (forces all children to one column). - `.sf-grid-cols-1-2` — Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive. - `.sf-grid-cols-1-3` — Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive. - `.sf-grid-cols-2` — Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers. - `.sf-grid-cols-2-1` — Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive. - `.sf-grid-cols-3` — Responsive 3-column fixed grid. Collapses progressively on narrow containers. - `.sf-grid-cols-3-1` — Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive. - `.sf-grid-cols-4` — Responsive 4-column fixed grid. Collapses progressively on narrow containers. - `.sf-grid-cols-6` — Responsive 6-column fixed grid. Collapses progressively on narrow containers. - `.sf-grid-flex` — 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` — Grid-flex variant with a 2xl minimum item width. - `.sf-grid-flex--center` — Grid-flex variant that keeps last-row leftover items fixed-width and centered instead of stretching. - `.sf-grid-flex--l` — Grid-flex variant with a large (l) minimum item width. - `.sf-grid-flex--m` — Grid-flex variant with a medium (m) minimum item width. - `.sf-grid-flex--s` — Grid-flex variant with a small (s) minimum item width. - `.sf-grid-flex--xl` — Grid-flex variant with an xl minimum item width. - `.sf-grid-flex--xs` — Grid-flex variant with an xs minimum item width. - `.sf-header--l` — Header block padding at the l step (--sf-space-l). - `.sf-header--m` — Header block padding at the m step (--sf-space-m). - `.sf-header--s` — Header block padding at the s step (--sf-space-s). - `.sf-header--xl` — Header block padding at the xl step (--sf-space-xl). - `.sf-header--xs` — Header block padding at the xs step (--sf-space-xs). - `.sf-icon` — 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` — Icon variant sized to --sf-icon-2xl (extra-extra-large). - `.sf-icon--boxed` — Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons. - `.sf-icon--l` — Icon variant sized to --sf-icon-l (large). - `.sf-icon--m` — Icon variant sized to --sf-icon-m (medium, same as base sf-icon). - `.sf-icon--s` — Icon variant sized to --sf-icon-s (small). - `.sf-icon--xl` — Icon variant sized to --sf-icon-xl (extra-large). - `.sf-icon--xs` — Icon variant sized to --sf-icon-xs (extra-small). - `.sf-imposter` — Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels. - `.sf-imposter--contain` — Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent. - `.sf-imposter--fixed` — Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals. - `.sf-overlay` — Overlay layout helper — absolutely fills its positioned parent (`position: absolute; inset: 0`) for overlays, backdrops, and media scrims. - `.sf-pancake` — 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` — 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` — 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` — Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands. - `.sf-section--2xl` — Section variant with 2xl vertical padding. - `.sf-section--collapse` — Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks). - `.sf-section--guttered` — 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` — Section variant with large (l) vertical padding. - `.sf-section--m` — Section variant with medium (m) vertical padding. - `.sf-section--s` — Section variant with small (s) vertical padding. - `.sf-section--xl` — Section variant with xl vertical padding. - `.sf-section--xs` — Section variant with xs vertical padding. - `.sf-section-group` — Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges. - `.sf-sidebar` — 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` — Sidebar variant with a narrower sidebar column. - `.sf-sidebar--right` — Sidebar variant with the sidebar on the right (second child becomes the sidebar). - `.sf-sidebar--wide` — Sidebar variant with a wider sidebar column. - `.sf-stack` — Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm. - `.sf-stack--2xl` — Stack variant with 2xl gap between children. - `.sf-stack--center` — Stack variant that centers children on the cross axis. - `.sf-stack--end` — Stack variant that aligns children to the cross-axis end (right in LTR). - `.sf-stack--l` — Stack variant with large (l) gap between children. - `.sf-stack--m` — Stack variant with medium (m) gap between children. - `.sf-stack--s` — Stack variant with small (s) gap between children. - `.sf-stack--stretch` — Stack variant that stretches children to fill the full available width. - `.sf-stack--xl` — Stack variant with xl gap between children. - `.sf-stack--xs` — Stack variant with xs gap between children. - `.sf-subgrid` — 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` — 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` — 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` — Switcher variant that stays horizontal and never wraps (single-line regardless of container width). - `.sf-switcher--vertical` — Switcher variant that starts in the vertical (stacked) direction on all sizes. ### Macro classes (51) - `.sf-aspect` — 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` — Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages. - `.sf-drop-shadow-l` — Large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-l). - `.sf-drop-shadow-m` — Medium filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-m). - `.sf-drop-shadow-s` — Small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-s). - `.sf-drop-shadow-xl` — Extra-large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xl). - `.sf-drop-shadow-xs` — Extra-small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xs). - `.sf-equal-height` — 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` — 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` — Clamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2. - `.sf-line-clamp-3` — Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3. - `.sf-line-clamp-N` — Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines. - `.sf-link--reverse` — Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse. - `.sf-link--subtle` — 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` — 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` — Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state. - `.sf-not-prose` — 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` — 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` — Overflow fade variant: fades both the top and bottom edges simultaneously (block axis). - `.sf-overflow-fade--bottom` — Overflow fade variant: fades the bottom (block-end) edge. - `.sf-overflow-fade--inline` — Overflow fade variant: fades both the left and right edges simultaneously (inline axis). - `.sf-overflow-fade--left` — Overflow fade variant: fades the left (inline-start) edge. - `.sf-overflow-fade--right` — Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour. - `.sf-overflow-fade--top` — Overflow fade variant: fades the top (block-start) edge. - `.sf-overlap` — Overlap recipe — pulls the element upward (negative block-start margin) so it overlaps the previous sibling by --sf-overlap-pull. - `.sf-overlap--down` — Overlap recipe — pulls following content up (negative block-end margin) so this element overlaps the sibling below it. - `.sf-overlap-host` — 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` — Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose. - `.sf-scrim` — Overlay container with a gradient darkening scrim behind text placed on an image or colored background. - `.sf-scrim__content` — Content area inside an sf-scrim. Positioned above the gradient overlay layer. - `.sf-scrim--bottom` — Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade). - `.sf-scrim--full` — Scrim variant that covers the entire surface with a uniform translucent overlay. - `.sf-scrim--top` — Scrim variant with the gradient emanating from the top edge (top-to-bottom fade). - `.sf-scroll-shadow` — Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below. - `.sf-scroll-snap` — Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align. - `.sf-surface` — 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` — Surface variant using the action color palette (button/CTA primary color). - `.sf-surface--danger` — Surface variant using the danger status palette. - `.sf-surface--info` — Surface variant using the info status palette. - `.sf-surface--inverse` — Surface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode. - `.sf-surface--neutral` — Surface variant using the neutral palette (muted/gray). - `.sf-surface--primary` — Surface variant using the primary brand color palette. - `.sf-surface--secondary` — Surface variant using the secondary brand color palette. - `.sf-surface--success` — Surface variant using the success status palette. - `.sf-surface--tertiary` — Surface variant using the tertiary brand color palette. - `.sf-surface--warning` — Surface variant using the warning status palette. - `.sf-surface-bg` — 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` — Forces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows. - `.sf-text-gradient` — 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` — Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image. - `.sf-truncate` — Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis). ### Components (30) - `.sf-btn` — Interactive call-to-action button. Apply to