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