By name: graphics-design description: "Apply world-class graphic design principles following Apple HIG, Google Material Design, IBM Carbon, Airbnb DLS, Microsoft Fluent, and Netflix Hawkins design systems. Use when: (1) Designing user interfaces, (2) Creating visual designs, (3) Establishing design systems, (4) Ensuring accessibility compliance, (5) Working with typography or color theory"
Graphics Design Engineering Rules
"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs
Purpose
These rules establish the methodology for creating world-class visual designs and design systems. Drawing from the design excellence of Apple (Human Interface Guidelines), Google (Material Design), IBM (Carbon Design System), Airbnb (Design Language System), Microsoft (Fluent Design), and Netflix (Hawkins), this guide covers visual hierarchy, typography, color theory, motion design, accessibility, and design system architecture.
Reference Documentation
This skill includes comprehensive reference documentation organized by topic. Load the relevant reference as needed:
Design Systems & Principles
- design-systems.md - Detailed comparison of Apple, Google, IBM, Airbnb, Microsoft, and Netflix design systems
- design-principles.md - Core design principles from Apple (Clarity, Deference, Depth) and Microsoft Fluent (Five Pillars)
- design-tokens.md - Design system architecture and design tokens (from Airbnb's Living Organism model)
Visual Design
- typography.md - Type scales, typography rules, and best practices
- color-theory.md - Color roles, Material Design 3 color system, Apple color guidelines, IBM Carbon color tokens, Pantone Matching System (PMS)
- visual-hierarchy.md - Netflix's content-first approach and visual hierarchy principles
Specialized Topics
- accessibility.md - WCAG compliance and IBM Carbon accessibility standards
- motion-design.md - Animation principles and motion design guidelines
- cross-platform.md - Platform-agnostic design approach (Airbnb DLS)
- swiss-design.md - International Typographic Style, Bauhaus influence, and Swiss Grid System
- tools-and-checklists.md - Industry standard tools, resources, and design checklists
Quick Reference
When to Use Which Reference
- Starting a new design system? → Read design-systems.md and design-tokens.md
- Working with typography? → Read typography.md
- Choosing colors? → Read color-theory.md
- Ensuring accessibility? → Read accessibility.md
- Adding animations? → Read motion-design.md
- Multi-platform design? → Read cross-platform.md
- Grid-based layouts? → Read swiss-design.md
Design System URLs
For official documentation, refer to:
- Apple HIG: developer.apple.com/design/human-interface-guidelines
- Material Design 3: m3.material.io
- IBM Carbon: carbondesignsystem.com
- Microsoft Fluent: fluent2.microsoft.design