• Auto
  • Light
  • Dark

Font Families

Five font roles, each with a semantic purpose. Override any in config/_config.scss .

The quick brown fox

Body --font-body Long-form reading, paragraphs

The quick brown fox

Heading --font-heading h1–h6, readable at all sizes

The quick brown fox

Display --font-display Hero text, decorative headings

The quick brown fox

UI --font-ui Buttons, labels, form elements

The quick brown fox

Mono --font-mono Code, pre, kbd, samp

Type Scale

Generated from $type-base and $type-ratio using a modular scale. Default ratio: Major Third (1.25).

Wireless Wonder
--text-xs xs
Wireless Wonder
--text-sm sm
Wireless Wonder
--text-md md
Wireless Wonder
--text-lg lg
Wireless Wonder
--text-xl xl
Wireless Wonder
--text-2xl 2xl
Wireless Wonder
--text-3xl 3xl
Wireless Wonder
--text-4xl 4xl

Font Weights

Weights are generated from config. Only weights loaded via @font-face or external link should be listed.

Wireless Wonder

--font-weight-regular Regular — 400

Wireless Wonder

--font-weight-bold Bold — 700

Line Heights

Leading tokens for controlling vertical rhythm. Use tighter values for headings, looser for body copy.

Tuners drift over decades. A proper alignment restores sensitivity and selectivity to factory specification.

--leading-none none — 1

Tuners drift over decades. A proper alignment restores sensitivity and selectivity to factory specification.

--leading-tight tight — 1.25

Tuners drift over decades. A proper alignment restores sensitivity and selectivity to factory specification.

--leading-snug snug — 1.375

Tuners drift over decades. A proper alignment restores sensitivity and selectivity to factory specification.

--leading-normal normal — 1.5

Tuners drift over decades. A proper alignment restores sensitivity and selectivity to factory specification.

--leading-relaxed relaxed — 1.625

Tuners drift over decades. A proper alignment restores sensitivity and selectivity to factory specification.

--leading-loose loose — 1.75

Letter Spacing

Tracking tokens. Negative values suit large display text, wider values suit uppercase labels.

WIRELESS WONDER VINTAGE RADIO

--tracking-tight tight — -0.02em

WIRELESS WONDER VINTAGE RADIO

--tracking-normal normal — 0em

WIRELESS WONDER VINTAGE RADIO

--tracking-wide wide — 0.05em

WIRELESS WONDER VINTAGE RADIO

--tracking-wider wider — 0.1em

Heading Scale

Headings use an inverse relationship — larger headings have tighter line-height and smaller margins. Smaller headings have looser line-height and larger margins.

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five
Heading Level Six

Inline Elements

All inline text elements with their base styles applied.

Strong importance
<strong>
Emphasis and stress
<em>
Highlighted text
<mark>
Deleted text
<del>
Inserted text
<ins>
Small print and caveats
<small>
Abbreviation
<abbr>
A cited work or source
<cite>
Variable x
<var>
inline code
<code>
Ctrl+K
<kbd>
sample output
<samp>

Prose Sample

A full prose block showing how all elements work together in context.

Restoring a Zenith Trans-Oceanic

The Zenith Trans-Oceanic is widely regarded as the finest portable shortwave radio ever made. Produced from through the late 1970s, it represents the peak of American consumer electronics craftsmanship.

Each restoration begins with a full safety inspection before any power is applied. The HT supply on early models reaches Vmax = 90V — well within the danger threshold. Handle with care.

The Trans-Oceanic was not just a radio. It was a passport.

— Zenith collector, 2019

Common faults include corrosion on the antenna contacts oxidised antenna contacts and dried-out electrolytics. Refer to the recapping guide for full procedure. Parts are sourced using the command search --part C3 --chassis TO600 . Press Enter to execute. Expected output: 3 results found .

All restoration work carries a 90-day bench warranty.