Champagne Paper

Foundations / Typography

Typography

Four typefaces. Each with a distinct voice and a distinct role. The system achieves dual personality — prestige academic and professional corporate — through typographic assignment, not color alone.

Font Families

The ecotone between academia and enterprise.

Instrument Serif

--font-serif

Editorial, display, headings H1–H3, blockquotes

Weights

400400 italic

Never italic on screen (reserved for print). Never used for CTAs or labels.

CHAMPAGNE PAPER

Oswald

--font-display

Display, CTAs, labels, H4, eyebrows, navigation

Weights

300400500600

Always uppercase for labels and CTAs. Never in body copy. Staircase weight: H2=600, H3=500, H4=400.

Connect with top institutions, exclusive cohorts, and global employers worldwide.

Instrument Sans

--font-sans

Body text, UI text, descriptions, captions

Weights

300400500600

The workhorse. All body copy, form labels, table content. Comfortable at 16px/1.6 line-height.

--primary: #800020

Space Mono

--font-mono

Code, metadata, timestamps, token names

Weights

400700

Reserved for code blocks and technical metadata. Never for decorative or marketing copy.

Type Scale

All levels rendered live with their actual font, size, and weight. Each is labeled with its CSS class and computed size.

DisplayChampagne Paper
Oswald 600 · clamp 3rem
H1Academic Excellence
Instrument Serif · 2.25rem
H2Design Foundations
Instrument Serif · 1.875rem
H3Color & Typography
Instrument Serif · 1.5rem
H4Component States
Oswald 600 · 1.25rem
EyebrowSection Label
Oswald · 0.75rem
Body LeadConnect with top institutions, exclusive cohorts, and global employers.
Instrument Sans · 1.25rem
BodyThe Xuperson Institute exists exactly at the ecotone — the fertile boundary where the deep, stable earth of academia meets the fast-moving, tidal ocean of corporate practice.
Instrument Sans · 1rem
Body SMSupporting text, secondary descriptions, and supplemental content appear at this size.
Instrument Sans · 0.875rem
CaptionImage caption, footnote reference, timestamp metadata
Instrument Sans · 0.75rem
CTA / LabelExplore System
Oswald 500 · 0.875rem
Code--primary: #800020
Space Mono · 0.875rem

Pairing Rules

Serif + Display

H1 (Instrument Serif) followed by CTA (Oswald uppercase) — the most common pairing. Academic authority expressed through action.

Display for all labels

Every badge, button label, nav item, and eyebrow uses Oswald. This creates consistent structural hierarchy across the UI.

Sans for all body

Instrument Sans at 16px/1.6 for all body copy, descriptions, and UI text. Never Serif or Display in paragraphs.

Mono for Mono contexts

Space Mono only for code, tokens, timestamps, and technical metadata. Never in marketing or editorial copy.

Italic Serif on screen

Instrument Serif italic is reserved for print only. On screen, use standard weight for display headings.

Serif for CTAs

CTAs are always Oswald — never Instrument Serif. The serif is contemplative; the CTA is directive.