Display

Typography, Heading and Text

Rendered rich text and Markdown in Seed's reading styles, and single lines of copy.

import { Typography, Heading, Text } from "@flinbu/seed";

A header and prose

Collection

Color

446 tokens in Light and Dark.

How modes work

Semantic tokens have a value per mode and switch with data-theme. Primitives are raw ingredients for charts and illustration.

Use bg-primary for pages and cards.
Show customer colors on bg-stage.

Selection is neutral. Blue is for the primary action, focus and links.

import { Heading, Text, Typography } from "@flinbu/seed";

<div className="flex w-full max-w-xl flex-col gap-lg">
  <div className="flex flex-col gap-xs">
    <Text variant="label">Collection</Text>
    <Heading level={2} size={4}>Color</Heading>
    <Text variant="lead">446 tokens in Light and Dark.</Text>
  </div>
  <Typography>
    <h2>How modes work</h2>
    <p>Semantic tokens have a value per mode and switch with <code>data-theme</code>. Primitives are <a href="#">raw ingredients</a> for charts and illustration.</p>
    <ul><li>Use <strong>bg-primary</strong> for pages and cards.</li><li>Show customer colors on <code>bg-stage</code>.</li></ul>
    <blockquote>Selection is neutral. Blue is for the primary action, focus and links.</blockquote>
  </Typography>
</div>

Use it for

Docs pages, release notes, the assistant's answers (size small).

Props

Prop	Type	Default	Description
`Typography: size`	`'body''small'`	`'body'`	16/26 or 14/22, Fenly Serif Light.
`Heading: level / size`	`1–6`	–	Element and look.
`Heading: display`	`boolean`	–	Fenly Serif, for hero screens.
`Text: variant`	`'lead''body''small''muted''caption''reading''label''value'`	`'body'`	The type style.

Accessibility

Heading separates the element (level) from the look (size), so the outline stays right.