Design System

Typography

This guide defines the typographic standards for all Integral products. Typography is the primary vehicle for communicating content, hierarchy, and brand identity across our Integral platform. Inter is our sole typeface, chosen for its exceptional legibility in data-dense interfaces.

Type Scale

Token	Size	Weight	Line Height	Letter Spacing	Usage
display	28px	600 \| Semibold	1.2 (33.6px)	-0.02em	Metric values, KPIs, hero numbers
heading-lg	20px	600 \| Semibold	1.3 (26px)	-0.01em	Page titles, major section headers
heading-md	18px	600 \| Semibold	1.4 (25.2px)	-0.01em	Card titles, modal headers, empty states
heading-sm	15px	600 \| Semibold	1.4 (21px)	0	Notification titles, subsection headers
body	14px	400 \| Regular	1.5 (21px)	0	Default body text, descriptions, paragraphs
body-medium	14px	500 \| Medium	1.5 (21px)	0	Buttons, nav items, emphasized body text
body-semibold	14px	600 \| Semibold	1.5 (21px)	0	Card labels, strong emphasis
small	13px	400 \| Regular	1.5 (19.5px)	0	Timestamps, helper text, secondary info
small-medium	13px	500 \| Medium	1.5 (19.5px)	0	Secondary buttons, dropdown items
caption	12px	500 \| Medium	1.5 (18px)	0	Metadata labels, form hints, subtle text
badge	12px	600 \| Semibold	1.4 (16px)	0	Status badges, type badges, count badges
row	12px	400 \| Regular	1.4 (16px)	0	Compact table cells (data-dense views)
overline	11px	500 \| Medium	1.3 (14.3px)	0.05em	Table headers (uppercase), section labels
micro	10px	500 \| Medium	1.3 (13px)	0.02em	Small avatar initials, compact count badges (does not pass AA)
code	12px	400 \| Regular	1.5 (18px)	0	Code snippets, technical values, monospace

Specimens