5. Typografie

xPulse verwendet zwei Schriftfamilien:

Fraunces – für Überschriften und Display-Texte (serif, elegant)
JetBrains Mono – für Fließtext, Code und UI-Elemente (monospace)

Live-Demo

Heading H1

Heading H2

Heading H3

xpulse-type__display

xpulse-type__lead — kurze Erklärungen und Lead-Texte direkt unter einer Überschrift.

Standard-Absatz. Fetter Text, kursiver Text und ein normaler Link.

xpulse-type__meta — Zeitstempel, technische Metadaten

inline code und --xpulse-text im Textfluss.

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>Fließtext mit <strong>fett</strong> und <em>kursiv</em>.</p>
5 <small class="xpulse-type__meta">Meta-Info</small>

Schriftgrößen-Tokens

Token	Wert
`--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: Farbe

.xpulse-text--default — explizit auf Basisfarbe

.xpulse-text--muted — Meta-Infos, sekundäre Beschriftungen

.xpulse-text--info — positive Rückmeldungen, Success

.xpulse-text--warning — Warnungen, Pending-States

.xpulse-text--danger — Fehler und kritische Hinweise

.xpulse-text--accent — hervorgehobener Text im Lesefluss

.xpulse-text-link — Textlink mit Underline und Hover-Farbwechsel

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">Hervorgehoben</span>
6 <a class="xpulse-text-link" href="#">Link</a>

Text-Utilities: Ausrichtung & Transformation

.xpulse-text-left — linksbündig

.xpulse-text-center — zentriert

.xpulse-text-right — rechtsbündig

.xpulse-text-uppercase — uppercase für Labels und Breadcrumbs

.xpulse-text-lowercase — LOWERCASE erzwingen

.xpulse-text-capitalize — jedes wort großschreiben

1 <p class="xpulse-text-center xpulse-text-uppercase">Centered Label</p>
2 <p class="xpulse-text-capitalize">kapitalisiertes 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>Fließtext mit <strong>fett</strong> und <em>kursiv</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">Hervorgehoben</span>
6	<a class="xpulse-text-link" href="#">Link</a>

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