VendHub Design System

Typography System

13 semantic tokens across a 3-layer architecture — from 72px display headings to 12px captions. Built on Plus Jakarta Sans.

displayXL — 72px
displayLG — 48px
pageTitle — 32px
sectionTitle — 24px
body — 16px · bodySm — 14px
caption — 12px

3-Layer Type Hierarchy

Every text element maps to exactly one layer. Display & Heading lock weight. Body composes weight freely. Label & Caption serve utility roles.

Display
displayXL displayLG
Weight: 700 fixed
Heading
pageTitle sectionTitle subheading
Weight: 600–700 fixed
Body
body bodySm
Weight: composable
Label
label labelSm
Weight: 500 fixed
Caption
caption
Weight: composable

13 Tokens — Click to Explore

Each token encodes size, line-height, weight, and letter-spacing. Click any row to see details and a live specimen.

Live Type Tester

Type anything to see it rendered across all 4 layers simultaneously.

4 Weights — Plus Jakarta Sans

Only four weights are loaded. Each has a specific role in the system — no freestyle weight selection.

400
Regular
The quick brown fox jumps over the lazy dog
Body text, descriptions
500
Medium
The quick brown fox jumps over the lazy dog
Labels, nav items
600
SemiBold
The quick brown fox jumps over the lazy dog
Section titles, buttons
700
Bold
The quick brown fox jumps over the lazy dog
Display, page titles

Text Color Rules

Every token has a default color pairing. These aren't suggestions — they're the contract between design and code.

neutral-900 on white
Headings · Display
Maximum contrast for titles and hero text
neutral-800 on white
Body · Primary content
Slightly softer than headings, still WCAG AAA
neutral-700 on white
Body Small · Secondary
Table cells, descriptions, supporting text
neutral-500 on white
Caption · Metadata
Timestamps, helper text, placeholder labels
primary-600
Links · Interactive text
All clickable text elements — never underline-only
error-600
Error messages · Validation
Form errors, destructive action labels