Dot, sticky
Long articles and docs, where the header trail scrolls away.
Spacing
Spacing is built from one 4px step. Every gap, inset and margin in the library is a multiple of it, so components line up on the same rhythm wherever they sit.
The scale
Twelve steps cover everything from the 2px gap inside a tag to the 96px section padding on marketing pages. The first six steps do almost all of the work in product UI.
Use the smaller steps inside controls and the larger ones between groups. When two values both look right, pick the smaller one and let whitespace come from the layout.
Density
Compact and comfortable densities move every step down or up one notch, so a table and its toolbar change together and never drift apart.
Density is set once per surface, not per component, which keeps a page from mixing tight rows with loose ones.
Insets
A card’s inset is a multiple of the base step, and anything nested inside it takes the outer radius less that inset, so corners stay concentric.
Hover never changes spacing or adds a shadow; it tints the surface and nothing moves.
More in Breadcrumb blocks#
When to use#
- Content sits more than two levels deep and people arrive mid-tree from search
- A file or asset browser where each parent is a real place you can open
- Settings panels nested under sections, where the page heading alone does not say which section owns them
- You need a way back up that costs one line instead of a sidebar
The whole set, with its codePro
Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.