Every variable, class, variant and keyframe core ships, generated from its CSS on every build. Press / to search from anywhere on the page.
512 tokens
14
14
14
14
14
14
14
14
25
Light values that stay light in dark mode, for marks and illustrations.
6
Fixed spot illustration colours; they ignore dark mode.
2
The hue and chroma the accent and neutral scales are built from.
GuidanceColors
9
Surface roles, read by the bg-* utilities.
6
Foreground roles, read by the text-* utilities.
5
Edge roles, read by the border-* and divide-* utilities.
2
Highlight colours for mark and search matches.
20
The Tailwind classes that read the roles above.
1
14
The active intent's 14 scale steps, for states a role doesn't cover.
4
Translucent steps that read on any surface.
8
Point every role at one scale; children inherit it.
GuidanceData visualisationColors
8
5
9
9
4
2
5
5
46
GuidanceColorsInteractionsAccessibility
3
13
Background, text, border and shadow in one class. Add is-interactive for states.
Text fields: sunken, with one translucent edge that takes the fill's tint instead of sitting on it as grey. Pair with is-interactive-field, which owns hover, focus and invalid. The edge is resolved on the element so an intent on the field tints it too. The mix sits in @supports with an explicit fallback, or the build falls back to a solid step 9, darker than the border it replaces.
The chosen item in a trackless control, over emphasis-subtle: a soft fill and a strong icon, which carry the state together. The fill alone is under 3:1, so this is for quiet controls. Doubled, and repeated for the interactive states, to outrank the emphasis in either emit order. Forced colours drop the fill, so an edge takes over.
Pairs with a raised or floating fill. The doubled selector outranks that fill in either emit order; a field's hover, focus and invalid fills still win.
Fixed-dark so it stays a scrim in both themes (the intent scale flips light/dark), tinted by the intent hue: neutral near-black, danger a dark red.
Tints without blurring, so what's behind stays readable: a sheet that peeks over its page.
4
Hover, press, focus ring and disabled. Fields shift neutral, then accent, then danger.
A surface whose main link sits inside it, such as a card that also holds other actions. Mark that link with data-interactive-target: its overlay covers the surface, other controls sit above it, and the surface takes the link's hover, press and focus states. Inert until a target is present.
GuidanceTypography
4
11
11
Size classes set no line height, so pair them with leading-*.
11
11
14
Size, weight, leading and tracking for headings, in UI and prose flavours.
4
Composed body text for interfaces, prose and code.
GuidanceElevation
16
Tinted by the surrounding intent. Inset shadows recess a surface.
7
A top-edge highlight that lifts a raised or strong surface.
2
The shade and highlight a loading placeholder sweeps between.
10
Named stacking tiers; use z-popover, never a raw number.
pulled out of the stacking flow
default in-flow content
in-flow elevated accents pinned to a surface
position: sticky headers / toolbars
dialog / drawer backdrop scrim
dialog / drawer surface
popover, select, combobox, autocomplete, dropdown panels
transient notifications
tooltips — always on top
blocking alert dialogs — above an open modal / drawer
11
40px
48px
56px
2
1440px
Container: centered with responsive padding and configurable max width. Replaces Tailwind's default container and the v1 <Container> component. Usage: <div className="container-8xl">...</div> → max-width: 1440px <div className="container-4xl">...</div> → max-width: 896px Any --container-* token works: 3xs–7xl (Tailwind defaults) + 8xl (1440px).
GuidanceMotionView transitions
18
5
1
1
15
Play once when the class is applied. Press a preview to replay it.
Entrance: fade + slide-up + slight scale. Pair with origin-bottom (or any origin-*) to grow from a specific edge.
@deprecated use animate-fade-in, remove in v3
@deprecated no replacement, use motion-scale or motion-slide, remove in v3
@deprecated use animate-scale-in, remove in v3
@deprecated no replacement, use motion-scale or motion-slide, remove in v3
@deprecated use animate-pop-in, remove in v3
Loops while content is pending. prefers-reduced-motion cuts it to a single 0.01ms pass, which leaves the element at full opacity: a static tint.
A loading surface: a tint pulse under a highlight sweeping across it. background-attachment: fixed anchors the gradient to the viewport, so every element wearing this class shows the slice of one shared sweep that falls where it sits. A one-line placeholder and a full-width block then agree, which a per-element sweep cannot do: it would restart at each element's own edges and run at a different apparent speed on each. The cost is that the sweep paints rather than riding the compositor, since only background-position can express a shared gradient. The element's own fill (from emphasis-*) is the base; the gradient paints --sheen-shade over it everywhere the band is not and --sheen-highlight inside the band, so the band is the lighter of the two in both themes. Radius clips the background, so a circle stays a circle. Reduced motion drops the gradient and leaves the static tint.
Work of unknown length: a bar sweeping across a positioned parent that clips its overflow, such as a progress track. The sweep animates the logical inset, so it runs right to left under dir='rtl'. Reduced motion holds a full-width bar at a soft tint, since the global reset would otherwise park it off the end of the track.
One-shot attention cues. Replay by toggling the class.
A tap response: animate-pop at 600ms reads as a notification.
5
Driven by data-starting-style and data-ending-style. Press a preview to toggle it.
Scale + fade. Pair with origin-[var(--transform-origin)] (or any origin-*) to scale from a specific point.
Fade + slide — up on enter, down on exit.
Drawer surface — slides off its anchored edge and tracks Base UI's live swipe offset. transform, not translate: Base UI writes an inline transform mid-swipe, which must override the resting value, not compose. A surface held off its edge sets --drawer-float so it travels clear.
A toast in a Base UI toast viewport. Collapsed, the stack sits behind the frontmost toast, clamped to its height and peeking out away from the edge; fanned out while the viewport is hovered or focused. Enters, restacks and snaps back from a swipe on a lively spring; leaves quickly towards its edge or the way it was swiped. Pair with absolute bottom-0 origin-bottom, or with absolute top-0 origin-top and data-side='top' for a top viewport.
Put on a <details>, or a Base UI collapsible panel, so its content opens and closes by height.
11
The keyframes the animation classes run.
GuidanceDate and timeNavigation
9
Pair btn with a size, an intent and an emphasis.
5
A month and day tile for templates; the parts are dimmed to show which one a class styles.
1
Navigator: the one variant every expanded style is written with.