Typography
Type system, font pairings, and text styling guidelines for consistent brand expression.
Font Families
Geist Sans
Primary heading font. Modern, geometric sans-serif with excellent readability at large sizes.
System UI
Body text uses system fonts for optimal performance and native feel across platforms.
SF Mono / Consolas
Monospace for code snippets, technical content, and data displays.
Type Scale
| Name | Size | CSS Variable | Example |
|---|---|---|---|
| XS | 0.75rem (12px) | --brand-text-xs | Caption text |
| SM | 0.875rem (14px) | --brand-text-sm | Small body text |
| Base | 1rem (16px) | --brand-text-base | Default body text |
| LG | 1.125rem (18px) | --brand-text-lg | Lead paragraphs |
| XL | 1.25rem (20px) | --brand-text-xl | Subheadings |
| 2XL | 1.5rem (24px) | --brand-text-2xl | Section headings |
| 3XL | 1.875rem (30px) | --brand-text-3xl | Page titles |
| 4XL | 2.25rem (36px) | --brand-text-4xl | Hero text |
Font Weights
Aa
Normal
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700
Type Pairings
Recommended combinations for different contexts.
Marketing Hero
Transform Your Time Tracking
Simple, reliable time and expense tracking that syncs seamlessly with QuickBooks.
Heading: Geist Sans, Bold, 4XL | Body: System UI, Regular, XL
Product Card
Minute7
Time and expense tracking for QuickBooks. Simple pricing, powerful features, seamless sync.
Learn more →
Label: System UI, Semibold, SM | Title: Geist Sans, Bold, 2XL | Body: System UI, Regular, Base
Technical / Data Display
DCAA Compliance Status
✓ Daily time entry: Enforced
✓ Audit trail: Complete
✓ Supervisor approval: Required
Title: Geist Sans, Semibold, XL | Data: SF Mono, Regular, SM
Brand-Specific Styling
Minute7
Headline Style
Track Time. Track Expenses. Stay in Sync.
Body Style
Simple, reliable time tracking that works the way you do. Built for QuickBooks users.
Tone: Friendly, straightforward, efficient
Accent Color: #059669 (Emerald)
Hour Timesheet
Headline Style
DCAA Compliance. Without the Complexity.
Body Style
Enterprise-grade compliance at a price small contractors can afford. Setup in days, not months.
Tone: Professional, trustworthy, accessible
Accent Color: #EA580C (Orange)
CSS Variables Reference
/* Typography Variables */
--brand-font-heading: 'Geist Sans', system-ui, sans-serif;
--brand-font-body: system-ui, -apple-system, sans-serif;
--brand-font-mono: ui-monospace, SFMono-Regular, monospace;
/* Font Weights */
--brand-font-normal: 400;
--brand-font-medium: 500;
--brand-font-semibold: 600;
--brand-font-bold: 700;
/* Type Scale */
--brand-text-xs: 0.75rem;
--brand-text-sm: 0.875rem;
--brand-text-base: 1rem;
--brand-text-lg: 1.125rem;
--brand-text-xl: 1.25rem;
--brand-text-2xl: 1.5rem;
--brand-text-3xl: 1.875rem;
--brand-text-4xl: 2.25rem;