Typography
Typography is the primary visual system. Images are optional; hierarchy is not.
Font pairing
Max 2 typefaces per asset. No exceptions.
Editorial gravitas. Use for hero headlines, pull quotes, and high-impact moments. Fallback chain: Big Caslon → Book Antiqua → Georgia.
Modern clarity. Body copy, UI elements, navigation, data. Fallback chain: Helvetica Neue → Helvetica → Arial.
Kickers, labels, code snippets, metadata. Always small (10–12 px), usually uppercase with wide tracking.
Type scale
Live rendered specimens at each level. What you see is what ships.
Page heroes. clamp(2.5rem, 8vw, 7.5rem). Uppercase, tight leading.
54–76 pt equivalent. Short phrasing, no full stop.
28–40 pt. Subheads or section labels.
20–24 pt. Uppercase optional.
16–18 px. Inter. Generous leading (1.6–1.75).
14 px. Secondary information.
10–12 px + wide tracking. Mono caps labels.
Display specimen
Pairing in action
Display + sans working together. The contrast creates hierarchy without size alone.
The Grand Opening
An exclusive evening of art, music, and conversation. One night only. March 15, 2026 — Brooklyn, NY.
Copy discipline
- One idea per slide.
- Titles: 3–7 words whenever possible.
- Replace adjectives with specifics (numbers, places, names, constraints).
- Avoid corporate foam (“leveraging”, “best-in-class”, “authentically”…).
Casing + punctuation
- Use sentence case or uppercase. Avoid Title Case except proper names.
- Headlines: avoid full stops; questions are fine.
- Body copy: full punctuation.
- Bullets: no full stops unless they’re full sentences.
Tokens
| Token | Value | Use |
|---|---|---|
| --cx-font-display | Libre Caslon Display | Heroes, pull quotes |
| --cx-font-sans | Inter | Body, UI, nav |
| --cx-font-mono | Courier New | Labels, kickers, code |