Login
owl-listener/designer-skills1 file

Design Token

Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit` (designer-toolkit); for multi-brand mapping use `theming-system`.

Use this skillView repositoryView on skills.sh
Specification
Skill ID
owl-listener/designer-skills/design-token
Publisher
owl-listener
Repository
designer-skills
Installs
0
Files
1
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

owl-listener/designer-skills/design-tokenInstalls these files
  • SKILL.md

What this skill tells the agent

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

More from owl-listener

owl-listener/designer-skills

A B Test Design

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

owl-listener/designer-skills

Accessibility Audit

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

owl-listener/designer-skills

Accessibility Test Plan

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

Use this skill in a project

Open any RiverX project, search the Skills panel for owl-listener/designer-skills/design-token, and install it in one click.

Use this skill