Domain Forge Design System

Overview

This is a code-first design system that serves as a single source of truth for all UI components across the Domain Forge site.

Core Principles

1. Theme-Based Design

Every section must use one of three theme classes:

• .theme-dark - Navy background (#0E1320) with white text
• .theme-cream - Cream background (#FAF3DD) with dark text
• .theme-light - White background with dark text

2. Container System

All content must be wrapped in .container for consistent max-width and padding.

3. Grid System

Use .auto-grid for responsive card layouts that automatically adjust to screen size.

4. Button System

• .btn--primary - Orange background (#FF7A00) with black text (WCAG compliant)
• .btn-primary - Orange background with dark navy text

5. Hard Rules

• No orange text - Orange is only for buttons, icons, and links on dark backgrounds
• No opacity changes - Buttons maintain contrast in all states
• No inline colors - All colors come from theme tokens
• No ad-hoc layouts - Use the defined grid and container system

Usage Examples

Basic Section

<section class="section theme-dark">
  <div class="container">
    <div class="center">
      <h1>Title</h1>
      <p class="lead text-muted">Subtitle</p>
    </div>
  </div>
</section>

Card Grid

<section class="section theme-cream">
  <div class="container">
    <div class="auto-grid">
      <article class="card card--surface-light">
        <h3>Card Title</h3>
        <p>Card content</p>
        <div class="actions">
          <a href="#" class="btn btn--primary">Action</a>
        </div>
      </article>
    </div>
  </div>
</section>

Token System

Colors

• --df-navy: #0E1320
• --df-cream: #FAF3DD
• --df-white: #FFFFFF
• --df-orange: #FF7A00
• --df-black: #111111

Spacing

• --space-xs: .5rem
• --space-sm: .75rem
• --space-md: 1rem
• --space-lg: 1.5rem
• --space-xl: 2rem
• --space-2xl: 3rem

Typography

• --font-xs: .875rem
• --font-sm: .95rem
• --font-base: 1rem
• --font-md: 1.125rem
• --font-lg: 1.25rem
• --font-xl: 1.5rem
• --font-2xl: 2rem

Migration Notes

Removed Classes

• .section-tight → .section
• .tight-box → .container
• .button-primary → .btn--primary
• .button-secondary → .btn-outline

New Classes

• .text-muted - Muted text color
• .lead - Larger text with muted color
• .kicker - Small uppercase text
• .card--surface-light - Light surface in themed sections
• .card--surface-dark - Dark surface in themed sections

Accessibility

• All buttons maintain 4.5:1 contrast ratio
• No opacity changes on hover/focus
• Proper color contrast in all themes
• Semantic HTML structure