Typography

Heading Level 1

Heading Level One

Heading Level 2

Heading Level Two

Heading Level 3

Heading Level Three

Heading Level 4

Heading Level Four

Heading Level 5

Heading Level Five

Heading Level 6

Heading Level Six

Body Text - Large

This is large body text. It should be used for introductions, descriptions, and important content. The line height is relaxed for comfortable reading.

Body Text - Regular

This is regular body text. It works well for primary content, paragraphs, and narrative text. The generous line height ensures readability and a sense of breathing room.

Body Text - Small

This is small body text. It can be used for supplementary information, captions, and secondary content. Even at this size, we maintain good readability with proper line height.

Color System

Text Colors

Primary Text (gray-950) - Near Black

Secondary Text (gray-700) - Dark Gray

Tertiary Text (gray-600) - Medium Gray

Background Colors

gray-50

Lightest background

gray-100

Light background

Glassmorphic Effects

Glass Effect 1: bg-gray-50/80 backdrop-blur-md

Glass Effect 2: bg-gray-50/95 backdrop-blur-lg

Spacing & Layout

Gap Examples

gap-2 (8px)

gap-4 (16px)

gap-8 (32px) - Recommended

Vertical Spacing

This section has 12 units of space below (space-y-12)

And this section receives that spacing

Rounded Corners

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Note: Use rounded-2xl or larger for most components. Avoid rounded-lg for interactive elements.

Component Examples

Card with Glassmorphic Effect

Card Heading

This is a card component with a glassmorphic background. It uses backdrop blur and semi-transparent white to create a modern, layered effect.

Learn More

Button Styles

Section with Large Spacing

Section Heading

This demonstrates a section with generous vertical spacing (py-24). Notice the breathing room - this is core to our design language. Content feels open, inviting, and not cluttered.

Design Principles

✅ Generous spacing creates visual breathing room

✅ Large rounded corners (rounded-2xl+) for warmth

✅ Near-black/white grays for soft contrast

✅ Backdrop blur for modern glassmorphic effects

✅ No borders or drop shadows

✅ Strong, clear typography hierarchy (all semantic tags)

✅ Mobile-first responsive design

✅ Smooth GSAP animations with motion preferences

✅ Accessibility first (ARIA, keyboard nav, focus management)

✅ Component-first architecture

Theme System (data-theme)

Add data-theme attribute with light or dark value to any element. All child text, headings, and elements automatically adapt their colors!

Light Theme Section

Content on Light Background

This section demonstrates light theme colors. Text automatically adapts for readability.

Secondary text is even lighter for visual hierarchy.

Dark Theme Section

Content on Dark Background

This section demonstrates dark theme colors. Text automatically adapts for readability on dark backgrounds.

Secondary text is lighter gray for visual hierarchy.

Usage Example

<section data-theme='dark'>
  <h2>
    This text adapts automatically
  </h2>
  <p>
    Secondary text uses lighter colors
  </p>
</section>

New Hope

Christian Life Center