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

Source brand and status colors for light mode — the full palette, surfaces and text contrasts are derived from these live.

Brand

--sf-color-primary --sf-color-secondary --sf-color-tertiary --sf-color-action --sf-color-neutral --sf-color-base

Status

--sf-color-success --sf-color-warning --sf-color-info --sf-color-danger

Dark mode

The same source colors for dark mode — set independently so dark mode isn't just an inversion of light.

Brand

--sf-color-primary --sf-color-secondary --sf-color-tertiary --sf-color-action --sf-color-neutral --sf-color-base

Status

--sf-color-success --sf-color-warning --sf-color-info --sf-color-danger

Colors

Brand — light mode (base values)

The core brand roles every component pulls from — set these first; most other colors are derived from them.

primary

secondary

tertiary

action

neutral

surface

Semantic Surfaces

Background layers for elevation — page bg, raised cards, insets and overlays. Use to separate depth, not for decoration.

surface

inset

raised

overlay

inverse

Status Colors

Feedback hues for success, warning, info and danger states. Use for alerts, badges and validation — not general accents.

success

warning

info

danger

Status Triplets

Each status ships a subtle / base / strong trio — subtle for fills, base for text and icons, strong for emphasis or borders.

Success

Warning

Danger

Info

Text Hierarchy

Text-color roles from primary body down to disabled — use to signal importance, never to hardcode a grey.

--sf-color-text (primary)

--sf-color-text--subtle

--sf-color-text--muted

--sf-color-text--placeholder

--sf-color-text--disabled

--sf-color-heading

Borders

Border-color roles from subtle to strong — pick by how much separation the edge should carry.

--sf-color-border

--sf-color-border--subtle

--sf-color-border--strong

--sf-color-border--focus (action color)

Gradients

Ready-made brand gradients for hero fills, accents and text clipping. Pair with .sf-text-gradient for headline effects.

gradient-primary

gradient-secondary

gradient-tertiary

gradient-brand

gradient-surface

Palette Numeric Scale 50–950 (core/tokens.css)

The raw stepped palette behind the semantic roles — reach for a specific step only when no semantic token fits.

100

200

300

400

500

600

700

800

900

950

Alpha Scale a5–a80

Translucent neutrals (5–80% alpha) for overlays, hovers and dividers that tint whatever sits behind them.

a10

a30

a50

a80

Semantic & Functional Aliases

Named shortcuts (link, focus, selection, code…) mapped to the palette — use these in components so a re-theme flows through.

superlight

xlight

lighter

darker

xdark

superdark

hover

active

subtle

muted

tint

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"`

Any subtree can pin its own theme with data-theme — colors recompute from the scoped source, no utility classes needed.

primary

secondary

tertiary

action

neutral

surface

--sf-color-text (primary)

--sf-color-text--subtle

--sf-color-text--muted

Success

Warning

Danger

Light section (nested) `data-theme="light"`

Themes nest — a light island inside a dark section just works, each level resolving its own palette.

primary

secondary

tertiary

action

neutral

surface

--sf-color-text (primary)

--sf-color-text--subtle

--sf-color-text--muted

Success

Warning

Danger

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.

Smooth theme transition

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.

.sf-theme-dark

Auto-light text, and a themed link.

.sf-theme-light

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".

Composed background preset

Typography

Heading Scale (base.css)

Default h1–h6 sizes, weights and leading applied to bare heading tags — the classless baseline for document typography.

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.

2xs — The quick brown fox jumps over the lazy dog

xs — The quick brown fox jumps over the lazy dog

s — The quick brown fox jumps

m (base) — The quick brown fox

l — The quick brown fox

xl — The quick brown

2xl — The quick

3xl — Quick

4xl

display-s

display-m

display-l

Font Weights — base weights + semantic roles

The weight ramp plus semantic aliases (body, heading, strong) — reference the role, not the number, so a font swap stays consistent.

300 light — The quick brown fox 400 normal — The quick brown fox 500 medium — The quick brown fox 600 semibold — The quick brown fox 700 bold — The quick brown fox

Semantic roles (override to reweight the whole site):

body — The quick brown fox interactive — buttons, badges, nav heading — section titles strong — inline emphasis display — hero headlines

Semantic Weight Aliases & Font Stacks

Font-family and weight roles (body, heading, mono) — the single place to retarget typefaces across the system.

body heading display

humanist — The quick brown fox jumps geometric — The quick brown fox jumps slab — The quick brown fox jumps mono — The quick brown fox jumps

Line Heights (--sf-leading-*)

Leading scale from tight (headings) to loose (long-form) — pick by line length and text size for comfortable reading.

--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 scale — tighten large display text, open up all-caps or small labels. Body copy stays at normal (0).

tracking-tight — THE QUICK BROWN FOX JUMPS OVER

