Halo Brand System

Human + machine source

Use the role, not a guessed size.

The typography manifest binds each role to its family, size, weight, leading and tracking tokens. The generated CSS and TypeScript exports carry the same release values.

Typography manifest · JSON Token variables · CSS

Approved families

Two voices, clearly separated.

Primary sans

Inter

Aa Bb Cc 0123

Display, headings, body, controls and narrative text.

Token: marketing.font.family.sans
CSS: --halo-font-sans
Licence: SIL Open Font License 1.1

Technical mono

IBM Plex Mono

Aa Bb Cc 0123

Eyebrows, evidence labels, IDs, measurements, timestamps and code.

Token: marketing.font.family.mono
CSS: --halo-font-mono
Licence: SIL Open Font License 1.1

Approved hierarchy

A complete scale for real work.

Every specimen is rendered from its published tokens. Names stay stable even when a future release adjusts a value.

Hero display

marketing.font.size.display-hero

Make every decision visible.

Use once per composition. Aim for 2–4 lines on desktop and 3–6 on mobile.

Size: clamp(3.15rem, 5vw, 6.2rem)
Weight: 560
Leading: 0.93
Tracking: -0.066em

Page display

marketing.font.size.display-page

Quiet industrial intelligence.

Use for the primary title when a hero display would be too dominant.

Size: clamp(2.85rem, 4.45vw, 5.4rem)
Weight: 560
Leading: 0.95
Tracking: -0.062em

Section heading

marketing.font.size.heading-section

One system across every surface.

Use to open a major section; keep the hierarchy visibly below the page title.

Size: clamp(2.3rem, 3.55vw, 4.45rem)
Weight: 560
Leading: 1.05
Tracking: -0.05em

Feature heading

marketing.font.size.heading-feature

Evidence before emphasis.

Use within a section, never as a substitute for the page hierarchy.

Size: clamp(1.75rem, 2.2vw, 2.8rem)
Weight: 560
Leading: 1.05
Tracking: -0.04em

Card heading

marketing.font.size.heading-card

Guided capture

Keep card headings short and concrete.

Size: clamp(1.25rem, 1.25vw, 1.5rem)
Weight: 620
Leading: 1.05
Tracking: 0em

Lead

marketing.font.size.lead

Halo turns guided observations into evidence people can trust and use.

Use sparingly to establish context; keep lines near 45–70 characters.

Size: clamp(1.125rem, 1.2vw, 1.25rem)
Weight: 400
Leading: 1.55
Tracking: 0em

Body

marketing.font.size.body

Show the mechanism, the state change and the human decision it supports.

Default for prose. Constrain long-form text to 54ch or roughly 45–70 characters per line.

Size: 1rem
Weight: 400
Leading: 1.55
Tracking: 0em

Technical label

marketing.font.size.label

VERIFIED / 14:32:06

Use IBM Plex Mono, usually uppercase. Do not set long prose or campaign headlines in mono.

Size: 0.75rem
Weight: 400
Leading: 1.35
Tracking: 0.1em

Reading quality

Hierarchy must survive the format.

measure

Constrain prose to 54ch or approximately 45–70 characters per line.

zoom

Layouts and hierarchy must remain usable at 200% zoom without clipped or overlapping text.

minimums

Do not use technical microcopy as the only carrier of essential meaning.

typefaces

Use the named system fallbacks when Inter or IBM Plex Mono is unavailable; never replace them with an unapproved display face.

Guidance set

Typography

must-not

Avoid more than three headline lines desktop or four mobile.

Imported from the Working rules section of the Halo guidance.

halo.visual.typography.avoid-more-than-three-headline-lines-desktop-or-four-mobile

must

Body is 18–20px lead and 16–18px standard.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.typography.body-is-18-20px-lead-and-16-18px-standard

must

Display leading stays compact at 0.93–0.98; body leading stays readable at 1.5–1.7.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.typography.display-leading-stays-compact-at-0-93-0-98-body-leading-stays-readable-a

must-not

Do not redistribute font binaries in the public package; acquire Inter and IBM Plex Mono from their official OFL distributions and retain the licence.

Imported from the Working rules section of the Halo guidance.

halo.visual.typography.do-not-redistribute-font-binaries-in-the-public-package-acquire-inter-an

must

Hero display is 64–112px fluid desktop and 44–64px mobile.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.typography.hero-display-is-64-112px-fluid-desktop-and-44-64px-mobile

must

Inter is the approved OFL sans family; IBM Plex Mono is the approved OFL technical family.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.typography.inter-is-the-approved-ofl-sans-family-ibm-plex-mono-is-the-approved-ofl-

should

Prevent single-word headline orphans with authored wrapping, not nonbreaking text everywhere.

Imported from the Working rules section of the Halo guidance.

halo.visual.typography.prevent-single-word-headline-orphans-with-authored-wrapping-not-nonbreak

must

Technical labels are 12–13px mono with restrained tracking.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.typography.technical-labels-are-12-13px-mono-with-restrained-tracking

must

Use 400 for body copy, 550–560 for editorial display, 620 for compact emphasis, and 700 only for rare high-emphasis moments.

Imported from the Locked decisions section of the Halo guidance.

halo.visual.typography.use-400-for-body-copy-550-560-for-editorial-display-620-for-compact-emph

should

Use 45–70 characters for prose.

Imported from the Working rules section of the Halo guidance.

halo.visual.typography.use-45-70-characters-for-prose

should

Use negative tracking only for large editorial headings; body copy remains untracked and technical labels use restrained positive tracking.

Imported from the Working rules section of the Halo guidance.

halo.visual.typography.use-negative-tracking-only-for-large-editorial-headings-body-copy-remain