02. Typography

Chapter 02·Three faces
Fraunces italic carries voice. Inter carries clarity. JetBrains Mono marks the instrument panel. Together they make the system feel human, precise, and technical — in that order.

The three faces.

Every piece of Luminocity content is set in one of three faces, and the choice itself carries meaning. Fraunces is how we feel. Inter is how we explain. Mono is how we measure.

Voice · Serif · Italic

Fraunces

Our display voice. Always italic, always generous. Reserved for manifestos, section openers, and pull quotes. Never for UI.

Fraunces has warmth and conviction — it reads like someone who means what they say. That's why we set the founder's words in it, not the product copy.

Source
Self-hosted · /fonts (variable)
Axes
opsz 9–144 · wght 100–900 · SOFT · WONK
Weights used
400, 600, 700
Fallback
Georgia, serif
Aa &

"We are creating a future where AI makes people genuinely better at all things."

Light 300Fraunces
Regular 400Fraunces
Semi 600Fraunces
Bold 700Fraunces
Black 900Fraunces
Italic 400Fraunces
Italic 700Fraunces
Variable axes opsz · SOFT · WONK
opsz 9 / caption Hello, future.
opsz 48 / text Hello, future.
opsz 144 / display Hello, future.
SOFT 100 · soft Hello, future.
WONK 1 · wonky Hello, future.

Fraunces ships four variable axes. We use opsz to let optical size follow point size automatically. SOFT and WONK stay at 0 — reserve them for special moments.

Clarity · Sans · Neutral

Inter UI

Our workhorse. All body copy, product UI, navigation, buttons. Four weights, each with its matching italic. Tight negative tracking on display sizes.

Set at 900 for headlines that need hammer; 400–500 for everything else. When Fraunces feels too ceremonial, Inter UI steps in.

Source
Self-hosted · /fonts
Weights shipped
400, 500, 700, 900 + italics
Format
TTF · font-display: swap
Fallback
Inter (VF), system-ui
Aa&

Sharp AI tools that make people measurably better at what they do.

Regular 400Inter UI
Regular ItalicInter UI
Medium 500Inter UI
Medium ItalicInter UI
Bold 700Inter UI
Bold ItalicInter UI
Black 900Inter UI
Black ItalicInter UI
Instrument · Mono

JetBrains Mono

The instrument panel. Eyebrows, section numbers, metadata, code, timestamps. Tiny, uppercase, wide-tracked.

It signals "this is a label, not content." Always accompanies, never headlines. If you find yourself setting a sentence in Mono, rewrite it in Inter.

Source
Self-hosted · /fonts
Weights shipped
100–800 + italics
Weights used
400, 500, 600
Format
TTF · font-display: swap
Tracking
0.08em · 0.14em
Aa&

01 / FOUNDATIONS  ·  v1.0  ·  APRIL 2026

Thin 100JetBrains
Extra 200JetBrains
Light 300JetBrains
Regular 400JetBrains
Medium 500JetBrains
Semi 600JetBrains
Bold 700JetBrains
Extra 800JetBrains
Italic 400JetBrains

The scale.

Ten steps from eyebrow to monument. Most of the system lives in body and body-lg. Display and monument are for single moments — the manifesto, a section opener — never for lists of anything.

--fs-monumentclamp(5rem, 14vw, 14rem)Monument.
--fs-displayclamp(3.5rem, 9vw, 7.5rem)Display
--fs-h1clamp(2.75rem, 6vw, 4.5rem)Heading 1
--fs-h2clamp(2rem, 4vw, 2.75rem)Heading 2, italic
--fs-h3clamp(1.5rem, 3vw, 2rem)Heading 3
--fs-h4clamp(1.25rem, 2vw, 1.5rem)Heading 4
--fs-leadclamp(1.1rem, 1.3vw, 1.3rem)Lead paragraph — used after headings and at the top of sections. Slightly larger than body.
--fs-body1rem · 16pxBody text. The default. Most of what users read is set here. Line-height 1.7 for long-form, 1.5 for UI.
--fs-body-sm0.875rem · 14pxSecondary copy. Captions, card descriptions, form hints.
--fs-caption0.75rem · 12pxCaption / label · uppercase · 12px
--fs-eyebrow0.7rem · 11px— Eyebrow  ·  the smallest thing we set

Pairings in the wild.

This is how the three faces actually work together. Italic Fraunces wraps a sans anchor. Mono sets the eyebrow. Inter carries the body. The rhythm is: label → statement → explanation.

Pattern · Hero

We are creating a future where
AI makes people better
at all things.

Not by taking their place, but by taking a place by their side.

Pattern · Section

Sharp tools,
not platforms.

We build one thing that solves one problem exceptionally well. We don't chase surface area. Density beats breadth, every time.

Pattern · Product

Certification Studio

Pass your cloud certification in 7 days.

Adaptive exam prep that figures out what you don't know and drills it until you do.

Rules of the road.

Six things we do. Six things we never do. Print this somewhere if you're about to start a page.

— Do

  • Mix Fraunces italic with Inter bold in the same heading — the contrast is the signature.
  • Set eyebrows in Mono, 11–12px, uppercase, with 0.14em tracking and a gold hairline before them.
  • Use tight negative tracking (-0.03 to -0.05em) on anything above 32px. Loosen to 0 below 20px.
  • Let the monument size breathe — never more than one per page, and never with a second headline nearby.
  • Use text-wrap: pretty on every block longer than a line.
  • Shimmer only one phrase per page, max. Gold goes on the verb that matters most.

— Don't

  • Set body copy in Fraunces. It's a voice, not a reading typeface.
  • Mono is never a headline. If it's a sentence, it's Inter or Fraunces.
  • Don't stack two Fraunces lines without an Inter anchor. The ornament needs a skeleton.
  • Don't center long-form text. Our copy is left-aligned, ragged right, with a max width of 620px.
  • No drop shadows on text. No text gradients beyond the gold shimmer.
  • Never use ALL CAPS below 0.1em tracking. That's a different brand, not this one.