# 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 free pricing log in ``` ### IRC Client ```html
...
14:02 reed message 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.