orbit-designer-tokenslisted

# 🪐 orbit-designer-tokens — Design tokens audit A plugin without a token system has 47 shades of grey in its CSS. This skill catalogues what's used and proposes a consistent system. --- ## Quick start ```bash claude "/orbit-designer-tokens Audit ~/plugins/my-plugin's CSS for design token consistency." ``` --- ## What it checks ### 1. Color palette extraction Greps every CSS file for color values (hex, rgb, rgba, hsl, named). Counts unique values + usage frequency. ``` [Colors] my-plugin Found 73 unique color values across 14 CSS files. Top 10 by usage: #2271b1 — 47 uses (WP admin primary blue) #ffffff — 38 uses #1d2327 — 24 uses (WP admin text) #f0f0f1 — 19 uses (WP admin bg) #d63638 — 11 uses (WP admin error red) ... Outliers (used 1-2 times): #2196f3 — 1 use (Material Design blue — drift from WP palette) #ff5722 — 2 uses (Material Design orange) Suggestion: consolidate to 8-12 named tokens. ``` ### 2. Typography scale audit **Whitepaper intent:** Type scales should follow a ratio (1.125, 1.25, 1.333, 1.5). Plugins with random sizes (13, 14.5, 17, 22, 31px) feel chaotic. ``` [Typography] my-plugin font-size values found: 17 unique 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 28, 32, 36, 42, 48, 60, 72px ⚠ This is 17 sizes — most design systems use 8 (xs/sm/base/md/lg/xl/2xl/3xl). Consolidate via CSS custom properties or theme.json. ``` ### 3. Spacing system Check for consistent spacing scale (4px base = 4/8/12/16/24/32/48/64). ### 4. Border-