# Design System

> Turn a product brief into a Figma design system — color palette, type pairing, aesthetic/style, layout spine, and component scaffold — as real Figma Variables, Paint Styles, Text Styles, and Components. Use when the designer asks to "set up a design system", "pick colors and fonts for a new app", "build a brand foundation in Figma", "give me a palette and type scale", "start a new project", "scaffold a design system", or anything that needs a coherent visual foundation before screens get built. Reads from bundled reference data (161 palettes, 57 type pairings, 85 styles, 161 product-type rules) to make opinionated recommendations, not defaults.

- Skill: `egoisutolabs/design-system` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add egoisutolabs/design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/egoisutolabs/design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: egoisutolabs (https://skillmd.com/u/egoisutolabs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/egoisutolabs/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.

| File | Rows | Purpose |
|------|------|---------|
| `products.csv` | 161 | Product type → primary/secondary style, landing pattern, dashboard style, color focus |
| `ui-reasoning.csv` | 161 | Product type → recommended_pattern, style_priority, color_mood, typography_mood, key_effects, anti_patterns |
| `styles.csv` | 85 | Style catalog + `era_2030: yes/no/neutral` flag + AI prompt keywords + design system variables |
| `colors.csv` | 161 | Per-product-type palette: primary, on-primary, secondary, accent, background, foreground, card, muted, border, destructive |
| `typography.csv` | 57 | Heading + body font pairings with Google Fonts URLs and mood tags |
| `ux-figma.md` | — | Distilled UX rules that matter for Figma output (the 99-rule set filtered to what a static frame can express) |

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

```bash
# 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."