Design Token
- 956 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
design-token is a design-system skill that defines and documents color, spacing, typography, and elevation tokens with naming hierarchies for developers preventing visual drift across components and platforms.
About
design-token is an owl-listener/designer-skills agent skill that architects systematic design foundations as named tokens. The skill covers four token categories—color with global and alias layers, spacing on 4px/8px base scales from xs through 3xl, typography families and weight scales, and elevation—plus naming hierarchies and cross-platform mapping guidance. Frontend developers and design-system maintainers reach for design-token when a product spans web or mobile surfaces and needs one source of truth for visual values. Documented tokens reduce one-off hex codes and magic numbers that cause component inconsistency over time.
- Defines six core token categories: Color, Spacing, Typography, Elevation, Border, and Motion
- Establishes three-tier token architecture: global, alias, and component tokens
- Enforces strict naming convention {category}-{property}-{variant}-{state}
- Prevents raw value references in components by requiring semantic aliases
- Produces documented tokens with usage context and theming support
Design Token by the numbers
- 956 all-time installs (skills.sh)
- +42 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #425 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill design-tokenAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 956 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you structure design tokens for a design system?
Create consistent, scalable design foundations that prevent visual drift across components and platforms.
Who is it for?
Frontend and design-system engineers standardizing visual values before or during component library work.
Skip if: One-off marketing pages with no reusable components or teams that already ship a locked token package.
When should I use this skill?
The user asks to define, organize, or document design tokens for colors, spacing, typography, or elevation.
What you get
Token taxonomy document, naming conventions, and cross-platform mapping for color, spacing, typography, and elevation.
- Token taxonomy document
- Naming convention guide
- Cross-platform token map
Files
Design Token
You are an expert in design token architecture and systematic design foundations.
What You Do
You help define, organize, and document design tokens — the atomic values that drive visual consistency. You understand token taxonomies, naming hierarchies, and cross-platform mapping.
Token Categories
- Color: Global palette, alias tokens (surface, text, border), component tokens
- Spacing: Base unit (4px/8px), scale (xs through 3xl), contextual (inset, stack, inline)
- Typography: Font families, size scale, weights, line heights
- Elevation: Shadow levels, z-index scale
- Border: Radius scale, width scale, style options
- Motion: Duration scale, easing functions
Token Tiers
1. Global tokens — Raw values (e.g., blue-500: #3B82F6) 2. Alias tokens — Semantic references (e.g., color-action-primary) 3. Component tokens — Scoped usage (e.g., button-color-primary)
Naming Convention
Pattern: {category}-{property}-{variant}-{state}
Best Practices
- Start with global tokens, then create semantic aliases
- Never reference raw values in components
- Document each token with usage context
- Version tokens alongside your design system
- Support theming by keeping alias tokens abstract
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
Which token categories does design-token cover?
design-token structures color (global, alias, component), spacing (base unit and xs–3xl scale), typography (families, sizes, weights), and elevation. Each category includes naming hierarchy and usage guidance for design-system consumers.
What spacing base units does design-token recommend?
design-token aligns spacing tokens to a 4px or 8px base unit with contextual scales such as inset, stack, and inline. The xs through 3xl ladder keeps padding and gaps predictable across components.
Is Design Token safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.