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.”

— Michelle Moreno, Product designer
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.