# RealBrain Design System > The visual language for every RealBrain product and site, v2.0.0. Dark-first with a light theme, one periwinkle accent, IBM Plex Sans and IBM Plex Mono, flat surfaces, font weight capped at 600, and every value traced to a named CSS custom property. Fetch tokens.css and follow the rules below before writing any UI for a RealBrain project. Use it in a project by linking or vendoring the stylesheet — there is no npm package on purpose: curl -o src/tokens.css https://realbrain.cc/design-system/tokens.css ## Rules - One accent per screen: `--accent` marks the single primary action. Everything else is neutral. - Tokens only. No raw hex or px in component code. If no token fits, stop and propose one flagged "⚑ NEW TOKEN" instead of inventing a value. - No font weight above 600. No gradients, glassmorphism, glow, or decorative shadows. Shadows are structural depth cues only. - Never white text on `--accent`. Use `--accent-fg`. - Semantic colour (success, warning, error, info) is never the only signal: pair it with a dot or icon and text. - Errors say what happened and what to do next, in sentence case. Buttons are sentence case verbs. Say "Sign in", never "Log in". - One density per product: comfortable (44px controls) for marketing and consumer surfaces, compact (32px) for dense tooling. Never both on one screen. - Respect prefers-reduced-motion: tokens.css already zeroes every duration under it. Do not add motion that bypasses the tokens. ## Quick reference ``` --bg #080808 light: #F7F7F9 --surface #121216 light: #FFFFFF --elevated #1A1A20 light: #FFFFFF --text-1 #F4F4F6 light: #16161C --text-2 #A9A9B4 light: #4C4C58 --text-3 #83838F light: #6E6E7A --accent #8FA8FF light: #3450C8 --accent-fg #080808 light: #FFFFFF --accent-hover #9EB5FF light: #4C6BD2 --accent-pressed #6173B1 light: #21358A --success #3ECF8E light: #177A4E --warning #E8B23D light: #8A5A00 --error #F26D6D light: #C2373C --info #62B0F5 light: #1D62A8 --border #26262E light: #E3E3E9 --border-strong #3A3A46 light: #C6C6D0 --font-ui 'IBM Plex Sans', system-ui, sans-serif --font-mono 'IBM Plex Mono', ui-monospace, monospace type steps display:60/64 8:40/48 7:30/38 6:24/32 5:20/28 4:17/26 3:15/24 2:13/20 1:12/16 weights 400 · 500 · 600 (never 700) space 4px 8px 12px 16px 24px 32px 48px 64px 96px radius sm 6px · md 10px · lg 16px · full 999px motion 120ms · 200ms · 360ms · ease cubic-bezier(.22,.61,.36,1) layout marketing 1200px · app 1440px · control-h 44px (compact 32px) ``` Light theme: set `data-theme="light"` on ``. Remove it for dark. `--accent-hover` and `--accent-pressed` are color-mix() formulas, so they recompute per theme. ## Files - [tokens.css](https://realbrain.cc/design-system/tokens.css): canonical CSS. Tokens, base reset, brand chrome, every component (.btn, .field, .input, .select, .checkbox, .radio, .toggle, .card, dialog.modal, .toast, .tabs, .table, .status, .scaffold, .empty, .skeleton) and composed patterns. Framework-agnostic plain CSS. - [tokens.json](https://realbrain.cc/design-system/tokens.json): the same tokens in the W3C Design Tokens (DTCG 2025.10) format, both themes, with computed contrast ratios. For Style Dictionary, Tokens Studio, Tailwind theme generation, or programmatic checks. - [design-system.md](https://realbrain.cc/design-system/design-system.md): the full guide. Philosophy, every token with its role, component API and markup, patterns, content rules, accessibility, governance, and how to use the system with plain HTML, Vue, React, or Tailwind. - [AGENTS.md](https://realbrain.cc/design-system/AGENTS.md): drop-in instructions for a new RealBrain repository. Copy it in as AGENTS.md or CLAUDE.md so the coding agent applies the system without being told each time. - [starter.html](https://realbrain.cc/design-system/starter.html): a minimal page wired to tokens.css, with a hero, a card grid, a form, and a status row. Copy it to start a new surface. - [Style guide](https://realbrain.cc/design-system/): the human-readable version of all of the above, with live components, a theme toggle, and a density toggle. ## Optional - [RealBrain Inc.](https://realbrain.cc/llms.txt): company, products, services, and contact. - [RealBrain community forum](https://forum.realbrain.cc/): public discussion for every RealBrain product.