irc.now Design System

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>