Design Systems Skill
Workflow from jony-creative-director: Design System Architect + Figma Expert
Inputs
| Parameter | Required | Description |
|---|
| Brand/product name | Yes | Target brand or product |
| Personality | Yes | MINIMALIST / BOLD / PLAYFUL / PROFESSIONAL / LUXURY |
| Primary emotion | Yes | TRUST / EXCITEMENT / CALM / URGENCY |
| Target audience | Yes | Demographics + psychographics |
Phase 1: Foundations
Color System
| Deliverable | Specification |
|---|
| Primary palette | 6 colors: hex, RGB, HSL, WCAG contrast ratings |
| Semantic colors | success, warning, error, info with hex values |
| Dark mode | Equivalents for all colors, contrast ratios verified |
| Usage rules | When/where each color applies, forbidden combinations |
Typography
| Level | Specify |
|---|
| Display, Headline, Title | Size, weight, line height, letter spacing per breakpoint |
| Body, Callout, Subheadline | Desktop (1440px), tablet (768px), mobile (375px) |
| Footnote, Caption | Font pairing strategy, minimum legibility sizes |
Primary font family with 9 weights. Type scale with exact values.
Layout Grid
12-column responsive: desktop 1440px / tablet 768px / mobile 375px. Specify gutters, margins, breakpoints, safe areas (notched devices).
Spacing System
8px base unit scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Usage guideline per step.
Phase 2: Components (30+ with variants)
| Category | Components |
|---|
| Navigation | Header, Tab bar, Sidebar, Breadcrumbs |
| Input | Buttons (6 variants), Text fields, Dropdowns, Toggles, Checkboxes, Radios, Sliders |
| Feedback | Alerts, Toasts, Modals, Progress indicators, Skeleton screens |
| Data display | Cards, Tables, Lists, Stats, Charts |
| Media | Image containers, Video players, Avatars |
Per Component Spec
| Aspect | Detail |
|---|
| Anatomy | Parts breakdown with names |
| States | default, hover, active, disabled, loading, error |
| Usage | When to use, when NOT to use |
| Accessibility | ARIA labels, keyboard nav, focus states |
| Code-ready | padding, margins, border-radius, shadows (exact values) |
Phase 3: Patterns
- Page templates: Landing, Dashboard, Settings, Profile, Checkout
- User flows: Onboarding, Auth, Search, Filtering, Empty states
- Feedback: Success, Error, Loading, Empty state patterns
Phase 4: Design Tokens
Complete JSON structure for developer handoff: color (primitive + semantic), typography, spacing, shadow/elevation, border-radius tokens.
Phase 5: Figma Specifications
Auto-Layout (per component)
| Property | Values to specify |
|---|
| Direction | vertical / horizontal |
| Padding | top, right, bottom, left |
| Item spacing | exact px value |
| Distribution | packed / space-between |
| Alignment | start / center / end / stretch |
| Resizing | hug contents / fill container / fixed |
Component Architecture
- Master component structure with variant properties (boolean, instance swap, text)
- Variant matrix example:
Type × State × Size (e.g., Button: Primary/Secondary × Default/Hover/Disabled × S/M/L)
- Component properties: text, boolean, instance swap, variant
Prototype & Handoff
| Aspect | Specification |
|---|
| Interactions | Map flows, triggers (click/hover/drag), animations |
| Timing | Easing curves, duration, delays |
| Export | 1x/2x/3x/SVG/PDF settings, asset naming conventions |
| CSS | Properties for key elements, inspect organization |
| Accessibility | Focus order, ARIA labels, contrast annotations |
Phase 6: Documentation
- 3 core design principles with examples
- 10 Do's and Don'ts with visual descriptions
- Developer implementation guide
Outputs
| Deliverable | Format |
|---|
| Foundations spec | Markdown with exact values |
| Component library | Per-component spec sheets |
| Design tokens | JSON token file |
| Figma guide | Auto-layout + component architecture |
| Documentation | Principles + guidelines |
Related
/brand-identity (brand strategy) | /ui-design (screen application) | /design-quality (a11y validation)
