Typography
Two typefaces and twelve text styles. Style names match Tailwind classes, so Poppins / text-3xl / semibold is font-heading text-3xl font-semibold.
Figma: 03 / Foundations / TypographyAa
PoppinsHeadings, titles and key metric values. Medium and semibold. Class: font-heading.
Aa
RobotoInterface text: body, labels, inputs, tables and navigation. Regular, medium and bold. Class: font-sans (the default).
Supporters who carePoppins / text-4xl / semiboldfont-heading text-4xl font-semibold · 36px / 40pxKey metric values (MetricValue).
Supporters who carePoppins / text-3xl / semiboldfont-heading text-3xl font-semibold · 30px / 36pxPage titles and metric card values.
Supporters who carePoppins / text-2xl / semiboldfont-heading text-2xl font-semibold · 24px / 32pxDialog and drawer titles.
Supporters who carePoppins / text-xl / semiboldfont-heading text-xl font-semibold · 20px / 28pxCard titles and compact metric values.
Supporters who carePoppins / text-lg / semiboldfont-heading text-lg font-semibold · 18px / 28pxSection and chart titles.
Supporters who carePoppins / text-base / mediumfont-heading text-base font-medium · 16px / 24pxShort emphasized headings inside content.
Supporters who careRoboto / text-base / mediumtext-base font-medium · 16px / 24pxLabels, buttons, navigation and strong table values.
Supporters who careRoboto / text-base / regulartext-base · 16px / 24pxBody copy, inputs and table values. The default.
Supporters who careRoboto / text-sm / mediumtext-sm font-medium · 14px / 20pxCompact labels: table headers, badges, segmented tabs.
Supporters who careRoboto / text-sm / regulartext-sm · 14px / 20pxDescriptions, helper text and chart axes.
Supporters who careRoboto / text-xs / mediumtext-xs font-medium · 12px / 16pxValue labels on chart marks.
Supporters who careRoboto / text-xs / regulartext-xs · 12px / 16pxOptional captions only.
<h1 className='font-heading text-3xl font-semibold text-text-primary'>Inbox</h1>
<p className='text-base text-text-secondary'>AI-recommended actions, reviewed by your team</p>Complete: 16px (text-base) is the default for body copy, inputs, labels and table values.
Complete: 14px (text-sm) only for compact labels, descriptions, helper text and chart axes.
Complete: 12px (text-xs) only for optional captions and value labels on chart marks.
Complete: Poppins only for headings, titles and key metrics; everything else is Roboto.
Not complete: No sizes, weights or letter spacing outside the twelve styles.
Not complete: No form labels smaller than 16px.
