## Overview

The irc.now design system uses a green-on-dark palette with a three-font system. Newsreader for display headings, Outfit for body text, and JetBrains Mono for all interface chrome. Themes switch via a data-theme attribute on the root element.

### Design Principles

- - Green on dark: monochromatic palette with #5CA882 accent
- - Three fonts: Newsreader (display), Outfit (body), JetBrains Mono (chrome)
- - IRC native: patterns from IRC client conventions
- - Dual theme: dark-first with light via data-theme attribute
- - Texture: SVG grain overlay at 1.5% opacity

## Colors

A four-level text hierarchy, four background depths, and five nick accent colors. All tokens resolve to both dark and light theme values.

### Brand

Green
--g / #5CA882
Green Light
--g2 / #72C09A
Green Pale
--g-pale / #1C2E24

### Backgrounds

Background
--bg / #121412
Surface
--surface / #1A1C1A
Well
--well / #101210
Deep
--deep / #0C0E0C

### Text

Primary
--text / #D6DAD7
Secondary
--text-2 / #8A928C
Tertiary
--text-3 / #5C645E
Quaternary
--text-4 / #363C38

### Nick Colors

Nick A
--na / #68AA82
Nick B
--nb / #AA9E68
Nick C
--nc / #68A0AA
Nick D
--nd / #AA68A0
Nick E
--ne / #88AA58

## Typography

Three font families serve distinct roles. Newsreader for editorial display type, Outfit for readable body text at light weights, and JetBrains Mono for all interface chrome.

### Type Scale

Hero Heading
Plan Price - 1.5rem
Feature Heading - 1.25rem
Body Text - 15px / Outfit Light
Base Text - 14.5px / Outfit Regular
Mono UI - 12.5px / JetBrains Mono
Nav / Button - 12px
Label - 11.5px
SECTION LABEL - 10px

### Font Loading

HTML

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">

## Spacing

Pixel-based spacing scale. The page uses 800px max-width with 24px horizontal padding.

### Layout Constants

Property | Value | Usage
--- | --- | ---
`--page-max` | 800px | Page container max-width
`--page-px` | 24px | Page horizontal padding

### Border Radius

Token | Value | Usage
--- | --- | ---
`--radius-sm` | 2px | Code tags
`--radius-base` | 3px | Buttons
`--radius-md` | 4px | Input fields
`--radius-lg` | 5px | Terminal, price table
`--radius-xl` | 6px | Client card
`--radius-full` | 50% | Dots, brand mark

## Buttons

All buttons use JetBrains Mono. Three variants: filled green CTA, text link, and compact nav CTA.

### Button Variants

sign up free pricing log in sign up get pro
HTML

    <a href="/signup" class="btn-fill">sign up free</a>
    <a href="#pricing" class="btn-text">pricing</a>
    <a href="/login" class="nav-cta">log in</a>
    <a href="/signup" class="pt-btn pt-btn-o">sign up</a>
    <a href="/signup?plan=pro" class="pt-btn pt-btn-f">get pro</a>

## Cards

Composite containers for content blocks: IRC client mockup, terminal, and pricing table.

### Terminal Block

terminal
# connect
/server irc.now 6697 -ssl
# add a network
/msg *control addnetwork libera
HTML

    <div class="terminal">
      <div class="terminal-chrome">
        <div class="dots"><span></span><span></span><span></span></div>
        <span>terminal</span>
      </div>
      <div class="terminal-body">
        <span class="cm"># connect</span><br>
        <span class="pr">/server</span> irc.now 6697 -ssl
      </div>
    </div>

### Pricing Table

HTML

    <div class="price-table">
      <div class="pt-row pt-head">
        <div class="pt-cell"></div>
        <div class="pt-cell">
          <span class="plan-name">free</span>
          <span class="plan-price">$0</span>
        </div>
        <div class="pt-cell">
          <span class="plan-name">pro</span>
          <span class="plan-price">$4 <span>/mo</span></span>
        </div>
      </div>
      <div class="pt-row">
        <div class="pt-cell">networks</div>
        <div class="pt-cell">1</div>
        <div class="pt-cell">unlimited</div>
      </div>
      <div class="pt-actions">...</div>
    </div>

## Forms

The IRC client input field with blinking cursor.

### IRC Input

message #lobby
HTML

    <div class="cl-input">
      <div class="cl-input-field">
        <span>message #lobby</span>
        <div class="cl-cursor"></div>
      </div>
    </div>

## Layout

Page container, sticky nav, section pattern, feature grid, and footer.

### Page Structure

HTML

    <html lang="en" data-theme="dark">
    <body>
      <div class="page">
        <nav class="nav">
          <a href="/" class="mark">irc<span class="dot"></span>now</a>
          <div class="nav-r">
            <a href="/docs" class="desk">docs</a>
            <button class="theme-btn">◑</button>
            <a href="/login" class="nav-cta">log in</a>
          </div>
        </nav>

        <section class="hero reveal">...</section>
        <section class="client-section reveal">...</section>
        <section class="features reveal">...</section>

        <footer class="footer">
          <span class="mark">irc<span class="dot"></span>now</span>
          <div class="footer-links">...</div>
        </footer>
      </div>
    </body>

### Feature Grid

HTML

    <div class="feat">
      <div class="feat-label">bouncer</div>
      <div class="feat-body">
        <h3>your nick stays in the channel</h3>
        <p>description text here</p>
      </div>
    </div>

## IRC Components

IRC-specific patterns: message lines, channel sidebar, and client chrome.

### Message Line

14:02 reed has anyone tried the new mesa drivers
14:02 hako yeah they fixed the vulkan thing finally
14:03 moth oh nice, was waiting on that
HTML

    <div class="irc-msg">
      <span class="time">14:02</span>
      <span class="nick" style="color:var(--nb)">reed</span>
      <span class="text">has anyone tried the new mesa drivers</span>
    </div>

    <div class="irc-msg system">
      <span class="time">14:01</span>
      <span class="nick"></span>
      <span class="text">&mdash; bouncer uptime 23d 7h</span>
    </div>

### Channel Sidebar

channels
#lobby
#dev
#music
networks
libera.chat
HTML

    <div class="cl-sidebar">
      <div class="cl-sb-label">channels</div>
      <div class="cl-sb-item active">#lobby</div>
      <div class="cl-sb-item">#dev</div>
      <div class="cl-sb-gap"></div>
      <div class="cl-sb-label">networks</div>
      <div class="cl-sb-item">libera.chat</div>
    </div>