Get started

Temporary page

FeatureBlock variants

Every visual scale and layout combination, side by side.

Title variants

titleVariant="h5" (default tag: h3)

Eyebrow caption

Card-scale heading

The small recipe: text-xl display heading, text-base body with relaxed leading. Used in grid cells and cards.

titleVariant="h4" (default tag: h4)

Eyebrow caption

Small mid-scale heading

Sits between the card cells and the section intro — a gentle step up from h5.

titleVariant="h3" (default tag: h3)

Eyebrow caption

Mid-scale heading

Same visual treatment as h5 in the current design system — kept as its own variant for semantic flexibility.

titleVariant="h2" (default tag: h2)

Section eyebrow

Section intro heading

The canonical section-intro recipe: h2 display heading, text-lg muted body capped at max-w-2xl.

titleVariant="h1" (default tag: h1)

Display eyebrow

Page-heading scale

Between the section intro and the hero — for page-opening statements that are large but not full display.

titleVariant="hero" (default tag: h2)

Display eyebrow

Hero-scale heading

Display scale for editorial statement sections — the same clamp used by the homepage hero.

Optional parts

title only

Just a heading

icon + title

Icon above, no caption

caption + title

Eyebrow

Caption, no icon

+ description

Title and body

Body text sits under the heading with relaxed leading in the small scale.

+ description + action

Full card stack

The action renders an uppercase lichen link with an animated arrow. Description gains spacing before it.

Learn more

long description (lg max-w-2xl)

Body line length

At the large scale, the description is capped at max-w-2xl so long paragraphs keep a readable measure instead of spanning the full container.

Inline mode (icon left)

Inline row

Icon sits to the left with mt-0.5 alignment; the text stack is unchanged.

Compliance-row shape

The recipe used by the homepage framework rows.

With action

Inline mode composes with the action link.

Read the docs

Subtitle font size per level

Current mapping — small levels (h5/h4/h3) share text-base; h2/h1/hero all share text-lg. The grid below renders the same body copy at each candidate size so they can be compared against the heading above them.

h5 — current: text-base

text-sm (0.875rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-base (1rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg (1.125rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg sm:text-xl (responsive to 1.25rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

h4 — current: text-base

text-sm (0.875rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-base (1rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg (1.125rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg sm:text-xl (responsive to 1.25rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

h3 — current: text-base

text-sm (0.875rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-base (1rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg (1.125rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg sm:text-xl (responsive to 1.25rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

h2 — current: text-lg

text-sm (0.875rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-base (1rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg (1.125rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg sm:text-xl (responsive to 1.25rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

h1 — current: text-lg

text-sm (0.875rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-base (1rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg (1.125rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg sm:text-xl (responsive to 1.25rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

hero — current: text-lg

text-sm (0.875rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-base (1rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg (1.125rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

text-lg sm:text-xl (responsive to 1.25rem)

Heading copy at this level for scale

Subtitle copy rendered at this size under a heading of this level. The quick brown fox jumps over the lazy dog while evaluating optical hierarchy between heading and body text.

titleAs independence (visual scale ≠ heading tag)

variant "h2" as="h3" — h2 look, h3 tag

h2 look, h3 tag

Same size as the canonical section heading, but structurally an h3 — for pages whose h2 lives elsewhere.

variant "hero" as="h2" — hero look, h2 tag

Hero look, h2 tag

Display scale content, structurally a real section heading.

variant "h5" as="h4" — card look, h4 tag

Card look, h4 tag

Small visual scale pushed down a level in the document outline.