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.
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
A variety of font weights—from light to bold—create typographic hierarchy, helping users distinguish important content at a glance.
Click to hide all weights
.lightFont Weight: 300.regularFont Weight: 400.mediumFont Weight: 500.semiboldFont Weight: 600.boldFont Weight: 700Text 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.
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.