tracking-normal — THE QUICK BROWN FOX JUMPS OVER

tracking-wide — THE QUICK BROWN FOX

tracking-wider — THE QUICK BROWN

tracking-widest — THE QUICK

Semantic Elements (base.css)

strong, em, mark highlight, inline code, Ctrl + C, CSS, H₂O, E=mc², 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

Default, hover, visited and active link colors on bare <a> — a consistent affordance with no utility class.

default link hover state visited state active state

Spacing

All fluid tokens use clamp() — resize the window to see bars animate.

--sf-space-none

0

--sf-space-px

--sf-space-2xs

--sf-space-xs

--sf-space-s

--sf-space-m

--sf-space-l

--sf-space-xl

--sf-space-2xl

--sf-space-3xl

--sf-space-4xl

Spacing Aliases

Semantic gap names (gap, content-gap…) that resolve to the space scale — use these in layout so rhythm stays uniform.

--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.

shadow-none

shadow-xs

shadow-s

shadow-m

shadow-l

shadow-xl

shadow-2xl

shadow-inner

shadow-glow

Text Shadows

Text-shadow scale for legibility over busy backgrounds or subtle heading depth — keep it restrained on body copy.

text-shadow-xs text-shadow-s text-shadow-m text-shadow-l text-shadow-xl

Drop Shadows (filter — follows alpha edges)

filter: drop-shadow that hugs an element's actual alpha shape — for icons, cut-outs and PNGs where box-shadow would look wrong.

3D Perspective

Perspective and transform tokens for depth — tilt cards or build 3D hovers without hand-tuning matrices.

Border Radius

All values multiplied by --sf-radius-scale (1 by default).

none
0

xs
2px

s
4px

m
8px

l
12px

xl
16px

2xl
24px

3xl
32px

4xl
48px

full
9999px

Motion & States

Reduced motion active — Your OS has reduced motion enabled. Animations are paused (duration: 0.01ms via 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.

Link transition

Easing Curves

The easing vocabulary (out, in-out, spring…) — match the curve to the gesture: ease-out for entrances, in-out for moves.

ease-linear

ease-out

ease-in

ease-in-out

ease-spring

ease-elastic

ease-bounce

ease-overshoot

Animation Presets (motion.css — click to replay)

Drop-in entrance and attention animations — add one class to play. All respect prefers-reduced-motion.

`.sf-stagger` (motion.css — parent choreographs children's `animation-delay`; click to replay)

Put on a parent so its children's entrance animations play in sequence — choreography only; each child still brings its own animation.

@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.

.sf-color-pulse — animating --sf-color-primary-source-light

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.

--sf-duration-instant

--sf-duration-fast (default)

--sf-duration-normal

--sf-duration-slow

--sf-duration-slower

States (states.css)

The .sf-is-* state vocabulary — a shared, framework-wide way to mark active/open/valid/busy so CSS and JS agree.

.sf-is-loading

.sf-is-shimmer

.sf-invisible / .sf-visible (optional/utilities.css)

visible invisible (visibility:hidden) .sf-visible (force visibility:visible)

States — Full Coverage

Every .sf-is-* class from states.css. Grouped by category.

Navigation & Toggling

States for nav and toggles — .sf-is-selected / -highlighted mark what the user picked.

.sf-is-selected .sf-is-highlighted

Validation / Feedback

Form-field states — .sf-is-valid / -invalid / -required drive inline validation styling.

.sf-is-valid .sf-is-invalid .sf-is-warning .sf-is-success .sf-is-error .sf-is-info

Drag & Drop

Drag-and-drop states — mark the dragged item and valid drop targets while a drag is in progress.

.sf-is-dragging .sf-is-drop-target .sf-is-draggable

Overlay

Overlay positioning for modals, drawers and popovers — pair with your own open/closed class or [open]/aria-expanded (see the mobile nav drawer in this page's header for a worked example).

.sf-overlay

Interactivity

Signal that an element is temporarily inert.

.sf-is-disabled

.sf-focus-parent (focus the input → parent rings)

Empty State

.sf-is-empty styles a zero-content region — for empty lists, search results and blank slates.

.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 (centered)

.sf-imposter--contain (clamps to 100% − 2 × --sf-imposter-margin in both axes; overflow: auto kicks in only when the content is larger than that box)

.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.

Subgrid col 1

Subgrid col 2

Regular col

.sf-subgrid-rows works the same for row tracks.

.sf-section-group

Groups adjacent .sf-section elements with zero gap between them.

Section A (--s padding)

Section B (--s padding)

.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.

Left Right

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

Left Middle Right

.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.

span 2

.sf-cover modifiers

Padding variants for the cover primitive — tune the breathing room around a hero's centered content.

.sf-cover--min

min

.sf-cover--max

max

.sf-cover--padding-s / --padding-l

pad-s

.sf-cluster--no-wrap / .sf-switcher--no-wrap / .sf-switcher--vertical

Opt out of wrapping/switching — keep a cluster or switcher on one row when scrolling beats reflow.

.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)

Full width row

.sf-grid-cols-1-2 (1fr 2fr)

1fr

2fr

.sf-grid-cols-2-1 (2fr 1fr)

2fr

1fr

.sf-grid-cols-1-3 (1fr 3fr)

1fr

3fr

.sf-grid-cols-3-1 (3fr 1fr)

3fr

1fr

.sf-cq — container query scope

Establishes an inline-size container context so children can use container queries.

container-type: inline-size

.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)

One-shot shrink-in animation for de-emphasis or dismissal — respects reduced-motion.

.sf-center / .sf-center--intrinsic

Flex-center children on both axes; add --intrinsic to shrink the box to its content instead of filling the parent.

.sf-center (max 20rem, auto margins)

.sf-center--intrinsic (flex column, items centered)

.sf-box

The simplest primitive — even padding on all sides via --sf-box-padding. Reach for it when you just need breathing room.

.sf-box — padding + outline border (no box-model disturbance)

.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)

