Design system

TypeSpecimen

One text style: its name, specs and a sample.

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

A type scale

display-headline-regularMarketing headlines

Tokens, in sync

heading-h5-semibold

Color tokens

body-body-3-regular

Semantic tokens switch with the theme.

label-label-2-mediumButtons and labels

Save changes

mono-value-regular

bg-accent-solid

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

<div className="flex w-full max-w-2xl flex-col">
  <TypeSpecimen styleName="display-headline-regular" sample="Tokens, in sync" usage="Marketing headlines" />
  <TypeSpecimen styleName="heading-h5-semibold" sample="Color tokens" />
  <TypeSpecimen styleName="body-body-3-regular" sample="Semantic tokens switch with the theme." />
  <TypeSpecimen styleName="label-label-2-medium" sample="Save changes" usage="Buttons and labels" />
  <TypeSpecimen styleName="mono-value-regular" sample="bg-accent-solid" />
</div>

Use it for

Type scale pages.

Use something else for

Lorem ipsum: show the style at work.

Props

Prop	Type	Default	Description
`styleName`	`string`	–	The type style class.
`sample`	`ReactNode`	`pangram`	Sample text.
`specs`	`{ family, size, lineHeight, weight, tracking }`	–	Shown instead of measuring.
`usage`	`ReactNode`	–	Where it's used.
`layout`	`'row''stack'`	`'row'`	Layout.

Accessibility

Specs are text, measured from the browser or given.