← Conversion Club

Type & controls

Geist throughout. A shared hierarchy for desktop and mobile.

Typography

Headings scale with the viewport. Body copy keeps a comfortable reading size.

H140–64 px · line height 1.15

Page headline

H232–48 px · line height 1.15

Section heading

H324–30 px · line height 1.15

Service heading

H420–22 px · line height 1.15

Card heading

H518 px · line height 1.15

Component heading

Paragraph XL18–20 px · line height 1.6

Lead introduction

Paragraph L18 px · mobile 16 px · line height 1.6

Section introduction

Paragraph M16 px · line height 1.6

Body copy

Paragraph S14 px · line height 1.6

Supporting copy

Caption12 px · line height 1.4

Dates and compact labels

Buttons

Small 44 px, default 48 px, large 52 px. Horizontal padding 16 / 20 / 24 px. Icons 20 px, gap 8 px.

SM
MD
LG
Hover, press, keyboard focus, disabled, and reduced motion states included.

Layout rhythm

4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 px spacing. Flex and grid keep labels, icons, and actions aligned. Use 65 characters as the maximum body-copy measure.

Compact artwork uses 12 px labels, 14 px copy, and 18 px headings. Charts and key metrics are data displays, with tabular numerals, rather than heading roles.