Typography
Clear Communication Through Type
Our typography system is built on Inter for its exceptional readability and JetBrains Mono for code. This combination delivers optimal legibility across all screen sizes while maintaining a professional, modern aesthetic that aligns with our brand identity.
Headline Pairing
The most load-bearing rule in the system. A display headline is two clauses: a font-light setup and a font-semibold payoff. The weight change carries the hierarchy, so the type size does not have to.
Permissions Must Keep Up.
The canonical hero, from projects/web/src/app/(main)/page.tsx:18
Do
- Light setup, semibold payoff. Two weights, never more.
leading-noneon display sizes. The light weight needs tight leading to read as one block.- Title Case.
- Break lines explicitly with
<br />. The semibold clause starts its own line and is never split by a wrap. - Emphasis is neutral (
text-white/text-stone-050) or the brand gradient viabg-clip-text.
Don't
- No weights above 600.
font-extraboldships 4 times in the entire site. Treat 700+ as off-system. - Don't exceed
tracking-tight(−0.025em) on a display headline. Tracking is capped, not banned — the homepage hero sets none, the industry heroes use tracking-tight, and both are in-system. Roughly double the ceiling reads as generic tech-poster. - Don't let a display headline auto-wrap. A wrap that orphans one word of the semibold clause breaks the pairing.
- Don't use solid
text-magenta-600for headline emphasis. That is the eyebrow pattern (uppercase, tracking-widest, small) and ships zero times as headline emphasis.
Primary Font (Inter)
Inter is the primary typeface, versatile and modern. It supports a full range of text sizes, from small descriptors to large, attention-grabbing headlines.
Click to hide all sizes
.textextrasmall12px / 15.6px.textsmall14px / 18.2px.textbase16px / 20.8px.textlarge18px / 23.4px.textextralarge20px / 24px.text2xlarge24px / 28.8px.text3xlarge30px / 30px.text4xlarge36px / 36px.text5xlarge48px / 48px.text6xlarge60px / 57px.text7xlarge72px / 64.8px.text8xlarge96px / 86.4px.text9xlarge128px / 115.2pxMonospace Font (JetBrains Mono Light)
For code snippets and technical information, we use JetBrains Mono Light. Its clean shapes and balanced spacing ensure legibility, clearly distinguishing it from our primary text.
Click to hide all sizes
.mono-extrasmall12px / 15.6px.mono-small14px / 18.2px.mono-base16px / 20.8px.mono-large18px / 23.4px.mono-extralarge20px / 24pxFont Weights
Sandworm is a two-weight pairing, not a five-weight ramp. Light sets up, Semibold lands. Each weight below is listed with how many times it actually ships in authzed.com, so the ramp is ranked by real use rather than shown as five equal options.
Click to hide all weights
font-lightWeight 300· 295 uses in authzed.comfont-semiboldWeight 600· 223 uses in authzed.comfont-mediumWeight 500· 161 uses in authzed.comfont-boldWeight 700· 51 uses in authzed.comfont-normalWeight 400· 29 uses in authzed.comText Styles
Italics, underlines, and strikethroughs provide subtle emphasis, highlight interactive elements, or convey revisions.
Click to hide all styles
.italic.underlined.strikethroughExpressive Typography
Setting the Tone Beyond the Product
When we move beyond product interfaces—such as in presentations, marketing materials, and our website—typography becomes a more expressive tool. It can capture attention, set a mood, and communicate personality at a glance. In these contexts, we lean into the flexibility of our type system to highlight key messages, evoke emotion, and establish a distinct brand presence.
Key Considerations
Playful Scale & Rhythm
Allow more generous spacing, larger headlines, and tiered sizing to create a sense of depth and hierarchy.
Color & Contrast
Incorporate our accent colors more prominently in headings and display text, making critical points stand out while retaining readability.
Type Pairings
Use both Inter and JetBrains Mono Light in tandem. For example, a bold, colorful Inter headline can be paired with a more reserved JetBrains Mono subheading, adding subtle visual texture.
Contextual Adaptability
Tailor the typography to the medium. A high-impact presentation slide might feature a bold, dynamic headline, while a website hero section may use softer gradients and gently emphasized headings to draw users in.
Legibility Remains Paramount
Even in expressive applications, ensure all text can be read easily. Good typography maintains its clarity, no matter how large, colorful, or stylized it becomes.
Brand Emphasis Modes — Live Demo
Two ways to add brand emphasis inside a headline. Use solid magenta-600 for in-prose punchlines; reserve the gradient text-fill for the page's hero brand mark (once per hero, never in body paragraphs).
Solid magenta-600 semibold — in-prose emphasis
Every authorization use case. One system.
font-light + font-semibold text-magenta-600 — standard in-prose emphasis
Brand-gradient text-fill — hero brand mark
Built for teams that can't afford to get it wrong.
bg-gradient-to-r from-sand-300 via-red-400 to-violet-600 · bg-clip-text text-transparent · Safari: -webkit-background-clip -webkit-text-fill-color
Gradient text-fill is hero-only — never in body paragraphs. Use solid text-magenta-600 for in-prose emphasis.
Example Applications
By applying these principles, we transform typography from a simple means of conveying information into a powerful storytelling device—engaging viewers, reinforcing our brand, and making a lasting impression outside of everyday product interactions.
