This page is a hand-authored coverage audit for the SLASHED framework. Every
- .sf-* class documented in docs/classes.md is applied to
- real, visible markup below, organised by source file. It loads only
- dist/slashed.full.css — no custom CSS, no scripts, no third-party
- resources. .sf-box's border is opt-in via its
- --sf-box-border-width custom property (0 by default); it's set to
- 1px once here on <body> — a documented public token,
- inherited like any CSS custom property — purely so every box demo below is
- visible at a glance.
Layout primitives (core/layout.css)
-Breakpoint-free, container-query-driven layout building blocks. Each demo below -exercises one primitive (and its size/variant modifiers) with realistic children.
- -Section rhythm & section-group
-section--guttered adds inline gutters without a container
-Header padding rhythm
-Containers & container-query scopes
-default .sf-container
container--narrow
container--prose
container--wide
container--full
sf-fluid-cq — children interpolate type/space against this box's own inline size rather than the viewport.
Box & centering
-Stack — vertical flow
-xs
gap
s
gap
m
gap (default)
l
gap
xl
gap
2xl
gap
Cluster — wrapping inline group
-Gap — inject gap into an existing container
-Sidebar
- - - - - -Switcher
-Grid — auto-fill responsive
-Grid — fixed columns & ratios
-Grid-flex
-Bento — dense free-form grid
-Alternate — zigzag two-column
-Feature one
Text column reverses order on alternate rows.
Feature two
Second row — image/text order swaps automatically.
Pancake — sticky-footer grid
- -Content-grid — breakout & full-bleed
-Regular content-width paragraph inside .sf-content-grid.
-Cover — full-height centered region
-cover--min + cover__center
cover--max + cover--padding-s
cover--padding-l
Frame — aspect-ratio media box
-Background layer
-
- sf-bg-layer fills behind this text; the parent auto-positions itself.
-Reel — horizontal scroll strip
-Imposter — absolutely-centered overlay
-Host box (positioning context)
- imposter (centered) -Host box (transform creates a containing block so the fixed-positioned imposter stays inside it)
- imposter--fixed -Overlay helper
-Base content
- -Subgrid
-Divider & divide
--
-
-
-
-
-
Right
One
Two (divide adds a border between siblings)
Three
Equal — CSS multi-column flow
-Newspaper-style flowing columns, 2 target columns. Text flows down one column, then continues at the top of the next, unlike grid cells.
Three target columns of flowing text content for a denser magazine layout.
Four target columns for a very dense flowing layout of short list items.
Six target columns, useful for long tag/keyword lists that should flow.
Icon sizing
-Macro classes (core/macros.css)
-Recipes that answer "what does this element do/look like?" — composable on top of layout primitives.
- -Prose & not-prose
-Article heading
-Paragraph one of long-form text with automatic vertical rhythm between children.
-Paragraph two — automatically spaced from the previous one.
-- Bullet one
- Bullet two
More article body after the opted-out region.
-Flow
-One
-Two — gets margin-block-start from the flow rhythm.
-Three — same.
-Truncate & line-clamp
-This very long sentence about the SLASHED framework will be cut off with an ellipsis after exactly one line because the box has a finite inline size.
-Two-line clamp: SLASHED ships breakpoint-free, container-query-driven layout primitives that respond to their own container's width instead of the viewport, which keeps components portable across sidebars, cards, and full-width sections alike.
-Three-line clamp: token-driven design system with a fluid type and space engine computed at runtime from a handful of input scalars, so retuning one number recalibrates the whole scale without a rebuild step or any SCSS preprocessing.
-Five-line clamp via the N variant and the --sf-line-clamp custom property: this paragraph is intentionally long so the clamp is visible — it keeps going and going, describing layout primitives, macros, state classes, motion utilities and components until it is cut off after five lines with an ellipsis, no matter how much more text follows this point in the source.
- -Equal-height flex children
-lines
lines
here
Aspect ratio
-Scroll shadow & scroll snap
-Long scrolling content fades near the top/bottom edges of this box.
-Line two.
Line three.
Line four.
Line five.
Line six.
-Overflow fade
-Top-fade content. Line 2.
Line 3.
Line 4.
Bottom-fade content. Line 2.
Line 3.
Line 4.
Both block edges fade. Line 2.
Line 3.
Line 4.
No tap highlight
-Link with suppressed mobile tap-highlight overlay - -Content-visibility auto
-Tabular numbers
-| Invoice #1024 | $1,204.50 |
| Invoice #999 | $88.00 |
Drop shadows
-
-
-
-
-
-Surfaces
-Text gradient & text protect
-Gradient headline
-
- Legible text over a busy photo
-Link helpers
-- External link · - Subtle link (underline on hover) · - Reverse link (underline at rest) -
- -Scrim over media
-
- scrim--bottom + scrim__content
-
- scrim--top
-
- scrim--full
-Entrance & exit scroll animations
-Stagger
--
-
- First -
- Second -
- Third -
Overlap & overlap-host
-
-
- 
-
- State classes (core/states.css)
-Runtime-condition classes, applied statically here on realistic hosts so each visual treatment is visible.
- -- is-selected list item
Form validation states
-Feedback states
-is-success: saved successfully
-is-error: save failed
-is-warning: quota nearly reached
-is-info: new version available
- -Drag & drop
-Empty state
-Accessibility (core/accessibility.css)
-Focus and clickable-area helpers.
- -sf-focus-parent — this whole box rings when a descendant has keyboard focus.
- -sf-clickable-parent
-The whole card is a single click target via the overlay link below.
- Read more -Motion / entrances (core/motion.css)
-Looping and one-shot animation classes applied to visible elements (final/initial state may render statically depending on browser support).
- -Colour pulse
-Print utilities (core/print.css)
-Print rules key off classes already used elsewhere on the page for other purposes — .sf-link-external also
-gains print-specific treatment (its href is expanded next to the link text when the page is printed).
This external link also exercises the print stylesheet — see the "Link helpers" demo above for the on-screen version of the same class.
-Theme utilities (core/themes.css)
-Forcing light/dark on a region, plus the smooth-transition helper.
- -data-theme on this element (normally applied to <html>; shown here on a scoped region since this page has no toggle script).Forms (optional/forms.css)
-Classless form controls, styled without any .sf-* class needed on the inputs themselves — the one opt-in
-utility here is .sf-live-validate, which enables native :user-invalid/:user-valid border feedback
-after a submit attempt.
Components — Buttons (optional/components.css)
-All colour families, style treatments, gradient axis, sizes, width, and state modifiers for .sf-btn.
Colour families
-Style treatments
-Gradient axis
-Sizes
-Width
- -States
-Components — Cards (optional/components.css)
- -
-
- Default card
-Body content with header, media, avatar and title slots.
-card--bordered: flat, outlined, no shadow.
card--elevated: floating shadow, no border.
card--interactive: lifts on hover/focus.
Card in an is-loading state.
Card in an is-disabled state.
Standalone card__body composed with sf-flow for spacing.
-Second paragraph.
-Utilities (optional/utilities.css)
- -Heading helper classes
-Text-size utilities
-2xs — legal / metadata copy
-xs — fine print
-s — secondary copy
-m — body copy
-l — larger body copy
-xl — lede paragraph
-2xl — subheading
-3xl — heading
-4xl — display heading
-Hover transforms
-
-
-
-
-List reset & marker colours
--
-
- sf-list-none: no bullets, no inline-start padding -
-
-
- marker--primary bullet -
-
-
- marker--secondary bullet -
-
-
- marker--tertiary bullet -
-
-
- marker--action bullet -
Selection colour
-Select this text — sf-selection--alt swaps the ::selection colours for a surface with poor default contrast.
- -Sticky positioning
---sf-sticky-offset normally reads the page's fixed header height (0 here,
-since this page has none) — set to 0 per demo box below so the base case
-sticks flush to each isolated scroll container's own top edge; scroll each box to see
-it hold in place.
Scroll content…
More…
More…
More…
More…
-Scroll content…
More…
More…
More…
More…
-Scroll content…
More…
More…
More…
More…
-Scroll content…
More…
More…
More…
More…
-Theme Customizer
+
+ Override just 6 tokens in the Light mode column for quick branding — dark mode automatically derives an appropriate value via relative color syntax, no extra work needed. Optionally override any token in the Dark mode column for full per-mode control. Changes apply live to :root; toggle dark mode in the header to preview.
+
Light mode
+ +Dark mode
+ +Accessibility report (live, both modes)
++ WCAG 2 contrast for your chosen colours, recomputed live. The framework auto-picks readable on-colours (black/white by lightness) and clamps link lightness — but contrast also depends on chroma, so this panel shows the actual result, including any pairs that fall short. AA = 4.5:1 (normal text); AA Large = 3:1 (large/UI). Fix a ✗ by adjusting that colour's lightness, or override the on-/text token directly. +
+ +Colors
+ +Brand — light mode (base values)
+Semantic Surfaces
+Status Colors
+Status Triplets
+Text Hierarchy
+--sf-color-text (primary)
+--sf-color-text--secondary
+--sf-color-text--muted
+--sf-color-text--placeholder
+--sf-color-text--disabled
+--sf-color-heading
+Borders
+--sf-color-border--sf-color-border--subtle--sf-color-border--strong--sf-color-border--focus (action color)Gradients
+Palette Numeric Scale 50–950 (core/tokens.css)
+Alpha Scale a5–a80
+Semantic & Functional Aliases
+Scoped Themes
+
+ Use data-theme="dark" or data-theme="light" on any element to scope a theme. When attributes are inconvenient, .sf-theme-dark and .sf-theme-light are equivalent class aliases. Tokens resolve correctly per-section, enabling nested light-inside-dark (or vice-versa) without extra overrides.
+
Dark section data-theme="dark"
+
+ --sf-color-text (primary)
+--sf-color-text--secondary
+--sf-color-text--muted
+Light section (nested) data-theme="light"
+
+ --sf-color-text (primary)
+--sf-color-text--secondary
+--sf-color-text--muted
+Opt-in theme cross-fade .sf-theme-transition
+
+ Add class="sf-theme-transition" to <html> (or any subtree) so colours
+ fade instead of switching instantly when the theme flips. Tune the speed with
+ --sf-theme-transition-duration. Toggle dark mode in the header to see this block cross-fade.
+
This card fades its background, text and border colours when the mode changes.
+Section theme aliases .sf-theme-light / .sf-theme-dark
+
+ Class aliases for data-theme: one class scopes the theme, setting the background and flipping the
+ whole foreground (text, links, borders) to match — always light or always dark,
+ regardless of the ambient scheme.
+
Auto-light text, and a themed link.
+Auto-dark text, and a themed link.
+Named background surface .sf-surface-bg
+
+ A reusable, named background bundling a base colour + image/gradient + an optional
+ overlay layered above it. Define the --sf-surface-bg-* tokens on a scope,
+ then apply the class. Here the overlay is a scrim over a gradient "image".
+
Typography
+ +Heading Scale (base.css)
+h1 — The quick brown fox
+h2 — The quick brown fox
+h3 — The quick brown fox
+h4 — The quick brown fox
+h5 — The quick brown fox
+h6 — The quick brown fox
+Fluid Text Scale (--sf-text-*)
+All sizes use clamp() — resize the window to see fluid scaling.
Font Weights — base weights + semantic roles
+Semantic roles (override to reweight the whole site):
+Semantic Weight Aliases & Font Stacks
+Line Heights (--sf-leading-*)
+--sf-leading-tight (1.1)
+ Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+--sf-leading-snug (1.3)
+ Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+--sf-leading-normal (1.5)
+ Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+--sf-leading-relaxed (1.625)
+ Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
+Letter Spacing (--sf-tracking-*)
+tracking-tight — THE QUICK BROWN FOX JUMPS OVERtracking-normal — THE QUICK BROWN FOX JUMPS OVERtracking-wide — THE QUICK BROWN FOXtracking-wider — THE QUICK BROWNtracking-widest — THE QUICKSemantic Elements (base.css)
+
+ strong,
+ em,
+ mark highlight,
+ inline code,
+ Ctrl + C,
+ CSS,
+ H2O,
+ E=mc2,
+ small text,
+ link,
+ deleted,
+ inserted
+
/* pre + code block */
+:root {
+ --sf-color-primary-source-light: oklch(0.47 0.27 264);
+ --sf-color-neutral-source-light: oklch(0.52 0.025 260);
+}
+ A blockquote. Try selecting this text to see --sf-color-selection-bg.
+
+
+ Link States
+ +Spacing
+All fluid tokens use clamp() — resize the window to see bars animate.
0
+ Spacing Aliases
+--sf-gap → --sf-space-m
+ --sf-content-gap → --sf-space-s
+ --sf-component-pad → --sf-space-m
+ --sf-field-block → --sf-space-l
+ --sf-prose-paragraph → --sf-content-gap → --sf-space-s
+ Shadows
+Shadow color is a neutral near-black auto-derived from --sf-color-neutral (--sf-shadow-color) — override it to var(--sf-color-primary) for tinted shadows. In dark mode strength scales up but every layer's alpha is capped at 0.7. Adjust via --sf-shadow-strength.
Text Shadows
+Drop Shadows (filter — follows alpha edges)
+3D Perspective
+Border Radius
+All values multiplied by --sf-radius-scale (1 by default).
0
2px
4px
8px
12px
16px
24px
32px
48px
9999px
Motion & States
+ +accessibility.css).
+ Transitions (motion.css — hover these)
+
+ motion.css applies a default transition to all interactive elements (a, button, input, etc.) using --sf-duration-fast and --sf-ease-out. Hover to see the transition between the base and hover states.
+
Easing Curves
+Animation Presets (motion.css — click to replay)
+.sf-stagger (motion.css — parent choreographs children's animation-delay; click to replay)
+ -
+
- 1 +
- 2 +
- 3 +
- 4 +
@property Color Interpolation (motion.css — sf-color-pulse)
+
+ Demonstrates smooth oklch color animation via @property-registered tokens.
+ The box below pulses its --sf-color-primary-source-light lightness. Only works in browsers supporting @property inherits.
+
Duration Tokens
+Hover any row — the dot slides across using that duration token. Easing is the same (--sf-ease-out) so the only variable is speed.
States (states.css)
+.sf-is-loading
+ +.sf-is-skeleton
+.sf-is-hidden / .sf-is-invisible
+States — Full Coverage
+Every .sf-is-* class from states.css. Grouped by category.
Navigation & Toggling
+Disclosure
+Validation / Feedback
+Drag & Drop
+Overlay
+Interactivity
+.sf-focus-parent (focus the input → parent rings)
+
+ Empty State
+.sf-is-empty:empty → display:none (the empty div above is gone)
+ Layout — Additional Primitives
+ +.sf-imposter
+Absolutely positioned overlay. Modifiers: --fixed, --contain.
.sf-imposter--fixed
+Uses position: fixed — not demoed visually to avoid viewport takeover. Class reference: sf-imposter--fixed.
.sf-subgrid / .sf-subgrid-rows
+Inherit parent grid tracks. Requires parent with explicit grid.
+.sf-subgrid-rows works the same for row tracks.
.sf-section-group
+Groups adjacent .sf-section elements with zero gap between them.
.sf-divider
+Token-driven separator (--sf-divider-width/-style/-color). Horizontal by default; .sf-divider--vertical for inline use.
Content above the divider.
++
Content below the divider.
+Style modifiers — colour via .sf-divider--soft / .sf-divider--strong, line via .sf-divider--dashed / .sf-divider--dotted, and a fading .sf-divider--gradient.
+
+
+
+
+ +
.sf-divide
+Places a rule between direct children in one class — no extra markup per gap. .sf-divide--vertical switches to an inline-start border.
First
+Second
+Third
+.sf-icon
+Em-based inline icon sizing. Scales with surrounding text; size modifiers .sf-icon--xs … .sf-icon--2xl.
.sf-icon--boxed
+Padded, bordered icon frame. Override --sf-icon-box-bg / -border / -radius per instance. Combine with size modifiers; the visible glyph stays at --sf-icon-size and the frame grows around it.
.sf-grid--dense
+Dense auto-flow lets later items backfill earlier gaps. Add .sf-grid--dense to any grid.
.sf-cover modifiers
+.sf-cover--min
+ .sf-cover--max
+ .sf-cover--padding-s / --padding-l
+ .sf-cluster--no-wrap / .sf-switcher--no-wrap / .sf-switcher--vertical
+.sf-cluster--no-wrap
+ .sf-switcher--no-wrap
+ .sf-switcher--vertical
+ .sf-grid-cols-1 / Ratio grids
+
+ .sf-grid-cols-1 is intentionally a single-column grid. Ratio grids (.sf-grid-cols-1-2 etc.) collapse to a single column on narrow widths and switch to two columns at 48em via container queries — the parent must declare container-type: inline-size.
+
.sf-grid-cols-1 (single column by design)
+ .sf-grid-cols-1-2 (1fr 2fr)
+ .sf-grid-cols-2-1 (2fr 1fr)
+ .sf-grid-cols-1-3 (1fr 3fr)
+ .sf-grid-cols-3-1 (3fr 1fr)
+ .sf-cq — container query scope
++ Establishes an inline-size container context so children can use container queries. +
+.sf-fluid-cq — container-relative fluid scale
+
+ Makes the fluid type + space scales interpolate against this box's width
+ (100cqi) instead of the viewport — so text in a narrow column
+ scales with the column, not the page. Resize the box to see it.
+
Fluid text tied to this container's width.
+.sf-equal — fixed N-column grid
+
+ Column count never collapses — unlike .sf-grid-* which uses container queries.
+
.sf-equal--2
+ .sf-equal--3
+ .sf-equal--4
+ .sf-equal--6
+ .sf-scale-down (motion.css)
+.sf-center / .sf-center--intrinsic
+.sf-box
+.sf-grid-cols-6 / .sf-grid--xs … .sf-grid--2xl
+
+ Fixed-column grids (.sf-grid-cols-6) use container queries — wrap in container-type: inline-size. Auto-fill grids (.sf-grid--xs/s/m/l/xl/2xl) use repeat(auto-fill, minmax(min(--sf-grid-min, 100%), 1fr)) — they collapse to fewer columns as the container narrows. On very narrow viewports both will stack to a single column; resize the window to see them respond.
+
.sf-grid-cols-6
+ .sf-grid--xs (min ~10rem)
+ .sf-grid--s (min ~13rem)
+ .sf-grid--m (min ~16rem)
+ .sf-grid--l (min ~20rem)
+ .sf-grid--xl (min ~24rem)
+ .sf-grid--2xl (min ~28rem)
+ .sf-grid-flex — flex alternative for uneven item counts
+
+ Flexbox-based alternative to .sf-grid for item counts that don't divide evenly. By default the last row's leftover items stretch to fill the row; .sf-grid-flex--center keeps them fixed-width and centered instead. Reuses --sf-grid-min/--sf-grid-gap — same --xs … --2xl scale as .sf-grid.
+
.sf-grid-flex (default — last row stretches)
+ .sf-grid-flex--center (leftover fixed-width, centered)
+ .sf-grid-flex--xs / --s / --m / --l / --xl / --2xl (re-point --sf-grid-min)
+ .sf-sidebar--narrow / .sf-sidebar--wide
+.sf-sidebar--narrow (12rem sidebar)
+
+ .sf-sidebar--wide (26rem sidebar)
+
+ .sf-container--full / .sf-container--wide
+.sf-container--wide (90rem)
+ .sf-container--full (100%)
+ .sf-section--xs / .sf-section--l / .sf-section--xl / .sf-section--2xl
+.sf-header--xs / .sf-header--s / .sf-header--m / .sf-header--l / .sf-header--xl
+Block padding on the standard spacing scale — lighter than .sf-section. Inline gutter is left untouched.
.sf-frame--3-2 / .sf-frame--4-3 / .sf-frame--golden
+.sf-frame--3-2
+ .sf-frame--4-3
+ .sf-frame--golden
+ .sf-stack alignment: --center / --end / --stretch
+.sf-stack--s --center
+ .sf-stack--l --end
+ .sf-stack--2xl --stretch
+ override beyond scale: style="--sf-stack-gap: var(--sf-space-3xl)"
+ .sf-gap — gap size modifiers
+
+ Injects gap into any existing flex or grid container without imposing a display type.
+
.sf-gap--xs
+ .sf-gap--s
+ .sf-gap--m
+ .sf-gap--l
+ .sf-gap--xl
+ .sf-gap--2xl
+ .sf-cluster gap modifiers: --xs / --s / --m / --l / --xl / --2xl
++ The size suffix sets the gap between items (not alignment). Compare side by side: +
+override below scale: style="--sf-cluster-gap: var(--sf-space-2xs)"
+ .sf-cluster--xs (smallest of the canonical scale)
+ .sf-cluster--l
+ .sf-cluster--2xl (largest of the canonical scale)
+ .sf-cluster alignment: --center / --end / --between
+
+ These set justify-content. Default is flex-start.
+
default (flex-start)
+ .sf-cluster--center
+ .sf-cluster--end
+ .sf-cluster--between
+ .sf-cover--padding-l
+.sf-fade-out
+
+ The animation ends at opacity: 0 with animation-fill-mode: both, so the target stays hidden after playing. Click the button to (re)apply the animation to the box on its right.
+
Accessibility
+ +Skip Link
+A .skip-link is at the very top of this page. Press Tab from the browser address bar to reveal it — it appears above the header.
Focus Ring (accessibility.css)
+Tab through these elements to verify :focus-visible ring (2px solid, 2px offset, action color). The ring uses !important so it's never overridden.
Details summary
+Details content.
+.sr-only
+Hidden from sighted users but available to screen readers: [THIS TEXT IS SCREEN-READER ONLY — not visible] (check with DevTools or a screen reader)
+ +Disabled States
+Touch Targets (pointer: coarse)
+On touch devices, a, button, input, select, summary automatically get min-height: var(--sf-touch-target) = var(--sf-size-l) = 2.75rem (≈44px). No extra classes needed.
High Contrast & Reduced Transparency
+
+ prefers-contrast: more → thicker focus ring (3px), thicker <hr>.
+ prefers-reduced-transparency: reduce → backdrop becomes solid.
+ These are handled automatically by accessibility.css.
+
Color Scheme Token
+
+ --sf-color-scheme: light dark controls the browser's native UI color adaptation (scrollbars, form controls). Override to only light or only dark to lock the mode at the browser level.
+ Used by both reset.css and base.css.
+
Layout — Stack
+.sf-stack — flex column with uniform gap. Modifier suffix sets gap size.
.sf-stack--xs
+ .sf-stack--m
+ .sf-stack--xl
+ Override gap: style="--sf-stack-gap: 2rem"
Layout — Cluster
+.sf-cluster — flex wrapping group with uniform gap. Ideal for tags, buttons, inline groups.
Alignment modifiers: --center, --end, --between, --no-wrap
Layout — Switcher
+.sf-switcher — switches between row and column layout at a container threshold. No media queries.
Threshold: --sf-switcher-threshold (default from tokens). Below threshold → stacks vertically.
Layout — Grid
+.sf-grid — auto-fill CSS grid. Responsive without any media queries.
Override: --sf-grid-min (min column width), --sf-grid-gap. Modifier: .sf-grid--fit (auto-fit). Fixed columns: .sf-grid-cols-2, .sf-grid-cols-3, .sf-grid-cols-4
Layout — Cover
+.sf-cover — full-height flex column. .sf-cover__center child is vertically centered via margin-block: auto.
Top content
+Bottom content
+Default --sf-cover-min-height: 100dvh — overridden to 16rem here for demo.
Layout — Frame
+.sf-frame — aspect-ratio container. Media children use object-fit: cover.
sf-frame--video (16:9)
+ sf-frame--square (1:1)
+ sf-frame--portrait (3:4)
+ sf-frame--cinema (21:9)
+ Layout — Reel
+.sf-reel — horizontal scroll container with scroll-snap-type: x mandatory. Scroll to snap cards.
Override: --sf-reel-item-width, --sf-reel-gap, --sf-reel-height
Layout — Prose
+.sf-prose — long-form text rhythm. Adds margin-block-start: var(--sf-prose-paragraph) between children. Restores list styles.
Prose Heading
+The .sf-prose class provides automatic vertical rhythm for long-form content. All direct children receive spacing automatically — no extra margin classes needed.
Lists Are Restored
+-
+
- List items get
list-style: discback (reset removes it)
+ - Nested list indentation is preserved +
- Marker color follows
--sf-prose-marker-color(defaults to--sf-color-primary)
+
-
+
- Ordered lists work too +
- Each step is clearly numbered +
+ A blockquote inside prose gets consistent margin-block spacing from the surrounding paragraphs. ++
Use .sf-not-prose on a child to opt out of prose spacing for that element.
Layout — Container & Section
+.sf-container — centered max-width with horizontal gutters. Declares a named inline-size container sf-layout, so consumers can target it precisely with @container sf-layout (...) in their own CSS. .sf-section adds vertical padding.
sf-container--narrow (38rem)
+ sf-container--prose (65ch)
+ sf-container (75rem default)
+ .sf-section modifiers: --xs, --s, --m, --l, --xl, --2xl. Combine: <section class="sf-section--m"><div class="sf-container">
Layout — Bento
+.sf-bento — free-form dense grid. Parent needs container-type: inline-size for responsive column collapse.
(span 2 col, 2 row)
Override: --sf-bento-cols (default 4), --sf-bento-row (row height). Column modifiers: .sf-bento--2, .sf-bento--3, .sf-bento--6. Row modifiers: .sf-bento--row-compact, .sf-bento--row-tall. Child span modifiers: .sf-bento-wide (col span 2), .sf-bento-tall (row span 2), .sf-bento-featured (2×2), .sf-bento-full (full width).
.sf-bento-featured
.sf-bento-wide
.sf-bento-tall
Column modifiers below use .sf-bento--2, .sf-bento--3, .sf-bento--6
Layout — Alternate (zigzag)
+.sf-alternate — alternating two-column rows. Below 48em (own container width) it stacks; above, every other row reverses its children. Declares the named container sf-alternate and binds the flip query to that name — so a nested .sf-alternate reacts to its OWN width, not its outer container's.
Standard order: leading column on the left, text on the right (above 48em).
+Even row — children swap order via order: 2 / 1.
Back to standard order.
+Smoke test — .sf-alternate nested inside .sf-bento
+ Phase 4 contract: the inner .sf-alternate's flip query is bound to the sf-alternate name, so it reacts to the bento cell's intrinsic width — not the outer page container. The cell below is wide enough (a span-2 bento cell) to flip into the two-column layout independently of viewport width.
Wide cell (span 2) — contains a .sf-alternate
Layout — Content Grid
+.sf-content-grid — named column grid. Children default to content column. .sf-breakout spans wider. .sf-full-bleed spans edge-to-edge.
Normal content column — max-width: --sf-content-width
.sf-breakout — spans --sf-breakout-width
+ .sf-full-bleed — edge to edge
+ Back to content column.
+Layout — Pancake
+.sf-pancake — 3-row grid (auto 1fr auto) for sticky-footer layouts. Default min-height: 100dvh.
This demo is capped at 18rem. In production: min-height: 100dvh on <body>.
Reset & Base
+ +Form Elements (reset.css + base.css)
+Table (reset: border-collapse)
+Selection Color
+Try selecting this text to see --sf-color-selection-bg in action. The highlight color adapts in dark mode.
List Reset
+reset.css sets list-style: none on menu, ul, ol. Outside .sf-prose, styles must be applied manually:
-
+
- This list has manually re-applied
list-style: disc
+ - Inside
.sf-prose, styles are restored automatically
+
HR & Separator
++
Above: standard <hr> with border token. High-contrast mode thickens it automatically.
Box Model (reset.css)
+All elements: box-sizing: border-box. Media (img, video, svg): display: block; max-width: 100%. Margins/padding removed globally. scrollbar-gutter: stable prevents layout shift.
+ SLASHED's print stylesheet preserves authored colour by default — open print preview (Cmd/Ctrl + P) to compare. Two opt-in classes adjust the contract: .print-color-exact forces colours when the browser would flatten them, .print-no-color opts back into ink-on-paper.
+
Default — authored colour survives
+
+ Highlighted text in <mark> stays yellow in print.
+ Success-coloured text stays green.
+ Danger-coloured text stays red.
+ External links carry their href in parentheses: visit the SLASHED repo.
+
.no-print — vanishes from print
++ The badge below disappears from printed output: + SCREEN-ONLY +
+ +.print-color-exact — force colour preservation
+print-color-adjust: exact guarantees the tinted background reaches paper.
+ .print-no-color — opt back into ink-on-paper
+Manual verification checklist
+Open print preview and confirm each of the following.
+-
+
<mark>retains its yellow background (the test for F-04).
+ - Success, danger and warning text retain their colour. +
- The SCREEN-ONLY badge is absent. +
- The
.print-color-exactcallout retains its tinted background.
+ - The
.print-no-colorcallout has lost its background.
+ - The repo link shows its
hrefin parentheses.
+ - The
Open print previewbutton below is absent (it carries.no-print).
+
+ +
+Macros
+
+ Recipes / patterns from core/macros.css.
+ Macros answer "what does this element do?" — distinct
+ from layout primitives, which answer "where do my children go?".
+
.sf-content-auto — skip offscreen rendering
+
+ Sets content-visibility: auto so the browser skips layout and paint for this
+ section while it is offscreen on a long page. contain-intrinsic-size (token
+ --sf-content-intrinsic-size) reserves a placeholder box so the scrollbar
+ doesn't jump. Unsupported engines render it normally.
+
This block is render-deferred until it nears the viewport. On long product or article + pages, applying it to repeated sections measurably cuts initial render cost.
+.sf-tabular-nums — column-aligned figures
+
+ Fixed-width digits (font-variant-numeric: var(--sf-font-numeric)) so numbers
+ line up in columns — prices, totals, invoices.
+
.sf-flow — equal vertical rhythm
+ First child has no top margin (only siblings get the rhythm).
+Second child gets margin-block-start: var(--sf-flow-space).
So does every subsequent child. Override with the token.
+.sf-truncate — single-line ellipsis
+ .sf-line-clamp-2 / -3 / -N
+ + 2 lines: Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation. +
++ 3 lines: Lorem ipsum dolor sit amet, consectetur adipiscing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation. +
++ 4 lines (via --sf-line-clamp): Lorem ipsum dolor sit amet, + consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. +
+.sf-aspect — generic ratio container
+ .sf-equal-height — children stretch to tallest
+ lines.
lines
here.
.sf-scroll-shadow — top + bottom mask gradient
+ Scroll inside this box.
+The mask gradient fades the top and bottom of the content.
+It's pure CSS — no scroll listener.
+Override --sf-scroll-shadow-size to tune the fade depth.
Pairs nicely with overflow-y: auto on tables, lists, code blocks.
Also useful inside cards with overflowing comment threads.
+Keep scrolling — the bottom edge fades the same way.
+Final paragraph for proof.
+.sf-scroll-snap — vertical scroll-snap container
+ .sf-overflow-fade — end-edge mask
+ .sf-overflow-fade--* — directional variants
+ line two
line three
line four
line five
line two
line three
line four
line five
line two
line three
line four
line five
.sf-no-tap-highlight — suppress mobile tap overlay
+
+
+ .sf-clickable-parent — full-card click target
+
+ Automatic mode — one link, no extra attributes. Click anywhere on the card to navigate;
+ the button remains independently clickable. Tab to the card to see the built-in card-level focus ring
+ (no separate sf-focus-parent recipe needed).
+
Click anywhere on this card to navigate
+The entire card surface is the click target — heading, body text, list, and padding.
+-
+
- Click here too — the whole card is the link +
+ Explicit mode — multiple links. Add data-overlay-link to the primary link;
+ all other links and buttons are lifted above the overlay automatically — no manual z-index work required.
+
Primary link — click card surface to navigate here
+Click on paragraph text or card padding → primary link. Secondary links and the button stay independent.
+
+ Class mode (.sf-clickable-parent__overlay) — alternative to data-overlay-link; resolves nesting fragility when secondary links live at different depths.
+
Primary link via class overlay
+Click anywhere on the card to follow the primary link.
+.sf-surface--* — auto-flipped foreground
+ .sf-text-gradient — gradient-clipped text
+ Headline gradient
+ +.sf-link-external — external-link indicator
+
+ See the external project
+ for more — the marker is configurable via --sf-link-external-marker.
+
.sf-link--subtle / .sf-link--reverse — underline affordance
+ The variant classes toggle only the underline line; its geometry comes from base a:link via --sf-link-underline-offset / --sf-link-underline-thickness.
+ A subtle link hides its underline until hover/focus, while a + reverse link is underlined at rest and clears on hover. +
+ +.sf-scrim — text-over-image legibility
+ Gradient overlay between an image and its text. Direction modifiers .sf-scrim--top / .sf-scrim--bottom, or an even wash with .sf-scrim--full. Retune via --sf-scrim-color / --sf-scrim-direction / --sf-scrim-gradient.
+ 
+ .sf-bg-layer — background-layer primitive
+ Absolutely-positioned cover layer that sits behind a parent's content. The parent auto-promotes to a positioned stacking context via :has(). Compose under .sf-scrim for background → gradient → content layering.
.sf-overlap / .sf-overlap-host — intentional overlap recipe
+ One element pulled up over the next, which reserves clearance for it automatically.
+.sf-overlap-host — content clears the badge above
+ Directional variants: .sf-overlap--down (pulls into the next element), .sf-overlap--start / .sf-overlap--end (pulls into the inline edge).
Macros in action — a composed profile card
+A realistic card built from the overlap recipe: a banner with an avatar overlapping into the body below (.sf-overlap / .sf-overlap-host).
Design Systems Lead
+.sf-focus-shadow — box-shadow focus ring (opt-in)
+ Tab to this link: the focus indicator follows the rounded corner via box-shadow: var(--sf-focus-ring-shadow) instead of the default outline.
+ Focusable pill +
+ +.sf-section--collapse — adjacent sections share padding
+
+
+ .sf-section--guttered — section carries the gutter
+ Adds padding-inline: var(--sf-gutter) to the section itself while zeroing it on any nested .sf-container, preventing double-guttering.
.sf-entrance--* — scroll-driven entrance
+ Animations require animation-timeline: view() support (Chrome 115+, Firefox flag-gated). Refresh and scroll to see effects in supported engines.
.sf-exit--* — scroll-driven exit
+ Symmetric counterpart of .sf-entrance--*: fires as the element scrolls out of view. Requires animation-timeline: view() support — engines without it render these statically (no unconditional fade-to-hidden fallback).
Full API coverage
++ Every public class () rendered live for + manual inspection, and every design token () + with its value resolved from the loaded bundle. Empty token values or broken + previews flag a renamed or dropped API member. +
+ +Components 30
+.sf-btn publicInteractive call-to-action button. Apply to <button> or <a>. Intrinsic width by default; owns its own styling (excluded from the classless <button> look). Three orthogonal axes — colour family, style treatment (fill/--soft/--outline), gradient — plus a size modifier.
.sf-btn--action publicButton in the action colour family (same as the unmodified default, named explicitly).
.sf-btn--base publicButton in the base (surface-neutral) colour family.
.sf-btn--block publicFull-width button (100% inline size) everywhere.
.sf-btn--block-cq publicFull-width button only inside a query container narrower than 20rem; intrinsic otherwise.
.sf-btn--danger publicButton in the danger (destructive) colour family.
.sf-btn--gradient publicGradient 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 publicButton in the info colour family.
.sf-btn--l publicLarge button size.
.sf-btn--neutral publicButton in the neutral colour family.
.sf-btn--outline publicOutlined button (coloured border/text, transparent fill) that fills with the family colour on hover. Composes with any colour family.
.sf-btn--primary publicButton in the primary brand colour family.
.sf-btn--s publicSmall button size.
.sf-btn--secondary publicButton in the secondary brand colour family.
.sf-btn--soft publicSoft 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 publicButton in the success (positive) colour family.
.sf-btn--tertiary publicButton in the tertiary brand colour family.
.sf-btn--warning publicButton in the warning (caution) colour family.
.sf-btn--xl publicExtra-large button size.
.sf-btn--xs publicExtra-small button size.
.sf-card publicPadded content container with optional __header/__body/__footer and __media/__avatar/__title subcomponents. Uses concentric radius math so inner corners stay proportional.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card__avatar publicCircular avatar image inside a card, sized via --sf-card-avatar-size.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card__body publicCard body slot.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card__footer publicCard footer slot with a top divider.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card__header publicCard header slot with a bottom divider.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card__media publicFull-width cover image/video for a card, cropped to --sf-card-media-ratio (16/9 by default).
Card title
A composite card: media, header with avatar, body and footer.
.sf-card__title publicCard title heading, sized via --sf-card-heading-size.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card--bordered publicFlat, outlined card: keeps the border, drops the shadow.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card--elevated publicFloating card: hides the border, applies a larger shadow.
Card title
A composite card: media, header with avatar, body and footer.
.sf-card--interactive publicAdds 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.
Card title
A composite card: media, header with avatar, body and footer.
Layout primitives 145
+.sf-alternate publicZigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.
.sf-bento publicAuto-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 publicBento grid variant with a 2-column base layout.
.sf-bento--3 publicBento grid variant with a 3-column base layout.
.sf-bento--6 publicBento grid variant with a 6-column base layout.
.sf-bento--row-compact publicBento grid variant with shorter default row height.
.sf-bento--row-tall publicBento grid variant with taller default row height.
.sf-bento-featured publicSpan modifier for a bento item: takes up 2×2 cells (featured hero placement).
.sf-bento-full publicSpan modifier for a bento item: stretches across all columns (full-width banner).
.sf-bento-tall publicSpan modifier for a bento item: doubles the row height (tall card).
.sf-bento-wide publicSpan modifier for a bento item: spans 2 columns (wide card).
.sf-bg-layer publicBackground layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg-layer composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare <img class="sf-bg-layer"> or as a wrapper with a nested > img / > video / > picture.
content over bg-layer
.sf-box publicMinimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.
.sf-breakout publicBreaks 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.
Prose column.
More prose.
.sf-center publicCenters children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content.
.sf-center--intrinsic publicModifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space).
.sf-cluster publicFlex-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 publicCluster variant with 2xl gap between items.
.sf-cluster--between publicCluster variant that distributes items with space-between alignment.
.sf-cluster--center publicCluster variant that centers the item row horizontally.
.sf-cluster--end publicCluster variant that aligns items to the inline end (right in LTR).
.sf-cluster--l publicCluster variant with large (l) gap between items.
.sf-cluster--m publicCluster variant with medium (m) gap between items.
.sf-cluster--no-wrap publicCluster variant that prevents item wrapping (single-line row).
.sf-cluster--s publicCluster variant with small (s) gap between items.
.sf-cluster--xl publicCluster variant with xl gap between items.
.sf-cluster--xs publicCluster variant with xs gap between items.
.sf-container publicMax-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 publicContainer variant that spans the full viewport width (no max-width cap).
.sf-container--narrow publicContainer variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms.
.sf-container--prose publicContainer variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content.
.sf-container--wide publicContainer variant with a wider max-width (--sf-container-l). Use for dashboards and wide media.
.sf-content-grid publicHoly-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column.
Prose column.
More prose.
.sf-cover publicVertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections.
top
bottom
.sf-cover__center publicThe centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport.
.sf-cover--max publicCover variant that uses a max-height instead of min-height for the viewport constraint.
top
bottom
.sf-cover--min publicCover variant that reduces the minimum height to half a viewport.
top
bottom
.sf-cover--padding-l publicCover variant with large vertical padding above and below the centered content.
top
bottom
.sf-cover--padding-s publicCover variant with small vertical padding above and below the centered content.
top
bottom
.sf-cq publicAssigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens.
.sf-divide publicRules between direct children (a border on each child after the first), reusing .sf-divider's tokens — no per-gap markup needed.
- First
- Second
- Third
.sf-divide--vertical publicVertical rules between direct children (inline-start borders), for row/horizontal layouts.
- First
- Second
- Third
.sf-divider publicHorizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation.
Above
Below
.sf-divider--dashed publicDivider variant with a dashed stroke.
Above
Below
.sf-divider--dotted publicDivider variant with a dotted stroke.
Above
Below
.sf-divider--gradient publicDivider variant rendered as a gradient that fades to transparent at both ends.
Above
Below
.sf-divider--soft publicDivider variant with reduced opacity (subtle separator).
Above
Below
.sf-divider--strong publicDivider variant with stronger/darker color for a more prominent separator.
Above
Below
.sf-divider--vertical publicDivider variant rendered as a vertical line. Use inside flex or grid containers.
Above
Below
.sf-equal publicFlowing 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 publicEqual-columns variant locked to column-count: 2.
.sf-equal--3 publicEqual-columns variant locked to column-count: 3.
.sf-equal--4 publicEqual-columns variant locked to column-count: 4.
.sf-equal--6 publicEqual-columns variant locked to column-count: 6.
.sf-fluid-cq public.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 publicAspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9.
.sf-frame--3-2 publicFrame variant locked to a 3:2 aspect ratio.
.sf-frame--4-3 publicFrame variant locked to a 4:3 aspect ratio.
.sf-frame--cinema publicFrame variant locked to a cinematic 21:9 aspect ratio.
.sf-frame--golden publicFrame variant locked to the golden ratio (1.618:1).
.sf-frame--portrait publicFrame variant locked to a portrait 2:3 aspect ratio.
.sf-frame--square publicFrame variant locked to a square 1:1 aspect ratio.
.sf-frame--video publicFrame variant locked to the standard 16:9 video aspect ratio.
.sf-full-bleed publicForces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds.
Prose column.
More prose.
.sf-gap publicInjects 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 publicGap injection variant with 2xl gap value.
.sf-gap--l publicGap injection variant with large (l) gap value.
.sf-gap--m publicGap injection variant with medium (m) gap value.
.sf-gap--s publicGap injection variant with small (s) gap value.
.sf-gap--xl publicGap injection variant with xl gap value.
.sf-gap--xs publicGap injection variant with xs gap value.
.sf-grid publicAuto-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 publicGrid variant with a 2xl minimum column width.
.sf-grid--dense publicGrid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers.
.sf-grid--fit publicGrid variant that switches from auto-fill to auto-fit, collapsing empty columns.
.sf-grid--l publicGrid variant with a large (l) minimum column width.
.sf-grid--m publicGrid variant with a medium (m) minimum column width.
.sf-grid--s publicGrid variant with a small (s) minimum column width.
.sf-grid--xl publicGrid variant with an xl minimum column width.
.sf-grid--xs publicGrid variant with an xs minimum column width.
.sf-grid-cols-1 publicSingle-column layout (forces all children to one column).
.sf-grid-cols-1-2 publicTwo-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive.
.sf-grid-cols-1-3 publicTwo-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive.
.sf-grid-cols-2 publicResponsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers.
.sf-grid-cols-2-1 publicTwo-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive.
.sf-grid-cols-3 publicResponsive 3-column fixed grid. Collapses progressively on narrow containers.
.sf-grid-cols-3-1 publicTwo-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive.
.sf-grid-cols-4 publicResponsive 4-column fixed grid. Collapses progressively on narrow containers.
.sf-grid-cols-6 publicResponsive 6-column fixed grid. Collapses progressively on narrow containers.
.sf-grid-flex publicFlexbox 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 publicGrid-flex variant with a 2xl minimum item width.
.sf-grid-flex--center publicGrid-flex variant that keeps last-row leftover items fixed-width and centered instead of stretching.
.sf-grid-flex--l publicGrid-flex variant with a large (l) minimum item width.
.sf-grid-flex--m publicGrid-flex variant with a medium (m) minimum item width.
.sf-grid-flex--s publicGrid-flex variant with a small (s) minimum item width.
.sf-grid-flex--xl publicGrid-flex variant with an xl minimum item width.
.sf-grid-flex--xs publicGrid-flex variant with an xs minimum item width.
.sf-header--l publicHeader block padding at the l step (--sf-space-l).
.sf-header--m publicHeader block padding at the m step (--sf-space-m).
.sf-header--s publicHeader block padding at the s step (--sf-space-s).
.sf-header--xl publicHeader block padding at the xl step (--sf-space-xl).
.sf-header--xs publicHeader block padding at the xs step (--sf-space-xs).
.sf-icon publicInline 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.sf-icon--2xl publicIcon variant sized to --sf-icon-2xl (extra-extra-large).
.sf-icon--2xl.sf-icon--boxed publicIcon variant with a square bordered box background. Useful for standalone icon buttons and feature icons.
.sf-icon--boxed.sf-icon--l publicIcon variant sized to --sf-icon-l (large).
.sf-icon--l.sf-icon--m publicIcon variant sized to --sf-icon-m (medium, same as base sf-icon).
.sf-icon--m.sf-icon--s publicIcon variant sized to --sf-icon-s (small).
.sf-icon--s.sf-icon--xl publicIcon variant sized to --sf-icon-xl (extra-large).
.sf-icon--xl.sf-icon--xs publicIcon variant sized to --sf-icon-xs (extra-small).
.sf-icon--xs.sf-imposter publicAbsolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels.
.sf-imposter--contain publicImposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent.
.sf-imposter--fixed publicImposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals.
.sf-overlay publicOverlay layout helper — absolutely fills its positioned parent (`position: absolute; inset: 0`) for overlays, backdrops, and media scrims.
.sf-pancake publicThree-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-reel publicHorizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect.
.sf-section publicFull-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands.
.sf-section--2xl publicSection variant with 2xl vertical padding.
.sf-section--collapse publicSection variant that removes vertical padding (zero-padding section for adjacent same-color blocks).
.sf-section--guttered publicAdds 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 publicSection variant with large (l) vertical padding.
.sf-section--m publicSection variant with medium (m) vertical padding.
.sf-section--s publicSection variant with small (s) vertical padding.
.sf-section--xl publicSection variant with xl vertical padding.
.sf-section--xs publicSection variant with xs vertical padding.
.sf-section-group publicGroups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges.
.sf-sidebar publicTwo-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 publicSidebar variant with a narrower sidebar column.
.sf-sidebar--right publicSidebar variant with the sidebar on the right (second child becomes the sidebar).
.sf-sidebar--wide publicSidebar variant with a wider sidebar column.
.sf-stack publicFlex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm.
.sf-stack--2xl publicStack variant with 2xl gap between children.
.sf-stack--center publicStack variant that centers children on the cross axis.
.sf-stack--end publicStack variant that aligns children to the cross-axis end (right in LTR).
.sf-stack--l publicStack variant with large (l) gap between children.
.sf-stack--m publicStack variant with medium (m) gap between children.
.sf-stack--s publicStack variant with small (s) gap between children.
.sf-stack--stretch publicStack variant that stretches children to fill the full available width.
.sf-stack--xl publicStack variant with xl gap between children.
.sf-stack--xs publicStack variant with xs gap between children.
.sf-subgrid publicPasses 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 publicPasses 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 publicFlex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold.
.sf-switcher--no-wrap publicSwitcher variant that stays horizontal and never wraps (single-line regardless of container width).
.sf-switcher--vertical publicSwitcher variant that starts in the vertical (stacked) direction on all sizes.
Macros & effects 53
+.sf-aspect publicSets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.
.sf-content-auto publicSets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages.
.sf-drop-shadow-l publicLarge filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-l).
.sf-drop-shadow-m publicMedium filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-m).
.sf-drop-shadow-s publicSmall filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-s).
.sf-drop-shadow-xl publicExtra-large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xl).
.sf-drop-shadow-xs publicExtra-small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xs).
.sf-equal-height publicForces 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.
content
here
.sf-flow publicApplies --sf-flow-space as margin-block-start to all direct children except the first. Establishes consistent vertical rhythm in prose-like containers.
First paragraph.
Second paragraph, spaced by flow.
Third paragraph.
.sf-line-clamp-2 publicClamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2.
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-line-clamp-3 publicClamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3.
.sf-line-clamp-N publicClamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines.
.sf-link--reverse publicLink color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse.
.sf-link--subtle publicLink 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 publicAutomatically appends an external-link icon (via ::after content) to indicate the link opens in a new tab or goes to an external domain.
An external link.
.sf-no-tap-highlight publicRemoves the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state.
.sf-not-prose publicOpt-out of sf-prose typography styles within a prose block. Apply to an element that should keep default browser or component styles.
Prose here.
Reset zone — no prose spacing.
.sf-overflow-fade publicAdds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container.
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-overflow-fade--block publicOverflow fade variant: fades both the top and bottom edges simultaneously (block axis).
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-overflow-fade--bottom publicOverflow fade variant: fades the bottom (block-end) edge.
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-overflow-fade--inline publicOverflow fade variant: fades both the left and right edges simultaneously (inline axis).
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-overflow-fade--left publicOverflow fade variant: fades the left (inline-start) edge.
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-overflow-fade--right publicOverflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour.
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-overflow-fade--top publicOverflow fade variant: fades the top (block-start) edge.
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-overlap publicOverlap recipe — pulls the element upward (negative block-start margin) so it overlaps the previous sibling by --sf-overlap-pull.
.sf-overlap--down publicOverlap recipe — pulls following content up (negative block-end margin) so this element overlaps the sibling below it.
.sf-overlap--end publicOverlap recipe — pulls the element toward the inline-end (negative inline-end margin) to overlap horizontally.
.sf-overlap--start publicOverlap recipe — pulls the element toward the inline-start (negative inline-start margin) to overlap horizontally.
.sf-overlap-host publicCard-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 publicOpinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose.
.sf-scrim publicOverlay container with a gradient darkening scrim behind text placed on an image or colored background.
Caption over scrim
.sf-scrim__content publicContent area inside an sf-scrim. Positioned above the gradient overlay layer.
sf-scrim__content
.sf-scrim--bottom publicScrim variant with the gradient emanating from the bottom edge (bottom-to-top fade).
Caption over scrim
.sf-scrim--full publicScrim variant that covers the entire surface with a uniform translucent overlay.
Caption over scrim
.sf-scrim--top publicScrim variant with the gradient emanating from the top edge (top-to-bottom fade).
Caption over scrim
.sf-scroll-shadow publicAdds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below.
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below. The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
.sf-scroll-snap publicEnables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align.
.sf-surface publicGeneric semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes.
Auto-contrasting text on a themed surface.
.sf-surface--action publicSurface variant using the action color palette (button/CTA primary color).
Auto-contrasting text on a themed surface.
.sf-surface--danger publicSurface variant using the danger status palette.
Auto-contrasting text on a themed surface.
.sf-surface--info publicSurface variant using the info status palette.
Auto-contrasting text on a themed surface.
.sf-surface--inverse publicSurface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode.
Auto-contrasting text on a themed surface.
.sf-surface--neutral publicSurface variant using the neutral palette (muted/gray).
Auto-contrasting text on a themed surface.
.sf-surface--primary publicSurface variant using the primary brand color palette.
Auto-contrasting text on a themed surface.
.sf-surface--secondary publicSurface variant using the secondary brand color palette.
Auto-contrasting text on a themed surface.
.sf-surface--success publicSurface variant using the success status palette.
Auto-contrasting text on a themed surface.
.sf-surface--tertiary publicSurface variant using the tertiary brand color palette.
Auto-contrasting text on a themed surface.
.sf-surface--warning publicSurface variant using the warning status palette.
Auto-contrasting text on a themed surface.
.sf-surface-bg publicNamed 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 publicForces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows.
1,234.56
9,870.10
0,001.99
.sf-text-gradient publicApplies a brand gradient to inline text. Sets the background to the gradient, clips it to the text, and makes the text color transparent.
Gradient text
.sf-text-protect publicWraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image.
Protected text
.sf-truncate publicSingle-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis).
The quick brown fox jumps over the lazy dog while a calm river flows past the old stone bridge and the evening light settles over the quiet valley below.
Motion & animation 22
+.sf-color-pulse publicApplies 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 publicScroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline.
.sf-entrance--fade-down publicScroll-driven entrance: element fades in while moving downward into position.
.sf-entrance--fade-left publicScroll-driven entrance: element fades in while moving from the right toward the left.
.sf-entrance--fade-right publicScroll-driven entrance: element fades in while moving from the left toward the right.
.sf-entrance--fade-up publicScroll-driven entrance: element fades in while moving upward into position.
.sf-entrance--scale-up publicScroll-driven entrance: element fades in while scaling up from a slightly smaller size.
.sf-exit--fade publicScroll-out exit animation: fades the element out in place (sf-fade-out).
.sf-exit--fade-down publicScroll-out exit animation: fades out while sliding downward (sf-slide-out-down).
.sf-exit--fade-left publicScroll-out exit animation: fades out while sliding to the left (sf-slide-out-left).
.sf-exit--fade-right publicScroll-out exit animation: fades out while sliding to the right (sf-slide-out-right).
.sf-exit--fade-up publicScroll-out exit animation: fades out while sliding upward (sf-slide-out-up).
.sf-exit--scale-down publicScroll-out exit animation: fades out while shrinking (sf-scale-down).
.sf-fade-in publicOne-shot fade-in animation (opacity 0 → 1). Scoped to no-preference so it stops automatically for reduced-motion users.
.sf-fade-out publicOne-shot fade-out animation (opacity 1 → 0). Scoped to no-preference.
.sf-scale-down publicOne-shot scale-down animation (element shrinks from full size). Scoped to no-preference.
.sf-scale-up publicOne-shot scale-up animation (element grows from smaller size). Scoped to no-preference.
.sf-slide-in-down publicOne-shot slide-in-from-above animation. Scoped to no-preference.
.sf-slide-in-left publicOne-shot slide-in-from-right animation (slides to the left). Scoped to no-preference.
.sf-slide-in-right publicOne-shot slide-in-from-left animation (slides to the right). Scoped to no-preference.
.sf-slide-in-up publicOne-shot slide-in-from-below animation. Scoped to no-preference.
.sf-stagger publicStagger — 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…
State classes (.sf-is-*) 28
+.sf-is-active publicActive state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.
.sf-is-busy publicBusy state — shows a progress cursor to indicate background processing. Does not mask content; use sf-is-loading when content should be hidden during loading.
.sf-is-collapsed publicCollapsed state for disclosure widgets — hides the expandable region. Pair with sf-is-expanded or sf-is-open. Components add transitions.
.sf-is-current publicCurrent/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.
.sf-is-danger publicDanger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.
.sf-is-disabled publicDisabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.
.sf-is-draggable publicDraggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins.
.sf-is-dragging publicActive drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event.
.sf-is-drop-target publicDrop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events.
.sf-is-empty publicEmpty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty.
.sf-is-empty (hidden by :empty).sf-is-error publicError state — alias for sf-is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to sf-is-invalid.
.sf-is-expanded publicExpanded state for disclosure widgets — shows the expandable region. Inverse of sf-is-collapsed. Components add transitions.
.sf-is-hidden publicHidden state — removes the element from layout and accessibility tree (display: none !important).
.sf-is-hidden.sf-is-highlighted publicHighlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.
.sf-is-info publicInfo status state — applies info color tokens. Use for neutral informational messages and hints.
.sf-is-invalid publicInvalid 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-invisible publicInvisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).
.sf-is-invisible.sf-is-loading publicLoading 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-open publicOpen/shown state for modals, dropdowns, and drawers — counterpart to sf-is-collapsed/sf-is-hidden. Sets --sf-is-open to 1 for calc() branching.
.sf-is-pending publicPending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from sf-is-loading (which hides content entirely).
.sf-is-pressed publicPressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.
.sf-is-readonly publicReadonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.
.sf-is-selected publicSelected 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-skeleton publicSkeleton loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements.
.sf-is-success publicSuccess status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.
.sf-is-valid publicValid 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-visible publicVisible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.
.sf-is-visible.sf-is-warning publicWarning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.
Utilities 31
+.sf-h1 publicApplies h1-level typography (size, line-height, weight, tracking, max-width) to any element without changing its semantic level.
Heading helper SF-H1
.sf-h2 publicApplies h2-level typography to any element without changing its semantic level.
.sf-h3 publicApplies h3-level typography to any element without changing its semantic level.
.sf-h4 publicApplies h4-level typography to any element without changing its semantic level.
.sf-h5 publicApplies h5-level typography to any element without changing its semantic level.
.sf-h6 publicApplies h6-level typography to any element without changing its semantic level.
.sf-hover-float publicHover-triggered transform: translates the element up slightly on hover.
.sf-hover-grow publicHover-triggered transform: scales the element up slightly on hover.
.sf-hover-shrink publicHover-triggered transform: scales the element down slightly on hover.
.sf-hover-sink publicHover-triggered transform: translates the element down slightly on hover.
.sf-hover-slide-end publicHover-triggered transform: translates the element toward the inline-end on hover.
.sf-hover-slide-start publicHover-triggered transform: translates the element toward the inline-start on hover.
.sf-list-none publicDrops marker + inline start-padding in one class, on any <ul>/<ol> (or element with list-style applied).
- No bullet one
- No bullet two
.sf-marker--action publicColours list ::markers with the action colour.
.sf-marker--primary publicColours list ::markers with the primary brand colour.
.sf-marker--secondary publicColours list ::markers with the secondary brand colour.
.sf-marker--tertiary publicColours list ::markers with the tertiary brand colour.
.sf-selection--alt publicOverrides 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 publicposition: sticky pinned at the header-aware --sf-sticky-offset.
.sf-sticky--l publicSticky positioning with an extra large gap (--sf-space-l) above the header-aware offset.
.sf-sticky--m publicSticky positioning with an extra medium gap (--sf-space-m) above the header-aware offset.
.sf-sticky--s publicSticky positioning with an extra small gap (--sf-space-s) above the header-aware offset.
.sf-text-2xl publicApplies the 2xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
.sf-text-2xs publicApplies the 2xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
.sf-text-3xl publicApplies the 3xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
.sf-text-4xl publicApplies the 4xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
.sf-text-l publicApplies the l text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
Text size l — The quick brown fox jumps over the lazy dog whil…
.sf-text-m publicApplies 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 publicApplies the s text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
.sf-text-xl publicApplies the xl text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
.sf-text-xs publicApplies the xs text-size role: font-size, line-height, font-weight, letter-spacing, and measure (max-inline-size) in one class.
Theme 3
+.sf-theme-dark publicForces dark colour scheme on the element and its subtree (class alias of [data-theme="dark"]).
Forced palette zone.
.sf-theme-light publicForces light colour scheme on the element and its subtree (class alias of [data-theme="light"]).
.sf-theme-transition publicOpt-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.
Accessibility 8
+.no-motion publicSuppresses 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 publicMakes the entire card or list-item clickable via an absolutely-positioned child overlay link. Apply to the container; place sf-clickable-parent__overlay on the <a>.
.sf-clickable-parent__overlay publicThe 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 publicForwards focus-visible styling to this container when any descendant is keyboard-focused. Useful for custom controls that wrap a visually-hidden <input>.
.sf-focus-shadow publicApplies 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.
.skip-link publicAccessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in <body>.
.sr-only publicVisually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs.
Visible label (this text is screen-reader only) — inspect the DOM to confirm it exists but is visually hidden.
.sr-only-focusable publicExtends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets.
Print 4
+.no-print publicHides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.
.no-printHidden when printing. Use your browser's print preview to verify.
.print-color-exact publicForces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.
.print-color-exactForces exact colour printing. Use your browser's print preview to verify.
.print-no-color publicStrips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.
.print-no-colorStrips colour when printing. Use your browser's print preview to verify.
.print-only publicHides 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.
.print-onlyShown only when printing (hidden on screen). Use your browser's print preview to verify.
Forms 1
+.sf-live-validate publicScopes 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.
Design tokens 754
+Values resolve from the loaded bundle. Component-scoped tokens
+ (--sf-btn-*, --sf-card-*, --sf-field-*) resolve against a
+ hidden probe of that component; a — means the token has no value outside its
+ own context (e.g. ::selection tokens).
--sf-alternate-gap--sf-alternate-inner-gap--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-aspect--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-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-box-border-color--sf-box-border-width--sf-box-padding--sf-breakout-width--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-caret-color--sf-center-gutter--sf-center-max--sf-cluster-align--sf-cluster-gap--sf-cluster-justify--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--secondary--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-content-intrinsic-size--sf-content-width--sf-contrast-bias--sf-contrast-threshold--sf-cover-min-height--sf-cover-padding--sf-current-font-weight--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-equal-gap--sf-equal-min-col--sf-equal-rule-color--sf-equal-rule-style--sf-equal-rule-width--sf-field-block--sf-field-padding-block--sf-field-padding-inline--sf-field-radius--sf-field-required-marker--sf-flow-space--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-frame-ratio--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-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-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-box-bg--sf-icon-box-border--sf-icon-box-pad--sf-icon-box-radius--sf-icon-l--sf-icon-m--sf-icon-s--sf-icon-xl--sf-icon-xs--sf-imposter-margin--sf-is-active--sf-is-current--sf-is-dark--sf-is-open--sf-is-pressed--sf-leading-normal--sf-leading-relaxed--sf-leading-snug--sf-leading-taper--sf-leading-tight--sf-line-clamp--sf-link-external-label--sf-link-external-marker--sf-link-underline-offset--sf-link-underline-thickness--sf-lumlocker--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-overlap-pull--sf-palette-mix-100--sf-palette-mix-200--sf-palette-mix-300--sf-palette-mix-400--sf-palette-mix-50--sf-palette-mix-600--sf-palette-mix-700--sf-palette-mix-800--sf-palette-mix-900--sf-palette-mix-950--sf-print-base-size--sf-print-page-margin--sf-print-page-size--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-paragraph--sf-prose-table-pad--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-reel-gap--sf-reel-height--sf-reel-item-width--sf-safe-bottom--sf-safe-left--sf-safe-right--sf-safe-top--sf-scrim-color--sf-scrim-direction--sf-scrim-gradient--sf-scrim-text-shadow--sf-scroll-shadow-size--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-sidebar-gap--sf-sidebar-min-width--sf-sidebar-width--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-stack-gap--sf-stagger-step--sf-state-pending-opacity--sf-sticky-offset--sf-sticky-offset-desktop--sf-sticky-offset-mobile--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--sf-switcher-gap--sf-switcher-threshold--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-tooltipSLASHED Full API Demo
-v0.7.16 · full bundle from jsDelivr CDN · 325 classes · 754 tokens (265 configurable)
-Token galleries highlights
-Color ramps
-Semantic / role colors
-Spacing scale
- -Type scale
-text-2xsQuick brown foxtext-xsQuick brown foxtext-sQuick brown foxtext-mQuick brown foxtext-lQuick brown foxtext-xlQuick brown foxtext-2xlQuick brown foxtext-3xlQuick brown foxtext-4xlQuick brown foxRadius
-Shadow
-Interactive functions motion · transitions · gradients
- -Animations
-animation-blinkanimation-color-pulseanimation-fade-inanimation-fade-outanimation-floatanimation-pinganimation-scale-downanimation-scale-upanimation-shimmeranimation-slide-in-downanimation-slide-in-leftanimation-slide-in-rightanimation-slide-in-upanimation-slide-out-downanimation-slide-out-leftanimation-slide-out-rightanimation-slide-out-upanimation-spinEasing curves
-ease-bounceease-elasticease-inease-in-outease-linearease-outease-overshootease-springDurations
-duration-fastduration-instantduration-noneduration-normalduration-slowduration-slowerTransitions
-transition-colorstransition-entertransition-exittransition-fasttransition-form-fieldtransition-opacitytransition-overlaytransition-shadowtransition-slowtransition-transformGradients
-gradient-actiongradient-brandgradient-fade--bgradient-fade--lgradient-fade--rgradient-fade--tgradient-primarygradient-secondarygradient-surfacegradient-tertiaryDrop shadows (filter)
-drop-shadow-ldrop-shadow-mdrop-shadow-sdrop-shadow-xldrop-shadow-xsLayout primitives 145
-.sf-alternate.sf-bento.sf-bento--2.sf-bento--3.sf-bento--6.sf-bento--row-compact.sf-bento--row-tall.sf-bento-featured.sf-bento-full.sf-bento-tall.sf-bento-wide.sf-bg-layer.sf-box.sf-breakoutcontent
.sf-center.sf-center--intrinsic.sf-cluster.sf-cluster--2xl.sf-cluster--between.sf-cluster--center.sf-cluster--end.sf-cluster--l.sf-cluster--m.sf-cluster--no-wrap.sf-cluster--s.sf-cluster--xl.sf-cluster--xs.sf-container.sf-container--full.sf-container--narrow.sf-container--prose.sf-container--wide.sf-content-gridcontent
.sf-cover.sf-cover__center.sf-cover--max.sf-cover--min.sf-cover--padding-l.sf-cover--padding-s.sf-cq.sf-divide.sf-divide--vertical.sf-dividerabove
below
.sf-divider--dashedabove
below
.sf-divider--dottedabove
below
.sf-divider--gradientabove
below
.sf-divider--softabove
below
.sf-divider--strongabove
below
.sf-divider--verticalabove
below
.sf-equal.sf-equal--2.sf-equal--3.sf-equal--4.sf-equal--6.sf-fluid-cq.sf-frame.sf-frame--3-2.sf-frame--4-3.sf-frame--cinema.sf-frame--golden.sf-frame--portrait.sf-frame--square.sf-frame--video.sf-full-bleedcontent
.sf-gap.sf-gap--2xl.sf-gap--l.sf-gap--m.sf-gap--s.sf-gap--xl.sf-gap--xs.sf-grid.sf-grid--2xl.sf-grid--dense.sf-grid--fit.sf-grid--l.sf-grid--m.sf-grid--s.sf-grid--xl.sf-grid--xs.sf-grid-cols-1.sf-grid-cols-1-2.sf-grid-cols-1-3.sf-grid-cols-2.sf-grid-cols-2-1.sf-grid-cols-3.sf-grid-cols-3-1.sf-grid-cols-4.sf-grid-cols-6.sf-grid-flex.sf-grid-flex--2xl.sf-grid-flex--center.sf-grid-flex--l.sf-grid-flex--m.sf-grid-flex--s.sf-grid-flex--xl.sf-grid-flex--xs.sf-header--l.sf-header--m.sf-header--s.sf-header--xl.sf-header--xs.sf-icon.sf-icon--2xl.sf-icon--boxed.sf-icon--l.sf-icon--m.sf-icon--s.sf-icon--xl.sf-icon--xs.sf-imposter.sf-imposter--contain.sf-imposter--fixed.sf-overlay.sf-pancake.sf-reel.sf-section.sf-section--2xl.sf-section--collapse.sf-section--guttered.sf-section--l.sf-section--m.sf-section--s.sf-section--xl.sf-section--xs.sf-section-group.sf-sidebar.sf-sidebar--narrow.sf-sidebar--right.sf-sidebar--wide.sf-stack.sf-stack--2xl.sf-stack--center.sf-stack--end.sf-stack--l.sf-stack--m.sf-stack--s.sf-stack--stretch.sf-stack--xl.sf-stack--xs.sf-subgrid.sf-subgrid-rows.sf-switcher.sf-switcher--no-wrap.sf-switcher--verticalMacro classes 53
-.sf-aspect.sf-content-auto.sf-drop-shadow-l.sf-drop-shadow-m.sf-drop-shadow-s.sf-drop-shadow-xl.sf-drop-shadow-xs.sf-equal-height.sf-flowone
two
three
.sf-line-clamp-2.sf-line-clamp-3.sf-line-clamp-N.sf-link--reverse.sf-link--subtle.sf-link-external.sf-no-tap-highlight.sf-not-proseLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
more.
.sf-overflow-fadeLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--blockLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--bottomLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--inlineLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--leftLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--rightLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--topLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overlap.sf-overlap--down.sf-overlap--end.sf-overlap--start.sf-overlap-host.sf-proseHeading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
- one
- two
Another paragraph.
.sf-scrim.sf-scrim__content.sf-scrim--bottom.sf-scrim--full.sf-scrim--top.sf-scroll-shadowLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-scroll-snap.sf-surface.sf-surface--action.sf-surface--danger.sf-surface--info.sf-surface--inverse.sf-surface--neutral.sf-surface--primary.sf-surface--secondary.sf-surface--success.sf-surface--tertiary.sf-surface--warning.sf-surface-bg.sf-tabular-nums0987654321
.sf-text-gradient.sf-text-protect.sf-truncateState classes 28
-.sf-is-active.sf-is-busy.sf-is-collapsed.sf-is-current.sf-is-danger.sf-is-disabled.sf-is-draggable.sf-is-dragging.sf-is-drop-target.sf-is-empty.sf-is-error.sf-is-expanded.sf-is-hidden.sf-is-highlighted.sf-is-info.sf-is-invalid.sf-is-invisible.sf-is-loading.sf-is-open.sf-is-pending.sf-is-pressed.sf-is-readonly.sf-is-selected.sf-is-skeleton.sf-is-success.sf-is-valid.sf-is-visible.sf-is-warningMotion / animation 22
-.sf-color-pulse.sf-entrance--fade.sf-entrance--fade-down.sf-entrance--fade-left.sf-entrance--fade-right.sf-entrance--fade-up.sf-entrance--scale-up.sf-exit--fade.sf-exit--fade-down.sf-exit--fade-left.sf-exit--fade-right.sf-exit--fade-up.sf-exit--scale-down.sf-fade-in.sf-fade-out.sf-scale-down.sf-scale-up.sf-slide-in-down.sf-slide-in-left.sf-slide-in-right.sf-slide-in-up.sf-staggerAccessibility 8
-.no-motion.sf-clickable-parent.sf-clickable-parent__overlay.sf-focus-parent.sf-focus-shadow.skip-link.sr-only.sr-only-focusablePrint 4
-.no-print.print-color-exact.print-no-color.print-onlyTheme 3
-.sf-theme-dark.sf-theme-light.sf-theme-transitionPart 2 — Complete token reference 754 tokens · live values
---sf-* token — knob and consumption, all tiers — with its live computed value (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.color 255
---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--secondary--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-whitegradient 10
---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-tertiaryshadow 13
---sf-shadow-2xl--sf-shadow-color adv--sf-shadow-glow--sf-shadow-glow-color adv--sf-shadow-inner--sf-shadow-l--sf-shadow-lightness--sf-shadow-m--sf-shadow-none--sf-shadow-s--sf-shadow-strength adv--sf-shadow-xl--sf-shadow-xsdrop 5
---sf-drop-shadow-l--sf-drop-shadow-m--sf-drop-shadow-s--sf-drop-shadow-xl--sf-drop-shadow-xsradius 14
---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 adv--sf-radius-pill--sf-radius-s--sf-radius-scale adv--sf-radius-xl--sf-radius-xsspace 16
---sf-space-2xl--sf-space-2xs--sf-space-3xl--sf-space-4xl--sf-space-base-max adv--sf-space-base-min adv--sf-space-l--sf-space-m--sf-space-none--sf-space-px--sf-space-ratio-max adv--sf-space-ratio-min adv--sf-space-s--sf-space-scale adv--sf-space-xl--sf-space-xssize 5
---sf-size-l--sf-size-m--sf-size-s--sf-size-xl--sf-size-xstext 62
---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 adv--sf-text-base-min adv--sf-text-display-base-max adv--sf-text-display-base-min adv--sf-text-display-l--sf-text-display-m--sf-text-display-s--sf-text-display-scale adv--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 adv--sf-text-ratio-min adv--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 adv--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-widthfont 20
---sf-font-body--sf-font-display--sf-font-features adv--sf-font-geometric--sf-font-heading--sf-font-humanist--sf-font-mono--sf-font-numeric--sf-font-slab--sf-font-variation adv--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-strongleading 5
---sf-leading-normalAa Bb
Cc Dd
--sf-leading-relaxedAa Bb
Cc Dd
--sf-leading-snugAa Bb
Cc Dd
--sf-leading-taper advAa Bb
Cc Dd
--sf-leading-tightAa Bb
Cc Dd
tracking 5
---sf-tracking-normal--sf-tracking-tight--sf-tracking-wide--sf-tracking-wider--sf-tracking-widestduration 6
---sf-duration-fast--sf-duration-instant--sf-duration-none--sf-duration-normal--sf-duration-slow--sf-duration-slowerease 8
---sf-ease-bounce--sf-ease-elastic--sf-ease-in--sf-ease-in-out--sf-ease-linear--sf-ease-out--sf-ease-overshoot--sf-ease-springtransition 10
---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-transformanimation 18
---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-spinborder 10
---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-hairlinefocus 5
---sf-focus-ring-color--sf-focus-ring-offset--sf-focus-ring-shadow adv--sf-focus-ring-style--sf-focus-ring-widthopacity 2
---sf-opacity-disabled--sf-opacity-mutedblur 1
---sf-blurz 10
---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-tooltipalternate 2
---sf-alternate-gap--sf-alternate-inner-gapaspect 1
---sf-aspectbento 5
---sf-bento-cols-default--sf-bento-gap--sf-bento-row-compact--sf-bento-row-default--sf-bento-row-tallbg 5
---sf-bg-layer-fit--sf-bg-layer-inset--sf-bg-layer-position--sf-bg-layer-radius--sf-bg-layer-zbody 8
---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-wrapbox 3
---sf-box-border-color--sf-box-border-width--sf-box-paddingbreakout 1
---sf-breakout-widthbtn 29
---sf-btn-border-width--sf-btn-font-scale--sf-btn-font-size adv--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 adv--sf-btn-padding-block adv--sf-btn-padding-inline adv--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-inlinecard 14
---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--hovercaret 1
---sf-caret-colorcenter 2
---sf-center-gutter--sf-center-maxcluster 3
---sf-cluster-align--sf-cluster-gap--sf-cluster-justifycode 1
---sf-code-font-sizecomponent 1
---sf-component-padcontainer 5
---sf-container-default--sf-container-full--sf-container-narrow--sf-container-prose--sf-container-widecontent 3
---sf-content-gap--sf-content-intrinsic-size--sf-content-widthcontrast 2
---sf-contrast-bias adv--sf-contrast-threshold advcover 2
---sf-cover-min-height--sf-cover-paddingcurrent 1
---sf-current-font-weightdensity 1
---sf-density advdisplay 3
---sf-display-l-line-height--sf-display-m-line-height--sf-display-s-line-heightdivider 4
---sf-divider-color--sf-divider-gap--sf-divider-style--sf-divider-widthequal 5
---sf-equal-gap--sf-equal-min-col--sf-equal-rule-color--sf-equal-rule-style--sf-equal-rule-widthfield 5
---sf-field-block--sf-field-padding-block--sf-field-padding-inline--sf-field-radius--sf-field-required-markerflow 1
---sf-flow-spacefluid 3
---sf-fluid-max-vw adv--sf-fluid-min-vw adv--sf-fluid-widthframe 1
---sf-frame-ratiogap 1
---sf-gapgrid 8
---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-xsgutter 1
---sf-gutterh1 5
---sf-h1-font-weight--sf-h1-letter-spacing--sf-h1-line-height--sf-h1-max-width--sf-h1-sizeh2 5
---sf-h2-font-weight--sf-h2-letter-spacing--sf-h2-line-height--sf-h2-max-width--sf-h2-sizeh3 5
---sf-h3-font-weight--sf-h3-letter-spacing--sf-h3-line-height--sf-h3-max-width--sf-h3-sizeh4 5
---sf-h4-font-weight--sf-h4-letter-spacing--sf-h4-line-height--sf-h4-max-width--sf-h4-sizeh5 5
---sf-h5-font-weight--sf-h5-letter-spacing--sf-h5-line-height--sf-h5-max-width--sf-h5-sizeh6 5
---sf-h6-font-weight--sf-h6-letter-spacing--sf-h6-line-height--sf-h6-max-width--sf-h6-sizeheader 3
---sf-header-height--sf-header-height-desktop--sf-header-height-mobileheading 3
---sf-heading-color--sf-heading-font-family--sf-heading-text-wraphover 4
---sf-hover-grow-scale--sf-hover-lift--sf-hover-shrink-scale--sf-hover-slideicon 10
---sf-icon-2xl--sf-icon-box-bg--sf-icon-box-border--sf-icon-box-pad--sf-icon-box-radius--sf-icon-l--sf-icon-m--sf-icon-s--sf-icon-xl--sf-icon-xsimposter 1
---sf-imposter-marginis 5
---sf-is-active adv--sf-is-current adv--sf-is-dark internal--sf-is-open adv--sf-is-pressed advline 1
---sf-line-clamplink 4
---sf-link-external-label--sf-link-external-marker--sf-link-underline-offset--sf-link-underline-thicknesslumlocker 1
---sf-lumlocker advmask 2
---sf-mask-scrim-end adv--sf-mask-scrim-start advmedia 1
---sf-media-radiusmotion 1
---sf-motion-scale advobject 2
---sf-object-fit--sf-object-positionoptical 1
---sf-optical-sizing advoverlap 1
---sf-overlap-pullpalette 10
---sf-palette-mix-100 adv--sf-palette-mix-200 adv--sf-palette-mix-300 adv--sf-palette-mix-400 adv--sf-palette-mix-50 adv--sf-palette-mix-600 adv--sf-palette-mix-700 adv--sf-palette-mix-800 adv--sf-palette-mix-900 adv--sf-palette-mix-950 advprint 3
---sf-print-base-size adv--sf-print-page-margin adv--sf-print-page-size advprose 14
---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-paragraph--sf-prose-table-padratio 7
---sf-ratio-3-2--sf-ratio-4-3--sf-ratio-cinema--sf-ratio-golden--sf-ratio-portrait--sf-ratio-square--sf-ratio-videoreel 3
---sf-reel-gap--sf-reel-height--sf-reel-item-widthsafe 4
---sf-safe-bottom adv--sf-safe-left adv--sf-safe-right adv--sf-safe-top advscrim 4
---sf-scrim-color--sf-scrim-direction--sf-scrim-gradient--sf-scrim-text-shadowscroll 5
---sf-scroll-shadow-size--sf-scroll-timeline-range-end adv--sf-scroll-timeline-range-exit-end--sf-scroll-timeline-range-exit-start--sf-scroll-timeline-range-start advscrollbar 2
---sf-scrollbar-thumb--sf-scrollbar-tracksection 8
---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 advsidebar 3
---sf-sidebar-gap--sf-sidebar-min-width--sf-sidebar-widthstack 1
---sf-stack-gapstagger 1
---sf-stagger-stepstate 1
---sf-state-pending-opacitysticky 3
---sf-sticky-offset--sf-sticky-offset-desktop--sf-sticky-offset-mobilesurface 9
---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-colorswitcher 2
---sf-switcher-gap--sf-switcher-thresholdtheme 1
---sf-theme-transition-durationtouch 1
---sf-touch-targetSLASHED Full API Demo
-v0.7.16 · full bundle from jsDelivr CDN · 325 classes · 754 tokens (265 configurable)
-Token galleries highlights
-Color ramps
-Semantic / role colors
-Spacing scale
- -Type scale
-text-2xsQuick brown foxtext-xsQuick brown foxtext-sQuick brown foxtext-mQuick brown foxtext-lQuick brown foxtext-xlQuick brown foxtext-2xlQuick brown foxtext-3xlQuick brown foxtext-4xlQuick brown foxRadius
-Shadow
-Interactive functions motion · transitions · gradients
- -Animations
-animation-blinkanimation-color-pulseanimation-fade-inanimation-fade-outanimation-floatanimation-pinganimation-scale-downanimation-scale-upanimation-shimmeranimation-slide-in-downanimation-slide-in-leftanimation-slide-in-rightanimation-slide-in-upanimation-slide-out-downanimation-slide-out-leftanimation-slide-out-rightanimation-slide-out-upanimation-spinEasing curves
-ease-bounceease-elasticease-inease-in-outease-linearease-outease-overshootease-springDurations
-duration-fastduration-instantduration-noneduration-normalduration-slowduration-slowerTransitions
-transition-colorstransition-entertransition-exittransition-fasttransition-form-fieldtransition-opacitytransition-overlaytransition-shadowtransition-slowtransition-transformGradients
-gradient-actiongradient-brandgradient-fade--bgradient-fade--lgradient-fade--rgradient-fade--tgradient-primarygradient-secondarygradient-surfacegradient-tertiaryDrop shadows (filter)
-drop-shadow-ldrop-shadow-mdrop-shadow-sdrop-shadow-xldrop-shadow-xsLayout primitives 145
-.sf-alternate.sf-bento.sf-bento--2.sf-bento--3.sf-bento--6.sf-bento--row-compact.sf-bento--row-tall.sf-bento-featured.sf-bento-full.sf-bento-tall.sf-bento-wide.sf-bg-layer.sf-box.sf-breakoutcontent
.sf-center.sf-center--intrinsic.sf-cluster.sf-cluster--2xl.sf-cluster--between.sf-cluster--center.sf-cluster--end.sf-cluster--l.sf-cluster--m.sf-cluster--no-wrap.sf-cluster--s.sf-cluster--xl.sf-cluster--xs.sf-container.sf-container--full.sf-container--narrow.sf-container--prose.sf-container--wide.sf-content-gridcontent
.sf-cover.sf-cover__center.sf-cover--max.sf-cover--min.sf-cover--padding-l.sf-cover--padding-s.sf-cq.sf-divide.sf-divide--vertical.sf-dividerabove
below
.sf-divider--dashedabove
below
.sf-divider--dottedabove
below
.sf-divider--gradientabove
below
.sf-divider--softabove
below
.sf-divider--strongabove
below
.sf-divider--verticalabove
below
.sf-equal.sf-equal--2.sf-equal--3.sf-equal--4.sf-equal--6.sf-fluid-cq.sf-frame.sf-frame--3-2.sf-frame--4-3.sf-frame--cinema.sf-frame--golden.sf-frame--portrait.sf-frame--square.sf-frame--video.sf-full-bleedcontent
.sf-gap.sf-gap--2xl.sf-gap--l.sf-gap--m.sf-gap--s.sf-gap--xl.sf-gap--xs.sf-grid.sf-grid--2xl.sf-grid--dense.sf-grid--fit.sf-grid--l.sf-grid--m.sf-grid--s.sf-grid--xl.sf-grid--xs.sf-grid-cols-1.sf-grid-cols-1-2.sf-grid-cols-1-3.sf-grid-cols-2.sf-grid-cols-2-1.sf-grid-cols-3.sf-grid-cols-3-1.sf-grid-cols-4.sf-grid-cols-6.sf-grid-flex.sf-grid-flex--2xl.sf-grid-flex--center.sf-grid-flex--l.sf-grid-flex--m.sf-grid-flex--s.sf-grid-flex--xl.sf-grid-flex--xs.sf-header--l.sf-header--m.sf-header--s.sf-header--xl.sf-header--xs.sf-icon.sf-icon--2xl.sf-icon--boxed.sf-icon--l.sf-icon--m.sf-icon--s.sf-icon--xl.sf-icon--xs.sf-imposter.sf-imposter--contain.sf-imposter--fixed.sf-overlay.sf-pancake.sf-reel.sf-section.sf-section--2xl.sf-section--collapse.sf-section--guttered.sf-section--l.sf-section--m.sf-section--s.sf-section--xl.sf-section--xs.sf-section-group.sf-sidebar.sf-sidebar--narrow.sf-sidebar--right.sf-sidebar--wide.sf-stack.sf-stack--2xl.sf-stack--center.sf-stack--end.sf-stack--l.sf-stack--m.sf-stack--s.sf-stack--stretch.sf-stack--xl.sf-stack--xs.sf-subgrid.sf-subgrid-rows.sf-switcher.sf-switcher--no-wrap.sf-switcher--verticalMacro classes 53
-.sf-aspect.sf-content-auto.sf-drop-shadow-l.sf-drop-shadow-m.sf-drop-shadow-s.sf-drop-shadow-xl.sf-drop-shadow-xs.sf-equal-height.sf-flowone
two
three
.sf-line-clamp-2.sf-line-clamp-3.sf-line-clamp-N.sf-link--reverse.sf-link--subtle.sf-link-external.sf-no-tap-highlight.sf-not-proseLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
more.
.sf-overflow-fadeLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--blockLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--bottomLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--inlineLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--leftLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--rightLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overflow-fade--topLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-overlap.sf-overlap--down.sf-overlap--end.sf-overlap--start.sf-overlap-host.sf-proseHeading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
- one
- two
Another paragraph.
.sf-scrim.sf-scrim__content.sf-scrim--bottom.sf-scrim--full.sf-scrim--top.sf-scroll-shadowLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
.sf-scroll-snap.sf-surface.sf-surface--action.sf-surface--danger.sf-surface--info.sf-surface--inverse.sf-surface--neutral.sf-surface--primary.sf-surface--secondary.sf-surface--success.sf-surface--tertiary.sf-surface--warning.sf-surface-bg.sf-tabular-nums0987654321
.sf-text-gradient.sf-text-protect.sf-truncateState classes 28
-.sf-is-active.sf-is-busy.sf-is-collapsed.sf-is-current.sf-is-danger.sf-is-disabled.sf-is-draggable.sf-is-dragging.sf-is-drop-target.sf-is-empty.sf-is-error.sf-is-expanded.sf-is-hidden.sf-is-highlighted.sf-is-info.sf-is-invalid.sf-is-invisible.sf-is-loading.sf-is-open.sf-is-pending.sf-is-pressed.sf-is-readonly.sf-is-selected.sf-is-skeleton.sf-is-success.sf-is-valid.sf-is-visible.sf-is-warningMotion / animation 22
-.sf-color-pulse.sf-entrance--fade.sf-entrance--fade-down.sf-entrance--fade-left.sf-entrance--fade-right.sf-entrance--fade-up.sf-entrance--scale-up.sf-exit--fade.sf-exit--fade-down.sf-exit--fade-left.sf-exit--fade-right.sf-exit--fade-up.sf-exit--scale-down.sf-fade-in.sf-fade-out.sf-scale-down.sf-scale-up.sf-slide-in-down.sf-slide-in-left.sf-slide-in-right.sf-slide-in-up.sf-staggerAccessibility 8
-.no-motion.sf-clickable-parent.sf-clickable-parent__overlay.sf-focus-parent.sf-focus-shadow.skip-link.sr-only.sr-only-focusablePrint 4
-.no-print.print-color-exact.print-no-color.print-onlyTheme 3
-.sf-theme-dark.sf-theme-light.sf-theme-transitionPart 2 — Complete token reference 754 tokens · live values
---sf-* token — knob and consumption, all tiers — with its live computed value (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.color 255
---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--secondary--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-whitegradient 10
---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-tertiaryshadow 13
---sf-shadow-2xl--sf-shadow-color adv--sf-shadow-glow--sf-shadow-glow-color adv--sf-shadow-inner--sf-shadow-l--sf-shadow-lightness--sf-shadow-m--sf-shadow-none--sf-shadow-s--sf-shadow-strength adv--sf-shadow-xl--sf-shadow-xsdrop 5
---sf-drop-shadow-l--sf-drop-shadow-m--sf-drop-shadow-s--sf-drop-shadow-xl--sf-drop-shadow-xsradius 14
---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 adv--sf-radius-pill--sf-radius-s--sf-radius-scale adv--sf-radius-xl--sf-radius-xsspace 16
---sf-space-2xl--sf-space-2xs--sf-space-3xl--sf-space-4xl--sf-space-base-max adv--sf-space-base-min adv--sf-space-l--sf-space-m--sf-space-none--sf-space-px--sf-space-ratio-max adv--sf-space-ratio-min adv--sf-space-s--sf-space-scale adv--sf-space-xl--sf-space-xssize 5
---sf-size-l--sf-size-m--sf-size-s--sf-size-xl--sf-size-xstext 62
---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 adv--sf-text-base-min adv--sf-text-display-base-max adv--sf-text-display-base-min adv--sf-text-display-l--sf-text-display-m--sf-text-display-s--sf-text-display-scale adv--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 adv--sf-text-ratio-min adv--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 adv--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-widthfont 20
---sf-font-body--sf-font-display--sf-font-features adv--sf-font-geometric--sf-font-heading--sf-font-humanist--sf-font-mono--sf-font-numeric--sf-font-slab--sf-font-variation adv--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-strongleading 5
---sf-leading-normalAa Bb
Cc Dd
--sf-leading-relaxedAa Bb
Cc Dd
--sf-leading-snugAa Bb
Cc Dd
--sf-leading-taper advAa Bb
Cc Dd
--sf-leading-tightAa Bb
Cc Dd
tracking 5
---sf-tracking-normal--sf-tracking-tight--sf-tracking-wide--sf-tracking-wider--sf-tracking-widestduration 6
---sf-duration-fast--sf-duration-instant--sf-duration-none--sf-duration-normal--sf-duration-slow--sf-duration-slowerease 8
---sf-ease-bounce--sf-ease-elastic--sf-ease-in--sf-ease-in-out--sf-ease-linear--sf-ease-out--sf-ease-overshoot--sf-ease-springtransition 10
---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-transformanimation 18
---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-spinborder 10
---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-hairlinefocus 5
---sf-focus-ring-color--sf-focus-ring-offset--sf-focus-ring-shadow adv--sf-focus-ring-style--sf-focus-ring-widthopacity 2
---sf-opacity-disabled--sf-opacity-mutedblur 1
---sf-blurz 10
---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-tooltipalternate 2
---sf-alternate-gap--sf-alternate-inner-gapaspect 1
---sf-aspectbento 5
---sf-bento-cols-default--sf-bento-gap--sf-bento-row-compact--sf-bento-row-default--sf-bento-row-tallbg 5
---sf-bg-layer-fit--sf-bg-layer-inset--sf-bg-layer-position--sf-bg-layer-radius--sf-bg-layer-zbody 8
---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-wrapbox 3
---sf-box-border-color--sf-box-border-width--sf-box-paddingbreakout 1
---sf-breakout-widthbtn 29
---sf-btn-border-width--sf-btn-font-scale--sf-btn-font-size adv--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 adv--sf-btn-padding-block adv--sf-btn-padding-inline adv--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-inlinecard 14
---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--hovercaret 1
---sf-caret-colorcenter 2
---sf-center-gutter--sf-center-maxcluster 3
---sf-cluster-align--sf-cluster-gap--sf-cluster-justifycode 1
---sf-code-font-sizecomponent 1
---sf-component-padcontainer 5
---sf-container-default--sf-container-full--sf-container-narrow--sf-container-prose--sf-container-widecontent 3
---sf-content-gap--sf-content-intrinsic-size--sf-content-widthcontrast 2
---sf-contrast-bias adv--sf-contrast-threshold advcover 2
---sf-cover-min-height--sf-cover-paddingcurrent 1
---sf-current-font-weightdensity 1
---sf-density advdisplay 3
---sf-display-l-line-height--sf-display-m-line-height--sf-display-s-line-heightdivider 4
---sf-divider-color--sf-divider-gap--sf-divider-style--sf-divider-widthequal 5
---sf-equal-gap--sf-equal-min-col--sf-equal-rule-color--sf-equal-rule-style--sf-equal-rule-widthfield 5
---sf-field-block--sf-field-padding-block--sf-field-padding-inline--sf-field-radius--sf-field-required-markerflow 1
---sf-flow-spacefluid 3
---sf-fluid-max-vw adv--sf-fluid-min-vw adv--sf-fluid-widthframe 1
---sf-frame-ratiogap 1
---sf-gapgrid 8
---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-xsgutter 1
---sf-gutterh1 5
---sf-h1-font-weight--sf-h1-letter-spacing--sf-h1-line-height--sf-h1-max-width--sf-h1-sizeh2 5
---sf-h2-font-weight--sf-h2-letter-spacing--sf-h2-line-height--sf-h2-max-width--sf-h2-sizeh3 5
---sf-h3-font-weight--sf-h3-letter-spacing--sf-h3-line-height--sf-h3-max-width--sf-h3-sizeh4 5
---sf-h4-font-weight--sf-h4-letter-spacing--sf-h4-line-height--sf-h4-max-width--sf-h4-sizeh5 5
---sf-h5-font-weight--sf-h5-letter-spacing--sf-h5-line-height--sf-h5-max-width--sf-h5-sizeh6 5
---sf-h6-font-weight--sf-h6-letter-spacing--sf-h6-line-height--sf-h6-max-width--sf-h6-sizeheader 3
---sf-header-height--sf-header-height-desktop--sf-header-height-mobileheading 3
---sf-heading-color--sf-heading-font-family--sf-heading-text-wraphover 4
---sf-hover-grow-scale--sf-hover-lift--sf-hover-shrink-scale--sf-hover-slideicon 10
---sf-icon-2xl--sf-icon-box-bg--sf-icon-box-border--sf-icon-box-pad--sf-icon-box-radius--sf-icon-l--sf-icon-m--sf-icon-s--sf-icon-xl--sf-icon-xsimposter 1
---sf-imposter-marginis 5
---sf-is-active adv--sf-is-current adv--sf-is-dark internal--sf-is-open adv--sf-is-pressed advline 1
---sf-line-clamplink 4
---sf-link-external-label--sf-link-external-marker--sf-link-underline-offset--sf-link-underline-thicknesslumlocker 1
---sf-lumlocker advmask 2
---sf-mask-scrim-end adv--sf-mask-scrim-start advmedia 1
---sf-media-radiusmotion 1
---sf-motion-scale advobject 2
---sf-object-fit--sf-object-positionoptical 1
---sf-optical-sizing advoverlap 1
---sf-overlap-pullpalette 10
---sf-palette-mix-100 adv--sf-palette-mix-200 adv--sf-palette-mix-300 adv--sf-palette-mix-400 adv--sf-palette-mix-50 adv--sf-palette-mix-600 adv--sf-palette-mix-700 adv--sf-palette-mix-800 adv--sf-palette-mix-900 adv--sf-palette-mix-950 advprint 3
---sf-print-base-size adv--sf-print-page-margin adv--sf-print-page-size advprose 14
---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-paragraph--sf-prose-table-padratio 7
---sf-ratio-3-2--sf-ratio-4-3--sf-ratio-cinema--sf-ratio-golden--sf-ratio-portrait--sf-ratio-square--sf-ratio-videoreel 3
---sf-reel-gap--sf-reel-height--sf-reel-item-widthsafe 4
---sf-safe-bottom adv--sf-safe-left adv--sf-safe-right adv--sf-safe-top advscrim 4
---sf-scrim-color--sf-scrim-direction--sf-scrim-gradient--sf-scrim-text-shadowscroll 5
---sf-scroll-shadow-size--sf-scroll-timeline-range-end adv--sf-scroll-timeline-range-exit-end--sf-scroll-timeline-range-exit-start--sf-scroll-timeline-range-start advscrollbar 2
---sf-scrollbar-thumb--sf-scrollbar-tracksection 8
---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 advsidebar 3
---sf-sidebar-gap--sf-sidebar-min-width--sf-sidebar-widthstack 1
---sf-stack-gapstagger 1
---sf-stagger-stepstate 1
---sf-state-pending-opacitysticky 3
---sf-sticky-offset--sf-sticky-offset-desktop--sf-sticky-offset-mobilesurface 9
---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-colorswitcher 2
---sf-switcher-gap--sf-switcher-thresholdtheme 1
---sf-theme-transition-durationtouch 1
---sf-touch-targetcontent
content
above
below
`; - if (n === 'sf-bg-layer') return `Heading
${ipsum}
- one
- two
Another paragraph.
${ipsum}
more.
one
two
three
${ipsum}
${ipsum}
${ipsum}
${ipsum}
0987654321
.${esc(c.name)}${note}text-${s}Quick brown fox${title} ${items.length}
-Aa Bb
Cc Dd
${esc(t.name)}${tier}${vis ? `${ns} ${items.length}
\nPart 2 — Complete token reference ${tokens.length} tokens · live values
---sf-* token — knob and consumption, all tiers — with its live computed value (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.${t.name.replace('--sf-', '')}`;
- return ` Interactive functions motion · transitions · gradients
- -Animations
- ${fxList(anims, (t) => `Easing curves
-Durations
-Transitions
-Gradients
- ${fxList(grads, (t) => `Drop shadows (filter)
- ${fxList(drops, (t) => `SLASHED Full API Demo
-v${VERSION} · full bundle from jsDelivr CDN · ${bundledClassCount} classes · ${tokens.length} tokens (${knobs.length} configurable)
- ${banner} - -Token galleries highlights
-Color ramps
- ${['primary', 'secondary', 'tertiary', 'action', 'neutral', 'base'].map(colorRamp).join('\n ')} -Semantic / role colors
-Spacing scale
- ${spacingBars()} -Type scale
- ${textScale()} -Radius
-Shadow
-Theme Customizer
-
- Override just 6 tokens in the Light mode column for quick branding — dark mode automatically derives an appropriate value via relative color syntax, no extra work needed. Optionally override any token in the Dark mode column for full per-mode control. Changes apply live to :root; toggle dark mode in the header to preview.
-
Light mode
- -Dark mode
- -Accessibility report (live, both modes)
-- WCAG 2 contrast for your chosen colours, recomputed live. The framework auto-picks readable on-colours (black/white by lightness) and clamps link lightness — but contrast also depends on chroma, so this panel shows the actual result, including any pairs that fall short. AA = 4.5:1 (normal text); AA Large = 3:1 (large/UI). Fix a ✗ by adjusting that colour's lightness, or override the on-/text token directly. -
- -Colors
- -Brand — light mode (base values)
-Semantic Surfaces
-Status Colors
-Status Triplets
-Text Hierarchy
---sf-color-text (primary)
---sf-color-text--secondary
---sf-color-text--muted
---sf-color-text--placeholder
---sf-color-text--disabled
---sf-color-heading
-Borders
---sf-color-border--sf-color-border--subtle--sf-color-border--strong--sf-color-border--focus (action color)Gradients
-Palette Numeric Scale 50–950 (core/tokens.css)
-Alpha Scale a5–a80
-Semantic & Functional Aliases
-Scoped Themes
-
- Use data-theme="dark" or data-theme="light" on any element to scope a theme. When attributes are inconvenient, .sf-theme-dark and .sf-theme-light are equivalent class aliases. Tokens resolve correctly per-section, enabling nested light-inside-dark (or vice-versa) without extra overrides.
-
Dark section data-theme="dark"
-
- --sf-color-text (primary)
---sf-color-text--secondary
---sf-color-text--muted
-Light section (nested) data-theme="light"
-
- --sf-color-text (primary)
---sf-color-text--secondary
---sf-color-text--muted
-Opt-in theme cross-fade .sf-theme-transition
-
- Add class="sf-theme-transition" to <html> (or any subtree) so colours
- fade instead of switching instantly when the theme flips. Tune the speed with
- --sf-theme-transition-duration. Toggle dark mode in the header to see this block cross-fade.
-
This card fades its background, text and border colours when the mode changes.
-Section theme aliases .sf-theme-light / .sf-theme-dark
-
- Class aliases for data-theme: one class scopes the theme, setting the background and flipping the
- whole foreground (text, links, borders) to match — always light or always dark,
- regardless of the ambient scheme.
-
Auto-light text, and a themed link.
-Auto-dark text, and a themed link.
-Named background surface .sf-surface-bg
-
- A reusable, named background bundling a base colour + image/gradient + an optional
- overlay layered above it. Define the --sf-surface-bg-* tokens on a scope,
- then apply the class. Here the overlay is a scrim over a gradient "image".
-
Typography
- -Heading Scale (base.css)
-h1 — The quick brown fox
-h2 — The quick brown fox
-h3 — The quick brown fox
-h4 — The quick brown fox
-h5 — The quick brown fox
-h6 — The quick brown fox
-Fluid Text Scale (--sf-text-*)
-All sizes use clamp() — resize the window to see fluid scaling.
Font Weights — base weights + semantic roles
-Semantic roles (override to reweight the whole site):
-Semantic Weight Aliases & Font Stacks
-Line Heights (--sf-leading-*)
---sf-leading-tight (1.1)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
---sf-leading-snug (1.3)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
---sf-leading-normal (1.5)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
---sf-leading-relaxed (1.625)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
-Letter Spacing (--sf-tracking-*)
-tracking-tight — THE QUICK BROWN FOX JUMPS OVERtracking-normal — THE QUICK BROWN FOX JUMPS OVERtracking-wide — THE QUICK BROWN FOXtracking-wider — THE QUICK BROWNtracking-widest — THE QUICKSemantic Elements (base.css)
-
- strong,
- em,
- mark highlight,
- inline code,
- Ctrl + C,
- CSS,
- H2O,
- E=mc2,
- small text,
- link,
- deleted,
- inserted
-
/* pre + code block */
-:root {
- --sf-color-primary-source-light: oklch(0.47 0.27 264);
- --sf-color-neutral-source-light: oklch(0.52 0.025 260);
-}
- A blockquote. Try selecting this text to see --sf-color-selection-bg.
-
-
- Link States
- -Spacing
-All fluid tokens use clamp() — resize the window to see bars animate.
0
- Spacing Aliases
---sf-gap → --sf-space-m
- --sf-content-gap → --sf-space-s
- --sf-component-pad → --sf-space-m
- --sf-field-block → --sf-space-l
- --sf-prose-paragraph → --sf-content-gap → --sf-space-s
- Shadows
-Shadow color is a neutral near-black auto-derived from --sf-color-neutral (--sf-shadow-color) — override it to var(--sf-color-primary) for tinted shadows. In dark mode strength scales up but every layer's alpha is capped at 0.7. Adjust via --sf-shadow-strength.
Text Shadows
-Drop Shadows (filter — follows alpha edges)
-3D Perspective
-Border Radius
-All values multiplied by --sf-radius-scale (1 by default).
0
2px
4px
8px
12px
16px
24px
32px
48px
9999px
Motion & States
- -accessibility.css).
- Transitions (motion.css — hover these)
-
- motion.css applies a default transition to all interactive elements (a, button, input, etc.) using --sf-duration-fast and --sf-ease-out. Hover to see the transition between the base and hover states.
-
Easing Curves
-Animation Presets (motion.css — click to replay)
-.sf-stagger (motion.css — parent choreographs children's animation-delay; click to replay)
- -
-
- 1 -
- 2 -
- 3 -
- 4 -
@property Color Interpolation (motion.css — sf-color-pulse)
-
- Demonstrates smooth oklch color animation via @property-registered tokens.
- The box below pulses its --sf-color-primary-source-light lightness. Only works in browsers supporting @property inherits.
-
Duration Tokens
-Hover any row — the dot slides across using that duration token. Easing is the same (--sf-ease-out) so the only variable is speed.
States (states.css)
-.sf-is-loading
- -.sf-is-skeleton
-.sf-is-hidden / .sf-is-invisible
-States — Full Coverage
-Every .sf-is-* class from states.css. Grouped by category.
Navigation & Toggling
-Disclosure
-Validation / Feedback
-Drag & Drop
-Overlay
-Interactivity
-.sf-focus-parent (focus the input → parent rings)
-
- Empty State
-.sf-is-empty:empty → display:none (the empty div above is gone)
- Layout — Additional Primitives
- -.sf-imposter
-Absolutely positioned overlay. Modifiers: --fixed, --contain.
.sf-imposter--fixed
-Uses position: fixed — not demoed visually to avoid viewport takeover. Class reference: sf-imposter--fixed.
.sf-subgrid / .sf-subgrid-rows
-Inherit parent grid tracks. Requires parent with explicit grid.
-.sf-subgrid-rows works the same for row tracks.
.sf-section-group
-Groups adjacent .sf-section elements with zero gap between them.
.sf-divider
-Token-driven separator (--sf-divider-width/-style/-color). Horizontal by default; .sf-divider--vertical for inline use.
Content above the divider.
--
Content below the divider.
-Style modifiers — colour via .sf-divider--soft / .sf-divider--strong, line via .sf-divider--dashed / .sf-divider--dotted, and a fading .sf-divider--gradient.
-
-
-
-
- -
.sf-divide
-Places a rule between direct children in one class — no extra markup per gap. .sf-divide--vertical switches to an inline-start border.
First
-Second
-Third
-.sf-icon
-Em-based inline icon sizing. Scales with surrounding text; size modifiers .sf-icon--xs … .sf-icon--2xl.
.sf-icon--boxed
-Padded, bordered icon frame. Override --sf-icon-box-bg / -border / -radius per instance. Combine with size modifiers; the visible glyph stays at --sf-icon-size and the frame grows around it.
.sf-grid--dense
-Dense auto-flow lets later items backfill earlier gaps. Add .sf-grid--dense to any grid.
.sf-cover modifiers
-.sf-cover--min
- .sf-cover--max
- .sf-cover--padding-s / --padding-l
- .sf-cluster--no-wrap / .sf-switcher--no-wrap / .sf-switcher--vertical
-.sf-cluster--no-wrap
- .sf-switcher--no-wrap
- .sf-switcher--vertical
- .sf-grid-cols-1 / Ratio grids
-
- .sf-grid-cols-1 is intentionally a single-column grid. Ratio grids (.sf-grid-cols-1-2 etc.) collapse to a single column on narrow widths and switch to two columns at 48em via container queries — the parent must declare container-type: inline-size.
-
.sf-grid-cols-1 (single column by design)
- .sf-grid-cols-1-2 (1fr 2fr)
- .sf-grid-cols-2-1 (2fr 1fr)
- .sf-grid-cols-1-3 (1fr 3fr)
- .sf-grid-cols-3-1 (3fr 1fr)
- .sf-cq — container query scope
-- Establishes an inline-size container context so children can use container queries. -
-.sf-fluid-cq — container-relative fluid scale
-
- Makes the fluid type + space scales interpolate against this box's width
- (100cqi) instead of the viewport — so text in a narrow column
- scales with the column, not the page. Resize the box to see it.
-
Fluid text tied to this container's width.
-.sf-equal — fixed N-column grid
-
- Column count never collapses — unlike .sf-grid-* which uses container queries.
-
.sf-equal--2
- .sf-equal--3
- .sf-equal--4
- .sf-equal--6
- .sf-scale-down (motion.css)
-.sf-center / .sf-center--intrinsic
-.sf-box
-.sf-grid-cols-6 / .sf-grid--xs … .sf-grid--2xl
-
- Fixed-column grids (.sf-grid-cols-6) use container queries — wrap in container-type: inline-size. Auto-fill grids (.sf-grid--xs/s/m/l/xl/2xl) use repeat(auto-fill, minmax(min(--sf-grid-min, 100%), 1fr)) — they collapse to fewer columns as the container narrows. On very narrow viewports both will stack to a single column; resize the window to see them respond.
-
.sf-grid-cols-6
- .sf-grid--xs (min ~10rem)
- .sf-grid--s (min ~13rem)
- .sf-grid--m (min ~16rem)
- .sf-grid--l (min ~20rem)
- .sf-grid--xl (min ~24rem)
- .sf-grid--2xl (min ~28rem)
- .sf-grid-flex — flex alternative for uneven item counts
-
- Flexbox-based alternative to .sf-grid for item counts that don't divide evenly. By default the last row's leftover items stretch to fill the row; .sf-grid-flex--center keeps them fixed-width and centered instead. Reuses --sf-grid-min/--sf-grid-gap — same --xs … --2xl scale as .sf-grid.
-
.sf-grid-flex (default — last row stretches)
- .sf-grid-flex--center (leftover fixed-width, centered)
- .sf-grid-flex--xs / --s / --m / --l / --xl / --2xl (re-point --sf-grid-min)
- .sf-sidebar--narrow / .sf-sidebar--wide
-.sf-sidebar--narrow (12rem sidebar)
-
- .sf-sidebar--wide (26rem sidebar)
-
- .sf-container--full / .sf-container--wide
-.sf-container--wide (90rem)
- .sf-container--full (100%)
- .sf-section--xs / .sf-section--l / .sf-section--xl / .sf-section--2xl
-.sf-header--xs / .sf-header--s / .sf-header--m / .sf-header--l / .sf-header--xl
-Block padding on the standard spacing scale — lighter than .sf-section. Inline gutter is left untouched.
.sf-frame--3-2 / .sf-frame--4-3 / .sf-frame--golden
-.sf-frame--3-2
- .sf-frame--4-3
- .sf-frame--golden
- .sf-stack alignment: --center / --end / --stretch
-.sf-stack--s --center
- .sf-stack--l --end
- .sf-stack--2xl --stretch
- override beyond scale: style="--sf-stack-gap: var(--sf-space-3xl)"
- .sf-gap — gap size modifiers
-
- Injects gap into any existing flex or grid container without imposing a display type.
-
.sf-gap--xs
- .sf-gap--s
- .sf-gap--m
- .sf-gap--l
- .sf-gap--xl
- .sf-gap--2xl
- .sf-cluster gap modifiers: --xs / --s / --m / --l / --xl / --2xl
-- The size suffix sets the gap between items (not alignment). Compare side by side: -
-override below scale: style="--sf-cluster-gap: var(--sf-space-2xs)"
- .sf-cluster--xs (smallest of the canonical scale)
- .sf-cluster--l
- .sf-cluster--2xl (largest of the canonical scale)
- .sf-cluster alignment: --center / --end / --between
-
- These set justify-content. Default is flex-start.
-
default (flex-start)
- .sf-cluster--center
- .sf-cluster--end
- .sf-cluster--between
- .sf-cover--padding-l
-.sf-fade-out
-
- The animation ends at opacity: 0 with animation-fill-mode: both, so the target stays hidden after playing. Click the button to (re)apply the animation to the box on its right.
-
Accessibility
- -Skip Link
-A .skip-link is at the very top of this page. Press Tab from the browser address bar to reveal it — it appears above the header.
Focus Ring (accessibility.css)
-Tab through these elements to verify :focus-visible ring (2px solid, 2px offset, action color). The ring uses !important so it's never overridden.
Details summary
-Details content.
-.sr-only
-Hidden from sighted users but available to screen readers: [THIS TEXT IS SCREEN-READER ONLY — not visible] (check with DevTools or a screen reader)
- -Disabled States
-Touch Targets (pointer: coarse)
-On touch devices, a, button, input, select, summary automatically get min-height: var(--sf-touch-target) = var(--sf-size-l) = 2.75rem (≈44px). No extra classes needed.
High Contrast & Reduced Transparency
-
- prefers-contrast: more → thicker focus ring (3px), thicker <hr>.
- prefers-reduced-transparency: reduce → backdrop becomes solid.
- These are handled automatically by accessibility.css.
-
Color Scheme Token
-
- --sf-color-scheme: light dark controls the browser's native UI color adaptation (scrollbars, form controls). Override to only light or only dark to lock the mode at the browser level.
- Used by both reset.css and base.css.
-
Layout — Stack
-.sf-stack — flex column with uniform gap. Modifier suffix sets gap size.
.sf-stack--xs
- .sf-stack--m
- .sf-stack--xl
- Override gap: style="--sf-stack-gap: 2rem"
Layout — Cluster
-.sf-cluster — flex wrapping group with uniform gap. Ideal for tags, buttons, inline groups.
Alignment modifiers: --center, --end, --between, --no-wrap
Layout — Switcher
-.sf-switcher — switches between row and column layout at a container threshold. No media queries.
Threshold: --sf-switcher-threshold (default from tokens). Below threshold → stacks vertically.
Layout — Grid
-.sf-grid — auto-fill CSS grid. Responsive without any media queries.
Override: --sf-grid-min (min column width), --sf-grid-gap. Modifier: .sf-grid--fit (auto-fit). Fixed columns: .sf-grid-cols-2, .sf-grid-cols-3, .sf-grid-cols-4
Layout — Cover
-.sf-cover — full-height flex column. .sf-cover__center child is vertically centered via margin-block: auto.
Top content
-Bottom content
-Default --sf-cover-min-height: 100dvh — overridden to 16rem here for demo.
Layout — Frame
-.sf-frame — aspect-ratio container. Media children use object-fit: cover.
sf-frame--video (16:9)
- sf-frame--square (1:1)
- sf-frame--portrait (3:4)
- sf-frame--cinema (21:9)
- Layout — Reel
-.sf-reel — horizontal scroll container with scroll-snap-type: x mandatory. Scroll to snap cards.
Override: --sf-reel-item-width, --sf-reel-gap, --sf-reel-height
Layout — Prose
-.sf-prose — long-form text rhythm. Adds margin-block-start: var(--sf-prose-paragraph) between children. Restores list styles.
Prose Heading
-The .sf-prose class provides automatic vertical rhythm for long-form content. All direct children receive spacing automatically — no extra margin classes needed.
Lists Are Restored
--
-
- List items get
list-style: discback (reset removes it)
- - Nested list indentation is preserved -
- Marker color follows
--sf-prose-marker-color(defaults to--sf-color-primary)
-
-
-
- Ordered lists work too -
- Each step is clearly numbered -
- A blockquote inside prose gets consistent margin-block spacing from the surrounding paragraphs. --
Use .sf-not-prose on a child to opt out of prose spacing for that element.
Layout — Container & Section
-.sf-container — centered max-width with horizontal gutters. Declares a named inline-size container sf-layout, so consumers can target it precisely with @container sf-layout (...) in their own CSS. .sf-section adds vertical padding.
sf-container--narrow (38rem)
- sf-container--prose (65ch)
- sf-container (75rem default)
- .sf-section modifiers: --xs, --s, --m, --l, --xl, --2xl. Combine: <section class="sf-section--m"><div class="sf-container">
Layout — Bento
-.sf-bento — free-form dense grid. Parent needs container-type: inline-size for responsive column collapse.
(span 2 col, 2 row)
Override: --sf-bento-cols (default 4), --sf-bento-row (row height). Column modifiers: .sf-bento--2, .sf-bento--3, .sf-bento--6. Row modifiers: .sf-bento--row-compact, .sf-bento--row-tall. Child span modifiers: .sf-bento-wide (col span 2), .sf-bento-tall (row span 2), .sf-bento-featured (2×2), .sf-bento-full (full width).
.sf-bento-featured
.sf-bento-wide
.sf-bento-tall
Column modifiers below use .sf-bento--2, .sf-bento--3, .sf-bento--6
Layout — Alternate (zigzag)
-.sf-alternate — alternating two-column rows. Below 48em (own container width) it stacks; above, every other row reverses its children. Declares the named container sf-alternate and binds the flip query to that name — so a nested .sf-alternate reacts to its OWN width, not its outer container's.
Standard order: leading column on the left, text on the right (above 48em).
-Even row — children swap order via order: 2 / 1.
Back to standard order.
-Smoke test — .sf-alternate nested inside .sf-bento
- Phase 4 contract: the inner .sf-alternate's flip query is bound to the sf-alternate name, so it reacts to the bento cell's intrinsic width — not the outer page container. The cell below is wide enough (a span-2 bento cell) to flip into the two-column layout independently of viewport width.
Wide cell (span 2) — contains a .sf-alternate
Layout — Content Grid
-.sf-content-grid — named column grid. Children default to content column. .sf-breakout spans wider. .sf-full-bleed spans edge-to-edge.
Normal content column — max-width: --sf-content-width
.sf-breakout — spans --sf-breakout-width
- .sf-full-bleed — edge to edge
- Back to content column.
-Layout — Pancake
-.sf-pancake — 3-row grid (auto 1fr auto) for sticky-footer layouts. Default min-height: 100dvh.
This demo is capped at 18rem. In production: min-height: 100dvh on <body>.
Reset & Base
- -Form Elements (reset.css + base.css)
-Table (reset: border-collapse)
-Selection Color
-Try selecting this text to see --sf-color-selection-bg in action. The highlight color adapts in dark mode.
List Reset
-reset.css sets list-style: none on menu, ul, ol. Outside .sf-prose, styles must be applied manually:
-
-
- This list has manually re-applied
list-style: disc
- - Inside
.sf-prose, styles are restored automatically
-
HR & Separator
--
Above: standard <hr> with border token. High-contrast mode thickens it automatically.
Box Model (reset.css)
-All elements: box-sizing: border-box. Media (img, video, svg): display: block; max-width: 100%. Margins/padding removed globally. scrollbar-gutter: stable prevents layout shift.
- SLASHED's print stylesheet preserves authored colour by default — open print preview (Cmd/Ctrl + P) to compare. Two opt-in classes adjust the contract: .print-color-exact forces colours when the browser would flatten them, .print-no-color opts back into ink-on-paper.
-
Default — authored colour survives
-
- Highlighted text in <mark> stays yellow in print.
- Success-coloured text stays green.
- Danger-coloured text stays red.
- External links carry their href in parentheses: visit the SLASHED repo.
-
.no-print — vanishes from print
-- The badge below disappears from printed output: - SCREEN-ONLY -
- -.print-color-exact — force colour preservation
-print-color-adjust: exact guarantees the tinted background reaches paper.
- .print-no-color — opt back into ink-on-paper
-Manual verification checklist
-Open print preview and confirm each of the following.
--
-
<mark>retains its yellow background (the test for F-04).
- - Success, danger and warning text retain their colour. -
- The SCREEN-ONLY badge is absent. -
- The
.print-color-exactcallout retains its tinted background.
- - The
.print-no-colorcallout has lost its background.
- - The repo link shows its
hrefin parentheses.
- - The
Open print previewbutton below is absent (it carries.no-print).
-
- -
-Macros
-
- Recipes / patterns from core/macros.css.
- Macros answer "what does this element do?" — distinct
- from layout primitives, which answer "where do my children go?".
-
.sf-content-auto — skip offscreen rendering
-
- Sets content-visibility: auto so the browser skips layout and paint for this
- section while it is offscreen on a long page. contain-intrinsic-size (token
- --sf-content-intrinsic-size) reserves a placeholder box so the scrollbar
- doesn't jump. Unsupported engines render it normally.
-
This block is render-deferred until it nears the viewport. On long product or article - pages, applying it to repeated sections measurably cuts initial render cost.
-.sf-tabular-nums — column-aligned figures
-
- Fixed-width digits (font-variant-numeric: var(--sf-font-numeric)) so numbers
- line up in columns — prices, totals, invoices.
-
.sf-flow — equal vertical rhythm
- First child has no top margin (only siblings get the rhythm).
-Second child gets margin-block-start: var(--sf-flow-space).
So does every subsequent child. Override with the token.
-.sf-truncate — single-line ellipsis
- .sf-line-clamp-2 / -3 / -N
- - 2 lines: Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation. -
-- 3 lines: Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation. -
-- 4 lines (via --sf-line-clamp): Lorem ipsum dolor sit amet, - consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. -
-.sf-aspect — generic ratio container
- .sf-equal-height — children stretch to tallest
- lines.
lines
here.
.sf-scroll-shadow — top + bottom mask gradient
- Scroll inside this box.
-The mask gradient fades the top and bottom of the content.
-It's pure CSS — no scroll listener.
-Override --sf-scroll-shadow-size to tune the fade depth.
Pairs nicely with overflow-y: auto on tables, lists, code blocks.
Also useful inside cards with overflowing comment threads.
-Keep scrolling — the bottom edge fades the same way.
-Final paragraph for proof.
-.sf-scroll-snap — vertical scroll-snap container
- .sf-overflow-fade — end-edge mask
- .sf-overflow-fade--* — directional variants
- line two
line three
line four
line five
line two
line three
line four
line five
line two
line three
line four
line five
.sf-no-tap-highlight — suppress mobile tap overlay
-
-
- .sf-clickable-parent — full-card click target
-
- Automatic mode — one link, no extra attributes. Click anywhere on the card to navigate;
- the button remains independently clickable. Tab to the card to see the built-in card-level focus ring
- (no separate sf-focus-parent recipe needed).
-
Click anywhere on this card to navigate
-The entire card surface is the click target — heading, body text, list, and padding.
--
-
- Click here too — the whole card is the link -
- Explicit mode — multiple links. Add data-overlay-link to the primary link;
- all other links and buttons are lifted above the overlay automatically — no manual z-index work required.
-
Primary link — click card surface to navigate here
-Click on paragraph text or card padding → primary link. Secondary links and the button stay independent.
-
- Class mode (.sf-clickable-parent__overlay) — alternative to data-overlay-link; resolves nesting fragility when secondary links live at different depths.
-
Primary link via class overlay
-Click anywhere on the card to follow the primary link.
-.sf-surface--* — auto-flipped foreground
- .sf-text-gradient — gradient-clipped text
- Headline gradient
- -.sf-link-external — external-link indicator
-
- See the external project
- for more — the marker is configurable via --sf-link-external-marker.
-
.sf-link--subtle / .sf-link--reverse — underline affordance
- The variant classes toggle only the underline line; its geometry comes from base a:link via --sf-link-underline-offset / --sf-link-underline-thickness.
- A subtle link hides its underline until hover/focus, while a - reverse link is underlined at rest and clears on hover. -
- -.sf-scrim — text-over-image legibility
- Gradient overlay between an image and its text. Direction modifiers .sf-scrim--top / .sf-scrim--bottom, or an even wash with .sf-scrim--full. Retune via --sf-scrim-color / --sf-scrim-direction / --sf-scrim-gradient.
.sf-bg-layer — background-layer primitive
- Absolutely-positioned cover layer that sits behind a parent's content. The parent auto-promotes to a positioned stacking context via :has(). Compose under .sf-scrim for background → gradient → content layering.
.sf-overlap / .sf-overlap-host — intentional overlap recipe
- One element pulled up over the next, which reserves clearance for it automatically.
-.sf-overlap-host — content clears the badge above
- Directional variants: .sf-overlap--down (pulls into the next element), .sf-overlap--start / .sf-overlap--end (pulls into the inline edge).
Macros in action — a composed profile card
-A realistic card built from the overlap recipe: a banner with an avatar overlapping into the body below (.sf-overlap / .sf-overlap-host).
Design Systems Lead
-.sf-focus-shadow — box-shadow focus ring (opt-in)
- Tab to this link: the focus indicator follows the rounded corner via box-shadow: var(--sf-focus-ring-shadow) instead of the default outline.
- Focusable pill -
- -.sf-section--collapse — adjacent sections share padding
-
-
- .sf-section--guttered — section carries the gutter
- Adds padding-inline: var(--sf-gutter) to the section itself while zeroing it on any nested .sf-container, preventing double-guttering.
.sf-entrance--* — scroll-driven entrance
- Animations require animation-timeline: view() support (Chrome 115+, Firefox flag-gated). Refresh and scroll to see effects in supported engines.
.sf-exit--* — scroll-driven exit
- Symmetric counterpart of .sf-entrance--*: fires as the element scrolls out of view. Requires animation-timeline: view() support — engines without it render these statically (no unconditional fade-to-hidden fallback).
Page 1 — Colors & Theming
-- All colours below are auto-derived from 11 overridden source tokens - (6 brand + 5 status) declared inline. Toggle dark mode to verify the relative-colour - dark derivations. Resize the window to verify fluid behaviour. -
- -Brand resolved colours
-Per-colour variant ladders
-Each brand/status colour exposes the same functional variant set: superlight · xlight · lighter · (base) · darker · xdark · superdark · hover · active · subtle · muted · tint plus strong for status colours.
primary
-secondary
-tertiary
-action
-neutral
-base
-Status colours
-Resolved + strong + on-colour
-Status triplets — subtle bg / strong text / muted border
-Semantic surfaces & text
-Surfaces
-Interaction backgrounds
-Text hierarchy
---sf-color-text (primary)
---sf-color-text--secondary
---sf-color-text--muted
---sf-color-text--placeholder
---sf-color-text--disabled
---sf-color-heading
-On-colour text (auto black/white for WCAG)
-Borders
---sf-color-border--sf-color-border--subtle--sf-color-border--strong--sf-color-border--focus--sf-color-border--disabled--sf-color-border--translucentLink / code / mark / selection
-inline code (--sf-color-code-bg / -text)
- mark (--sf-color-mark-bg)
- selection sample
- Palette numeric & alpha scales (core/tokens.css)
- -primary 50–950
-primary alpha a5–a80 (over a checker)
-secondary / tertiary / action / neutral / base — 500 & key steps
-Gradients
-Fade gradients (t / b / l / r)
-Scoped themes — nested data-theme
-Each region re-declares mode-sensitive tokens, so colours/text/borders switch per section.
- -data-theme="dark"
- data-theme="light" nested in dark
- Contrast bias knob
-Page 2 — Typography & design tokens
- -Heading elements (base.css h1–h6)
-h1 — The quick brown fox
-h2 — The quick brown fox
-h3 — The quick brown fox
-h4 — The quick brown fox
-h5 — The quick brown fox
-h6 — The quick brown fox
-Fluid text scale (--sf-text-*) — resize to see clamp()
-Font weights 300–700
-Semantic weight aliases
-Font stacks
-Line heights (--sf-leading-*)
-tight (1.1)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do.
-snug (1.3)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do.
-normal (1.5)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do.
-relaxed (1.625)
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do.
-Letter spacing (--sf-tracking-*)
-Semantic inline elements + pre
-
- strong, em, mark, code,
- Ctrl + C, CSS,
- H2O, E=mc2, small,
- link, deleted, inserted
-
:root {
- --sf-color-primary-light: oklch(0.55 0.22 160);
-}- A blockquote — select this text to verify selection colour. --
Spacing scale
-Fluid tokens use clamp() — resize to animate.
-Sizes (--sf-size-*) & touch target
-Shadows
-Text shadows
-Drop shadows (filter)
-Border radius
-0
2px
4px
8px
12px
16px
24px
32px
48px
Border widths & styles, strokes
-Border styles & composed border tokens
-SVG stroke widths (inline — set stroke-width directly)
-Blur & opacity
-Backdrop / filter blur
-Opacity tokens
-Motion tokens (durations, easings, transitions)
-Hover a row to trigger the transition; the easing/duration token is named on the left.
- -Durations (hover to move)
-Easings (hover to move)
-Transition tokens (hover the card)
-Z-index, perspective & ratios
- -Z-index ladder
-Perspective (near / normal / far)
-Aspect ratios
-Page 3 — Layout primitives
-Stack — gap sizes & alignment
-Cluster
-Gap sizes
-Justify modifiers
-Sidebar
-Switcher
-Grid — auto-fill min-width tiers
-Fixed-column grids
-Ratio grids
-Subgrid
-Equal — never-collapsing fixed columns
-Gap — display-agnostic gap injection
-Container, center & box
-Center
-Box
-Section padding scale & groups
-Section group (collapsed gaps) + collapse modifier
-Cover
-top
-bottom
-top
-bottom
-Frame — aspect-ratio media boxes
-Reel — horizontal scroll-snap strip
-Bento
-Modifiers
-Alternate — zigzag rows
-standard order
flipped
standard
Content grid — breakout / full-bleed
-Normal content column.
-Back to content column.
-Pancake — sticky-footer grid
- -Imposter — absolute centred overlay
-A .sf-imposter--fixed element is positioned relative to the viewport:
Divider
-Icon sizing
-Inline icon scales with font-size: Text inline
-Page 4 — Macros: surfaces
-Text & link macros
- -sf-text-gradient
-Gradient headline
- -sf-text-protect (over photo)
-Protected text
-sf-truncate / line-clamp
-This is a very long single line that will be truncated with an ellipsis once it overflows its inline size box.
-Two-line clamp. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.
-Three-line clamp. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation.
-Four-line clamp (--sf-line-clamp: 4). Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris.
- -Links
- - -sf-tabular-nums
-| Item A | 1,234.50 |
| Item B | 9,876.10 |
| Item C | 42.00 |
sf-no-tap-highlight
- Tap me on mobile (no grey highlight) -Prose, flow & not-prose
-Prose heading
-Automatic vertical rhythm for long-form content. Direct children get spacing automatically.
-- Restored bullets
- Nested indentation preserved
- Ordered too
- Numbered steps
A blockquote inside prose gets consistent spacing.-
Back to prose body.
-sf-flow (lobotomized owl)
-First (no top margin)
-Second (gets flow-space)
-Third (gets flow-space)
-Scroll, overflow & aspect macros
- -sf-scroll-shadow (vertical)
-Scroll this box. Fade masks appear at top and bottom edges.
-Line 2
Line 3
Line 4
Line 5
Line 6
Line 7 (bottom)
-sf-scroll-snap (vertical)
-sf-overflow-fade (horizontal)
- - -sf-aspect & sf-equal-height
-lines
lines
here
sf-content-auto
-This section uses content-visibility: auto to skip offscreen rendering.
Scrim variants
---bottom
--top
--full
-State classes (.sf-is-*)
-Visibility / layout states
-line
line
line
line
Positioning helpers: .sf-sticky and .sf-overlay are demonstrated below.
Accessibility helpers
- -sf-focus-parent (rings when a child is focused)
-sf-clickable-parent (whole card clickable via child link)
-sf-focus-shadow (box-shadow focus ring on rounded element)
- - -sr-only-focusable
-The skip link at the very top of the page uses .sr-only-focusable — Tab from the address bar to reveal it.
.no-motion subtree
-Motion — entrance, loop & special
-All motion is gated behind prefers-reduced-motion: no-preference.
Entrance animations
-Staggered with delay tokens
-Loop / one-shot animations
-sf-color-pulse (animates primary lightness via @property)
-Named animation tokens applied directly
-Page 5 — Classless forms (optional/forms.css)
- -Feature — container queries
-Drag the resize handle (bottom-right) to change the container width and watch the box react — no media queries.
-Feature — scroll-driven entrances
-In engines that support animation-timeline: view() these animate as they scroll into view; elsewhere they fall back to a one-shot time animation.
Feature — modern colour functions
-light-dark()
-light-dark()Relative colour syntax (oklch from)
-color-mix()
-Feature — selection & scrollbar styling
-Select this paragraph to see ::selection using --sf-color-selection-bg. The framework also sets --sf-scrollbar-thumb / --sf-scrollbar-track.
Scrollable region — note the themed scrollbar.
-tall content…
-Feature — focus ring tokens
-Tab through these to see --sf-focus-ring-* (color/width/offset/style) and the box-shadow ring variant.
Feature — cascade layers & @property
-Framework declares layer order: slashed.reset, slashed.tokens, slashed.base, slashed.themes, slashed.layout, slashed.components, slashed.macros, slashed.states, slashed.motion, slashed.accessibility, slashed.forms, slashed.utilities, slashed.overrides. Registered @property custom properties (e.g. --sf-is-dark, --sf-is-active) drive interpolation and conditional logic.
--sf-is-dark, --sf-is-open, --sf-is-active, --sf-is-pressed, --sf-is-currentRemaining token groups
- -Per-heading tokens (h1–h6 size/weight/tracking/leading)
-Layout tokens overridden inline
-Macro tokens overridden inline
---sf-scroll-shadow-size: 3rem
-tall…
-Header height & sticky offset tokens
-Feature — print
-Use the browser Print Preview (Ctrl/Cmd+P) to verify the slashed.print layer: optimized page margins (--sf-print-page-margin), base size (--sf-print-base-size), and external-link URL expansion.
This is an external link — in print, its URL is appended after the text.
-Feature — high contrast & reduced motion
-Enable OS "increase contrast" to see --sf-contrast-bias auto-raise and borders thicken. Enable "reduce motion" to see all animations on page 4 go inert.
prefers-contrast: more.Full token reference — tokens
-Every --sf-* token resolved live via getComputedStyle. Colour-valued tokens show a swatch; toggle dark mode to verify auto-derivation across modes. Filter by name below.
- Manual visual-coverage pages exercising every framework feature against
- the published slashed.full.css bundle. Each page is a
- standalone document with its own page-scoped token overrides, so they
- are kept as separate files and linked from here.
-
- The automated coverage guarantee lives in tests/ (Playwright)
- against docs/demo.html; these pages are for manual review.
-
SLASHED — CQ Layout + Dark/Light Tests
- -
- Each CQ layout is shown at three explicit widths (384 px / 608 px / 800 px) inside
- container-type: inline-size wrappers. Font-size is pinned to 16 px so
- 30 em = 480 px and 48 em = 768 px are stable. The alternate layout is self-sizing
- (named container). Toggle theme to verify dark/light token switching.
-
Bento — container-query responsive
-
- .sf-bento uses unnamed @container queries
- so it reads its ancestor container's width.
- • ≤29.99em → 1 col • 30–47.99em → 2 cols • ≥48em → default 4 cols
-
Default 4-col bento at 3 widths
-
- JS ✓/✗ badges use gridTemplateColumns to count explicit columns.
- Plain children only (no sf-bento-wide) to avoid implicit track noise.
-
384 px (24 rem) → expect 1 col
-608 px (38 rem) → expect 2 cols
-800 px (50 rem) → expect 4 cols
-Bento column modifiers (.sf-bento--2 / --3 / --6)
-24 rem → all collapse to 1 col (CQ override)
---2
---3
---6
-38 rem → all forced to 2 col by CQ
---2
---3
---6
-full width → each uses its own col count
---2
---3
---6
-Bento child span modifiers (.sf-bento-wide / tall / featured / full)
-2col × 2row
(2 row)
Fixed-column grids — container-query responsive
-
- .sf-grid-cols-2/3/4/6 use unnamed @container
- queries — same ancestor-width rule as bento.
- • ≥30em: 4-col→2col, 6-col→3col • ≥48em: full target columns
-
24 rem → all single-column (below 30em)
-sf-grid-cols-2
-sf-grid-cols-3
-sf-grid-cols-4
-sf-grid-cols-6
-38 rem → 4-col→2 cols, 6-col→3 cols (30–48em range)
-sf-grid-cols-2 (still 1 col — breaks at 48em)
-sf-grid-cols-3 (still 1 col — breaks at 48em)
-sf-grid-cols-4 → 2 cols
-sf-grid-cols-6 → 3 cols
-full width → all at target column count
-sf-grid-cols-2 → 2 cols
-sf-grid-cols-3 → 3 cols
-sf-grid-cols-4 → 4 cols
-sf-grid-cols-6 → 6 cols
-Ratio grids (1-2, 2-1, 1-3, 3-1) — also use unnamed @container
-24 rem → all single-column (below 48em)
-38 rem → still single-column (below 48em)
-full width → two-column with correct ratios
-Alternate (zigzag) — self-sizing via named container
-
- .sf-alternate uses @container sf-alternate (min-width: 48em)
- — a named query so it responds to its OWN inline-size, no ancestor needed.
- • Below 48em → stacked (single column per row) • ≥48em → 2 cols, even rows reversed
-
24 rem → single-column (stacked)
-normal order
would flip ≥48em
normal order
38 rem → still stacked (below 48em)
-normal order
would flip ≥48em
normal order
full width → 2-col zigzag; even rows (2nd) flip image right
-image leads (order:0)
text leads, image flipped right
image leads again
Alternate nested inside narrow bento cell — CQ isolation check
-
- Outer container is narrow (24rem). Bento creates its named sf-bento
- context. The alternate inside should still query its OWN width (also 24rem here),
- so it should stay stacked — not get confused by the bento's container context.
-
Dark / Light nesting — multi-level
-
- Each [data-theme] block auto-resets its own background and text color.
- Swatches show resolved token values — they must visually differ between light and dark zones.
-
data-theme="light" (level 1)
-
- Text is var(--sf-color-text). Should be dark on a light background.
-
data-theme="dark" (level 2)
-- Should be dark background, light text. Primary should be lighter/brighter. -
- - -data-theme="light" (level 3 — inside dark)
-- Should revert to light theme. Same visual as level 1. -
- - -no data-theme (level 4 — inherits level 3 light)
-- No theme set — should inherit light from parent. - Background is transparent so the parent's bg shows through. -
-data-theme="dark" (level 4 — nested dark inside light)
-- Should be dark again. 4 levels deep — dark/light/light/dark. -
-no data-theme (level 3 — inherits level 2 dark)
-- No theme set — should look dark (inherits L2). -
-data-theme="dark" (level 2, sibling — isolated from sibling above)
-- Sibling dark block — should also be dark, independent of the previous block. -
-sf-is-active / sf-is-current state flags inside dark and light
-light
- -dark
- -