Design system

TokenPreview

What a non-color token does: a bar, a corner, a shadow, motion.

import { TokenPreview } from "@flinbu/seed";

Rows and tiles

space-xs8pxInside controls

space-base16px

space-2xl32px

radius-petal12px

elevation-mdelevation-md

border-thick2px

opacity-disabled0.4

duration-slow320ms

import { TokenPreview } from "@flinbu/seed";

<div className="flex w-full max-w-xl flex-col gap-sm">
  <TokenPreview name="space-xs" value="var(--space-xs)" display="8px" usage="Inside controls" />
  <TokenPreview name="space-base" value="var(--space-base)" display="16px" />
  <TokenPreview name="space-2xl" value="var(--space-2xl)" display="32px" />
  <div className="flex flex-wrap gap-sm pt-sm">
    <TokenPreview layout="tile" kind="radius" name="radius-petal" value="var(--radius-petal)" display="12px" />
    <TokenPreview layout="tile" kind="shadow" name="elevation-md" value="var(--elevation-md)" display="elevation-md" />
    <TokenPreview layout="tile" kind="border" name="border-thick" value="2px" />
    <TokenPreview layout="tile" kind="opacity" name="opacity-disabled" value="0.4" />
    <TokenPreview layout="tile" kind="duration" name="duration-slow" value="var(--duration-slow)" display="320ms" />
  </div>
</div>

Use it for

Spacing, radius, shadow, border, opacity and duration scales.

Use something else for

Colors: use ColorSwatch.

Props

Prop	Type	Default	Description
`kind`	`'space''size''radius''shadow''border''opacity''duration'`	`'space'`	What to draw.
`value`	`string`	–	CSS value, usually var(--token).
`display`	`ReactNode`	–	Text in place of the value.
`name / usage`	`…`	–	Labels.
`layout`	`'row''tile'`	`'row'`	Layout.

Accessibility

The drawing is decorative; the name and value are text.
The duration preview stops under reduced motion.