token-specimen
Unified design token scale display. Renders shadows, radii, borders, colors, or sizes based on the type attribute.
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.
Shadow specimen
<token-specimen type="shadow" label="Elevation Scale"></token-specimen>Radius
Squares with applied border-radius at each scale step.
Radius specimen
<token-specimen type="radius" label="Corner Radius"></token-specimen>Border
Lines at each border width.
Border specimen
<token-specimen type="border" label="Border Widths"></token-specimen>Color
Swatches for color tokens.
Color specimen
<token-specimen type="color" tokens="primary,secondary,accent,success,warning,error" label="Brand Colors"></token-specimen>Size
Horizontal bars showing spacing values (same visualization as <spacing-specimen>).
Size specimen
<token-specimen type="size" tokens="xs,s,m,l,xl,2xl" label="Spacing Scale"></token-specimen>Custom Tokens
Override tokens and prefix to display any set of CSS custom properties.
Custom prefix
<token-specimen type="shadow" tokens="card,dropdown,modal" prefix="--my-shadow-" label="Custom Shadows"></token-specimen>Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
type | "shadow", "radius", "border", "color", "size" | — | Token type to display |
tokens | string | — | Comma-separated token names (defaults vary by type) |
prefix | string | — | CSS variable prefix (auto-set from type if omitted) |
show-values | boolean | true | Show computed token values |
label | string | — | Optional heading label |