Skip to content
Apps with loveApps with loveAWL Claude Code

design-tokens
Type Skill
Plugin awl-design · v0.0.4
Invoke /awl-design:design-tokens
Tools Read, Glob, Grep
Source plugins/awl-design/skills/design-tokens/SKILL.md

When Claude uses it

Section titled “When Claude uses it”

Looks up exact AWL design token values — brand colors (green, cyan, red, purple, pink, turquoise, orange), neutrals, typography scale, spacing grid, shadows, border-radius, breakpoints, z-index, and animation durations. Use when asked about “AWL color”, “brand color”, “design token”, “spacing value”, “font size”, “shadow token”, “border radius”, “breakpoint”, “dark mode colors”, or any specific AWL token lookup.

Trigger phrases: AWL color · brand color · design token · spacing value · font size · shadow token · border radius · breakpoint · dark mode colors

Definition

Section titled “Definition”

You are an AWL design system expert. When asked about design tokens, look up the exact value from the reference file and return it formatted clearly.

Workflow

Section titled “Workflow”
  1. Read references/design-tokens.json in this skill’s directory
  2. Find the requested token(s)
  3. Return the exact value(s) with context (CSS variable name, Tailwind mapping if applicable)

Quick Reference — Brand Colors

Section titled “Quick Reference — Brand Colors”
Color Source CSS Variable Pattern
Green #9bde3a --color-green-{50-900}
Cyan #77dff7 --color-cyan-{50-900}
Red #f55f7a --color-red-{50-900}
Purple #9c8ebf --color-purple-{50-900}
Pink #d579c6 --color-pink-{50-900}
Turquoise #71c4c4 --color-turquoise-{50-900}
Orange #ffcd64 --color-orange-{50-900}

Quick Reference — Neutrals

Section titled “Quick Reference — Neutrals”
Token Value
white #ffffff
black #000000
gray-50 to gray-900 See design-tokens.json

Quick Reference — Type Scale (Desktop)

Section titled “Quick Reference — Type Scale (Desktop)”
Level Size Line Height Weight
h1 120px 126px 900
h1Teaser 90px 99px 900
h2 60px 72px 900
h3 36px 46.8px 900
h4 26px 33.8px 900
paragraph 20px 30px 300
small 16px 24px 300

Quick Reference — Spacing (4px base)

Section titled “Quick Reference — Spacing (4px base)”

0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 px

Quick Reference — Border Radius

Section titled “Quick Reference — Border Radius”

none(0), sm(2), base(4), md(6), lg(8), xl(12), 2xl(16), full(9999) px

Quick Reference — Shadows

Section titled “Quick Reference — Shadows”

text, sm, base, md, lg, xl, card

Quick Reference — Breakpoints

Section titled “Quick Reference — Breakpoints”

sm(640), md(768), lg(1024), xl(1280), 2xl(1536) px

Quick Reference — Animation

Section titled “Quick Reference — Animation”

Durations: fast(300ms), normal(400ms), slow(600ms), slower(800ms) Easing: default, in, out, inOut — all cubic-bezier

Response Format

Section titled “Response Format”

When returning token values:

  • Show the JSON path (e.g., colors.brand.green.500)
  • Show the CSS variable (e.g., --color-green-500)
  • Show the hex/value (e.g., #539700)
  • If Tailwind: suggest the Tailwind class mapping