Reusable typography classes for consistent text styling across the design system. Uses Playfair Display for headings and Inter for body text. Typography Element classes eliminate the need for Tailwind text utilities in Design System patterns.
Largest text size for hero headlines and major page titles. Uses Playfair Display for premium, elegant feel.
For use on normal page surfaces (hero sections, landing pages)
3rem (48px) | Playfair Display Bold | line-height: 1.1
<div class="t-display">Premium Nature Retreats</div>For use on dark overlays and hero sections with background images
Automatically adapts with light text on dark backgrounds
<div class="t-display-glass">Premium Nature Retreats</div>Primary page heading. Uses Playfair Display for public pages, main page titles.
For use in content areas, page headers
2.25rem (36px) | Playfair Display Bold | line-height: 1.2
<h1 class="t-h1">Discover Your Perfect Escape</h1>For use on dark overlays
<h1 class="t-h1-glass">Discover Your Perfect Escape</h1>Section heading for major content divisions. Uses Playfair Display.
For section headings in content
1.875rem (30px) | Playfair Display Bold | line-height: 1.2
<h2 class="t-h2">Available Properties</h2>For section headings on dark backgrounds
<h2 class="t-h2-glass">Available Properties</h2>Subsection heading. Uses Playfair Display on public pages.
For subsection headings
1.5rem (24px) | Playfair Display Semibold | line-height: 1.3
<h3 class="t-h3">Property Features</h3>For subsection headings on dark backgrounds
<h3 class="t-h3-glass">Property Features</h3>Standard paragraph text for descriptions, content blocks, and general information. Uses Inter for readability.
For paragraphs, descriptions, content
Standard paragraph text for descriptions, content blocks, and general information. Easy to read across all devices with optimal line height and spacing.
1rem (16px) | Inter Regular | line-height: 1.5
<p class="t-body">Standard paragraph text for descriptions and content.</p>For body text on dark overlays
Standard paragraph text for descriptions, content blocks, and general information. Easy to read across all devices with optimal line height and spacing.
<p class="t-body-glass">Standard paragraph text for descriptions and content.</p>Larger introductory paragraph text to draw attention and set context. Perfect for page introductions.
For introductory paragraphs
Larger introductory paragraph text to draw attention and set context for the content that follows.
1.25rem (20px) | Inter Regular | line-height: 1.75
<p class="t-lead">Larger introductory paragraph text.</p>For lead text on dark backgrounds
Larger introductory paragraph text to draw attention and set context for the content that follows.
<p class="t-lead-glass">Larger introductory paragraph text.</p>Smaller text for secondary information, metadata, and supporting details.
For metadata, secondary information
Smaller text for secondary information, metadata, and supporting details.
0.875rem (14px) | Inter Regular | line-height: 1.5
<p class="t-small">Smaller text for secondary information.</p>For small text on dark backgrounds
Smaller text for secondary information, metadata, and supporting details.
<p class="t-small-glass">Smaller text for secondary information.</p>Utility class to reduce text emphasis with muted color. Combine with any typography class.
For de-emphasized text
Secondary text with reduced emphasis using muted color.
Combine with .t-small for metadata
Uses --color-text-secondary (neutral-600 / neutral-400 in dark)
<p class="t-body t-muted">Secondary text with reduced emphasis.</p>
<p class="t-small t-muted">Metadata text</p>For muted text on dark backgrounds
Secondary text with reduced emphasis using muted color.
Metadata text
<p class="t-body-glass t-muted-glass">Secondary text with reduced emphasis.</p>
<p class="t-small-glass t-muted-glass">Metadata text</p>.t-h1, .t-body) for all text in Design System patterns.t-h1 through .t-h3 for page-level headings (Playfair on public pages).t-muted and .t-small for secondary text.t-body .t-muted<h1>, <p>) with typography classestext-lg, font-semibold, text-neutral-900) in Design System patterns.t-xs) for body contentstyle="" for text styling (layout margins OK)Typography styles are defined in:
/assets/css/typography.css
Includes: Type scale, font families (Playfair Display for headings, Inter for body), weights, line heights, colors, utility modifiers, and dark mode support.