Typography
Breakpoints, weights, and leading for the most common text elements across the site.
Font family: Lexend Deca (variable), used across marketing pages, product surfaces, and navigation.
Desktop (≥1024px)
High-density pages and mega menus at full width.
| Style name | Font | Size & line | Weight | Use cases | Live pages |
|---|---|---|---|---|---|
Display headline | Lexend Deca, variable | 5xl / 7xl / 8xl (48–96px) tight line-height, negative tracking | Light (5xl) / Extra Light (7xl+) | Home hero and high-impact campaign mastheads. | |
Hero heading | Lexend Deca, variable | 5xl / 6xl / 7xl (48–72px) tight line-height | Light | Page-level hero titles for platform and solutions pages. | |
H1 | Lexend Deca, variable | 3xl / 4xl / 5xl (30–48px) tight line-height | Light | Primary section headings below hero. | |
H2 | Lexend Deca, variable | 3xl / 4xl (30–36px) tight line-height | Regular | Content blocks, cards, and key sections. | |
H3 | Lexend Deca, variable | 2xl (24px) snug line-height | Regular | Supporting lead-ins above body copy or form prompts. | |
Body copy | Lexend Deca, variable | Base → Lg (16–18px) relaxed line-height | Regular | Primary reading text across marketing and product sections. | |
Caption | Lexend Deca, variable | Sm (14px) relaxed line-height | Regular | Supporting details, stats, or inline helper text. | |
Eyebrow | Lexend Deca, variable | Xs (12px) uppercase with 0.24em tracking | Medium | Kickers and category labels above headings. |
Tablet (768–1023px)
Compressed layout while preserving hierarchy.
| Style name | Font | Size & line | Weight | Use cases | Live pages |
|---|---|---|---|---|---|
Display headline | Lexend Deca, variable | 5xl / 6xl (48–60px) tight line-height | Light (5xl) / Extra Light (7xl+) | Home hero and marquee splash copy. | |
Hero heading | Lexend Deca, variable | 5xl / 6xl (48–60px) tight line-height | Light | Page-level hero titles when space is constrained. | |
H1 | Lexend Deca, variable | 3xl / 4xl (30–36px) tight line-height | Light | Primary section headings below hero. | |
H2 | Lexend Deca, variable | 2xl / 3xl (24–30px) tight line-height | Regular | Feature sets, cards, and grids. | |
H3 | Lexend Deca, variable | Xl / 2xl (20–24px) snug line-height | Regular | Short support statements and lead-ins. | |
Body copy | Lexend Deca, variable | Base → Lg (16–18px) relaxed line-height | Regular | Narrative paragraphs and lists. | |
Caption | Lexend Deca, variable | Sm (14px) relaxed line-height | Regular | Supporting stats and helper text. | |
Eyebrow | Lexend Deca, variable | 11px uppercase with 0.2em tracking | Medium | Label text above headings. |
Mobile (≤767px)
Single-column flow that keeps hierarchy legible.
| Style name | Font | Size & line | Weight | Use cases | Live pages |
|---|---|---|---|---|---|
Display headline | Lexend Deca, variable | 4xl (36px) tight line-height | Light | Home hero and single-message landers. | |
Hero heading | Lexend Deca, variable | 5xl (48px) tight line-height | Light | Page-level hero titles for mobile views. | |
H1 | Lexend Deca, variable | 3xl (30px) tight line-height | Light | Primary section headings below hero. | |
H2 | Lexend Deca, variable | 2xl (24px) tight line-height | Regular | Single-column cards and feature rows. | |
H3 | Lexend Deca, variable | Xl (20px) snug line-height | Regular | Supporting context above lists and forms. | |
Body copy | Lexend Deca, variable | Base (16px) relaxed line-height | Regular | Paragraph text and detailed descriptions. | |
Caption | Lexend Deca, variable | Sm (14px) relaxed line-height | Regular | Small-print helper text. | |
Eyebrow | Lexend Deca, variable | 11px uppercase with 0.18em tracking | Medium | Kickers for mobile headings. |