# irc.now Design System
Visual identity standards, UI components, and design tokens for irc.now.
## Overview
The irc.now design system is built around a green-on-dark palette with an IRC-native aesthetic. It uses a three-font system: Newsreader for display type, Outfit for body text, and JetBrains Mono for interface chrome, labels, and message content. Themes switch via a `data-theme` attribute on ``.
## Structure
```
design/
tokens/ # Design tokens (colors, typography, spacing)
colors.json
typography.json
spacing.json
tokens.css # CSS custom properties (dark + light themes)
components/ # Reusable UI components
buttons.css
cards.css
forms.css
layout.css
irc.css # IRC-specific patterns
assets/ # Brand assets (logo, favicon, OG images)
docs/ # Additional documentation
integration-guide.md
quick-reference.md
index.html # Living documentation
```
## Getting Started
Include the design system in your HTML:
```html
```
Load fonts:
```html
```
### Using Design Tokens
```css
.my-component {
color: var(--text);
background: var(--surface);
padding: var(--space-4);
border: 1px solid var(--line);
border-radius: 3px;
font-family: var(--mono);
font-size: 12.5px;
}
```
### Theme Switching
Themes are toggled by setting `data-theme` on the root element:
```html
```
```javascript
document.documentElement.setAttribute('data-theme',
document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light'
);
```
### Viewing the Living Documentation
```bash
cd design
python3 -m http.server 8000
# Open http://localhost:8000
```
## Design Principles
### Green on Dark
Monochromatic dark palette with green (#5CA882) as the single accent color. The green carries through links, active states, CTAs, and the brand dot.
### Three-Font System
Newsreader (serif) for display headings. Outfit (sans) for body text at light weights. JetBrains Mono for all interface chrome: nav, labels, IRC messages, code, buttons.
### IRC Native
Component patterns drawn from IRC client conventions: nick colors, channel sidebars, message grids, terminal blocks, system messages.
### Dual Theme
Dark-first with a full light palette. Switched via `data-theme` attribute, not media query. All color tokens resolve to both themes.
### Texture
A subtle SVG noise overlay at 1.5% opacity adds grain to the background.
## Corporate Identity
### Colors
**Brand:**
- Green: `#5CA882`
- Green Light: `#72C09A`
- Green Pale: `#1C2E24`
**Nick Palette (dark):**
- Nick A: `#68AA82`
- Nick B: `#AA9E68`
- Nick C: `#68A0AA`
- Nick D: `#AA68A0`
- Nick E: `#88AA58`
### Typography
**Font Families:**
- Display: Newsreader (serif)
- Body: Outfit (sans-serif)
- Mono: JetBrains Mono
**Key Sizes:**
- Hero: `clamp(2.6rem, 5.8vw, 4rem)`
- Feature heading: `1.25rem`
- Body: `14.5px` / `15px`
- Mono UI: `12px` - `12.5px`
- Labels: `10px` - `11.5px`
### Spacing
Pixel-based spacing. Key values: 8, 10, 12, 14, 16, 18, 22, 24, 28px. Page container is 800px max-width with 24px horizontal padding.
### Border Radius
Tight: 2-6px range. Buttons use 3px. Cards use 5-6px. Dots use 50%.
## Component Library
### Buttons
```html
sign up freepricinglog in
```
### IRC Client
```html
...
...
14:02reedmessage text
...
```
### Terminal Block
```html
terminal
/server irc.now 6697 -ssl
```
### Pricing Table
```html
...
...
...
```
## Browser Support
- Modern browsers (Chrome, Firefox, Safari, Edge)
- CSS custom properties required
- `data-theme` attribute for theme switching
- Progressive enhancement approach
## License
For use across irc.now projects only.