design-systems

name	design-systems
description	Design system creation (Apple HIG) + Figma auto-layout specifications
allowed-tools	["Read","Glob","Grep","WebSearch","Write","Edit"]
context	fork
user-invocable	true
version	1.0.0

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)