Reference and modify CSS custom properties for a monochrome design system.
Install
mkdir -p .claude/skills/demo-ui-tokens && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12255" && unzip -o skill.zip -d .claude/skills/demo-ui-tokens && rm skill.zipInstalls to .claude/skills/demo-ui-tokens
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when adding or modifying colors, spacing, typography, or layout values in demo/ CSS. Complete token reference for the monochrome design system.Key capabilities
- →Identify color tokens for page backgrounds and text.
- →Locate spacing tokens for padding and gaps.
- →Determine typography settings for font stacks and sizes.
- →Find border radius values for UI elements.
- →Reference layout constants like header height and max-width.
- →Understand responsive breakpoints for grid column changes.
How it works
The skill provides a reference to CSS custom properties defined in demo/src/demo.css for colors, spacing, typography, border radius, and layout constants, guiding modifications within the monochrome design system.
Inputs & outputs
When to use demo-ui-tokens
- →Update primary accent color
- →Adjust spacing tokens
- →Modify dark mode typography values
About this skill
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 |
When not to use it
- →When modifying CSS outside of the demo/ directory.
- →When the design system is not monochrome.
- →When adding teal, pink, or colored accents.
Limitations
- →Applies only to demo/ CSS files.
- →Strictly adheres to a monochrome design system.
- →Does not permit raw hex values for colors, except for a specific destructive action.
How it compares
This skill offers a structured reference for specific UI tokens within a monochrome design system, unlike general CSS documentation.
Compared to similar skills
demo-ui-tokens side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| demo-ui-tokens (this skill) | 0 | 3mo | No flags | Beginner |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| svg-precision | 527 | 4mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Innei
View all by Innei →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".