Typography

Thin Montserrat headings carry the page. One accent word per heading, nothing in bold.

The accent word

Wrap a part of the title in asterisks: it takes the accent color. Keep it to a single passage per heading.

How it works

TSDemo.tsx

<Heading>How it *works*</Heading>

Titles coming from a CMS have no asterisks: accentLast colors the last words instead.

The reality on the ground in data

TSDemo.tsx

<Heading size="lg" accentLast={2}>
  The reality on the ground in data
</Heading>

Heading sizes

The visual size is independent from the tag set with as: keep a correct outline (one h1 per page) whatever the look.

Thin headings

TSDemo.tsx

<Heading as="p" size="display">Thin headings</Heading>
<Heading as="p" size="xl">Thin headings</Heading>
<Heading as="p" size="lg">Thin headings</Heading>
<Heading as="p" size="md">Thin headings</Heading>
<Heading as="p" size="sm">Thin headings</Heading>

Prop	Type	Default	Description
`as`	`"h1" \| "h2" \| … \| "h6" \| "p" \| "span"`	`"h2"`	Rendered tag, independent from the visual size.
`size`	`"display" \| "xl" \| "lg" \| "md" \| "sm"`	`"xl"`	display: 48–72 px, xl: 36–48 px, lg: 28–36 px, md: 24 px, sm: 20 px.
`accentLast`	`number`	–	For a string without asterisks: number of trailing words in the accent color.

Body text

Large, default tone: an introduction.

Medium, muted: the body of the page.

Small, subtle: a detail or a hint.

TSDemo.tsx

<Text size="lg" tone="default">…</Text>
<Text>…</Text>
<Text size="sm" tone="subtle">…</Text>

Prop	Type	Default	Description
`as`	`ElementType`	`"p"`	Rendered element.
`size`	`"lg" \| "md" \| "sm"`	`"md"`	18, 16 or 14 px.
`tone`	`"default" \| "muted" \| "subtle"`	`"muted"`	White, 72 % or 55 % opacity. Body text stays muted so it does not compete with headings.

Step numbers

Large thin numbers replace icons for steps that follow a real order. Lists without an order get no numbers at all: the card simply starts with its title.

Install

Compose

Publish

TSDemo.tsx

{steps.map((step, i) => (
  <div key={step}>
    <StepNumber n={i + 1} />
    <Heading as="h3" size="sm">{step}</Heading>
  </div>
))}

Prop	Type	Default	Description
`n`	`number`	–	Step number, shown on two digits.
`size`	`"md" \| "sm"`	`"md"`	48 or 24 px.

Plain text

plainText removes the asterisks, for attributes and metadata. AccentText renders the accent inside your own elements.

import { AccentText, plainText } from "trc-ui";

const title = "How it *works*";

<img alt={plainText(title)} src="…" />
<h2 className="my-title"><AccentText text={title} /></h2>