Interontop.
SourceSerifunderneath.
Three families. One headline pattern. Inter sets the structure, Source Serif italic carries the punchline, JetBrains Mono labels the code.
Type at Corbez is mixed. Inter sets the structure. Source Serif italic carries the punchline.
Three families. One headline pattern. The pattern lives on every page so the brand feels like one voice.
01 · Families
Three typefaces.
One voice.
Inter for everything structural. Source Serif italic for the editorial pairing. JetBrains Mono for code and small labels. That is the whole set.
Body, UI, headlines (sans)
Inter
Every interface element. Headlines (semibold), body (regular), labels (medium). Optical sizing on.
The rail between work and the local economy.
font-sans · var(--font-inter)
Editorial punchline (italic)
Source Serif 4
The serif italic that pairs with Inter on every section headline. Never used alone for long-form body.
A working benefit is a key, not an app.
font-serif italic · var(--font-serif)
Code, tokens, eyebrows
JetBrains Mono
Code samples, color tokens, small eyebrow labels with 0.14em tracking. Never headline body.
corbezId · #041737 · 0x8cb4eb
font-mono · var(--font-mono)
02 · The pattern
Sans on top.
Serif italic underneath.
Every section headline uses this two-line pattern. Same size, same tracking, only the family changes. Serif italic accent is #8cb4eb on navy and #1e4d99 on light.
A working benefit
is a key, not an app.
Verify your work email once.
Recognized everywhere near work.
Partnership is the product.
Discoverability is the result.
No coupons. No codes.
Just show and go.
03 · Scale
Six steps.
Stop adding more.
Most pages need only three of these. Use clamp() with the ranges below so headlines scale gracefully between mobile and desktop.
Name
Size
Line
Tracking
Use
Display
64–80px
1.04
-0.035em
Hero headlines, brand index.
Section title
36–48px
1.05
-0.025em
Section anchors on the brand site.
Card title
20–28px
1.1
-0.02em
Card heads, audience labels.
Body lg
17–19px
1.55
normal
Hero subtitles, intro paragraphs.
Body
15px
1.55
normal
Default paragraph copy.
Caption / eyebrow
11–13px
1.4
0.14em uppercase
Section eyebrows, code labels.
04 · Code
Copy this.
Paste it everywhere.
The headline pattern using SplitHeadline from MotionSection. Mixed sans plus serif italic, clamped sizing, optical sizing on.
<SplitHeadline
as="h1"
className="font-sans font-semibold text-white tracking-[-0.035em] leading-[1.04]"
style={{ fontSize: 'clamp(40px, 6vw, 72px)', fontOpticalSizing: 'auto' }}
delay={0.08}
>
A working benefit
</SplitHeadline>
<SplitHeadline
as="h2"
className="font-serif italic font-normal tracking-[-0.02em] leading-[1.04] mt-2"
style={{ fontSize: 'clamp(40px, 6vw, 72px)', color: '#8cb4eb', fontOpticalSizing: 'auto' }}
delay={0.22}
>
is a key, not an app.
</SplitHeadline>05 · Retired
Two retirements.
Migrate any references.
Instrument Serif
Replaced by Source Serif 4. No new code may import Instrument Serif. Existing references must be migrated.
font-display (alias for serif)
Use font-sans for headlines and font-serif italic for the punchline pair. Do not stack font-display anywhere new.