Design System Guide

Comprehensive design patterns and components for creating consistent, modern interfaces

Typography Hierarchy

Consistent text styles for optimal readability and visual hierarchy

Heading Styles

Main Title (H1)

text-4xl md:text-5xl font-bold

Section Title (H2)

text-3xl md:text-4xl font-bold

Subsection Title (H3)

text-2xl md:text-3xl font-semibold

Card Title (H4)

text-xl md:text-2xl font-semibold

Body Text Styles

Large body text for subtitles and important descriptions

text-xl text-gray-300

Regular body text for standard content and descriptions

text-lg text-gray-400

Small text for secondary information and details

text-base text-slate-400

Caption text for labels and fine print

text-sm text-slate-500

Font System

Typography foundation using modern, readable fonts for optimal user experience

Primary Font Family

Manrope

Used for headings, titles, and primary text elements. Modern geometric sans-serif with excellent readability.

font-family: 'Manrope', sans-serif;
Light (300) The quick brown fox
Regular (400) The quick brown fox
Medium (500) The quick brown fox
Semibold (600) The quick brown fox
Bold (700) The quick brown fox

System Font Stack

System UI

Fallback system fonts ensuring consistent performance and native appearance across all platforms.

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
Fast Loading

No external font downloads required

Native Feel

Matches user's OS preferences

Accessibility

Respects user font settings

Usage Guidelines

Manrope Usage

  • • Main headings (H1, H2)
  • • Hero titles and taglines
  • • Section headers
  • • Call-to-action buttons
  • • Brand-focused content

System Font Usage

  • • Body text and paragraphs
  • • Navigation menus
  • • Form inputs and labels
  • • Secondary content
  • • UI components

Loading Best Practices

⚡
Preload Critical

Load primary fonts first

🎯
Font Display

Use font-display: swap

📦
Subset Fonts

Load only needed characters

Color Palette

Consistent color scheme using blue and slate variants

Primary Colors

Blue 500

#3B82F6

Blue 400

#60A5FA

Blue 300

#93C5FD

Background Colors

Slate 950

#020617

Slate 900

#0F172A

Slate 800

#1E293B

Text Colors

White

Primary Text

Gray 300

Secondary Text

Slate 400

Muted Text

Component Patterns

Reusable design patterns for consistent section layouts

Standard Section Pattern

Section Title

Section subtitle and description explaining the content below

Card Title

Card description text

Card Title

Card description text

Card Title

Card description text

Spacing Guidelines

Section Spacing

  • Section padding: py-20 (80px)
  • Mobile section padding: max-sm:py-16 (64px)
  • Header margin bottom: mb-16 (64px)
  • Mobile header margin: max-sm:mb-12 (48px)

Component Spacing

  • Grid gap: gap-8 (32px)
  • Mobile grid gap: max-sm:gap-6 (24px)
  • Card padding: p-8 (32px)
  • Mobile card padding: max-sm:p-6 (24px)