Tokens & Utilities

Design tokens and style utilities to build consistent, themeable interfaces.

Design Tokens

Borders Border widths, styles and radius tokens

Color Brand, semantic and base color palette

Focus Focus ring width and spacing

Shadows Box shadow levels s, m, l and flat

Size Component size scale

Space Spacing and gap scale for layout

Transitions Duration and easing values

Typography Font sizes, weights and families

Z-Indices Layering hierarchy for overlays

Style Utilities

Align Flex and grid alignment helpers

Cluster Inline grouping with wrapping

Flank Sidebar + main content layout

Gap Spacing between elements

Grid Responsive column grid

Native Styles Typography and native element styling

Opacity Opacity utility classes

Overflow Overflow control helpers

Position Positioning utility classes

Shadow Apply shadow tokens via class

Split Push two items to opposite ends

Stack Vertical stacking with consistent gap

Text Text alignment and truncation

Visually Hidden Screen-reader only content

Share

Create a link with a predefined theme that is automatically applied when the generated link is opened.

Default

LBBW

Presentation Mode

Abort

Copy Link