Design

Typography

Guidelines for how we use typography. These serve as guardrails for designers to design freely with best typographic practices in mind.
Edit page
Typefaces
We use Inter for everything. Except when we want to display code, that's when we use Input.
Inter
For General use
Input
For Code
Body
Our standard body text comes in at 16px. It has basic link styling and comes in a big and small variation.
The quick brown fox jumps over the lazy dog
Small
The quick brown fox jumps over the lazy dog
Default
The quick brown fox jumps over the lazy dog
Large
Heading Component
For ease of use and consistency, this component allows you to switch between heading levels.
Heading 6
Heading 5
Heading 4

Heading 3

Heading 2

Heading 1

Copy component
Design

Typography

Guidelines for how we use typography. These serve as guardrails for designers to design freely with best typographic practices in mind.
Edit page
Typefaces
We use Inter for everything. Except when we want to display code, that's when we use Input.
Inter
For General use
Input
For Code
Body
Our standard body text comes in at 16px. It has basic link styling and comes in a big and small variation.
The quick brown fox jumps over the lazy dog
Small
The quick brown fox jumps over the lazy dog
Default
The quick brown fox jumps over the lazy dog
Large
Heading Component
For ease of use and consistency, this component allows you to switch between heading levels.
Heading 6
Heading 5
Heading 4

Heading 3

Heading 2

Heading 1

Copy component

Typography

Guidelines for how we use typography. These serve as guardrails for designers to design freely with best typographic practices in mind.
Edit page
Typefaces
We use Inter for everything. Except when we want to display code, that's when we use Input.
Inter
For General use
Input
For Code
Body
Our standard body text comes in at 16px. It has basic link styling and comes in a big and small variation.
The quick brown fox jumps over the lazy dog
Small
The quick brown fox jumps over the lazy dog
Default
The quick brown fox jumps over the lazy dog
Large
Heading Component
For ease of use and consistency, this component allows you to switch between heading levels.
H6
H5
H4

H3

H2

H1

Copy component