token-specimen

Overview

A single component for displaying any design token scale. The type attribute controls the visual rendering while sharing the same core API across all token categories.

Part of the Design System Pack.

Types

Shadow

Cards with applied box-shadow at each elevation step.

Radius

Squares with applied border-radius at each scale step.

Border

Lines at each border width.

Color

Swatches for color tokens.

Size

Horizontal bars showing spacing values (same visualization as <spacing-specimen>).

Icon

Icons from the active icon set, rendered as a labelled grid. Useful for documenting which icons a design system uses. The size attribute controls icon size; the optional icon-set attribute switches sets (lucide, phosphor, tabler, etc.).

Switch icon sets to compare styles:

Editable Mode

Add the editable attribute to replace the computed-value cell in every row with an input. Editing a value writes the token as a CSS custom property on target (default :root), so the rest of the page updates live. Ignored for type="icon".

For type="color", values in hex format get a native color picker; oklch or named colors fall back to a text input.

Listen for edits via token-specimen:change:

Custom Tokens

Override tokens and prefix to display any set of CSS custom properties.

Attributes