Design Tokens

The Verbiage

Typography

font-serif (Playfair Display): Used for authority and gravitas. Apply to page titles (h1), section headings (h2), and any text that requires elevated importance. The serif font creates a "Bible" aesthetic, signaling that this content is foundational knowledge.

font-sans (Inter): Used for UI precision and readability. Apply to body text, navigation links, buttons, and all interface elements. The sans-serif font ensures clarity and modern aesthetics for interactive elements.

Tracking: Use tracking-tight for headings to create visual density. Use tracking-tighter for extra authority on page titles. Body text uses default tracking for optimal readability.

Leading: Use leading-relaxed for body paragraphs to improve readability. Use leading-tight for headings to create visual cohesion.

Color Palette

Strictly use the Zinc scale from Tailwind. The Zinc palette provides neutral, professional tones that work across light and dark modes.

Background: bg-zinc-50 - The base background color for the entire site. Provides subtle warmth without being harsh.

Borders: border-zinc-200 - Subtle dividers that create structure without visual noise. Used for cards, sections, and component boundaries.

Headings: text-zinc-950 - Maximum contrast for headings. Ensures accessibility and creates clear hierarchy.

Body Text: text-zinc-600 - Medium contrast for body text. Provides readability without harshness.

Muted Text: text-zinc-500 - For secondary information, labels, and metadata.

Spacing

Use "Bible Spacing" - generous whitespace that allows content to breathe and creates a sense of importance.

Sections: py-20 for major sections. On mobile, use py-12 with md:py-20 for responsive scaling.

Grids: gap-8 between grid items. This creates clear separation without excessive spacing.

Content Padding: px-8 py-12 for main content areas. Provides comfortable reading margins.

Component Spacing: Use space-y-4 or space-y-6 for related elements within components.

The Blueprint

typescript

// ============================================
// Typography Showcase
// ============================================

// Page Title (Maximum Authority)
<h1 className="font-serif text-3xl font-semibold leading-tight tracking-tighter text-zinc-950">
  Page Title
</h1>

// Section Heading
<h2 className="font-serif text-xl font-semibold tracking-tight text-zinc-950">
  Section Heading
</h2>

// Body Text (UI Precision)
<p className="text-base leading-relaxed text-zinc-600">
  Body text uses Inter (font-sans) for readability.
</p>

// ============================================
// Color Palette Showcase
// ============================================

// Background & Container
<div className="bg-zinc-50 border border-zinc-200">
  <h3 className="text-zinc-950">Heading (Maximum Contrast)</h3>
  <p className="text-zinc-600">Body text (Readable Contrast)</p>
  <span className="text-zinc-500">Muted text (Secondary Info)</span>
</div>

// ============================================
// Spacing Showcase (Bible Spacing)
// ============================================

// Major Section
<section className="py-20 border-b border-zinc-200">
  <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div className="p-8 border border-zinc-200 bg-white">
      Grid item with Bible spacing (gap-8)
    </div>
  </div>
</section>

// ============================================
// Authority Pattern (Maximum Impact)
// ============================================
<div className="bg-zinc-50">
  <h1 className="font-serif text-4xl font-semibold leading-tight tracking-tighter text-zinc-950">
    Maximum Authority Heading
  </h1>
</div>

The AI Context

text

Use font-serif (Playfair Display) for headings to create authority. Use font-sans (Inter) for body text and UI elements. Always use Tailwind Zinc classes: bg-zinc-50 for backgrounds, border-zinc-200 for borders, text-zinc-950 for headings, text-zinc-600 for body text. Use py-20 for sections and gap-8 for grids. Never use hardcoded hex codes.

Directive for AI Agents

Copy and paste this directive to instruct an AI assistant on how to maintain this specific pattern:

text

## Directive for AI Agents

When generating UI, never use hardcoded hex codes. Use Tailwind Zinc classes. If a component lacks authority, apply font-serif and tracking-tighter to the heading.

**Required Typography:**
- Headings: `font-serif text-zinc-950 tracking-tight`
- Page Titles: `font-serif tracking-tighter` (extra authority)
- Body Text: `text-base leading-relaxed text-zinc-600`
- UI Elements: `font-sans` (default, no class needed)

**Required Colors:**
- Background: `bg-zinc-50`
- Borders: `border-zinc-200`
- Headings: `text-zinc-950`
- Body: `text-zinc-600`
- Muted: `text-zinc-500`

**Required Spacing:**
- Sections: `py-20` (or `py-12 md:py-20` for responsive)
- Grids: `gap-8`
- Content: `px-8 py-12`

**Forbidden Patterns:**
- ❌ Hardcoded hex codes (`#ffffff`, `#000000`, etc.)
- ❌ Custom color values
- ❌ Tight spacing (`py-4`, `gap-2`) for major sections
- ❌ font-sans on headings (use font-serif for authority)

**Authority Enhancement:**
If a component feels weak or lacks importance, apply:
- `font-serif` to the heading
- `tracking-tighter` for extra density
- `text-zinc-950` for maximum contrast

The Zinc palette and serif typography create the "Bible" aesthetic that signals foundational knowledge.