Claude
Skills
Sign in
Back

foundations

Included with Lifetime
$97 forever

Cross-platform Apple Human Interface Guidelines: color, typography, layout, materials, motion, accessibility, SF Symbols, branding, plus shared UI elements (activity views, rating indicators, web views, …) and meta sections (components, patterns, technologies). Use when the design topic is platform-agnostic. User says: "iOS color tokens", "SF Symbols", "Apple typography", "dark mode guidance".

Design

What this skill does


# Apple Design Foundations
Foundational HIG topics shared across all Apple platforms — design principles, accessibility, shared UI elements with identical guidance everywhere, and meta indexes. For platform-specific component variations, see the matching `<platform>` skill.

## How to use
1. **Match the user's question to a topic** in the glossary below.
2. **Read only the relevant reference** with `Read`. Topics with multiple files (`×N`) live in `references/<topic>/`.
3. **Combine with the platform skill** when the user is targeting a specific device — e.g., color foundations + `ios` for iPhone-specific palettes.
4. **Cite the topic** when giving guidance so the user can verify against Apple's source.

## Glossary
|Topic|Reference|Summary|
|---|---|---|
|`accessibility`|`accessibility/`|Intuitive|
|`activity-views`|`activity-views.md`|You have the ability to supply app-specific activities that appear in a share…|
|`app-icons`|`app-icons/`|While a flattened image can be used for your icon, utilizing layers provides…|
|`branding`|`branding.md`|Applications and games should convey their distinct brand identity in ways that…|
|`charting-data`|`charting-data.md`|chart can serve different roles, from a straightforward graphic offering quick…|
|`charts`|`charts/`|Determine how forecasted weather conditions may affect their plans|
|`color`|`color/`|However, you might also choose custom colors to enhance your app or game's…|
|`components`|`components.md`|Understand how to utilize and tailor system-provided components to ensure a…|
|`content`|`content.md`|Charts — Organize data visually into a chart to clearly and appealingly…|
|`dark-mode`|`dark-mode/`|Avoid offering an app-specific appearance setting|
|`designing-for-games`|`designing-for-games/`|Integrate Game Center to enable players to find your game across devices and…|
|`digit-entry-views`|`digit-entry-views.md`|digit entry view occupies the entire screen, prompting users to input a…|
|`disclosure-controls`|`disclosure-controls.md`|Disclosure controls determine the visibility of information and functionality…|
|`eyes`|`eyes/`|In certain situations, the system may automatically display an expanded view of…|
|`feedback`|`feedback.md`|Feedback informs users about the current state, guides them on subsequent…|
|`foundations`|`foundations.md`|Accessibility — Accessible user interfaces enable everyone to have a positive…|
|`gestures`|`gestures/`|All platforms support fundamental gestures like tap, swipe, and drag|
|`getting-started`|`getting-started.md`|Develop an application or game that delivers a cohesive, native experience…|
|`icons`|`icons/`|You may either design interface icons—also referred to as *glyphs*—or select…|
|`image-wells`|`image-wells.md`|image well serves as an editable version of an image view|
|`inclusion`|`inclusion/`|As with any design project, developing an inclusive application is a…|
|`inputs`|`inputs.md`|Overview of Application/Game Control and Data Input Mechanisms|
|`keyboards`|`keyboards/`|Keyboard users often appreciate using shortcuts to accelerate their…|
|`launching`|`launching/`|smooth launch experience enables users to begin using your app or game…|
|`layout`|`layout/`|Apple provides templates, guides, and other resources to help you integrate…|
|`layout-and-organization`|`layout-and-organization.md`|Boxes — A box defines a visually distinct grouping for logically related…|
|`loading`|`loading.md`|Optimal content loading occurs when the user remains unaware of the process|
|`lockups`|`lockups.md`|lockup integrates multiple distinct views into a single, interactive unit|
|`materials`|`materials/`|Apple platforms utilize two types of materials: Liquid Glass and standard…|
|`menus-and-actions`|`menus-and-actions.md`|Activity views — An activity view, often referred to as a *share sheet*,…|
|`modality`|`modality.md`|Modality is a design method where content appears in a standalone, dedicated…|
|`motion`|`motion/`|When designing custom motion, please follow the guidelines provided below|
|`navigation-and-search`|`navigation-and-search.md`|Path controls — Displays the file system location of a selected file or…|
|`offering-help`|`offering-help.md`|While optimal experiences are inherently intuitive and accessible, you retain…|
|`onboarding`|`onboarding.md`|Onboarding assists users in achieving a rapid start with your application or…|
|`outline-views`|`outline-views.md`|outline view displays structured data hierarchically within a scrollable…|
|`patterns`|`patterns.md`|Please provide the Apple design guideline prose you would like me to paraphrase|
|`pointing-devices`|`pointing-devices/`|Maintain consistency in how you respond to mouse and trackpad gestures|
|`presentation`|`presentation.md`|Action sheets — An action sheet is a modal display used to present options…|
|`privacy`|`privacy/`|Upon submitting a new or revised application, you must furnish specifics…|
|`rating-indicators`|`rating-indicators.md`|rating indicator conveys a ranking level using a sequence of horizontally…|
|`right-to-left`|`right-to-left/`|System-provided UI frameworks inherently support right-to-left (RTL), enabling…|
|`searching`|`searching.md`|Users employ diverse methods to locate information across their device, within…|
|`selection-and-input`|`selection-and-input.md`|Color wells — A color well allows users to modify the hue of text, shapes,…|
|`sf-symbols`|`sf-symbols/`|availability of specific symbols and features depends on the target system…|
|`status`|`status.md`|Activity rings — Activity rings visualize a user's daily advancement toward the…|
|`status-bars`|`status-bars.md`|status bar occupies the upper edge of the display and provides indicators…|
|`system-experiences`|`system-experiences.md`|App Shortcuts — Allows users to access your application's critical functions or…|
|`technologies`|`technologies.md`|Explore the Apple technologies, features, and services available for…|
|`typography`|`typography/`|Modify font weight, size, and color to highlight critical information and…|
|`virtual-keyboards`|`virtual-keyboards/`|If appropriate for your application, you have the option to substitute the…|
|`voiceover`|`voiceover.md`|VoiceOver functions as a screen reader, allowing users to interact with your…|
|`web-views`|`web-views.md`|web view enables your application to load and render rich internet content,…|
|`writing`|`writing/`|Define your app's voice|

Related in Design