Mk Ui Design System

---
name: "mk-ui-design-system"
description: "Design UI components/design systems, review visual design, check accessibility. Triggers: design system, color palette, font pairing, WCAG check. Data-driven: palettes, fonts, UX guidelines."
---

# UI Design System

Data-driven design intelligence: curated palettes, font pairings, product recommendations, UX guidelines, accessibility standards, and quality checklists.

## When to Use

- Creating or reviewing UI components
- Setting up a design system for a new project
- Checking WCAG accessibility compliance
- Selecting color palettes, typography, or UI styles
- Choosing chart types for data visualization
- Responsive design review

## Process

1. **Understand requirements** — what product type? audience? style direction?
2. **Look up design data** — read `references/data-lookup.md` for how to query:
   - Color palette → `assets/colors.csv` (161 WCAG-verified palettes by product type)
   - Font pairing → `assets/typography.csv` (73 pairings with Google Fonts URLs)
   - Product direction → `assets/products.csv` (161 types with style/dashboard/color recs)
   - UX check → `assets/ux-guidelines.csv` (99 Do/Don't rules with severity)
   - Chart type → `assets/charts.csv` (25 types with accessibility grades)
3. **Apply design rules** — load from references/ based on task:
   - Visual design → `references/design-patterns.md`
   - Accessibility → `references/accessibility-standards.md`
   - Quality check → `references/quality-checklist.md`
4. **Validate** — run quality-checklist.md before handoff

## Data Assets (NEW — v2.0)

| File                       | Rows | Content                                                       |
| -------------------------- | ---- | ------------------------------------------------------------- |
| `assets/colors.csv`        | 160  | WCAG-verified palettes by product type (hex values)           |
| `assets/typography.csv`    | 73   | Font pairings with mood, Google Fonts URLs, Tailwind config   |
| `assets/products.csv`      | 161  | Product type → style, landing pattern, dashboard, color focus |
| `assets/ux-guidelines.csv` | 98   | Do/Don't pairs with category + severity                       |
| `assets/charts.csv`        | 25   | Data type → best chart, accessibility grade, library          |

See `references/data-lookup.md` for lookup patterns and examples.

## Gotchas

- **Aesthetic over accessibility**: beautiful design that fails WCAG → check contrast (4.5:1 normal, 3:1 large) before shipping
- **Desktop-first design**: designing for large screens then cramming into mobile → start from 320px
- **Color-only communication**: red/green for status → pair with icon or text label
- **Ignoring the data**: guessing palette when colors.csv has WCAG-verified values → always look up first
- **Generic product assumptions**: all SaaS looks the same → check products.csv for product-specific recommendations

## Workflow Integration

Loaded by `ui-ux-designer` agent during Phase 3 (Build). Also used by `developer` agent for frontend work.