Demo UI Tokens Reference
Parent skill: demo-ui-direction — overall design direction and anti-patterns.
Sibling skill: demo-ui-components — component CSS classes, specs, and anatomy.
All tokens defined in demo/src/demo.css as CSS custom properties on :root / [data-theme='dark'].
Color Tokens
| Token |
Light |
Dark |
Usage |
--demo-bg |
#fafafa |
#0a0a0a |
Page background |
--demo-surface |
#fff |
#141414 |
Card/panel background |
--demo-surface-alt |
#fafafa |
#0a0a0a |
Panel header, input bg |
--demo-text |
#171717 |
#fafafa |
Primary text |
--demo-text-secondary |
#525252 |
#a3a3a3 |
Body text, button labels |
--demo-text-muted |
#a3a3a3 |
#525252 |
Placeholders, labels, captions |
--demo-border |
#e5e5e5 |
#262626 |
Card borders, dividers |
--demo-border-light |
#f5f5f5 |
#262626 |
Subtle dividers inside cards |
--demo-hover |
#f5f5f5 |
#262626 |
Hover background |
--demo-accent |
#171717 |
#fafafa |
Active state text (= text color) |
--demo-accent-bg |
rgba(23,23,23,0.06) |
rgba(250,250,250,0.06) |
Active state bg, badges |
--demo-code-bg |
#1a1a2e |
#0a0a0a |
Code block background |
--demo-code-text |
#a5d6ff |
#e5e5e5 |
Code block text |
Rule: Never use raw hex values. Always reference tokens. No teal, pink, or colored accents.
Exception: Delete button hover uses #ef4444 / rgba(239,68,68,0.1) — the only non-neutral color, reserved for destructive actions.
Spacing
| Value |
Where |
2px |
Pill gaps, icon gaps |
4px |
Inline element gaps, small padding |
6px |
Button padding-y, filter pill gaps |
8px |
Card internal gaps, badge padding-x, header-right gap |
12px |
Panel header padding, toolbar padding, button padding-x |
14px |
Nav tab padding-x, action button padding-x |
16px |
Panel body padding, card preview padding, card gaps |
20px |
Card body padding, ext-card body padding |
24px |
Page padding, section gaps, header content gap |
28px |
Filter bar margin-bottom |
32px |
Page side padding, page header margin-bottom |
Principle: Increments of 2/4/8. Common spacings: 8, 12, 16, 20, 24, 32.
Typography
Font Stacks
| Stack |
Usage |
system-ui, -apple-system, sans-serif |
All UI text |
'SF Mono', SFMono-Regular, ui-monospace, Consolas, monospace |
Code, JSON |
Font Sizes
| Size |
Weight |
Usage |
10px |
600 |
Type badge (.node-card-type) |
11px |
500-600 |
Labels, tags, badges, sidebar desc |
12px |
500 |
Segmented tabs, action buttons, code, filter count |
13px |
500 |
Nav tabs, body buttons, descriptions, inputs |
14px |
500-600 |
Card name, panel title, page desc, sidebar item name |
15px |
600 |
Logo text |
24px |
700 |
Page title (.nodes-page-title) |
Letter Spacing
| Value |
Usage |
-0.5px |
Page titles (24px) |
-0.3px |
Logo text |
0.5px |
Uppercase type badges, labels |
Font Weight
| Weight |
Usage |
| 400 |
Count badges, muted text |
| 500 |
Default buttons, nav tabs, sidebar items |
| 600 |
Active states, panel titles, card names, labels, badges, logo |
| 700 |
Page headings |
Border Radius
| Value |
Usage |
4px |
Input fields, small icon buttons, code inline |
6px |
Buttons, nav tabs, select, code blocks, sidebar items |
8px |
Panels, toolbars, segmented control, card preview |
10px |
Node cards |
12px |
Extension cards |
999px |
Pills, badges (full round) |
Layout Constants
| Property |
Value |
| Header height |
56px |
| Content max-width |
1200px |
| Node grid columns |
3 (→ 2 at 1200px → 1 at 768px) |
| Extension grid columns |
2 (→ 1 at 768px) |
| Preset sidebar width |
220px |
| Extension sidebar width |
220px |
| Comment sidebar width |
320px |
| AI chat pane width |
380px |
| Ext preview height |
160px |
| Card preview min-height |
64px |
Transition
Standard: transition: all 0.15s on all interactive elements.
Shadows
Minimal use — only for floating elements:
- Dropdown menu:
box-shadow: 0 4px 12px rgba(0,0,0,0.1)
- Comment popup/inline input:
box-shadow: 0 2px 8px rgba(0,0,0,0.12)
- Cards/panels: no shadow — border only
Focus States
/* Standard focus pattern */
border-color: var(--demo-accent);
box-shadow: 0 0 0 2px var(--demo-accent-bg);
outline: none;
Responsive Breakpoints
| Breakpoint |
Changes |
≤1200px |
Node grid 3→2 columns |
≤768px |
Node grid 2→1 column, ext grid 1 column, header stacks, sidebars go full-width above content, AI page stacks vertically |
1---2name: demo-ui-tokens3description: Use when adding or modifying colors, spacing, typography, or layout values in demo/ CSS. Complete token reference for the monochrome design system.4---56# Demo UI Tokens Reference78**Parent skill:** `demo-ui-direction` — overall design direction and anti-patterns.9**Sibling skill:** `demo-ui-components` — component CSS classes, specs, and anatomy.1011All tokens defined in `demo/src/demo.css` as CSS custom properties on `:root` / `[data-theme='dark']`.1213## Color Tokens1415| Token | Light | Dark | Usage |16| ----------------------- | --------------------- | ------------------------ | -------------------------------- |17| `--demo-bg` | `#fafafa` | `#0a0a0a` | Page background |18| `--demo-surface` | `#fff` | `#141414` | Card/panel background |19| `--demo-surface-alt` | `#fafafa` | `#0a0a0a` | Panel header, input bg |20| `--demo-text` | `#171717` | `#fafafa` | Primary text |21| `--demo-text-secondary` | `#525252` | `#a3a3a3` | Body text, button labels |22| `--demo-text-muted` | `#a3a3a3` | `#525252` | Placeholders, labels, captions |23| `--demo-border` | `#e5e5e5` | `#262626` | Card borders, dividers |24| `--demo-border-light` | `#f5f5f5` | `#262626` | Subtle dividers inside cards |25| `--demo-hover` | `#f5f5f5` | `#262626` | Hover background |26| `--demo-accent` | `#171717` | `#fafafa` | Active state text (= text color) |27| `--demo-accent-bg` | `rgba(23,23,23,0.06)` | `rgba(250,250,250,0.06)` | Active state bg, badges |28| `--demo-code-bg` | `#1a1a2e` | `#0a0a0a` | Code block background |29| `--demo-code-text` | `#a5d6ff` | `#e5e5e5` | Code block text |3031**Rule**: Never use raw hex values. Always reference tokens. No teal, pink, or colored accents.3233**Exception**: Delete button hover uses `#ef4444` / `rgba(239,68,68,0.1)` — the only non-neutral color, reserved for destructive actions.3435## Spacing3637| Value | Where |38| ------ | ------------------------------------------------------- |39| `2px` | Pill gaps, icon gaps |40| `4px` | Inline element gaps, small padding |41| `6px` | Button padding-y, filter pill gaps |42| `8px` | Card internal gaps, badge padding-x, header-right gap |43| `12px` | Panel header padding, toolbar padding, button padding-x |44| `14px` | Nav tab padding-x, action button padding-x |45| `16px` | Panel body padding, card preview padding, card gaps |46| `20px` | Card body padding, ext-card body padding |47| `24px` | Page padding, section gaps, header content gap |48| `28px` | Filter bar margin-bottom |49| `32px` | Page side padding, page header margin-bottom |5051**Principle**: Increments of 2/4/8. Common spacings: 8, 12, 16, 20, 24, 32.5253## Typography5455### Font Stacks5657| Stack | Usage |58| -------------------------------------------------------------- | ----------- |59| `system-ui, -apple-system, sans-serif` | All UI text |60| `'SF Mono', SFMono-Regular, ui-monospace, Consolas, monospace` | Code, JSON |6162### Font Sizes6364| Size | Weight | Usage |65| ------ | ------- | ---------------------------------------------------- |66| `10px` | 600 | Type badge (`.node-card-type`) |67| `11px` | 500-600 | Labels, tags, badges, sidebar desc |68| `12px` | 500 | Segmented tabs, action buttons, code, filter count |69| `13px` | 500 | Nav tabs, body buttons, descriptions, inputs |70| `14px` | 500-600 | Card name, panel title, page desc, sidebar item name |71| `15px` | 600 | Logo text |72| `24px` | 700 | Page title (`.nodes-page-title`) |7374### Letter Spacing7576| Value | Usage |77| -------- | ----------------------------- |78| `-0.5px` | Page titles (24px) |79| `-0.3px` | Logo text |80| `0.5px` | Uppercase type badges, labels |8182### Font Weight8384| Weight | Usage |85| ------ | ------------------------------------------------------------- |86| 400 | Count badges, muted text |87| 500 | Default buttons, nav tabs, sidebar items |88| 600 | Active states, panel titles, card names, labels, badges, logo |89| 700 | Page headings |9091## Border Radius9293| Value | Usage |94| ------- | ----------------------------------------------------- |95| `4px` | Input fields, small icon buttons, code inline |96| `6px` | Buttons, nav tabs, select, code blocks, sidebar items |97| `8px` | Panels, toolbars, segmented control, card preview |98| `10px` | Node cards |99| `12px` | Extension cards |100| `999px` | Pills, badges (full round) |101102## Layout Constants103104| Property | Value |105| ----------------------- | ------------------------------ |106| Header height | `56px` |107| Content max-width | `1200px` |108| Node grid columns | 3 (→ 2 at 1200px → 1 at 768px) |109| Extension grid columns | 2 (→ 1 at 768px) |110| Preset sidebar width | `220px` |111| Extension sidebar width | `220px` |112| Comment sidebar width | `320px` |113| AI chat pane width | `380px` |114| Ext preview height | `160px` |115| Card preview min-height | `64px` |116117## Transition118119Standard: `transition: all 0.15s` on all interactive elements.120121## Shadows122123Minimal use — only for floating elements:124125- Dropdown menu: `box-shadow: 0 4px 12px rgba(0,0,0,0.1)`126- Comment popup/inline input: `box-shadow: 0 2px 8px rgba(0,0,0,0.12)`127- Cards/panels: **no shadow** — border only128129## Focus States130131```css132/* Standard focus pattern */133border-color: var(--demo-accent);134box-shadow: 0 0 0 2px var(--demo-accent-bg);135outline: none;136```137138## Responsive Breakpoints139140| Breakpoint | Changes |141| ---------- | ----------------------------------------------------------------------------------------------------------------------- |142| `≤1200px` | Node grid 3→2 columns |143| `≤768px` | Node grid 2→1 column, ext grid 1 column, header stacks, sidebars go full-width above content, AI page stacks vertically |
innei