Design System

Design System (Mercury)

This skill turns "design system for a fintech onboarding app" into concrete Figma output: a Variable collection for tokens, Paint Styles, Text Styles, and a Components page scaffold with buttons/inputs/cards using those tokens. It refuses to give generic defaults — every recommendation is sourced from the bundled reference data and justified out loud.

If the designer also asks for a radical / 2030 / anti-SaaS aesthetic, layer the radical-2030 skill on top of this one. This skill is aesthetically neutral; radical-2030 biases the style selection toward the forward-looking end of the catalog.

Reference data (bundled)

All files are in ${CLAUDE_SKILL_DIR}/data/. Read them with standard shell tools when you need them; do not paste the full CSVs into the conversation.

Useful one-liners (run from the skill dir):

# Palette for fintech
python3 -c "import csv; [print(r) for r in csv.DictReader(open('data/colors.csv')) if 'fintech' in r['Product Type'].lower()]"

# Styles flagged era_2030=yes, sorted by No
python3 -c "import csv; [print(r['No'], r['Style Category']) for r in csv.DictReader(open('data/styles.csv')) if r['era_2030']=='yes']"

# Reasoning rule for a given product type
python3 -c "import csv; [print(r) for r in csv.DictReader(open('data/ui-reasoning.csv')) if r['UI_Category']=='Fintech']"

The reasoning flow

Follow this exact order. Don't skip steps and don't generate before reading.

1. Resolve product type

From the designer's brief, pick the single closest match in products.csv (column Product Type). If they say "budgeting app" → Fintech or Personal Finance. If they say "language learning app" → EdTech / Language. If you're not sure, ask — don't guess, because every subsequent step cascades from this choice.

2. Pull the reasoning rule

Read the matching row in ui-reasoning.csv. This gives:

• Recommended_Pattern — the landing / dashboard / app spine
• Style_Priority — the default style(s) for this product type
• Color_Mood — the brief for how colors should feel
• Typography_Mood — the brief for how typography should feel
• Key_Effects — the interaction vocabulary (hover durations, transitions, shadow usage, parallax, etc.)
• Anti_Patterns — what to avoid for this product type

3. Select the style

Two different rules depending on whether radical-2030 is loaded:

Without radical-2030 — use Style_Priority from step 2 as the candidate pool. Pull the matching row(s) from styles.csv.

With radical-2030 — Style_Priority is a 2022-defaults signal and is precisely what radical-2030 exists to override. Do NOT use it as the pool. Instead:

1. Filter styles.csv to era_2030 == "yes" — that is the candidate pool.
2. Rank candidates by overlap between their Keywords / AI Prompt Keywords and the reasoning row's Color_Mood + Typography_Mood + the product type's own keywords.
3. Pick the top match. Cite which Style_Priority defaults were discarded and why, so the designer can see the override is deliberate.
4. Hard-reject anything with era_2030 == "no" regardless of signal fit.

In both cases, from the selected style row pull:

• Primary Colors and Secondary Colors
• Effects & Animation
• Design System Variables (the variable names and default values)
• AI Prompt Keywords (useful for describing the aesthetic out loud)

4. Select the palette

Pull the matching row from colors.csv. The columns map 1:1 onto shadcn-style semantic tokens but translate cleanly to Figma Variables:

• Primary + On Primary → color/primary + color/on-primary
• Secondary + On Secondary
• Accent + On Accent
• Background + Foreground → color/surface + color/on-surface
• Card + Card Foreground
• Muted + Muted Foreground
• Border, Destructive + On Destructive, Ring

Verify contrast before accepting: primary/on-primary ≥ 4.5:1 for text.

5. Select the type pairing

Scan typography.csv for a pairing whose Mood/Style Keywords overlap the Typography_Mood from step 2 and the style's mood from step 3. Take the Heading Font + Body Font + the Google Fonts URL.

6. Emit Figma output

Build in this order (skip any already present — query op:"find" to check):

1. Variables collection named after the product (FinPal / tokens). Create one mode for light, one for dark. Use variable op:"create-collection", then create-mode, then create for each token.
   • Color tokens: every semantic key from step 4 (primary, on-primary, …).
   • Number tokens: spacing scale (4, 8, 12, 16, 24, 32, 48, 64), radius scale (0, 4, 8, 12, 16, 999 for pill), and elevation levels (0, 1, 2, 3).
2. Paint Styles for each color that needs styling beyond variables (e.g. a brand gradient, an ambient-depth fill). Use style op:"create-paint".
3. Text Styles for h1, h2, h3, body, body-small, label, caption. Set fontFamily = heading font for h*, body font for body/label/caption. Use style op:"create-text".
4. Components page (page op:"create" name:"Components"). Scaffold the minimum useful set, all bound to the variables from step 1:
   • Button (variant: primary / secondary / ghost, state: default / hover / disabled — see variant-component-setup)
   • Input (variant: default / focus / error)
   • Card (variant: resting / raised)
   • Status bar + tab bar (if mobile)
5. Batch it. Group the work into mcp__mercury__batch calls of ≤40 ops each (see mercury-gotchas). Export the Components page at the end and visually confirm.

7. Report

One terse paragraph: "Product type: X. Style: Y (reason: Z). Palette: [brief]. Typography: [heading] + [body]. Scaffolded variables + 4 components on Components page. Ready to build screens."

What this skill is NOT

• Not a screen builder. It creates the foundation. Screens come next (see tab-metaphors, ambient-depth).
• Not an AI generator. No Gemini / logo synthesis / Chart.js. The reference data informs recommendations; all output is vanilla Figma nodes.
• Not a blind copy of the ui-ux-pro-max ecosystem. It drops the web-stack layer (Tailwind classes, shadcn components, React examples). The underlying intelligence — product-type reasoning, palette/type/style curation — is what got ported.

Example invocation

Designer: "design system for a fintech onboarding app" (radical-2030 loaded)

You:

1. Product type → "Fintech" in products.csv
2. Reasoning → Style_Priority: "Flat Design + Glassmorphism" (both fall in the 2022 defaults that radical-2030 overrides), Color_Mood: "trust + bold contrast", Typography_Mood: "precise, data-forward"
3. Style pick → Style_Priority ignored (radical-2030 loaded). Pool = era_2030=yes. Rank by overlap with "trust + bold contrast + precise + data-forward" → winner: HUD / Sci-Fi FUI (edge-aligned, monospace, data-as-ornament matches data-forward; high-contrast matches trust + bold contrast). Runner-up: Swiss Modernism 2.0. Cite: "Flat Design and Glassmorphism discarded per radical-2030."
4. Palette → Fintech row in colors.csv, but swap the default blue primary for a HUD-appropriate accent (acid lime or radioactive amber on near-black surface) — or pick from the style's own Primary Colors column
5. Type → Scan typography.csv for mono + display pairing → "JetBrains Mono + Space Grotesk" or similar
6. Emit → Fintech / tokens variables (light + dark modes), Paint Styles for the accent + data-grid hairlines, Text Styles (mono for data, display for headings), 4 components (button / input / card / data-row)
7. Report: "Fintech. HUD / Sci-Fi FUI (discarded Flat + Glassmorphism per radical-2030). Near-black + acid-lime accent. JetBrains Mono + Space Grotesk. Scaffolded — ready for screens."