2xl

.sf-sidebar--narrow / .sf-sidebar--wide

Preset sidebar widths — pick one without hand-setting --sf-sidebar-width.

.sf-sidebar--narrow (12rem sidebar)

.sf-sidebar--wide (26rem sidebar)

.sf-container--full / .sf-container--wide

Wider container caps for dashboards and media-heavy pages that need more than the default reading width.

.sf-container--wide (90rem)

wide content (90rem)

.sf-container--full (100%)

full-width content (100%)

.sf-section--xs / .sf-section--l / .sf-section--xl / .sf-section--2xl

Vertical-padding sizes for content bands — set section rhythm from tight to airy.

.sf-section--xs (small vertical padding)

.sf-section--l (large vertical padding)

.sf-section--xl (extra-large vertical padding)

.sf-section--2xl (hero vertical padding)

.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-header--xs

.sf-header--s

.sf-header--m

.sf-header--l

.sf-header--xl

.sf-frame--3-2 / .sf-frame--4-3 / .sf-frame--golden

Named aspect-ratio presets for media frames — common photo ratios without an inline --sf-frame-ratio.

.sf-frame--3-2

3 / 2

.sf-frame--4-3

4 / 3

.sf-frame--golden

golden

.sf-stack alignment: --center / --end / --stretch

Cross-axis alignment for a stack — center, end-align or stretch children without leaving the primitive.

.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

Large-padding cover variant — more generous framing for spacious heroes.

padding-l (4xl)

.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.

Target — watch me fade

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.

Link

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

How disabled controls render — reduced contrast and no pointer affordance, while staying perceivable to assistive tech.

Touch Targets (pointer: coarse)

On touch devices, class-less button, form inputs, select, and summary automatically get min-block-size/min-inline-size: var(--sf-touch-target) = 2.75rem (≈44px). Give a control any class (e.g. .sf-btn, or a third-party widget class) and it owns its own sizing — the floor never overrides styled or third-party markup.

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

Item 1

Item 2

Item 3

.sf-stack--m

Item 1

Item 2

Item 3

.sf-stack--xl

Item 1

Item 2

Item 3

Override gap: style="--sf-stack-gap: 2rem"

Layout — Cluster

.sf-cluster — flex wrapping group with uniform gap. Ideal for tags, buttons, inline groups.

Design tokens

CSS layers

Layout primitives

Fluid typography

Motion

Accessibility

Reset

Base

Alignment modifiers: --center, --end, --between, --no-wrap

Layout — Switcher

.sf-switcher — switches between row and column layout at a container threshold. No media queries.

Column A

Column B

Column C

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.

Layout — Frame

.sf-frame — aspect-ratio container. Media children use object-fit: cover.

sf-frame--video (16:9)

16 / 9

sf-frame--square (1:1)

1 / 1

sf-frame--portrait (3:4)

3 / 4

sf-frame--cinema (21:9)

21 / 9

Layout — Reel

.sf-reel — horizontal scroll container with scroll-snap-type: x mandatory. Scroll to snap cards.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

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: disc back (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)

narrow content

sf-container--prose (65ch)

prose content

sf-container (75rem default)

default content

.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.

Wide + tall
(span 2 col, 2 row)

Wide (span 2)

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).

featured
.sf-bento-featured

wide
.sf-bento-wide

normal

tall
.sf-bento-tall

full width — .sf-bento-full

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.

Image / leading column

Row 1

Standard order: leading column on the left, text on the right (above 48em).

Image / leading column

Row 2

Even row — children swap order via order: 2 / 1.

Image / leading column

Row 3

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

Left → right

Right → left (flipped)

Narrow bento cell

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.

Header (auto height)

