Font Stack
Pixexid uses a system font stack for optimal performance and native feel across all platforms.
font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serifmacOS
San Francisco
Windows
Segoe UI
Android
Roboto
iOS
San Francisco
Type Scale
Transform Ideas into Visuals
Display
- Class Name:
- text-display
- Size:
- 3.5rem (56px)
- Line Height:
- 1.1 (61.6px)
- Weight:
- 600 (Semibold)
Usage Context
Hero sections, landing pages, marketing headlines
Design System Documentation
Heading 1
- Class Name:
- text-h1
- Size:
- 2rem (32px)
- Line Height:
- 1.2 (38.4px)
- Weight:
- 600 (Semibold)
Usage Context
Page titles, major section headers
Typography Foundation
Heading 2
- Class Name:
- text-h2
- Size:
- 1.5rem (24px)
- Line Height:
- 1.3 (31.2px)
- Weight:
- 500 (Medium)
Usage Context
Section headings, card titles
Font Scale System
Heading 3
- Class Name:
- text-h3
- Size:
- 1.25rem (20px)
- Line Height:
- 1.4 (28px)
- Weight:
- 500 (Medium)
Usage Context
Subsection headings, component titles
This is the default body text size used throughout the application. It provides comfortable reading for longer content blocks.
Base
- Class Name:
- text-base
- Size:
- 1rem (16px)
- Line Height:
- 1.5 (24px)
- Weight:
- 400 (Regular)
Usage Context
Body text, paragraphs, descriptions
Additional information, metadata, or secondary content
Small
- Class Name:
- text-sm
- Size:
- 0.875rem (14px)
- Line Height:
- 1.25 (17.5px)
- Weight:
- 400 (Regular)
Usage Context
Supporting text, captions, helper text
Created 2 hours ago · Updated 5 minutes ago
Extra Small
- Class Name:
- text-xs
- Size:
- 0.75rem (12px)
- Line Height:
- 1 (12px)
- Weight:
- 400 (Regular)
Usage Context
Labels, tags, timestamps, fine print
Button
- Class Name:
- text-button
- Size:
- 1rem (16px)
- Line Height:
- 1 (16px)
- Weight:
- 600 (Semibold)
Usage Context
Primary and secondary buttons
Button Small
- Class Name:
- text-button-sm
- Size:
- 0.875rem (14px)
- Line Height:
- 1 (14px)
- Weight:
- 600 (Semibold)
Usage Context
Compact buttons, action buttons
Email Address
Label
- Class Name:
- text-label
- Size:
- 0.875rem (14px)
- Line Height:
- 1.4 (19.6px)
- Weight:
- 500 (Medium)
Usage Context
Form labels, input labels
Meta
- Class Name:
- text-meta
- Size:
- 0.8125rem (13px)
- Line Height:
- 1.4 (18.2px)
- Weight:
- 300 (Light)
Usage Context
Metadata, subtle information
Font Weights
Aa Bb Cc
Light
- Class:
- font-light
- Value:
- 300
Metadata, subtle text
Aa Bb Cc
Regular
- Class:
- font-normal
- Value:
- 400
Body text, descriptions
Aa Bb Cc
Medium
- Class:
- font-medium
- Value:
- 500
Labels, emphasized text
Aa Bb Cc
Semibold
- Class:
- font-semibold
- Value:
- 600
Headings, buttons
Aa Bb Cc
Bold
- Class:
- font-bold
- Value:
- 700
Strong emphasis, highlights
Text Color Hierarchy
Primary Text (text-foreground)
Highest contrast for headings and important content
Secondary Text (text-neutral-strong)
Good contrast for body text and descriptions
Tertiary Text (text-neutral)
Lower contrast for captions and metadata
Disabled Text (text-disabled)
Lowest contrast for inactive elements
Accent Text (text-accent)
Brand color for links and interactive elements
Code Example
Using typography classes in components:
// Headings
<h1 className="text-h1 text-foreground">Page Title</h1>
<h2 className="text-h2 text-foreground">Section Header</h2>
<h3 className="text-h3 text-foreground">Subsection</h3>
// Body Text
<p className="text-base text-neutral-strong">
Standard paragraph with comfortable line height
for reading longer content blocks.
</p>
// Supporting Text
<p className="text-sm text-neutral">
Caption or metadata with smaller size
</p>
// Buttons
<button className="text-button font-semibold">
Primary Action
</button>
// Labels
<label className="text-label text-neutral-strong">
Form Field Label
</label>
// Emphasis with Font Weights
<p className="text-base">
This is <span className="font-medium">medium weight</span> and
this is <span className="font-semibold">semibold</span>.
</p>Best Practices
Do This
- ✓Use semantic text size classes (text-h1, text-button, etc.)
- ✓Maintain proper heading hierarchy (h1 → h2 → h3)
- ✓Use text-foreground for primary text
- ✓Apply proper line height for readability
Do not Do This
- ✗Avoid arbitrary font sizes like text-[18px]
- ✗Do not skip heading levels in hierarchy
- ✗Never use hard-coded color values for text
- ✗Avoid overly tight line heights for body text