Typography
Fira Sans throughout — a readable working scale with dense data views.
Fira Sans for headings and body text, available as --font-sans and --font-heading (font-sans and font-heading in Tailwind). Headings take the heading font automatically where a component asks for it. Never name a font family directly.
Base body text is 15px on a 22px line height. Working text in controls, menus, labels and helper copy is 14px/20px; tables and badges stay at 13px. The smallest xs control variant remains available for exceptional cases. Section headings use 20px/28px, and page titles use 24px/32px.
Scale
The theme sets the font family and maps Tailwind's text-xs, text-sm, text-lg and text-xl utilities to 14px/20px, 15px/22px, 20px/28px and 24px/32px. Retune this table and /evaluate's specimen together — they're meant to match.
Account alerts
Notification rules
Flows that miss their baseline for two consecutive sends are flagged for review.
Alert threshold
Welcome Series · 31.2% open rate
Detected 12 minutes ago
Helper text sits at the 14px working size.
Weight
Weight is the one place hierarchy is allowed to move, and it moves rarely: 600 is reserved for page titles and section headings. Everything else — buttons, form labels, tabs, filter chips, badges, table headers and metric numbers — tops out at 500. Body, table and helper text stay at 400.
Numbers in data views
Use tabular-nums wherever numbers sit in a column or change value — table cells, metrics, deltas. Digits then hold a fixed width, so a table doesn't visibly shift as rows update or filter. See the alerts table in /evaluate for it in use.
In shadcn
theme.css sets --font-sans to Fira Sans and --font-heading to --font-sans, and applies font-sans to html. Stock Mira components use font-medium, text-xs and text-sm; Laurel raises those text steps and gives every default control one 32px height (--control-height) and every small control 28px (--control-height-sm): buttons (a Button rendered as a menu or popover trigger included), inputs, selects, input groups and toggles, so a toolbar that mixes them lines up. Data tables retain their compact row spacing.
theme.css does not load the font (a remote @import is dropped once bundled after Tailwind). Load Fira Sans once in your app:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap" />Or npm i @fontsource/fira-sans, or npx shadcn@latest add @ralekocode/laurel-font.
Code samples use the platform monospace. Laurel defines no mono face, and the docs never load another family.