2. Typography System Scale (Source of Truth: tokens.ts)
Official typography primitives export object export const type = { ... } consumed by Client & Admin apps.
Official Typography Tokens Matrix
tokens.ts ➔ type.*| Token Key | Font Family | Purpose & Target Level | Exact Utility Class String |
|---|---|---|---|
| type.hero | TASA Orbiter (Heading) | Display Landing & Hero Headings | font-heading text-3xl font-bold tracking-tight text-foreground sm:text-4xl |
| type.pageTitle | TASA Orbiter (Heading) | Main Page Title H1 | font-heading text-2xl font-semibold tracking-tight text-foreground sm:text-3xl |
| type.pageLead | General Sans | Subtitle under H1 Page Title | mt-1 max-w-2xl text-sm font-normal text-muted-foreground sm:text-base |
| type.sectionTitle | TASA Orbiter (Heading) | Card & Section Header H2 | font-heading text-base font-semibold text-foreground |
| type.sectionLead | General Sans | Sub-description under Section Header | mt-1 text-sm text-muted-foreground |
| type.sectionLabel | TASA Orbiter (UI) | Uppercase Category Badge Label | font-ui text-xs font-semibold uppercase tracking-wider text-muted-foreground |
| type.fieldLabel | TASA Orbiter (UI) | Form Input & Control Label | font-ui text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1.5 block |
| type.statLabel | TASA Orbiter (UI) | Metric Card KPI Header | font-ui text-[11px] font-semibold uppercase tracking-wider text-muted-foreground |
| type.statValue | TASA Orbiter + Tabular Nums | Metric Card Big Number | font-heading text-xl font-bold tabular-nums text-foreground |
| type.tableHead | TASA Orbiter (UI) | Data Table Header Columns | font-ui px-4 py-2.5 text-left text-[10px] font-semibold uppercase tracking-widest text-muted-foreground |
| type.tableCell | General Sans | Data Table Standard Cell | px-4 py-3 text-sm text-muted-foreground |
| type.mono | General Sans (tabular-nums) | Timestamps, PINs & System Logs | font-mono text-sm tabular-nums text-foreground |
| type.body | General Sans | Standard Paragraph Text | text-sm text-muted-foreground leading-relaxed |
| type.caption | General Sans | Small Helper Text & Subcaptions | font-sans text-xs text-muted-foreground |
| type.modalTitle | TASA Orbiter (Heading) | Modal Dialog Header Title | font-heading text-lg font-semibold text-foreground |
Live Typography Previews Rendered with Design Tokens
Token Parity Verified
type.hero
Font: TASA Orbiter • Weight: 700 (Bold)
Workforce Management OS
type.pageTitle + type.pageLead
Font: TASA Orbiter / General Sans
Timesheets & Payroll Dashboard
Real-time workforce shift tracking, employee clock-in audit logs, and automated payroll review exports.
type.sectionTitle + type.sectionLead
Font: TASA Orbiter / General Sans
Weekly Overtime & Labor Distribution
Automated overtime calculations mapped against FLSA compliance thresholds.
type.statLabel + type.statValue + type.mono
Font: TASA Orbiter / Monospace
Total Payroll Liability
$18,450.00 (842.50 hrs total)