VoiceMock

Typography

Type scale from DESIGN.md. Primary: Inter, Mono: Geist Mono. Each level has a specific use case.

Role	Size	Tailwind Class	When to use	Avoid
display	30px / 1.875rem	text-[1.875rem] font-bold leading-[1.2]	Page welcome heading	Section titles — use heading-lg, keep display a once-per-page moment; Repeating it to fake importance elsewhere
heading-lg	24px / 1.5rem	text-2xl font-semibold leading-[1.3]	Section titles	Card titles or modal headers — use heading-md
heading-md	18px / 1.125rem	text-lg font-semibold leading-[1.4]	Card titles, Modal headers	Bumping body up in size for emphasis — change font-weight instead, not the role
body	14px / 0.875rem	text-sm leading-relaxed	Default body text	Labels or meta info — use label/caption; Headings
body-sm	13px / 0.8125rem	text-[0.8125rem] leading-normal	Secondary info, Meta text	Primary readable content — strains at paragraph length
label	12px / 0.75rem	text-xs font-medium	Form labels, Nav group labels	Sentence- or paragraph-length copy — too small and dense to read as prose
caption	11px / 0.6875rem	text-[0.6875rem]	Timestamps, Counts	Text the user must act on — too small to anchor attention to something actionable

display

The quick brown fox

heading-lg

The quick brown fox

heading-md

The quick brown fox

body

The quick brown fox

body-sm

The quick brown fox

label

The quick brown fox

caption

The quick brown fox

mono

const score = calculateGrade(transcript)

I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.