| name | apple design |
| description | Apply Apple's design language — clarity, hierarchy, materials, motion, and typography — to any product, including websites, web apps, and non-Apple interfaces. |
A distilled reference for designing in the Apple aesthetic. Use it when you want a website, web app, or other product to feel like it was crafted in the spirit of Apple's design language — not when targeting Apple's native platforms specifically.
When to use
Start with principles.md for the overall design ethos, then load the foundation and component references that apply to the task. Each reference distills the relevant guidance from Apple's Human Interface Guidelines into design principles you can adapt to your own medium.
Design principles
- principles — Hierarchy, harmony, and consistency as the foundations for designing on Apple platforms.
Foundations
- color — System colors, dynamic and Liquid Glass color, inclusive color, and color management.
- dark mode — Supporting the systemwide dark appearance, adaptive colors, icons, and text.
- layout — Visual hierarchy, adaptability across contexts, layout guides, and safe areas.
- materials — Liquid Glass and standard materials for layering, depth, and visual hierarchy.
- motion — Purposeful animation, feedback motion, and leveraging platform motion capabilities.
- typography — Legibility, hierarchy, system and custom fonts, and Dynamic Type support.
Layout and organization
- boxes — Visually grouping logically related information and components.
- collections — Ordered sets of content presented in highly visual, customizable layouts.
- column views — Navigating a data hierarchy through a series of vertical columns (browser).
- disclosure controls — Disclosure triangles and disclosure buttons for revealing or hiding information.
- labels — Static, uneditable text used throughout the interface.
- lists and tables — Presenting data in one or more columns of rows.
- lockups — Combining multiple views into a single interactive unit (cards, caption buttons, monograms, posters).
- outline views — Scrollable, hierarchical data displayed in rows and columns.
- split views — Managing multiple adjacent panes of content.
- tab views — Switching between mutually exclusive panes via a tabbed control.
Content
- image views — Displaying single images or animated sequences, and when to use symbols or buttons instead.