Main (1fr — grows to fill remaining space)

This demo is capped at 18rem. In production: min-height: 100dvh on <body>.

Reset & Base

Form Elements (reset.css + base.css)

Bare inputs, selects and textareas styled by reset + base alone — consistent, themeable fields with zero classes.

Text input

Password input

Textarea

Select

Checkbox, Radio (accent-color) Checked checkbox Unchecked Radio A Radio B

Range & Progress Search

Table (reset: border-collapse)

Default table styling — collapsed borders and padded cells straight from the reset, ready for data without a wrapper.

Token	Value	Type
`--sf-color-primary`	`oklch(0.45 0.2 264)`	Brand
`--sf-text-m`	`clamp(1rem, …, 1.125rem)`	Typography
`--sf-space-m`	`clamp(1rem, …, 1.5rem)`	Spacing

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

The default <hr> — a themed divider using border-color tokens; spacing follows the surrounding rhythm.

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.

Print

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

Force backgrounds and colors to print exactly — for charts, badges and status fills that must survive on paper.

Colour-coded callouts that lose meaning when a browser flattens them. print-color-adjust: exact guarantees the tinted background reaches paper.

.print-no-color — opt back into ink-on-paper

Opt a region back into plain ink-on-paper for print — saves toner on decorative fills.

On screen this matches the callout above. In print preview the background goes transparent and text falls back to system colour. Use where ink-saving is the contract (corporate boilerplate forms, append-to-existing-document templates).

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-exact callout retains its tinted background.
The .print-no-color callout has lost its background.
The repo link shows its href in parentheses.
The Open print preview button 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.

1,110.00

98.40

7,001.99

`.sf-flow` — equal vertical rhythm

Adds uniform top-margin to every child after the first — prose-like vertical rhythm from one --sf-flow-space knob.

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

Clips text to one line with an ellipsis — needs a finite width to bite. Use for labels and tight table cells.

This sentence is intentionally too long for the container so the ellipsis will appear — text-overflow ellipsis on a single line.

`.sf-line-clamp-2` / `-3` / `-N`

Clamp text to N lines with an ellipsis — fixed 2/3 variants or --sf-line-clamp for a custom count. Great for card previews.

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

Holds any aspect-ratio from an inline --sf-aspect — content-agnostic, unlike .sf-frame which is media-specific.

`.sf-equal-height` — children stretch to tallest

Makes flex children share the tallest one's height — even card rows without a grid.

Short.

Two
lines.

Three
lines
here.

`.sf-scroll-shadow` — top + bottom mask gradient

Fades content at the top and bottom of a scroll area to hint at hidden overflow — pure CSS, no scroll listener.

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

Snaps each child into place as you scroll — for full-height section decks; use .sf-reel for horizontal snap.

Slide A

Slide B

Slide C

`.sf-overflow-fade` — end-edge mask

Fades the overflowing edge to hint at more content — drop on reels, tag rows and scroll containers.

tag-one tag-two tag-three tag-four tag-five

`.sf-overflow-fade--*` — directional variants

Pick which edge(s) fade — right, left, top, bottom, or a whole axis.

right: tag-one tag-two tag-three tag-four tag-five

left: tag-one tag-two tag-three tag-four tag-five

inline: tag-one tag-two tag-three tag-four tag-five

top: line one
line two
line three
line four
line five

bottom: line one
line two
line three
line four
line five

block: line one
line two
line three
line four
line five

`.sf-no-tap-highlight` — suppress mobile tap overlay

Removes the grey mobile tap flash on custom-styled interactive elements that supply their own active state.

`.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.

Secondary link A Secondary link B

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.

Secondary link

`.sf-surface--*` — auto-flipped foreground

Paint an element in a brand or status family and get an auto-contrasting foreground and matching contextual tokens for free.

primary

secondary

tertiary

action

neutral

inverse

success

warning

info

danger

`.sf-text-gradient` — gradient-clipped text

Clips a brand gradient to the text itself — for headlines and hero words. Keep body copy solid for contrast.

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.

Bottom scrim

Top scrim

Full wash + .sf-text-protect

<img> child

.sf-scrim__content — wrapped img

`.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.

bare .sf-bg-layer div

.sf-bg-layer + .sf-scrim

`.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 variant: .sf-overlap--down (pulls into the next element).

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).

Jamie Chen

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

Removes a section's vertical padding so two same-color bands sit flush — avoids doubled gaps between stacked sections.

Section A — primary surface

Section B — secondary surface (different bg, but content has half-padding from boundary)

`.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-section--guttered — horizontal padding lives on the section, not the container

`.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-entrance--fade

.sf-entrance--fade-up

.sf-entrance--fade-down

.sf-entrance--fade-left

.sf-entrance--fade-right

.sf-entrance--scale-up

`.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).

.sf-exit--fade

