Styleguide
The design this app is built on, shared by the product and this dashboard. Every token and component says who reaches for it. Derived from globals.css at build time. To change a value, change the CSS.
No feature doc carries area: design, so these pages are the only home the product's design has.
Font families
--font-headingsystem-ui, -apple-system, "Segoe UI", Roboto, sans-serifdashboard--font-bodysystem-ui, -apple-system, "Segoe UI", Roboto, sans-serifboth--font-monoui-monospace, "SF Mono", "Menlo", "Consolas", monospacedashboardThe type scale
The single source of truth for the `--text-*` scale. Values come from the raw `--font-size-*` primitives in :root.
Headings — system-ui
--text-5xltext-5xlunused48px · 36px mobileThe quick brown fox jumps--text-4xltext-4xlproduct32px · 28px mobileThe quick brown fox jumps--text-3xltext-3xlunused28pxThe quick brown fox jumps--text-2xltext-2xldashboard24px · 22px mobileThe quick brown fox jumps--text-xltext-xldashboard20pxThe quick brown fox jumps--text-lgtext-lgdashboard18pxThe quick brown fox jumpssmall headingsBody — system-ui
--text-basetext-baseboth17pxThe quick brown fox jumpslarge body / emphasis / lead-in--text-smtext-smboth15pxThe quick brown fox jumpsbody workhorse (primary content)--text-xstext-xsboth13pxThe quick brown fox jumpsmetadata, captions, timestamps, pills (reading floor)--text-2xstext-2xsboth12pxThe quick brown fox jumpsmicro UI labels: nav/tab labels, badge counts, eyebrows (short, non-reading)Weights
--weight-lightunused300 — The quick brown fox--weight-regulardashboard400 — The quick brown fox--weight-mediumdashboard500 — The quick brown fox--weight-semiboldboth600 — The quick brown fox--weight-boldboth700 — The quick brown foxLine height & tracking
--leading-tightdashboard1.2headings--leading-snugdashboard1.3tight body / multi-line labels--leading-normaldashboard1.35UI / compact body--leading-relaxeddashboard1.5body text--tracking-tightunused-0.01em--tracking-normaldashboard0em--tracking-wideboth0.04emRaw size primitives
The --font-size-* layer the canonical scale resolves through. Responsive: mobile values apply under 768px. New callsites use --text-*, never these.
--font-size-h148px · 36px mobileunused--font-size-h232px · 28px mobileproduct--font-size-h3-plus28pxunused--font-size-h324px · 22px mobiledashboard--font-size-h420pxdashboard--font-size-body-lg18pxsmall heading / large body (→ text-lg)dashboard--font-size-body-md17pxlarge body / emphasis (→ text-base)both--font-size-body-reg15pxbody workhorse (→ text-sm)both--font-size-body-sm13pxsmall / metadata — the READING floor (→ text-xs)both--font-size-caption12pxmicro UI-label size, below the reading floor (→ text-2xs)bothSource: app/globals.css (@theme Font Size + the TYPOGRAPHY sections), parsed at build time.