innei Demo UI Direction
Monochrome, minimal aesthetic inspired by Linear/Vercel. All demo/ UI work must follow these conventions.
Sub-references:
demo-ui-tokens— full color/spacing/typography/radius token tablesdemo-ui-components— all component CSS classes, specs, and anatomy diagrams
Visual System
Palette: Black/white only. No colored accents. See demo-ui-tokens for full color table.
- Light:
#171717text,#fafafabg,#e5e5e5border - Dark:
#fafafatext,#0a0a0abg,#262626border - Accent = text color itself. Subtle bg =
rgba(text, 0.06)
Typography: -apple-system, 'Inter', system-ui, sans-serif. Headings: tight letter-spacing (-0.3px to -0.5px), 700 weight. See demo-ui-tokens for full size/weight matrix.
Spacing: 32px page padding, 16px card gaps, 24-28px section gaps. Increments of 2/4/8. See demo-ui-tokens for complete spacing scale.
Borders: 1px var(--demo-border). Hover darkens to var(--demo-text-muted). No shadows on cards.
Radius: 6-10px cards/panels, 999px pills/badges. See demo-ui-tokens for per-component values.
Logo
SVG angle brackets < > + center 4-point sparkle on rounded-square (rx="7"). Uses currentColor fill, var(--demo-bg) for inner paths. Component at demo/src/components/Logo.tsx.
Layout
Header: 56px fixed, max-width: 1200px. Logo left, 4 nav tabs center, GitHub + theme toggle right.
Nav items: Playground (/), Nodes (/nodes), Extensions (/extensions), AI (/ai).
Content area: max-width: 1200px, padding: 24px.
Component Patterns
See demo-ui-components for full CSS specs and anatomy of each pattern.
| Pattern | CSS Class | Usage |
|---|---|---|
| Filter pills | .nodes-filter-pill |
Category filtering with count badge |
| Segmented control | .playground-tabs |
Tab switching within a page |
| Card grid | .nodes-grid / .ext-grid |
3-col (nodes) or 2-col (extensions) |
| Card expand | .node-card + .node-card-expanded |
Click to reveal detail panel |
| Page header | .nodes-page-title + .nodes-page-desc |
Title + one-line description |
| Action button | .playground-action-btn |
Bordered, transparent bg, hover darkens |
Page Conventions
- Playground: Segmented tabs for sub-views. Shared variant selector in top bar.
- Nodes: Filter → grid → card with preview → expand for JSON/edit toggle.
- Extensions: Sidebar + detail area. Click sidebar item to show live demo.
- AI: Full-bleed split layout, no max-width. Editor left, chat 380px right.
Anti-Patterns
- No teal (#33a6b8) or pink (#f596aa) — monochrome only
- No box shadows on cards — border darkening only
- No colored badges — use
var(--demo-accent-bg)(subtle gray) - No subtitle in header — logo + text only
- No
useContext()— useuse(Context)(React 19 rule)