// Use when adding or modifying colors, spacing, typography, or layout values in demo/ CSS. Complete token reference for the monochrome design system.
| name | demo-ui-tokens |
| description | Use when adding or modifying colors, spacing, typography, or layout values in demo/ CSS. Complete token reference for the monochrome design system. |
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'].
| 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.
| 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.
| Stack | Usage |
|---|---|
system-ui, -apple-system, sans-serif | All UI text |
'SF Mono', SFMono-Regular, ui-monospace, Consolas, monospace | Code, JSON |
| 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) |
| Value | Usage |
|---|---|
-0.5px | Page titles (24px) |
-0.3px | Logo text |
0.5px | Uppercase type badges, labels |
| 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 |
| 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) |
| 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 |
Standard: transition: all 0.15s on all interactive elements.
Minimal use — only for floating elements:
box-shadow: 0 4px 12px rgba(0,0,0,0.1)box-shadow: 0 2px 8px rgba(0,0,0,0.12)/* Standard focus pattern */
border-color: var(--demo-accent);
box-shadow: 0 0 0 2px var(--demo-accent-bg);
outline: none;
| 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 |
Use when releasing @haklex/* packages and propagating to downstream consumers (Yohaku, admin-vue3, mx-core, mx-space). Owns end-to-end orchestration: change detection, per-package semver calc, peer-dep audit to prevent duplicate-instance bugs (e.g. lucide-react React Context mismatch), topologically-ordered publish with npm registry polling, parallel-worktree downstream smoke tests, auto-revert on failure, and direct push to downstream primary branches (no PRs). Fully autonomous — no user confirmation gates. Supersedes the old /release command.
Use when writing Haklex articles with Markdown plus LiteXML, choosing the appropriate Haklex node for content, authoring LiteXML fragments, or converting a LightXML/LiteXML string or file into Lexical SerializedEditorState JSON, Markdown, or Static Render HTML via the `litexml` CLI.
Use when creating or modifying demo/ UI components — buttons, cards, panels, pills, inputs, badges. Reference for all component CSS classes and their exact specs.
Use when modifying demo/ UI — adding pages, components, or styles. Defines the monochrome visual system, layout patterns, and component conventions for the haklex demo site.
Convert Shiroi Markdown to Haklex Lexical JSON. Use when the user wants to convert a markdown file or string to rich text editor JSON format.