Handoff Design System

Typography

Typographic system establishes scale, sizes and weight of text.

CSS Tokens SASS Tokens Style Dictionary Component Types

Typefaces

Our typeface defines the foundation of our typography system. It ensures readability, consistency, and flexibility across all applications.

Typeface

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890'?"!"(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*

Typography Scale

This is our typography hierarchy, defining the full range of headings, paragraphs, labels and other text used across the system. It creates a clear and consistent type ramp to maintain readability and visual harmony.

Heading 1

Inter • 50056px • 1.1

Almost before we knew it, we had left the ground.

Heading 2

Inter • 50040px • 1.1

Almost before we knew it, we had left the ground.

Heading 3

Inter • 50032px • 1.3

Almost before we knew it, we had left the ground.

Heading 4

Inter • 50028px • 1.3

Almost before we knew it, we had left the ground.

Heading 5

Inter • 50024px • 1.3
Almost before we knew it, we had left the ground.

Heading 6

Inter • 60020px • 1.3
Almost before we knew it, we had left the ground.

Subheading

Inter • 70018px • 1.6
Almost before we knew it, we had left the ground.

Blockquote

Inter • 40024px • 1.3
Almost before we knew it, we had left the ground.