The "atomic layer" of design: the smallest units such as color, typography, layout, and materials. Getting this layer right makes the components and patterns built on top of it stable. Each section provides best practices + counterexamples + platform differences. Note: The complete system of the new visual language in iOS 26 Liquid Glass (and advanced techniques for drawing SF Symbols / using Icon Composer) is covered in Apple HIG: Liquid Glass New Design Language + SF Symbols + Typography (iOS 26 Visual System); this document only covers foundational concepts.
1. Color
Core principle: Prioritize system semantic colors; do not hardcode color values. System colors automatically adapt to light/dark mode and high-contrast settings; colors you hardcode yourself will not.
| Key points | How to do it · Why |
|---|---|
| Use system semantic colors | Reference Color semantic colors from the API (such as systemRed, "background color", "separator color"); the system automatically adapts their appearance.Do not alter semantic meaning(do not use "separator color" as text color) |
| One meaning per color | The same color cannot represent both a tappable button and plain text — users will become confused |
| Color is not the only signal | When conveying status or distinguishing objects, color must be paired with text/icons/shapes(people with red-green color blindness cannot tell red and green apart) |
| Provide three variants for custom colors | Light / dark / high contrast — none can be omitted |
| Test across multiple environments | Test under bright outdoor light, at night, with True Tone, HDR, and on sRGB/P3 displays |
| Cultural differences | Red signals warning in some cultures and celebration in others; verify color meanings during localization |
· Color space: Use standard sRGB; for wide color gamut, use P3 (pair with 16-bit-per-channel PNGs to display more saturated colors). Every image should include a Color Profile to ensure consistency across devices. · Platform differences: iOS uses three levels of background colors — Primary/Secondary/Tertiary — to express hierarchy; macOS 11+ supports app-specified Accent Colors; tvOS palettes should be restrained (do not use color alone to indicate focus); watchOS background colors should "convey meaning" (for example, the Activity Ring color scheme).
2. Typography
Core principle: Readability > fitting more content. When accommodating larger text sizes, preserve hierarchy and readability rather than blindly shrinking text.
- System fonts:San Francisco(SF) is the primary font for iOS/iPadOS/macOS/tvOS/visionOS (SF Pro / SF Compact / SF Arabic / SF Mono);New York(NY) is used for elegant display content (macOS / Mac Catalyst). Both are variable fonts, supporting multiple weights and optical sizes.
- Dynamic Type: A system-level feature where the app automatically adapts when the user adjusts text size.Supported on iOS/iPadOS/tvOS/visionOS/watchOS; not supported on macOS. This is the best practice for supporting the "Larger Text" accessibility feature.
- Font weight: Avoid extremely thin or extremely heavy weights; choose heavier weights for small font sizes to maintain clarity. Regular / Medium / Semibold are recommended.
Recommended minimum body font size per platform:iPhone 17pt · iPad 23pt · macOS 19pt · visionOS/watchOS 11pt. visionOS specifics: Prioritize two-dimensional text (text with depth is harder to read); text should always face the user ("billboard display"); when there is no background, use bold weight instead of shadows (the environment cannot generate accurate shadows).
3. Layout
| Principles | Key points |
|---|---|
| Group related content | Use whitespace/background shapes/colors/separators to distinguish sections; clearly separate controls from content |
| Emphasize important information | Give key information sufficient space; place secondary content in additional views |
| Let content fill the screen | Extend full-screen backgrounds to the edges; scrollable content should cover to the bottom; controls (sidebars/tab bars) float above content, with layout reserving space for them |
| Follow reading order | Place important elements at the top and on the leading side (the left side in LTR), and support RTL mirroring |
| Progressive disclosure | When there is a large amount of content, prompt users that they can "swipe/tap to see more" instead of cramming everything in at once |
| Safe areas | Use Safe Area to avoid the camera/sensors; use Layout Guide to align and constrain text width |
Platform differences: On iOS, avoid full-width buttons and follow system margins; on iPadOS, adapt to Split View (half-screen/one-third screen) and use switchable sidebars/tab bars; on macOS, do not place important controls at the bottom of the window;On tvOS, inset main content within the safe area (60pt top/bottom, 80pt left/right) to prevent overscan on older televisions; on visionOS, button spacing must be ≥60pt; on watchOS, content extends to the edges, and horizontal buttons should be limited to 2–3.
4. Spatial Layout (visionOS exclusive)
visionOS "layout" adds a Z-axis and ergonomics, with three key variables:
- Field of View: Place important content in the center of the field of view (apps launch directly in front of the user by default);do not fix content above the user's head(this makes people feel trapped).
- Depth: Use distance/occlusion/shadows to convey hierarchy;do not apply depth to text(it blends with the background and reduces readability); depth cues must be accurate, otherwise users will feel discomfort.
- Scale:Dynamic scale(automatically enlarges when far away, shrinks when close to maintain clarity) vs fixed scale(constant size, simulating real-world objects such as product models).
- Hard rules: Avoid displaying too many windows (they occlude the environment and increase repositioning burden); prioritize indirect gestures; center-to-center spacing of interactive components must be ≥60pt, with gaps ≥16pt; reduce required body movement.
5. Materials
Materials = Use blur, transparency, and translucency to establish a layered sense of foreground and background hierarchy. Apple provides two sets:
| Materials | Where to use | Key constraints |
|---|---|---|
| Liquid Glass Liquid Glass | Controls and navigation areas only(tab bars/sidebars) | Do not use on content layers; do not overuse (applying it to too many custom controls causes hierarchy confusion); exception: temporary interactions such as sliders and switches may use it briefly |
| Standard materials Standard | Content layers(backgrounds/sections) | Select materials by semantic purpose (do not choose based on color alone, as colors change with the system); use vibrant colors for foreground elements to maintain contrast; thicker materials provide high-contrast backgrounds, thinner materials reveal content behind them |
Platform differences: iOS provides three vibrancy levels: label, fill, and separator (avoid using quaternaryLabel on ultraThin/thin materials, as contrast is too low); macOS has
behind window/within windowtwo blending modes; tvOS offers five levels from ultraThin to ultraThick;visionOS uses a default glass material that cannot be modified, does not support Dark Mode (brightness adjusts automatically), and opaque backgrounds should be avoided so they do not obstruct the field of view; on watchOS, do not replace the system default modal material.
6. Motion
Core principle: Purposeful motion; never animate just for the sake of animation. Excessive animation distracts users and causes discomfort.
- Motion must be optional: Not every user likes animation; do not use animation as the only channel of information—pair it with haptics and sound effects.
- Brief and precise: Light, short feedback animations convey information without being intrusive; minimize the time users spend waiting for animations to finish, and allow them to proceed quickly to the next step.
- Meet expectations: Swipe feedback that does not match user expectations will cause confusion.
- visionOS motion sickness prevention rules: Reduce motion at the edges of the field of view; when large virtual objects move across a wide area, provide a stationary visual reference point;Avoid continuous oscillating animation around 0.2Hz(it causes discomfort); if it must be used, reduce amplitude and add translucency.
7. Images
- Resolution:
@1x(1 point = 1 pixel)/@2x/@3x. iOS uses @2x + @3x; iPad/watchOS use @2x; macOS/tvOS use @1x + @2x; visionOS starts at @2x. Design at @1x first and scale up; align vector control points to integer values. - Format selection: Bitmaps → deinterlaced PNG; photos → optimized JPEG or HEIC;Interface icons/flat graphics → PDF or SVG(vector, sharp at any automatic scale). Attach a Color Profile to every image.
- tvOS: App icons must use 2–5 layered images (parallax effect: floating glow when focused); leave a safe area in the foreground to prevent cropping.
- watchOS: To reduce file size avoid transparent backgrounds(except for Complications/menu icons/interface template images); use PDF for automatic scaling.
8. App Icons
Core principle: Simple and recognizable + consistent across platforms + let the system handle effects.
| Platform | Designed shape | After system mask | Size |
|---|---|---|---|
| iOS / iPadOS / macOS | Square | Rounded rectangle | 1024×1024 |
| tvOS | Horizontal rectangle | Rounded rectangle | 800×480 |
| visionOS | Square | Circle | 1024×1024 |
| watchOS | Square | Circle | 1088×1088 |
- Layering: iOS/macOS/watchOS use a background layer plus 1 or more foreground layers (supports Liquid Glass); tvOS uses 2–5 layers (parallax + transparent depth); visionOS uses a background plus 1–2 foreground layers (3D stereoscopic). Build using Icon Composer(iOS/macOS) or Xcode image stacks (tvOS/visionOS).
- Hard rules: ① Let the system handle highlights/blur/shadows/glow (system effects are dynamic; custom static effects will conflict); ② use text sparingly(it hinders localization, is hard to read at small sizes, and looks crowded), and prohibit instructional words such as "Watch/Play/New"; ③ Prefer illustrations over photos (photos have too much detail and distort when layered); ④ Do not copy UI components or Apple hardware shapes (copyright); ⑤ Retain core graphic elements across platforms; ⑥ On watchOS, avoid pure black backgrounds (they blend into the device background).
- Dark/tinted variants: Keep core characteristics consistent (do not hide or replace elements); create the dark version starting from the light version, and use colored backgrounds to improve contrast. You may provide alternate icons(such as team themes), but they must match in style and pass App Store review.
9. Interface Icons (distinct from app icons)
Interface icons = Small icons inside an app that represent actions or content (those in toolbars and lists); they are simpler than app icons and convey a single concept.
- Consistency: Unify size, level of detail, stroke weight, and perspective; icon stroke weight should match the weight of adjacent text.
- Optical centering: Geometric center ≠ visual center (for example, a download icon is visually heavier at the bottom and needs to be shifted up a few pixels).
- Vector first: Use PDF/SVG for automatic scaling; use PNG for assets containing shadows or textures (multiple sizes required).
- Accessibility: Provide alternative text labels for every custom icon (used by VoiceOver).
- macOS document icons: Use the classic "paper with a curled top-right corner" shape (to distinguish documents from apps); the system adds a white curled corner at the top right, so do not place key content there; multiple sizes at 512/256/128/32/16px are required, with reduced detail at smaller sizes.
10. Brand
Core principle: Branding yields to content and is integrated in a refined, understated way.
- Convey brand personality through the app icon and overall experience, rather than repeatedly plastering the logo (users do not need to be reminded which app they are using).
- Most platforms let you specify one accent color; fonts strongly associated with the brand may be used for titles and subtitles, while body text should use the system font (clearer at small sizes).
- Do not treat the launch screen as a brand showcase(its purpose is to reduce perceived launch wait time, and it disappears too quickly to convey information); to showcase the brand, use a welcome page or onboarding page.
- Maintain familiar interaction patterns even when the design is highly stylized (place UI components in expected locations, use standard symbols for common operations).
- Apple trademarks must not appear in app names or images.
Derived from the Foundations section (18 articles). For accessibility/inclusivity/privacy/RTL/copywriting, see also Apple HIG Accessibility and Ethics (Nine Core Principles/Inclusivity/Privacy/Copywriting/RTL); for in-depth technical details on Liquid Glass, typography, and icons, see Apple HIG: Liquid Glass New Design Language + SF Symbols + Typography (iOS 26 Visual System).