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

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

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

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

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

Token	Value
white	#ffffff
black	#000000
gray-50 to gray-900	See design-tokens.json

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)

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

Quick Reference — Border Radius

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

Quick Reference — Shadows

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

Quick Reference — Breakpoints

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

Quick Reference — Animation

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

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