A reusable Open Design design-system package, extracted from the real OneBrain product code. It captures the futuristic, minimal, professional cyberpunk / Tron "operator console" look so any future project can generate OneBrain-branded artifacts that are instantly recognizable as a serious AI developer tool.
Live preview (rendered, no local server needed): https://onebrain-ai.github.io/onebrain-design-system/
— the showcase (index.html) browses every surface, preview card, and doc in one shell
(categorized rail · live preview canvas · theme customizer) via GitHub Pages.
Visual direction: dark-first near-black canvas, four neon signal accents, italic uppercase display type, monospace HUD, corner-cut geometry, neon-glow elevation. Tokens in
colors_and_type.css· rules inDESIGN.md· provenance inPROVENANCE.md.
OneBrain — "Your AI Thinking Partner." The product this design system is extracted from is an AI operating system layer built on a plain-Markdown vault. It provides any AI harness (Claude Code, Gemini CLI, Codex, Qwen) with persistent memory, a structured knowledge vault, and 30 pre-built skills, so every session resumes exactly where the last one ended. It doesn't compete with harnesses — it extends them. As a developer tool, everything lives in plain Markdown you own forever: no cloud sync, no proprietary format. (Product Context for the design system: the surfaces below are what it dresses.)
Evidenced by: onebrain-ai/onebrain README.md, marketplace.json,
plugin.json (v3.1.6, requires CLI ≥3.1.0, MIT OR Apache-2.0), and INSTRUCTIONS.md.
Core capabilities (source-backed):
- Persistent memory —
MEMORY.md+ amemory/store loaded at session start; the agent "remembers who you are, what you're working on, and how you like to work." - 30 skills — composable workflows under
skills/*/SKILL.md: capture, braindump, bookmark, summarize, research, reading-notes, import, consolidate, connect, distill, daily, weekly, recap, learn, memory-review, moc, tasks, doctor, qmd, pause, resume, schedule, onboarding, update, help, clone … - 5 sub-agents — Inbox Classifier (orange), Knowledge Linker (blue), Link Suggester
(green), Tag Suggester (yellow), Task Extractor (red) (
agents/*.md). - PARA vault —
00-inbox·01-projects·02-areas·03-knowledge·04-resources·05-agent·06-archive·07-logs(INSTRUCTIONS.md). - Harness OS, 4 layers — OneBrain (plugin + CLI) → Harness → LLM → Markdown Vault
(source of truth); the co-evolution loop is CAPTURE → EVOLVE → WRAPUP
(
public/diagrams/*.svg).
Primary UI surfaces this system dresses:
- Marketing / landing — the cinematic cyber-console site (hero, features, commands,
cloud waitlist). Built with Astro + Tailwind CSS v4 (
onebrain-ai/website). - Vault operator console — sidebar of PARA folders, a rail of skills, a session/
activity stream, and a command composer (modelled in
ui_kits/app/). - Branded technical diagrams — architecture stack, co-evolution loop, vault hub.
| Source | What it provided | Read via |
|---|---|---|
onebrain-ai/website |
The visual system — src/styles/global.css tokens + component classes, brand SVGs, icons |
bounded git-clone intake (re-pullable) |
onebrain-ai/onebrain |
The product domain — skills, sub-agents, vault structure, version, voice | bounded git-clone intake (re-pullable) |
| Uploaded fonts | Chakra Petch ×10, JetBrains Mono ×2 | fonts/ |
Both repos were read with the bounded github-design-context intake (this-device
git clone). See PROVENANCE.md for the per-value trail.
.
├── index.html Showcase shell — categorized rail · live preview canvas · theme customizer (open first)
├── docs.html In-system Markdown reader (renders the docs below on the dark canvas, legibly)
├── DESIGN.md Canonical rules (read first)
├── README.md This guide
├── SKILL.md Agent-usable skill entry (YAML frontmatter)
├── PROVENANCE.md Where every token/asset/rule came from
├── ACCESSIBILITY.md Consolidated a11y commitments + verify checklist
├── CONTRIBUTING.md How to extend tokens / components / surfaces in sync
├── CHANGELOG.md Versioned change history (Keep a Changelog)
├── LICENSE-MIT, LICENSE-APACHE dual license (MIT OR Apache-2.0)
├── NOTICE third-party (OFL fonts) notices
├── package.json Package manifest (v1.0.0 · build:tokens · start)
├── colors_and_type.css Primitives + semantic intent tokens + @font-face bindings
├── components.css Reusable component layer (buttons, forms, nav, data, feedback, overlays, accent picker)
├── tokens/ Cross-platform token export (DTCG source + generated outputs)
│ ├── tokens.json Single source of truth (W3C DTCG)
│ ├── build.js Zero-dependency generator (node tokens/build.js)
│ ├── check.js Drift guard — css ↔ json ↔ dist parity (npm test)
│ ├── a11y.js WCAG AA contrast guard — asserts documented ratios (npm test)
│ └── dist/ Generated: tokens.css · tokens.js · tokens.d.ts · onebrain.tailwind.js · ios/*.swift · android/*.xml
├── assets/ Preserved brand marks
│ ├── brain.svg Logo (gradient neural-network mark)
│ ├── icons.svg Lucide-line <symbol> sprite (.ob-icon) — product icon set
│ ├── apple-touch-icon.png App icon (180px)
│ ├── favicon.ico Multi-size 16·32·48 — rebuilt from brain.svg
│ └── diagrams/ Animated architecture SVGs — 6 dark/light pairs
│ ├── {car-analogy,harness-os-stack,memory-tiers,
│ │ bidir-flow,vault-hub,coevo-loop}-{dark,light}.svg
│ └── README.md Family grammar reference
├── build/ Runtime icons (runtime filenames)
│ ├── icon.png byte-for-byte from source
│ ├── favicon.ico rebuilt from brain.svg (source had a framework default)
│ └── logo.svg byte-for-byte from source
├── fonts/ 12 brand font files, bound in colors_and_type.css
├── source_examples/ High-signal originals (lifted from the raw intake)
│ ├── styles/global.css The real theme + component CSS
│ ├── agents/ inbox-classifier.md · task-extractor.md
│ └── src/ Astro build-time libs (lib/, middleware.ts, api/)
├── preview/ Reviewable cards (see Preview Manifest below)
│ ├── _preview.css Shared atmosphere: section orb + boot reveal (linked by every card)
│ ├── accent-picker.js Shared runtime accent picker — re-keys a surface from one `.accent-dots` control
│ ├── cyber-select.js Custom <select> listbox enhancer (on-brand open state, full ARIA)
│ ├── command-palette.js ⌘K command-palette enhancer (filter, keyboard nav, ARIA dialog/listbox)
│ ├── dropzone.js File-dropzone enhancer (drag-drop + synced file list, no-JS fallback)
│ ├── code-copy.js Code-block copy enhancer (Clipboard API + execCommand fallback, sandbox-safe)
│ ├── combobox.js Multi-select token-field enhancer over a native <select multiple> (filter, keyboard, ARIA)
│ ├── ui-actions.js Tiny delegated wiring — [data-dismiss] close, [data-toggle-active] toolbar press, notification read/dismiss
│ ├── datepicker.js Calendar date-picker enhancer (month nav, selection, keyboard) over a native <input type=date>
│ ├── resizable.js Drag-to-resize splitter for .resizable panes (pointer events, min-width, ←/→ keyboard)
│ ├── emoji-picker.js Emoji-picker enhancer — category tabs, search, recents, keyboard (emoji as content)
│ ├── extras.js Rating, color picker, carousel, and popover-dismiss enhancers (zero-dependency)
│ ├── only.js Single-component focus for bundled pages — ?only=<id> shows one .section, retitles H1
│ ├── components-forms.html Full form kit (consumes components.css) — inputs, select, checkbox/radio/switch/range, validation, composer, buttons
│ ├── components-feedback.html Alerts, toasts, badges, progress, skeleton, spinner, empty-state, modal/tooltip/dropdown
│ ├── components-data.html Table, list, tabs, breadcrumb, pagination, avatars, stats, density toggle
│ ├── components-command-palette.html ⌘K skill launcher (consumes components.css + command-palette.js)
│ ├── components-icons.html Lucide-line icon sprite — .ob-icon, sizes 16/20/24, product vocabulary
│ ├── components-interactive.html Accordion (native details), CSS-only segmented control, file dropzone
│ ├── components-structure.html Tree view (PARA folders), stepper / wizard, timeline / activity feed
│ ├── components-content.html Code block (+ copy, line numbers) and KPI / metric tiles (trend + sparkline)
│ ├── components-common.html Banner, toolbar, rich menu, multi-select combobox, avatar group
│ ├── components-advanced.html Pricing table, date picker, notification center, resizable panes, emoji picker
│ ├── components-extra.html Rating, color picker, popover, carousel, keyboard-shortcut sheet
│ ├── charts.html Inline-SVG line / area / bar / donut / sparkline keyed to --chart-1…6
│ ├── i18n-rtl.html Thai · Arabic · CJK fallbacks + dir=rtl mirror of cards/alerts/accordion
│ ├── page-states.html .page-state templates — 404 / 500 / 403 / offline / loading, re-tint via --section-accent
│ ├── hero-split.html .ob-synthwave hero · VARIANT 1 (split) — recessed pink 3D grid + floating frosted-glass terminal on the right
│ ├── hero-centered.html .ob-synthwave hero · VARIANT 2 (centered) — same grid + terminal floating below, with pointer-reactive 3D tilt
│ ├── surface-dashboard.html SURFACE: operator analytics dashboard (inline-SVG charts, sortable table, stats)
│ ├── surface-deck.html SURFACE: 1920×1080 fit-to-viewport pitch deck (7 slides, keyboard nav, print)
│ ├── surface-mobile.html SURFACE: iOS app flow (Vault · Capture · Skills · You/Appearance) — live accent-color setting
│ ├── surface-desktop.html SURFACE: desktop operator console (three-pane + ⌘K palette)
│ └── surface-landing.html SURFACE: marketing site (hero, features, harness-OS stack, waitlist)
└── ui_kits/app/ Runnable operator-console UI kit (React + Babel)
├── index.html
├── README.md
└── components/ App · Sidebar · AssistantsList · ChatArea · MessageBubble · InputBar
The raw intake evidence (formerly
context/) was pruned after extraction to keep the package lean — re-pull it via the boundedgithub-design-contextintake if a future audit needs the originals. SeePROVENANCE.md.
Open these in the Design System tab. Each is a small, self-contained card that links
../colors_and_type.css (the component cards below also link ../components.css) and
demonstrates real, source-backed tokens/components/assets.
Every card also links preview/_preview.css — the shared atmosphere layer that adds the
blurred section orb (DESIGN.md §1) and a one-shot boot reveal (§7), both with a
prefers-reduced-motion fallback. It layers depth/motion only; it never restyles a card.
Navigation lives in the showcase (index.html) — its categorized left rail opens each
card / surface / doc in the live preview canvas; sub-pages carry no back button of their own.
Every SURFACE card (mobile, dashboard, desktop, landing, deck) carries the runtime
accent picker (.accent-dots + preview/accent-picker.js) at its natural settings home
— click a swatch to re-key the whole surface; the choice persists and follows you across
surfaces (shared ob-accent key). See DESIGN.md §2 "User-settable accent (runtime)".
| Preview card | Inspect | Demonstrates (source-backed) |
|---|---|---|
preview/colors-primary.html |
The four neon accents, the three brand gradients, and the surface/text neutrals | --color-accent{,-2,-3,-4}, --grad-brand (brain.svg), --grad-wordmark (CLI banner), --grad-button (.btn-tech), --color-bg/surface/... |
preview/colors-theme-dark.html |
The theme scale on a real console panel + token map — flip to the light scale ([data-theme="light"], accents re-inked AA ≥4.5:1) with the showcase Theme toggle |
Dark + light --color-* tokens, --section-accent, glow dot |
preview/typography-specimens.html |
The three families rendering from the bound fonts + the full type scale + stroke headline | --font-display (Chakra Petch), --font-sans (Inter), --font-mono (JetBrains Mono), --text-*, @font-face |
preview/spacing-tokens.html |
The 4px scale, layout constants, and --card-pad applied to cards |
--space-1…9, --nav-height, --content-max, --prose-max, --grid-size |
preview/spacing-radius.html |
Why corners are sharp; the angled CTA corner-cut | --radius-0…pill, --clip-tech, .btn-tech frame |
preview/spacing-shadows.html |
Neon-glow "elevation" vs the single overlay shadow | --glow-accent/cta/sm/cyan/brand, --shadow-overlay |
preview/components-buttons.html |
Primary/secondary/quiet buttons, nav-link bracket reveal, state + eyebrow pills (hover them) | .btn-tech, .nav-glass a, semantic state colors, .cyber-pill |
preview/components-inputs.html |
Text fields, error state, the command composer + slash suggestions, focus rings | input focus ring (cyan), composer = mono field + .btn-tech |
preview/components-cards.html |
.cyber-card hover (accent border + left bar), stat modules, the 5 sub-agents with their colors |
.cyber-card, --section-accent, stat type, agent color tags |
preview/components-forms.html |
Consumes components.css. The full form kit — text/textarea/select, checkbox/radio/switch/range, required + helper + on-blur validation + disabled, the command composer, and all button variants. Click in for focus rings; blur the email with bad input |
.cyber-input, .cyber-select, .cyber-check/-radio/-switch/-range, .composer, .btn-tech/-ghost/-quiet/-danger, semantic intent tokens |
preview/components-feedback.html |
Consumes components.css. Semantic alerts (success/info/warning/danger), toasts, badges + tags, progress, skeleton, spinner, empty-state, and live modal/tooltip/dropdown (open them) |
.alert-*, .toast, .badge-*, .progress, .skeleton, .spinner, .empty-state, .modal+.scrim, --fb-*, --elev-3 |
preview/components-data.html |
Consumes components.css. .cyber-table (tabular nums, sticky header, hover rows) with a live density toggle, session list, tabs, breadcrumb, pagination, sub-agent avatars, stats, cards |
.cyber-table, .cyber-list, .cyber-tabs, .breadcrumb, .pagination, .avatar, .stat, data-density |
preview/components-command-palette.html |
Consumes components.css + command-palette.js. ⌘K skill launcher over the real 30-skill set (grouped); filter + highlight, keyboard nav, ARIA dialog/listbox; a "source basis" section models the real website modules |
.command-palette, .cmdk-*, --z-modal/--z-overlay, ob:command event |
preview/charts.html |
Consumes components.css. Inline-SVG line / area / bar (6 categorical series) / donut / sparkline + bar-meter — no chart library, all keyed to the chart scale |
.chart-frame, .chart-legend, .donut, .spark, .bar-meter, --chart-1…6, --chart-grid/-axis/-track |
preview/components-icons.html |
Consumes components.css + assets/icons.svg. The Lucide-line <symbol> sprite at sizes 16/20/24, product-vocabulary names, currentColor in context; a "source basis" list fronts the real website modules with icons |
.ob-icon, .ob-icon-16/-20/-24, assets/icons.svg#ob-* |
preview/components-interactive.html |
Consumes components.css + dropzone.js. Native-<details> accordion, CSS-only segmented control, drag-drop file dropzone; the "source basis" accordion documents the real website modules |
.accordion, .segmented, .dropzone, .dz-files, DataTransfer |
preview/components-structure.html |
Consumes components.css. Tree view (vault PARA folders over native <details>), stepper / wizard (horizontal + vertical), timeline / activity feed (state-colored nodes); a "source basis" list ties them to the real website modules |
.tree, .stepper/.stepper-vertical, .timeline, logical props |
preview/components-content.html |
Consumes components.css + code-copy.js. Code block (filename + language tag + copy + line numbers, semantic syntax colors) and KPI / metric tiles (trend ↑↓ + .spark sparkline) |
.code-block/.code-lines, .metric/.metric-trend, --chart-1 |
preview/components-common.html |
Consumes components.css + combobox.js + ui-actions.js. System banners (semantic variants + dismiss), an editor toolbar, a rich menu, a multi-select token combobox, and an avatar group; a "source basis" list ties them to the real website modules |
.banner, .toolbar, .menu/.menu-wrap, .combobox, .avatar-group |
preview/components-advanced.html |
Consumes components.css + datepicker.js + resizable.js + emoji-picker.js + ui-actions.js. Pricing table (featured glow + CSS :has() billing toggle), calendar date picker, notification center, resizable panes, and an emoji picker; one file, five data-component sections surfaced as focused ?only= entries |
.pricing/.price-tier, .datepicker, .notif-center, .resizable/.resizer, .emoji-picker |
preview/components-extra.html |
Consumes components.css + extras.js. Star rating (accent-following, keyboard, read-only variant), generic color picker (swatch + hex), click popover (native <details>), scroll-snap carousel, and a keyboard-shortcut sheet; one file, five data-component sections surfaced as focused ?only= entries |
.rating, .color-picker, .popover, .carousel, .shortcut-sheet |
preview/i18n-rtl.html |
Consumes components.css. Thai · Arabic · CJK rendering through the fallback stacks + a dir="rtl" mirror of cards / alerts / accordion, and LTR-isolated code in RTL prose |
--font-sans/--font-display fallbacks, [dir="rtl"] (§13), unicode-bidi:isolate |
preview/page-states.html |
Consumes components.css. Full-page 404 / 500 / 403 / offline / loading templates for the operator console; each re-tints from one var and a "source basis" list ties them to the real website edge modules |
.page-state, .page-state-code/-title/-sub/-actions/-status, --section-accent |
preview/brand-assets.html |
The real preserved files loaded via <img>/<object> — logo, app icon, favicon, the 3 live diagrams, font specimens |
assets/brain.svg, build/icon.png, build/favicon.ico, assets/diagrams/*.svg, fonts/*.ttf |
preview/hero-split.html |
The .ob-synthwave hero section — variant 1 (split) — the perspective grid is dialed back + scrimmed so it recedes, while one OneBrain operator-console terminal floats out of it on the right as a single iOS-style frosted-glass window (translucent + backdrop-filter blur/saturate, inset top highlight, brand-glow shadow, cast glow beneath) tilted in 3D so the pink grid glows through it. Window bar uses brand-tinted state-color "traffic lights"; body runs the real brew install … → capture session transcript with a frosted input pill + NODE · NETWORK :: ONLINE · LAT status line. Hero accent re-keyed to brand pink via one variable (--ha). Confirm the backdrop never out-shouts the window and the grid reads through the glass; mobile flattens the tilt and stacks copy over the window |
--ha→--color-accent-3 (pink grid/UI), --color-bg/-deep, backdrop-filter frosted glass, --color-danger/-warning/-success window lights, --grad-hero-btn (pink→violet), --clip-tech CTA, --font-display stroke headline, wikilink [[…]] |
preview/hero-centered.html |
The .ob-synthwave hero section — variant 2 (centered) — same recessed pink grid + frosted-glass terminal, re-composed center-aligned (pill → UNIFIED / INTELLIGENCE → centered sub → CTAs → meta) with the terminal floating below the copy. Signature motion is a pointer-reactive 3D tilt: the window leans toward the cursor (rotateX/rotateY via --rx/--ry, glow tracking it), plus a load-rise + gentle bob. Headline INTELLIGENCE uses a pink→violet gradient text fill (vs. variant 1's stroke). Confirm the headline is fully visible on load, the tilt follows the cursor on desktop, and ≤560px flattens the tilt with no horizontal scroll |
--ha→--color-accent-3, backdrop-filter frosted glass, --rx/--ry pointer tilt, --grad-hero-btn, --clip-tech CTA, --font-display gradient headline, prefers-reduced-motion / pointer:fine gates |
preview/surface-dashboard.html |
SURFACE. Operator analytics dashboard — inline-SVG bar + donut charts, sortable/filterable session table, stat cards, density toggle, co-evolution feed | --chart-1…5, --chart-grid/-axis/-track, .cyber-table, .stat, .cyber-list, .badge-*, data-density |
preview/surface-deck.html |
SURFACE. 1920×1080 fit-to-viewport pitch deck — 7 slides, arrow/keyboard nav, NN / NN counter, localStorage, print-to-page; per-slide domain accents |
scale-to-fit stage, .cyber-pill, .btn-tech, --color-vault/-harness/-loop |
preview/surface-mobile.html |
SURFACE. iOS app flow (Vault · Capture · Skills · You/Appearance) in inline iPhone frames — 44px tab bars, working /capture composer with [[wikilink]] chips, and a live accent-color setting that re-keys the whole surface from one variable (persisted) |
--section-accent / --action-primary / --grad-button re-key, --font-mono, form patterns, glow tokens |
preview/surface-desktop.html |
SURFACE. Desktop operator console — three panes (PARA sidebar · session log + .composer · inspector) + ⌘K command palette |
.composer, .dropdown, console layout, --elev-3 |
preview/surface-landing.html |
SURFACE. Marketing site — sticky .nav-glass, hero, .cyber-card feature grid (inline Lucide icons), the real harness-os-stack-dark.svg, waitlist email + validation |
.nav-glass, .cyber-card, .btn-tech, assets/diagrams/*.svg |
The applied screen lives separately at ui_kits/app/index.html
(runnable React console) — see ui_kits/app/README.md.
colors_and_type.css is the canonical web sheet; for non-web surfaces (desktop app,
iOS, Android, React Native) the same values are exported from a single machine-readable
source. tokens/tokens.json (W3C DTCG) is the source of truth;
tokens/build.js (zero-dependency — node tokens/build.js) generates
tokens/dist/:
| Output | For |
|---|---|
dist/tokens.css |
namespaced --ob-* vars + [data-theme="light"] — web / deck / Electron renderer |
dist/tokens.js + .d.ts |
typed { dark, light } value object — Electron / React Native / any JS |
dist/onebrain.tailwind.js |
Tailwind preset (theme-aware via the --ob-* vars) — web-app / dashboard |
dist/ios/OneBrainTokens.swift |
SwiftUI Color / CGFloat constants (dark + light) — iOS app |
dist/android/*.xml |
colors.xml · colors-light.xml · dimens.xml — Android app |
Dark-first: each token's light/spec value lives in $extensions["com.onebrain.light"];
semantic tokens are DTCG aliases so they inherit the light re-inking automatically. See
tokens/README.md for the per-surface consumption guide and theme
switching. Edit values in tokens.json only, then rebuild.
- Read the rules. Start with
DESIGN.md; skimPROVENANCE.mdto know what's real vs. derived. Agents should also loadcolors_and_type.css,components.css,preview/,assets/,build/,fonts/,source_examples/, andui_kits/app/before generating. - Bind the foundation, then the components.
<link rel="stylesheet" href="colors_and_type.css">then<link rel="stylesheet" href="components.css">(fix the relative paths for your file's location), or paste their contents into your first<style>. The token file binds the brand fonts too — never substitute fonts. Components reference the semantic intent tokens, so re-skin by remapping--action-primary/--fb-*/--bg-*, not by editing component rules. - Compose from the component layer. Assemble surfaces from
components.css—.btn-tech,.cyber-card,.cyber-pill, the form controls,.cyber-table,.alert/.toast,.modal/.drawer, etc. — plus the 56px HUD grid and corner-cut geometry. Cross-check againstpreview/components-*.htmlandsource_examples/styles/global.css. - Use real assets + vocabulary. Pull marks from
assets//build/; use real skill names, vault folders, the co-evolution loop, and the real version3.1.6. No invented stats; use honest placeholders when a value is unknown. - Model real screens on
ui_kits/app/for product/console work. - Stay on-system. One accent per surface (twice max), sharp corners, glow over
shadow, dark-first, always ship a
prefers-reduced-motionfallback. HonorDESIGN.md§9 anti-patterns.
- Dark-first. The product ships dark; the light theme is a secondary spec/print surface only.
- Honest gaps (see
PROVENANCE.md): the website's.astrosection components and theonebrainREADME header PNGs were outside the bounded snapshot, so theui_kits/app/console is an applied interpretation built from the source's real CSS vocabulary, and Inter ships as a system/Google fallback (not a file). - This is a draft package until published; publishing makes it selectable by other Open Design projects.