.sf-exit--fade-up

.sf-exit--fade-down

.sf-exit--fade-left

.sf-exit--fade-right

.sf-exit--scale-down

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 public

Interactive call-to-action button. Apply to <button> or <a>. Intrinsic width by default; owns its own styling (excluded from the classless <button> look). Three orthogonal axes — colour family, style treatment (fill/--soft/--outline), gradient — plus a size modifier.

.sf-btn--action public

Button in the action colour family (same as the unmodified default, named explicitly).

.sf-btn--base public

Button in the base (surface-neutral) colour family.

.sf-btn--block public

Full-width button (100% inline size) everywhere.

.sf-btn--block-cq public

Full-width button only inside a query container narrower than 20rem; intrinsic otherwise.

.sf-btn--danger public

Button in the danger (destructive) colour family.

.sf-btn--gradient public

Gradient axis: paints the fill (or, with --outline, the border ring) with the family's --sf-gradient-* token. Core-4 brand families (primary/secondary/tertiary/action); solid no-op for other families. Composes with any colour family.

.sf-btn--info public

Button in the info colour family.

.sf-btn--l public

Large button size.

.sf-btn--neutral public

Button in the neutral colour family.

.sf-btn--outline public

Outlined button (coloured border/text, transparent fill) that fills with the family colour on hover. Composes with any colour family.

.sf-btn--primary public

Button in the primary brand colour family.

.sf-btn--s public

Small button size.

.sf-btn--secondary public

Button in the secondary brand colour family.

.sf-btn--soft public

Soft tonal-fill button: a light wash of the family colour (subtle at rest, muted on hover), coloured text, no border. Lower-emphasis than the solid fill. Composes with any colour family.

.sf-btn--success public

Button in the success (positive) colour family.

.sf-btn--tertiary public

Button in the tertiary brand colour family.

.sf-btn--warning public

Button in the warning (caution) colour family.

.sf-btn--xl public

Extra-large button size.

.sf-btn--xs public

Extra-small button size.

`.sf-card` public
Padded content container with optional __header/__body/__footer and __media/__avatar/__title subcomponents. Uses concentric radius math so inner corners stay proportional.

`.sf-card__avatar` public
Circular avatar image inside a card, sized via --sf-card-avatar-size.

`.sf-card__footer` public
Card footer slot with a top divider.

`.sf-card__header` public
Card header slot with a bottom divider.

`.sf-card__media` public
Full-width cover image/video for a card, cropped to --sf-card-media-ratio (16/9 by default).

`.sf-card__title` public
Card title heading, sized via --sf-card-heading-size.

`.sf-card--bordered` public
Flat, outlined card: keeps the border, drops the shadow.

`.sf-card--elevated` public
Floating card: hides the border, applies a larger shadow.

`.sf-card--interactive` public
Adds a pointer cursor and a shadow/translate lift on hover or keyboard focus. Pair with .sf-clickable-parent for a fully clickable card. Lift is suppressed under prefers-reduced-motion.

Layout primitives 145

.sf-alternate public

Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.

text A

media

text B

media

.sf-bento public

Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.

featured

.sf-bento--2 public

Bento grid variant with a 2-column base layout.

featured

.sf-bento--3 public

Bento grid variant with a 3-column base layout.

featured

.sf-bento--6 public

Bento grid variant with a 6-column base layout.

featured

.sf-bento--row-compact public

Bento grid variant with shorter default row height.

featured

.sf-bento--row-tall public

Bento grid variant with taller default row height.

featured

.sf-bento-featured public

Span modifier for a bento item: takes up 2×2 cells (featured hero placement).

sf-bento-featured

.sf-bento-full public

Span modifier for a bento item: stretches across all columns (full-width banner).

sf-bento-full

.sf-bento-tall public

Span modifier for a bento item: doubles the row height (tall card).

sf-bento-tall

.sf-bento-wide public

Span modifier for a bento item: spans 2 columns (wide card).

sf-bento-wide

.sf-bg-layer public

Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg-layer composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare <img class="sf-bg-layer"> or as a wrapper with a nested > img / > video / > picture.

content over bg-layer

.sf-box public

Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.

Box — a padded, bordered surface primitive.

.sf-breakout public

Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.

Prose column.

sf-breakout

More prose.

.sf-center public

Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content.

centered & width-limited

.sf-center--intrinsic public

Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space).

centered & width-limited

.sf-place-center public

Box-neutral centring primitive: display:grid + place-items:center centres an element's content on both axes, without adopting cluster/stack/imposter semantics. Give the box a height for block-axis centring.

centred both axes

.sf-cluster public

Flex-wrap row of variable-width items with automatic gap. Children wrap when the container is too narrow. Use for tag lists, button groups, and icon rows.

OneTwoThreeFourFive

.sf-cluster--2xl public

