5. Typography

xPulse uses two font families:

Fraunces – for headings and display text (serif, elegant)
JetBrains Mono – for body text, code and UI elements (monospace)

Live Demo

Heading H1

Heading H2

Heading H3

xpulse-type__display

xpulse-type__lead — short explanations and lead text directly below a heading.

Body paragraph. Bold text, italic text and a normal link.

xpulse-type__meta — timestamps, technical metadata

inline code and --xpulse-text in the flow.

1 <h1>Heading H1</h1>
2 <div class="xpulse-type__display">Display Text</div>
3 <div class="xpulse-type__lead">Lead text</div>
4 <p>Body text with <strong>bold</strong> and <em>italic</em>.</p>
5 <small class="xpulse-type__meta">Meta info</small>

Font Size Tokens

Token	Value
`--xpulse-font-size-display`	`clamp(34px, 5vw, 56px)`
`--xpulse-font-size-h2`	`clamp(24px, 3vw, 34px)`
`--xpulse-font-size-lead`	`19px`
`--xpulse-font-size-body`	`16px`
`--xpulse-font-size-meta`	`12px`

Text Utilities: Colour

.xpulse-text--default — explicitly set to base colour

.xpulse-text--muted — meta info, secondary labels

.xpulse-text--info — positive feedback, success

.xpulse-text--warning — warnings, pending states

.xpulse-text--danger — errors and critical hints

.xpulse-text--accent — highlighted text in the reading flow

.xpulse-text-link — text link with underline and hover colour change

1 <span class="xpulse-text--muted">Meta copy</span>
2 <span class="xpulse-text--info">Connected</span>
3 <span class="xpulse-text--warning">Pending</span>
4 <span class="xpulse-text--danger">Error</span>
5 <span class="xpulse-text--accent">Highlighted</span>
6 <a class="xpulse-text-link" href="#">Link</a>

Text Utilities: Alignment & Transformation

.xpulse-text-left — left-aligned

.xpulse-text-center — centred

.xpulse-text-right — right-aligned

.xpulse-text-uppercase — uppercase for labels and breadcrumbs

.xpulse-text-lowercase — FORCE LOWERCASE

.xpulse-text-capitalize — capitalise every word

1 <p class="xpulse-text-center xpulse-text-uppercase">Centred Label</p>
2 <p class="xpulse-text-capitalize">capitalised label</p>

1	<h1>Heading H1</h1>
2	<div class="xpulse-type__display">Display Text</div>
3	<div class="xpulse-type__lead">Lead text</div>
4	<p>Body text with <strong>bold</strong> and <em>italic</em>.</p>
5	<small class="xpulse-type__meta">Meta info</small>

1	<span class="xpulse-text--muted">Meta copy</span>
2	<span class="xpulse-text--info">Connected</span>
3	<span class="xpulse-text--warning">Pending</span>
4	<span class="xpulse-text--danger">Error</span>
5	<span class="xpulse-text--accent">Highlighted</span>
6	<a class="xpulse-text-link" href="#">Link</a>

1	<p class="xpulse-text-center xpulse-text-uppercase">Centred Label</p>
2	<p class="xpulse-text-capitalize">capitalised label</p>