Every variable, class, variant and keyframe core ships, generated from its CSS on every build. Press / to search from anywhere on the page.
623 tokens
14
14
14
14
14
14
14
14
33
Light values that stay light in dark mode, for marks and illustrations.
54
The brand, info, and brand-secondary scales named blue, purple, and orange.
6
Fixed spot illustration colours; they ignore dark mode.
2
The hue and chroma the accent and neutral scales are built from.
GuidanceColors
10
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.
1
A strong link’s text, which follows the intent: the strongest neutral, or the intent’s step 11.
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.
11
Point every role at one scale; children inherit it.
GuidanceData visualisationColors
8
5
9
9
4
2
5
5
46
GuidanceColorsInteractionsAccessibility
3
16
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 APCA's Lc 45 for UI, 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.
The unchosen items beside an is-selected one. Their subtle label sits well under the chosen strong one, so the label tells them apart as well as the fill. Doubled to outrank an emphasis's text. Apply it only at rest, so it never meets the chosen state's utility.
is-selected's label without its fill, for a chosen item whose fill is drawn by an indicator behind it.
The same over an emphasis-strong indicator.
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. Its label is fixed white for the same reason.
Tints without blurring, so what's behind stays readable: a sheet that peeks over its page.
5
Hover, press, focus ring and disabled. Fields shift neutral, then accent, then danger.
is-interactive's focus ring alone, for a focus target that isn't clicked, such as a scroll region or a tabIndex=-1 landing target. is-interactive applies it, so the two compose on one element in either order.
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. A target belongs to the nearest surface around it, so a card holding table rows that are surfaces of their own ignores their targets. Each state rule ends on the surface itself, so the :not(:has()) adds nothing to the invalidation set. @scope can't do this: its lower limit doesn't bound a :has() argument.
1
Used inside Roadie components, not for apps: the floating fill and the subtle text lift on it.
Internal, not public API: the floating fill and the subtle text lift that keeps Lc 75 on it, kept together so they can't drift apart. emphasis-floating builds on it, and so do popups that draw their own edge and shadow.
GuidanceTypographyProse styles
4
11
11
Size classes set no line height, so pair them with leading-*.
11
11
17
The .prose class, and the variables that set its size, rhythm, measure, and headings.
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
15
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).
1
The unit that gap-*, p-*, m-*, w-*, and h-* multiply.
5
Viewport widths where the sm: to 2xl: variants switch.
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 timeLinkingNavigation
9
Pair btn with a size, an intent and an emphasis.
3
A text link’s underline and hover motion by emphasis, as Link applies it. Hover or focus a preview to see it.
The underline is a layer at the bottom and the fill sits just above it. Engaged, the underline takes the fill's colour, so the two read as one shape as the fill completes.
strong fills as emphasis-strong does. Its text is two text-clipped layers over the fill: the on-strong ink grows with the fill, so each letter turns as the fill reaches it, over the resting ink. The opaque fill runs under the underline, so no seam shows.
The leave waits a beat, so a pointer sweeping down a list doesn't flicker each link it crosses. The rise's overshoot is a fraction of a pixel, so it never reaches the text.
5
A month and day tile for templates; the parts are dimmed to show which one a class styles.
The band's height is set per size, so it takes about a third of the tile rather than whatever the type and padding add up to. Each height is the type plus 2px either side. The transparent border shares that 2px with the padding, so the text overflows the content box slightly and place-content centres it in the whole band.
1
Navigator: the one variant every expanded style is written with.