Platform Design Skills

Platform Design Skills

300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps

Category: design Source: ehmo/platform-design-skills

What Is This?

Overview

Ehmo/platform Design Skills is a structured knowledge base containing more than 300 curated design rules drawn from three authoritative sources: Apple Human Interface Guidelines (HIG), Google Material Design 3, and the Web Content Accessibility Guidelines (WCAG) 2.2. The resource consolidates platform-specific conventions and universal accessibility standards into a single reference that designers and developers can apply when building cross-platform applications.

The skill covers visual hierarchy, component behavior, spacing systems, color contrast requirements, touch target sizing, motion principles, and typography scales. Rather than requiring practitioners to cross-reference multiple official documentation sources, Ehmo/platform Design Skills organizes these rules into actionable guidance that maps directly to implementation decisions.

Each rule is categorized by platform context and severity, allowing teams to prioritize compliance issues, distinguish platform-specific conventions from universal requirements, and make informed trade-offs when a single design must function across iOS, Android, and web environments simultaneously.

Who Should Use This

  • Mobile application designers who need to align their work with Apple HIG and Material Design 3 simultaneously
  • Front-end developers who implement UI components and need precise measurements, contrast ratios, and interaction specifications
  • Accessibility specialists auditing products against WCAG 2.2 success criteria
  • Product managers who need to evaluate design decisions against established platform standards
  • UX researchers validating prototypes against documented usability conventions
  • Design system maintainers building shared component libraries that must serve multiple platforms

Why Use It?

Problems It Solves

  • Designers frequently switch between Apple HIG, Material Design documentation, and WCAG references, losing time and context with each transition
  • Teams building cross-platform products often apply iOS conventions to Android interfaces or vice versa, creating friction for users familiar with each platform
  • Accessibility compliance is treated as a separate audit phase rather than an integrated design constraint, leading to costly late-stage revisions
  • Junior designers lack a consolidated reference to understand which rules are platform-specific versus universal, resulting in inconsistent decisions
  • Development handoff suffers when design specifications omit precise values for spacing, contrast, and touch targets

Core Highlights

  • More than 300 rules sourced directly from Apple HIG, Material Design 3, and WCAG 2.2
  • Cross-platform mapping that identifies where guidelines converge and where they diverge
  • Accessibility rules integrated alongside visual and interaction guidelines rather than isolated
  • Severity classification to distinguish critical compliance requirements from recommended conventions
  • Coverage of typography, color, spacing, motion, touch targets, and component behavior
  • Applicable to native iOS, native Android, and responsive web contexts
  • Structured format suitable for integration into design system documentation

How to Use It?

Basic Usage

When specifying a button component, reference the relevant rules for minimum touch target size, label contrast, and corner radius conventions across platforms.

iOS (Apple HIG):
  Minimum touch target: 44x44 pt
  Corner radius: system default (rounded rectangle)
  Label contrast ratio: 4.5:1 minimum (WCAG 2.2 AA)

Android (Material Design 3):
  Minimum touch target: 48x48 dp
  Corner radius: 20dp (filled button, M3 default)
  Label contrast ratio: 4.5:1 minimum (WCAG 2.2 AA)

Specific Scenarios

Scenario 1: Defining a color system for a cross-platform app. Use the WCAG 2.2 contrast rules as the baseline for all text and interactive element colors, then layer platform-specific tonal palette conventions from Material Design 3 for Android and dynamic color guidance from Apple HIG for iOS.

Scenario 2: Designing a navigation pattern. Reference the platform-specific rules to determine when to use a tab bar (iOS) versus a navigation bar with a drawer (Android), while applying universal accessibility rules for focus order and keyboard navigation across both.

Real-World Examples

A team building a banking application used the touch target rules to standardize button sizing at 48dp across Android screens, reducing mis-tap error rates observed in usability testing.

A design system team used the contrast ratio rules to build a token set where every semantic color pair was pre-validated against WCAG 2.2 AA requirements before reaching production.

When to Use It?

Use Cases

  • Starting a new cross-platform product and establishing foundational design constraints
  • Auditing an existing application for platform convention compliance
  • Building or extending a design system component library
  • Onboarding new designers to platform-specific expectations
  • Preparing accessibility compliance documentation for enterprise clients
  • Resolving design disagreements by referencing authoritative platform standards
  • Training junior designers on the reasoning behind common UI patterns

Important Notes

Requirements

  • Familiarity with at least one major design tool such as Figma, Sketch, or Adobe XD to apply rules to actual design files
  • Basic understanding of platform differences between iOS and Android to interpret cross-platform rule mappings
  • Access to the Ehmo/platform Design Skills source for the complete rule set and severity classifications