Typography

The h1-h6 scale and body-text variants come from zeyo-ui/typography.css — one @theme block, imported by every app. A component's own scoped style block still wins for a bespoke size; this is only the default.

Heading scale

Font family: DM Sans (--font-heading). Size / weight / letter-spacing noted per level. level picks both the tag AND the size — there's no separate size prop, so a custom font-size can never drift from its matching letter-spacing/line-height.

The quick brown fox

h1 · 50px / 400 / -2px

The quick brown fox

h2 · 48px / 400 / -2px

The quick brown fox

h3 · 32px / 400 / -1px

The quick brown fox

h4 · 22px / 600

The quick brown fox

h5 · 18px / 600

The quick brown fox

h6 · 16px / 600

Code

<Title level={1}>The quick brown fox</Title>
<Title level={2}>The quick brown fox</Title>
<Title level={3}>The quick brown fox</Title>
<Title level={4}>The quick brown fox</Title>
<Title level={5}>The quick brown fox</Title>
<Title level={6}>The quick brown fox</Title>

Text

zeyo-ui/text/Text.svelte — the typed front door to typography.css's body-text utilities (.small/.large/.bold), plus a color prop so nothing reaches for a hardcoded hex.

Default body copy — 13px, 400 weight.

Small — 11px, for captions and helper text.

Large — 15px, for intros and lead text.

Bold — inherits size, 600 weight.

Secondary color — var(--txs).

Tertiary color — var(--txt).

Inline span instead of a block p.

Code

<Text>Default body copy — 13px, 400 weight.</Text>
<Text size="sm">Small — 11px, for captions and helper text.</Text>
<Text size="lg">Large — 15px, for intros and lead text.</Text>
<Text bold>Bold — inherits size, 600 weight.</Text>
<Text color="secondary">Secondary color — var(--txs).</Text>
<Text color="tertiary">Tertiary color — var(--txt).</Text>
<Span>Inline span instead of a block p.</Span>

Color tokens

Both Text and Title share the same color enum — secondary/tertiary for neutral text, plus the five semantic tokens. Omit color for primary (var(--tx)), the inherited default.

Success

Warning

Error

Info

Accent

Code

<Title level={4} color="success">Success</Title>
<Title level={4} color="warning">Warning</Title>
<Title level={4} color="error">Error</Title>
<Title level={4} color="info">Info</Title>
<Title level={4} color="accent">Accent</Title>

bg — tinted background chip

bg tints a small chip background behind the text — same Color enum as color, its own .bg-* classes in typography.css (a real color-mix toward transparent; Tailwind has no utility for mixing a token toward transparent). For flagging one value — a mismatched CSV sample, an invalid table cell — without tinting the whole row the way TableRow's warning prop does.

Google — doesn't look like an email

Needs review

Verified

beta

Code

<Text bg="error">Google — doesn't look like an email</Text>
<Text bg="warning">Needs review</Text>
<Text bg="success">Verified</Text>
<Span bg="info">beta</Span>

white / whiteSecondary — for dark/gradient surfaces

var(--tx)/var(--txs)/etc are theme-aware — fine on the page's own background, but wrong on a fixed dark surface (a gradient panel, an image overlay) that doesn't flip with light/dark mode. white/whiteSecondary are hardcoded, not theme-aware, specifically for that case — reach for the regular tokens everywhere else.

white — solid, full opacity

whiteSecondary — 70% opacity

Code

<Card bg="rainbow" padding="md">
  <Text bold color="white">white — solid, full opacity</Text>
  <Text color="whiteSecondary">whiteSecondary — 70% opacity</Text>
</Card>

maxWidth + centerBelow — capped text that centers on stack

maxWidth caps a heading/paragraph's own width (a real px value, so a style: directive, not a fixed token) — for the common case of a heading sitting beside a side panel, capped short of the panel instead of running the full row width. centerBelow adds text-align: center + margin-inline: auto below 960px, so once that side-by-side layout stacks (shrink the browser to see it), the now-full-width text becomes a centered block instead of staying pinned left. Only meaningful for block usage — a heading, or Text with span omitted.

Capped, left-aligned next to a panel

Becomes a centered block once the layout stacks below 960px — shrink the browser to see it.

side panel

Code

<Title level={3} maxWidth="360px" centerBelow>Capped, left-aligned next to a panel</Title>
<Text maxWidth="340px" centerBelow color="secondary">
  Becomes a centered block once the layout stacks below 960px.
</Text>

clamp — multi-line cutoff

clamp caps Text/Span/Title to N lines, then hard-cuts past it — no ellipsis, unlike truncate's single-line + ellipsis. Needs a bounded width from context, same as truncate/maxWidth.

A long preview — an email snippet, a comment body, anything that might run several lines — hard-cut after 2 lines, no ellipsis.

Code

<Text clamp={2} maxWidth="320px">
  A long preview — an email snippet, a comment body, anything that
  might run several lines — hard-cut after 2 lines, no ellipsis.
</Text>

Font families

Three font-family tokens, all DM Sans except the monospace stack.

Sans — var(--font-sans)

Heading — var(--font-heading)

Mono — var(--font-mono)

Code

font-family: var(--font-sans);   /* body */
font-family: var(--font-heading); /* h1-h6 */
font-family: var(--font-mono);    /* code, tabular data */