Vestcove
03 / 07 · Design system
Typography
Bitter for display, Onest for body and UI. Three reusable scales cover display, body, and data. Use the toggle below to compare the current pairing against the swapped pairing.
Reusable type scales for product surfaces.
Default reading text for UI and product body copy. Onest regular weight, comfortable for property cards, evidence panels, and longer prose moments.
Display scale
Bitter MediumDisplay XLAa3rem
line 1.00
--vc-display-xl-*Maximum display size across product surfaces
line 1.00
--vc-display-xl-*Maximum display size across product surfaces
Display LAa2.5rem
line 1.03
--vc-display-l-*Page titles and major section openers
line 1.03
--vc-display-l-*Page titles and major section openers
Display MAa2rem
line 1.07
--vc-display-m-*Section headers and large card titles
line 1.07
--vc-display-m-*Section headers and large card titles
Display SAa1.5rem
line 1.12
--vc-display-s-*Panel titles and compact editorial labels
line 1.12
--vc-display-s-*Panel titles and compact editorial labels
Body and UI scale
Onest RegularBody LAa1.125rem
line 1.70
--vc-body-l-*Intro copy and explanatory paragraphs
line 1.70
--vc-body-l-*Intro copy and explanatory paragraphs
Body MAa1rem
line 1.65
--vc-body-m-*Default UI and product body copy
line 1.65
--vc-body-m-*Default UI and product body copy
Body SAa0.875rem
line 1.55
--vc-body-s-*Controls, labels, tabs, chips, metadata
line 1.55
--vc-body-s-*Controls, labels, tabs, chips, metadata
CaptionAa0.75rem
line 1.45
--vc-caption-*Source notes, provenance, quiet context
line 1.45
--vc-caption-*Source notes, provenance, quiet context
Data scale
Onest DataMetric LAa1.5rem
line 1.00
--vc-metric-l-*Primary score and headline numbers
line 1.00
--vc-metric-l-*Primary score and headline numbers
Metric MAa1.125rem
line 1.10
--vc-metric-m-*Prices, rents, yields, confidence
line 1.10
--vc-metric-m-*Prices, rents, yields, confidence
Metric SAa0.8125rem
line 1.35
--vc-metric-s-*Table values and compact values
line 1.35
--vc-metric-s-*Table values and compact values
Typography rules.
01
Display direction: Bitter, regular to medium, confident and app-like.
02
Body and UI direction: Onest from Google Fonts. Restrained, modern, premium, readable.
03
Two typefaces, nothing else. Bitter and Onest cover display, body, data, labels, and code samples — no monospace face ships in product UI.
04
All body and general UI text uses Onest by default.
05
Bitter and Onest are loaded at 400, 500, and 600 via next/font/google.
06
Default body weight is regular. Use medium or semibold sparingly for functional emphasis only.
07
globals.css defines reusable display, body/UI, and data type scales. Update the stylesheet and this page together when changing product typography.
08
Active display scale caps at 3rem. Treat --vc-display-xl-size as the maximum type size for product surfaces.
09
Use Onest for prices, yields, confidence, and score outputs. Do not introduce a separate monospace font for product UI.