Design System.

A comprehensive reference for typography, colors, spacing, and responsive patterns. Built on an 8pt grid with mathematical precision and mobile-first philosophy.

Typography System

Perfect Fourth scale (1.333 ratio) with optimized line heights and responsive sizing.

Font Families

Libre Baskerville

font-serif • headings

Used for headlines, page titles, and italic emphasis. Provides elegance and readability.

Futura PT

font-sans • body

Primary body font. Clean, modern, and highly legible across all screen sizes.

IBM Plex Mono

font-mono • code

Monospace font for code, letters, and technical content. Excellent character distinction.

Typography Scale

Aa

text-6xl • 144px

Display headlines • Line height: 158px • Letter spacing: -0.04em

text-6xl
Aa

text-5xl • 96px

Hero headlines • Line height: 106px • Letter spacing: -0.03em

text-5xl
Aa

text-4xl • 64px

Page headlines • Line height: 77px • Letter spacing: -0.02em

text-4xl
Aa

text-3xl • 48px

Section headlines • Line height: 62px • Letter spacing: -0.02em

text-3xl
Aa

text-2xl • 32px

Large headings • Line height: 45px

text-2xl
Aa

text-xl • 24px

Standard headings • Line height: 36px

text-xl
Aa

text-lg • 20px

Large body, small headings • Line height: 30px

text-lg
Aa

text-base • 16px

Body text baseline • Line height: 26px

text-base
Aa

text-sm • 14px

Small text, metadata • Line height: 20px

text-sm
Aa

text-xs • 12px

Captions, small UI • Line height: 16px

text-xs

Typography Patterns

Hero Headlines

Sample Hero Headline

<h1 class="text-2xl md:text-3xl lg:text-4xl font-serif italic leading-tight tracking-tight">

Section Headlines

Section Headline Example

<h2 class="text-xl md:text-2xl font-sans font-bold">

Body Text

This is standard body text that scales from 16px on mobile to 20px on desktop. It maintains excellent readability across all screen sizes with generous line spacing.

<p class="text-base md:text-lg leading-relaxed">

Lead Paragraphs

Lead paragraphs are larger and bolder to draw attention and provide hierarchy.

<p class="text-xl md:text-2xl leading-tight md:leading-relaxed font-bold text-gray-100">

Color System

Dark theme optimized with accessible contrast ratios and semantic color naming.

Primary Colors

gold

#CC8B29

text-gold

dark

#0A0A0A

bg-dark

white

#FFFFFF

text-cream-200

Gray Scale

gray-50

#FAFAFA

rare use

gray-100

#F4F4F4

high contrast

gray-200

#E5E5E5

light text

gray-300

#A3A3A3

secondary

gray-400

#737373

subtle text

gray-500

#404040

UI elements

gray-600

#262626

cards

gray-700

#171717

sections

gray-800

#0F0F0F

borders

gray-900

#0A0A0A

darkest

Color Usage Patterns

Text Hierarchy

Primary text text-cream-200
Secondary text text-gray-200
Tertiary text text-gray-300
Subtle text text-gray-400

Interactive Elements

Hover Link text-cream-200 hover:text-gold
bg-gold text-dark hover:bg-gold/80
bg-gray-800 hover:bg-gray-700

Spacing System

8pt grid system extending Tailwind's proven defaults with mathematically precise values.

Core Tailwind Scale

These proven values are kept unchanged:

0

0px

0.5

2px

1

4px

2

8px

3

12px

4

16px

6

24px

8

32px

8pt Grid Extensions

Additional values following the 8px grid pattern:

13

52px

18

72px

22

88px

26

104px

30

120px

38

152px

Semantic Spacing

Container Padding

32px horizontal padding

px-container-padding

Card Padding

24px padding on all sides

p-card-padding

Grid Gap

Item 1
Item 2
Item 3
gap-grid-gap

Responsive System

Mobile-first responsive design with logical breakpoints for modern devices.

Breakpoints

sm

Small

390px+

iPhone SE and up

md

Medium

810px+

iPad portrait and up

lg

Large

1200px+

MacBook and up

Responsive Patterns

Typography Scaling

Responsive Text Example

text-base md:text-lg lg:text-xl

Scales: 16px → 20px → 24px

Spacing Scaling

Section with responsive padding

py-16 md:py-24 lg:py-32

Scales: 64px → 96px → 128px

Layout Changes

Item 1
Item 2
flex-col md:flex-row

Stacked on mobile, side-by-side on tablet+

Layout System

Consistent container sizes and responsive padding patterns for optimal content presentation.

Container Sizes

max-w-site • 1200px • Full site width

maxWidth="site"

max-w-content • 800px • General content

maxWidth="content"

max-w-letters • 900px • Letter reading width

maxWidth="letters"

max-w-blog • 1040px • Wide comfortable reading

maxWidth="blog"

max-w-narrow • 600px • Narrow content

maxWidth="narrow"

Layout Architecture

Standard Page Layout

<Layout maxWidth="site">
  <main class="min-h-screen pt-20 pb-16 md:pb-24 lg:pb-32">
    <div class="mx-auto px-4 md:px-8 max-w-7xl">
      <!-- Page content -->
    </div>
  </main>
</Layout>

Component Patterns

Reusable patterns and components that maintain consistency across the site.

Cards

Standard Card

Cards use card-padding (24px) and subtle borders with hover states.

p-card-padding bg-gray-900 border border-gray-800 rounded-lg hover:border-gold/30

Feature Card

Feature cards use larger responsive padding and rounded corners.

p-8 md:p-12 lg:p-16 bg-gray-500 rounded-2xl

Navigation

text-gray-300 hover:text-cream-200 transition-colors

Buttons

bg-gold text-dark hover:bg-gold/80
bg-gray-800 hover:bg-gray-700
text-gold hover:bg-gold/10

Design Principles

✅ Do

  • • Use the 8pt grid for all spacing decisions
  • • Follow the typography scale consistently
  • • Design mobile-first, enhance for larger screens
  • • Use semantic HTML elements
  • • Leverage Tailwind utilities over custom CSS
  • • Maintain accessible color contrast
  • • Use consistent hover and focus states

❌ Don't

  • • Use arbitrary values like [17px] without good reason
  • • Break the typography scale with custom font sizes
  • • Override Tailwind defaults unnecessarily
  • • Create custom CSS where utilities exist
  • • Use generic divs when semantic elements exist
  • • Ignore responsive design principles
  • • Compromise accessibility for aesthetics