Typography

All text styles used across the BlastX application. Each example shows the live rendered text alongside its Tailwind utility classes.

1. Font Families

The design system uses two variants of the Geist typeface.

Geist Sans

font-sans

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

Geist Mono

font-mono

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

2. Heading Scale

Heading levels as they appear throughout the app, from page titles down to small headings.

Page title

Dashboard

text-4xl font-bold tracking-tight

Section title

Your Articles

text-2xl font-bold

Card title

Article Setup

text-xl font-semibold

Subsection

Voice Profile

text-lg font-semibold

Card header

Select Author

text-base font-semibold

Small heading

Configuration

text-sm font-semibold

3. Body Text

Text styles for descriptions, body content, and helper text.

Description (large)

Page descriptions and subtitles that provide additional context.

text-lg text-muted-foreground

Body (default)

Body text used throughout the application for primary content and descriptions.

text-sm text-foreground

Helper (small)

Helper text, timestamps, and metadata labels.

text-xs text-muted-foreground

4. Labels & UI Text

Typography for form labels, buttons, badges, table headers, and navigation links.

Form label

Author Voice

text-sm font-medium text-foreground

Button text

Continue

text-sm font-medium

Badge text

In Progress

text-xs font-medium

Table header

Last Modified

text-sm font-medium text-muted-foreground

Nav link

Settings

text-sm text-muted-foreground

5. Special Text Styles

Purpose-specific styles for metrics, branding, code, links, and status text.

Metric value

1,247

text-3xl font-bold

Brand name

BlastX

text-lg font-semibold tracking-tight

Inline code

Use the variable_name parameter

bg-muted px-1.5 py-0.5 rounded font-mono

Link text

View documentation

text-primary hover:text-primary/80

Error text

This field is required.

text-sm text-destructive

Success text

Article approved successfully.

text-sm text-success

6. Font Weights

All font weights used in the design system, shown at the same size for comparison.

400 (normal)

Body text and paragraphs use regular weight for comfortable reading.

font-normal

500 (medium)

Labels, buttons, and interactive elements use medium weight.

font-medium

600 (semibold)

Section titles and card headers use semibold for emphasis.

font-semibold

700 (bold)

Page titles and metric values use bold for strong visual hierarchy.

font-bold

7. Text Colors

All semantic text color tokens available in the theme. Colors adapt automatically between light and dark mode.

Primary text

Primary content and headings

text-foreground

Secondary / muted

Descriptions and helper text

text-muted-foreground

Brand primary

Links and brand elements

text-primary

Brand secondary

Secondary brand accents

text-secondary

Success state

Approved and complete

text-success

Warning state

Needs attention

text-warning

Error / danger

Failed or invalid input

text-destructive