Typography

Font Family

Manrope

Primary font for all text. Clean, modern sans-serif from Google Fonts.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Heading Styles

font-heading (32px/40px, bold)

The quick brown fox jumps

font-title (20px/24px, semibold)

The quick brown fox jumps over the lazy dog

<p class="font-heading">Heading Text</p>
<p class="font-title">Title Text</p>

Body Styles

font-body (16px/24px)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

font-body-bold (16px/24px, bold)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

<p class="font-body">Regular body text</p>
<p class="font-body-bold">Bold body text</p>

Caption Styles

font-caption (14px/20px)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

font-caption-bold (14px/20px, bold)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

<p class="font-caption">Caption text</p>
<p class="font-caption-bold">Bold caption text</p>

Small Styles

font-small (10px/14px)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

font-small-bold (10px/14px, bold)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

<p class="font-small">Small text</p>
<p class="font-small-bold">Bold small text</p>

Text Colors

text-primary - Main content text

text-secondary - Secondary/muted text

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>

Font Weights

Regular (400) - Default weight

Medium (500) - Sidebar items, labels

Semibold (600) - Headings, buttons

Bold (700) - Strong emphasis

Complete Scale

Class	Size	Line Height	Weight	Sample
`font-heading`	32px	40px	Bold	Aa
`font-title`	20px	24px	Semibold	Aa
`font-body`	16px	24px	Regular	Aa
`font-caption`	14px	20px	Regular	Aa
`font-small`	10px	14px	Regular	Aa