菜单
Use when adding or modifying colors, spacing, typography, or layout values in demo/ CSS. Complete token reference for the monochrome design system.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Innei/haklex --skill demo-ui-tokens命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| 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 |