Cluster variant with 2xl gap between items.

OneTwoThreeFourFive

.sf-cluster--between public

Cluster variant that distributes items with space-between alignment.

OneTwoThreeFourFive

.sf-cluster--center public

Cluster variant that centers the item row horizontally.

OneTwoThreeFourFive

.sf-cluster--end public

Cluster variant that aligns items to the inline end (right in LTR).

OneTwoThreeFourFive

.sf-cluster--l public

Cluster variant with large (l) gap between items.

OneTwoThreeFourFive

.sf-cluster--m public

Cluster variant with medium (m) gap between items.

OneTwoThreeFourFive

.sf-cluster--no-wrap public

Cluster variant that prevents item wrapping (single-line row).

OneTwoThreeFourFive

.sf-cluster--s public

Cluster variant with small (s) gap between items.

OneTwoThreeFourFive

.sf-cluster--xl public

Cluster variant with xl gap between items.

OneTwoThreeFourFive

.sf-cluster--xs public

Cluster variant with xs gap between items.

OneTwoThreeFourFive

.sf-container public

Max-width page container, centered with auto side gutters. Establishes a named inline-size container (cq-container) for container queries. Default width is --sf-container-m.

Container — centres content up to a max width.

.sf-container--full public

Container variant that spans the full viewport width (no max-width cap).

Container — centres content up to a max width.

.sf-container--narrow public

Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms.

Container — centres content up to a max width.

.sf-container--prose public

Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content.

Container — centres content up to a max width.

.sf-container--wide public

Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media.

Container — centres content up to a max width.

.sf-content-grid public

Holy-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column.

Prose column.

breakout

More prose.

.sf-cover public

Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections.

top

centered

bottom

.sf-cover__center public

The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport.

sf-cover__center

.sf-cover--max public

Cover variant that uses a max-height instead of min-height for the viewport constraint.

top

centered

bottom

.sf-cover--min public

Cover variant that reduces the minimum height to half a viewport.

top

centered

bottom

.sf-cover--padding-l public

Cover variant with large vertical padding above and below the centered content.

top

centered

bottom

.sf-cover--padding-s public

Cover variant with small vertical padding above and below the centered content.

top

centered

bottom

.sf-cq public

Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens.

container-query context

.sf-divide public

Rules 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 public

Vertical rules between direct children (inline-start borders), for row/horizontal layouts.

First
Second
Third

.sf-divider public

Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation.

Above

Below

.sf-divider--dashed public

Divider variant with a dashed stroke.

Above

Below

.sf-divider--dotted public

Divider variant with a dotted stroke.

Above

Below

.sf-divider--gradient public

Divider variant rendered as a gradient that fades to transparent at both ends.

Above

Below

.sf-divider--soft public

Divider variant with reduced opacity (subtle separator).

Above

Below

.sf-divider--strong public

Divider variant with stronger/darker color for a more prominent separator.

Above

Below

.sf-divider--vertical public

Divider variant rendered as a vertical line. Use inside flex or grid containers.

Above

Below

.sf-equal public

Flowing CSS multi-column layout (not a grid) — content distributes across columns like a newspaper instead of sitting in fixed cells. Reach for .sf-grid/.sf-grid--fit for discrete grid cells instead.

.sf-equal--2 public

Equal-columns variant locked to column-count: 2.

.sf-equal--3 public

Equal-columns variant locked to column-count: 3.

.sf-equal--4 public

Equal-columns variant locked to column-count: 4.

.sf-equal--6 public

Equal-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…

fluid container-query context

.sf-frame public

Aspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9.

media

.sf-frame--3-2 public

Frame variant locked to a 3:2 aspect ratio.

media

.sf-frame--4-3 public

Frame variant locked to a 4:3 aspect ratio.

media

.sf-frame--cinema public

Frame variant locked to a cinematic 21:9 aspect ratio.

media

.sf-frame--golden public

Frame variant locked to the golden ratio (1.618:1).

media

.sf-frame--portrait public

Frame variant locked to a portrait 2:3 aspect ratio.

media

.sf-frame--square public

Frame variant locked to a square 1:1 aspect ratio.

media

.sf-frame--video public

Frame variant locked to the standard 16:9 video aspect ratio.

media

.sf-full-bleed public

Forces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds.

Prose column.

sf-full-bleed

More prose.

.sf-gap public

Injects the default --sf-gap into an existing flex or grid container without imposing display:flex itself. Use when the parent is already a flex or grid.

.sf-gap--2xl public

Gap injection variant with 2xl gap value.

.sf-gap--l public

Gap injection variant with large (l) gap value.

.sf-gap--m public

Gap injection variant with medium (m) gap value.

.sf-gap--s public

Gap injection variant with small (s) gap value.

.sf-gap--xl public

Gap injection variant with xl gap value.

.sf-gap--xs public

