Skip to main content

# Typography

Inter type scale — display, headings h1–h6, body text, lists, blockquote, and code patterns.

##### HEADING SCALE

## Inter, weight 600, tracking -0.01em

Sentence-case throughout. Avoid all-caps headings.

# Display heading

32px / weight 700 / tracking -0.02em

# Heading 1

24px / weight 600

## Heading 2

20px / weight 600

### Heading 3

18px / weight 600

#### Heading 4

16px / weight 600

##### Heading 5

14px / weight 600

###### Heading 6 (eyebrow)

13px / weight 600 / uppercase / tracking 0.05em

##### BODY TEXT

## Paragraphs and inline elements

Lead paragraph. Slightly larger than body text — used for the first paragraph of an article or to set context. Inter at 16px / line-height 1.6 reads comfortably on most screens.

Default body text at 14px. Inline elements: bold, italic, links, `inline code`, and `⌘K` keyboard shortcuts.

Muted text at 13px / muted color — for secondary information, captions, or supporting content.

##### LISTS

### Unordered

- First item with some explanatory text
- Second item also with descriptive copy
- Third item, slightly different
  - Nested item one
  - Nested item two
- Fourth item

### Ordered

1. Step one — the first action
2. Step two — followed by the next
3. Step three — and finally
4. Step four with a closing note

##### BLOCKQUOTE

> “Design isn’t how it looks — it’s how it works. And then how it looks.”

##### CODE BLOCK

    // Toast API — built into the template
    toast.success('Saved successfully');
    toast.warning('Storage at 82%');
    toast.error('Failed to fetch');

    // Command palette — open programmatically
    window.cmdk.open();

Copyright © 2026 Colorlib. All rights reserved. Template by Colorlib.