Upgrade typography from generic SaaS to premium, authored, high-conviction design. Uses distinct display fonts, lighter body weights, tight negative tracking, mono eyebrows, restrained serif accents, and OpenType details to create typography with taste, authority, and emotional signal. Use when a page feels flat, template-y, overly safe, or visually anonymous.
Upgrade typography from generic SaaS to premium, authored, high-conviction design. Uses distinct display fonts, lighter body weights, tight negative tracking, mono eyebrows, restrained serif accents, and OpenType details to create typography with taste, authority, and emotional signal. Use when a page feels flat, template-y, overly safe, or visually anonymous.
Typography That Sells
Most generic product design does not fail because the layout is bad.
It fails because the typography has no point of view.
This skill exists to fix that.
The difference between a generic SaaS interface and a premium, venture-backed, deeply-considered product is often not color, not motion, not gradients, and not illustration. It is typography. Premium sites use type to create authority, mood, tension, and memory. The typography does not just carry information. It carries identity.
This skill should be used to make a design feel authored rather than assembled.
Its job is not to make typography more decorative.
Its job is to make typography more inevitable.
Extracted from patterns seen across Cal.com, Hex, Antimetal, Duna, Incident, Reducto, Shade, AngelList, Cohere, Outseta, Amplemarket, and Autosend.
Core philosophy
Typography is tone made visible.
It is rhythm.
It is control.
It is restraint.
It is emotion without theatrics.
Approach typography the way a great producer approaches sound:
remove what is unnecessary
amplify what is emotionally true
create contrast with restraint
let one strong move carry the piece
leave enough silence for the work to resonate
Do not ask:
How do I make this look more stylish?
Ask:
What is the typographic mood of this page?
What is missing: authority, tension, elegance, clarity, intimacy, sharpness?
What is too loud?
What is too safe?
What can be removed so the typography has more weight?
What single move would make this page feel authored?
Premium typography does not come from adding more.
It usually comes from choosing less, but choosing better.
What this skill is for
Invoke this skill when:
the site uses Inter or system sans for both display and body
headings feel flat, default, or template-like
typography feels competent but emotionally anonymous
the page looks polished but not memorable
display type is large but badly spaced
body text is too heavy, too neutral, or too conventional
the design feels like “good SaaS” instead of “real taste”
the user says the work feels generic, unrefined, unpolished, flat, or AI-generated
What this skill must do
This skill should not simply suggest fonts.
It should:
diagnose why the typography feels generic
name what quality is missing
define the intended mood
identify the fewest changes needed to transform the design
explain what should be removed, not just what should be added
recommend exact implementation moves
preserve restraint
The output should feel like a creative director making typography more inevitable, not a style guide generator dumping options.
The typographic moods
Before changing anything, identify the dominant mood of the page.
Choose one primary direction:
precise
editorial
cinematic
intellectual
luxurious
calm
institutional
futuristic
intimate
confrontational
Then commit.
Do not mix moods casually.
Generic designs are often emotionally indecisive. They use safe fonts, safe hierarchy, safe spacing, and safe contrast, and end up saying nothing clearly.
Each page should feel like it knows what it is.
The decision filter
Before applying any change, test it against these five questions.
1. Does this make the page feel more inevitable?
The strongest typographic moves feel obvious after they are made.
If a move feels trendy, ornamental, or too self-aware, it is probably weaker than a simpler one.
2. Does this increase tension in the right place?
Good typography uses controlled tension:
tighter display tracking
lighter body against stronger headlines
wide-tracked mono labels against dense sans copy
a single serif interruption inside a disciplined system
Tension creates feeling.
Too many competing tensions create noise.
3. Does this remove genericness?
The page needs at least one real typographic point of view.
That could be:
a distinctive display face
unusually disciplined tracking
a weight strategy with real contrast
mono used as a structural voice
a serif accent used sparingly and precisely
Without one of these, the page usually remains forgettable.
4. Is this gesture earned?
Do not add details because they are “designerly.”
Italic accents, mono labels, alternate glyphs, and expressive pairings should feel earned by the brand, the mood, and the page.
5. Is there enough silence?
Typography needs restraint to land.
If every element is emphasized, none of them matter.
Rules of restraint
One heroic move is better than five clever ones
If the display font has character, everything around it should get quieter
If the body text is elegant and light, do not over-style controls and labels
Mono is a tool, not confetti
Serif accents should feel like a whisper, not a costume
Tight tracking should create authority, not damage readability
If the UI is visually complex, typography should simplify
If the UI is sparse, typography can carry more personality
Premium does not mean louder
Editorial does not mean chaotic
Luxury does not mean serif everywhere
Taste is often subtraction
Response model for this skill
When invoked, respond in this order:
1. Current problem
Describe why the typography is failing in plain language.
Examples:
The page is visually competent but emotionally anonymous.
The hierarchy exists, but the type has no tension or signature.
Everything is readable, but nothing feels authored.
The typography is too safe for the ambition of the product.
2. Missing quality
Name the exact thing missing:
authority
elegance
sharpness
warmth
editorial tension
visual rhythm
conviction
softness
contrast
3. Emotional direction
Define the typographic mood the page should move toward.
Example:
Move this from “default SaaS utility” to “precise editorial software.”
Move this from “safe tech startup” to “calm premium infrastructure.”
Move this from “template-looking landing page” to “high-conviction product brand.”
4. Typographic strategy
Recommend the minimum set of changes needed.
This usually includes:
display/body split
tracking correction
weight redistribution
line-height tightening
eyebrow treatment
optional accent move
5. Exact implementation moves
Provide specific settings, example pairings, and code when useful.
6. What to avoid
Name the overcorrections that would ruin it.
7. Optional taste move
Give one elevated move only if the design can support it.
The 8 core rules
Rule 1: Display font must have a different voice from the body font
Premium typography usually separates display from body.
The display carries identity.
The body carries clarity.
Using the same neutral sans everywhere is the fastest way to make a design feel generic.
Proven pairings from case studies:
Site
Display
Body
Accent
Cal.com
Cal Sans 600
Cal Sans UI Variable Light 300
—
Hex
PP Formula SemiExtended 600
GT Cinetype 300/400
PP Editorial New italic
Antimetal
Ivar Text serif
ABC Diatype Plus Variable
Silkscreen Bold
Duna
GT America
GT America
Delight Mother serif
Incident
Bureau Sans
Bureau Sans
Bureau Serif, Geist Mono
Reducto
reductoSerif
reductosans / Inter
Reddit Mono
Shade
Inter Display 500/600
Inter 400
Apple Garamond italic
Cohere
CohereHeadline
CohereText / CohereVariable
CohereMono
Outseta
Kaio 700
Inter Var
Permanent Marker
Autosend
Lexend Giga uppercase
Geist 300
Geist Mono uppercase
AngelList
angellistdisplay variable
angellist variable
DM Mono
Amplemarket
custom neo-grotesque
same
grain-textured wordmark
Minimum viable pairing if bespoke fonts are not available:
Replace generic labels with mono eyebrows if appropriate.
Add one serif italic accent only if the page needs a human or editorial note.
Enable advanced type features if the font supports them.
Remove extra flourishes that compete with the type.
Anti-patterns to kill
Inter everywhere
large headings with default tracking
body text that is too heavy
headings that are just bold instead of considered
too many font weights
too many typefaces
faux-editorial details with no system behind them
uppercase labels without added tracking
serif accents scattered across the whole page
over-styled badges and buttons when the body is already delicate
treating type like decoration instead of structure
Stronger critique language this skill should use
Instead of:
“This needs more personality.”
Say:
“The typography is functional, but it has no real point of view. It reads like polished default software rather than a product with conviction.”
Instead of:
“Use a serif accent.”
Say:
“Introduce contrast only where it creates emotion. One serif italic interruption inside an otherwise disciplined sans system can make the page feel authored without making it feel costume-y.”
Instead of:
“Make the hero bigger.”
Say:
“Give the hero more authority by increasing scale, tightening tracking, and pulling line-height down until it feels composed rather than merely large.”
Instead of:
“The page feels flat.”
Say:
“The hierarchy exists, but the typography is not creating enough tension, rhythm, or signature. Everything is working, but nothing is landing.”
Reference patterns
Pattern
Case study
Display and body in one custom family with strong weight contrast
Cal.com
Serif display with sans body
Antimetal, Reducto, Outseta
Serif italic inside sans system
Hex, Shade
px-based tracking precision
Incident, Antimetal, Amplemarket
Stylistic set usage
Antimetal, Reducto
Fluid display scaling
AngelList, Hex
Mono eyebrows with wide tracking
Hex, AngelList, Duna
Very light body text
Cal, Autosend, Hex
Highly distinctive display voice
Outseta, Autosend
Final instruction
Do not use this skill to make typography busier.
Use it to make typography truer.
The end result should feel:
sharper
calmer
more confident
more inevitable
less generic
more remembered
If the typography starts feeling self-conscious, you went too far.
If it starts feeling obvious in retrospect, you are getting close.