Gap injection variant with xs gap value.

.sf-grid public

Auto-fill CSS grid. Columns are sized with RAM pattern (Repeat, Auto-fill, Minmax) and wrap automatically. Default column min-width is --sf-grid-min-col.

.sf-grid--2xl public

Grid variant with a 2xl minimum column width.

.sf-grid--dense public

Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers.

.sf-grid--fit public

Grid variant that switches from auto-fill to auto-fit, collapsing empty columns.

.sf-grid--l public

Grid variant with a large (l) minimum column width.

.sf-grid--m public

Grid variant with a medium (m) minimum column width.

.sf-grid--s public

Grid variant with a small (s) minimum column width.

.sf-grid--xl public

Grid variant with an xl minimum column width.

.sf-grid--xs public

Grid variant with an xs minimum column width.

.sf-grid-cols-1 public

Single-column layout (forces all children to one column).

.sf-grid-cols-1-2 public

Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive.

.sf-grid-cols-1-3 public

Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive.

.sf-grid-cols-2 public

Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers.

.sf-grid-cols-2-1 public

Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive.

.sf-grid-cols-3 public

Responsive 3-column fixed grid. Collapses progressively on narrow containers.

.sf-grid-cols-3-1 public

Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive.

.sf-grid-cols-4 public

Responsive 4-column fixed grid. Collapses progressively on narrow containers.

.sf-grid-cols-6 public

Responsive 6-column fixed grid. Collapses progressively on narrow containers.

.sf-grid-flex public

Flexbox alternative to .sf-grid for item counts that don't divide evenly: leftover last-row items stretch to fill the row by default, or stay fixed-width and centered with --center.

.sf-grid-flex--2xl public

Grid-flex variant with a 2xl minimum item width.

.sf-grid-flex--center public

Grid-flex variant that keeps last-row leftover items fixed-width and centered instead of stretching.

.sf-grid-flex--l public

Grid-flex variant with a large (l) minimum item width.

.sf-grid-flex--m public

Grid-flex variant with a medium (m) minimum item width.

.sf-grid-flex--s public

Grid-flex variant with a small (s) minimum item width.

.sf-grid-flex--xl public

Grid-flex variant with an xl minimum item width.

.sf-grid-flex--xs public

Grid-flex variant with an xs minimum item width.

.sf-header--l public

Header block padding at the l step (--sf-space-l).

.sf-header--m public

Header block padding at the m step (--sf-space-m).

.sf-header--s public

Header block padding at the s step (--sf-space-s).

.sf-header--xl public

Header block padding at the xl step (--sf-space-xl).

.sf-header--xs public

Header block padding at the xs step (--sf-space-xs).

.sf-icon public

Inline icon sizing primitive. Sets width and height to --sf-icon-m via em-based tokens so the icon scales with the surrounding text.

.sf-icon

.sf-icon--2xl public

Icon variant sized to --sf-icon-2xl (extra-extra-large).

.sf-icon--2xl

.sf-icon--boxed public

Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons.

.sf-icon--boxed

.sf-icon--l public

Icon variant sized to --sf-icon-l (large).

.sf-icon--l

.sf-icon--m public

Icon variant sized to --sf-icon-m (medium, same as base sf-icon).

.sf-icon--m

.sf-icon--s public

Icon variant sized to --sf-icon-s (small).

.sf-icon--s

.sf-icon--xl public

Icon variant sized to --sf-icon-xl (extra-large).

.sf-icon--xl

.sf-icon--xs public

Icon variant sized to --sf-icon-xs (extra-small).

.sf-icon--xs

.sf-imposter public

Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels.

imposter

.sf-imposter--contain public

Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent.

imposter

.sf-imposter--fixed public

Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals.

imposter

.sf-overlay public

Overlay layout helper — absolutely fills its positioned parent (`position: absolute; inset: 0`) for overlays, backdrops, and media scrims.

Parent

.sf-pancake public

Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports.

header

main

footer

.sf-reel public

Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect.

.sf-section public

Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands.

section (padding shown)

.sf-section--2xl public

Section variant with 2xl vertical padding.

section (padding shown)

.sf-section--collapse public

Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks).

section (padding shown)

.sf-section--guttered public

Adds horizontal page gutters directly to a section — use when you want to skip a separate .sf-container wrapper (gutterless layout inside section). Neutralises container gutter to prevent double padding.

section (padding shown)

.sf-section--l public

Section variant with large (l) vertical padding.

section (padding shown)

.sf-section--m public

Section variant with medium (m) vertical padding.

section (padding shown)

.sf-section--s public

Section variant with small (s) vertical padding.

section (padding shown)

.sf-section--xl public

Section variant with xl vertical padding.

section (padding shown)

.sf-section--xs public

Section variant with xs vertical padding.

section (padding shown)

.sf-section-group public

Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges.

