hig-foundations
Lets your agent know the basic design principles of Apple. Useful for ensuring apps follow platform design guidelines.
What it does
This guide helps create apps that look good and are easy to use, following Apple's design rules. It focuses on principles like clarity, accessibility, and using visual elements that are already part of the system.
When to use it
- ✓When starting to design a new app for iPhone or iPad.
- ✓When you want your app to be easy for everyone to use, including people with disabilities.
- ✓If you need to use colors, fonts, and icons that match other Apple apps.
Example of what to ask your AI
“How can I make sure my app works well for people using screen readers?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The guide explains Apple's basic design principles, like 'prioritize content over chrome' and 'build in accessibility from the start'. It also lists specific resources like system colors, fonts, and icons.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill hig-foundationsOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/hig-foundations/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Apple HIG: Design Foundations
Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.
Key Principles
Prioritize content over chrome. Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds.
Build in accessibility from the start. Design for VoiceOver, Dynamic Type, Reduce Motion, Increase Contrast, and Switch Control from day one. Every interactive element needs an accessible label.
Use system colors and materials. System colors adapt to light/dark mode, increased contrast, and vibrancy. Prefer semantic colors (
label,secondaryLabel,systemBackground) over hard-coded values.Use platform fonts and icons. SF Pro, SF Compact, SF Mono by default. New York for serif. Follow the type hierarchy at recommended sizes. Use SF Symbols for iconography.
Match platform conventions. Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action.
Respect privacy. Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection.
Support internationalization. Accommodate text expansion, right-to-left scripts, and varying date/number formats. Use Auto Layout for dynamic content sizing.
Use motion purposefully. Animation should communicate meaning and spatial relationships. Honor Reduce Motion by providing crossfade alternatives.
Reference Index
| Reference | Topic | Key content |
|---|---|---|
| accessibility.md | Accessibility | VoiceOver, Dynamic Type, color contrast, motor accessibility, Switch Control, audio descriptions |
| app-icons.md | App Icons | Icon grid, platform-specific sizes, single focal point, no transparency |
| branding.md | Branding | Integrating brand identity within Apple's design language, subtle branding, custom tints |
| color.md | Color | System colors, Dynamic Colors, semantic colors, custom palettes, contrast ratios |
| dark-mode.md | Dark Mode | Elevated surfaces, semantic colors, adapted palettes, vibrancy, testing in both modes |
| icons.md | Icons | Glyph icons, SF Symbols integration, custom icon design, icon weights, optical alignment |
| images.md | Images | Image resolution, @2x/@3x assets, vector assets, image accessibility |
| immersive-experiences.md | Immersive Experiences | AR/VR design, spatial immersion, comfort zones, progressive immersion levels |
| inclusion.md | Inclusion | Diverse representation, non-gendered language, cultural sensitivity, inclusive defaults |
| layout.md | Layout | Margins, spacing, alignment, safe areas, adaptive layouts, readable content guides |
| materials.md | Materials | Vibrancy, blur, translucency, system materials, material thickness |
| motion.md | Motion | Animation curves, transitions, continuity, Reduce Motion support, physics-based motion |
| privacy.md | Privacy | Permission requests, usage descriptions, privacy nutrition labels, minimal data collection |
| right-to-left.md | Right-to-Left | RTL layout mirroring, bidirectional text, icons that flip, exceptions |
| sf-symbols.md | SF Symbols | Symbol categories, rendering modes, variable color, custom symbols, weight matching |
| spatial-layout.md | Spatial Layout | visionOS window placement, depth, ergonomic zones, Z-axis design |
| typography.md | Typography | SF Pro, Dynamic Type sizes, text styles, custom fonts, font weight hierarchy, line spacing |
| writing.md | Writing | UI copy guidelines, tone, capitalization rules, error messages, button labels, conciseness |
Applying Foundations Together
Consider how principles interact:
- Color + Dark Mode + Accessibility -- Custom palettes must work in both modes while maintaining WCAG contrast ratios. Start with system semantic colors.
…
FAQ
What does 'prioritize content over chrome' mean?
It means that what's important (the content) should stand out more than the surrounding design elements (the chrome).
What are 'semantic colors'?
These are colors that have a meaning, like 'primary text color' or 'background color', and they automatically adjust to the system's light or dark mode.
What are 'SF Symbols'?
It's a collection of icons designed by Apple that fit perfectly with the visual style of apps and adapt to different font sizes and weights.
Details
Original description by the author
Apple Human Interface Guidelines design foundations.
Popularity
- GitHub stars
- 48k
- Ranking position
- #3204
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC