Typography

Typography

Our typography system uses Inter as the primary font.

Type Scale

Heading 1

48px / 56px line-height / 700 weight

Heading 2

36px / 44px line-height / 700 weight

Heading 3

30px / 38px line-height / 600 weight

Heading 4

24px / 32px line-height / 600 weight

Heading 5

20px / 28px line-height / 600 weight

Heading 6

16px / 24px line-height / 600 weight

Body Text

Body Large - 16px / 24px line-height / 400 weight

Used for large body text and important paragraphs

Body - 14px / 20px line-height / 400 weight

Default body text for most content

Body Small - 12px / 16px line-height / 400 weight

Secondary text, captions, and helper text

Caption - 10px / 14px line-height / 400 weight

Captions, fine print, and micro text

Text Styles

This is a link with underline

Links use text-link color and underline decoration

const example = "inline code";

Inline code with monospace font and subtle background

This is a blockquote. It uses italic style with a left border accent.

Blockquotes for quotations and callouts

Code Block

function greet(name: string) {
  return `Hello, ${name}!`;
}

const message = greet("World");
console.log(message);