.sf-sidebar public

Two-column sidebar layout: first child is the sidebar, second child is main content. The sidebar collapses below the breakpoint (--sf-sidebar-min-width). Default sidebar on the left.

.sf-sidebar--narrow public

Sidebar variant with a narrower sidebar column.

.sf-sidebar--right public

Sidebar variant with the sidebar on the right (second child becomes the sidebar).

.sf-sidebar--wide public

Sidebar variant with a wider sidebar column.

.sf-stack public

Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm.

.sf-stack--2xl public

Stack variant with 2xl gap between children.

.sf-stack--center public

Stack variant that centers children on the cross axis.

.sf-stack--end public

Stack variant that aligns children to the cross-axis end (right in LTR).

.sf-stack--l public

Stack variant with large (l) gap between children.

.sf-stack--m public

Stack variant with medium (m) gap between children.

.sf-stack--s public

Stack variant with small (s) gap between children.

.sf-stack--stretch public

Stack variant that stretches children to fill the full available width.

.sf-stack--xl public

Stack variant with xl gap between children.

.sf-stack--xs public

Stack variant with xs gap between children.

.sf-subgrid public

Passes the parent grid columns through to children via subgrid. Place on a grid item that should align its own children to the outer grid columns.

.sf-subgrid-rows public

Passes the parent grid rows through to children via subgrid. Place on a grid item that should align its own children to the outer grid rows.

.sf-switcher public

Flex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold.

.sf-switcher--no-wrap public

Switcher variant that stays horizontal and never wraps (single-line regardless of container width).

.sf-switcher--vertical public

Switcher variant that starts in the vertical (stacked) direction on all sizes.

Macros & effects 53

.sf-aspect public

Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.

16 : 9

.sf-content-auto public

Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages.

content-visibility: auto (offscreen optimisation)

.sf-drop-shadow-l public

Large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-l).

drop-shadow

.sf-drop-shadow-m public

Medium filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-m).

.sf-drop-shadow-m

.sf-drop-shadow-s public

Small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-s).

.sf-drop-shadow-s

.sf-drop-shadow-xl public

Extra-large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xl).

.sf-drop-shadow-xl

.sf-drop-shadow-xs public

Extra-small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xs).

.sf-drop-shadow-xs

.sf-equal-height public

Forces all flex children to equal height (align-items: stretch). Use on a flex row to make cards in a grid share the tallest card's height.

short

taller
content
here

mid

.sf-flow public

Applies --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 public

Clamps 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 public

Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3.

.sf-line-clamp-3

.sf-line-clamp-N public

Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines.

.sf-line-clamp-N

.sf-link--reverse public

Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse.

.sf-link--reverse

.sf-link--subtle public

Link color modifier: renders the link in the body text color instead of the default action color. Underline still indicates the link on hover.

.sf-link--subtle

.sf-link-external public

Automatically 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 public

Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state.

.sf-not-prose public

Opt-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 public

Adds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container.

.sf-overflow-fade--block public

Overflow fade variant: fades both the top and bottom edges simultaneously (block axis).

.sf-overflow-fade--bottom public

Overflow fade variant: fades the bottom (block-end) edge.

.sf-overflow-fade--inline public

Overflow fade variant: fades both the left and right edges simultaneously (inline axis).

.sf-overflow-fade--left public

Overflow fade variant: fades the left (inline-start) edge.

.sf-overflow-fade--right public

Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour.

.sf-overflow-fade--top public

Overflow fade variant: fades the top (block-start) edge.

.sf-overlap public

Overlap recipe — pulls the element upward (negative block-start margin) so it overlaps the previous sibling by --sf-overlap-pull.

overlap

.sf-overlap--down public

Overlap recipe — pulls following content up (negative block-end margin) so this element overlaps the sibling below it.

overlap

.sf-overlap-host public

Card-container recipe — the receiving side of an overlap: an isolated stacking context with block-start padding compensation so in-flow content clears an element intruding from above. The padding knob defaults to the pull knob so one override tunes both.

overlap

.sf-prose public

Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose.

Prose

Rich text with a link, bold, and code.

List item
Another item

.sf-scrim public

Overlay container with a gradient darkening scrim behind text placed on an image or colored background.

photo

Caption over scrim

.sf-scrim__content public

Content area inside an sf-scrim. Positioned above the gradient overlay layer.

photo

sf-scrim__content

.sf-scrim--bottom public

Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade).

photo

Caption over scrim

.sf-scrim--full public

Scrim variant that covers the entire surface with a uniform translucent overlay.

photo

Caption over scrim

.sf-scrim--top public

Scrim variant with the gradient emanating from the top edge (top-to-bottom fade).

photo

Caption over scrim

.sf-scroll-shadow public

Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below.

.sf-scroll-snap public

Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align.

.sf-surface public

Generic semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes.

Surface