Ios Design Consultant

iOS Design Consultant

You are a UX and visual design consultant specializing in Apple's Liquid Glass design system. Your role is to provide design guidance, rationale, and recommendations—not code implementation.

When to Use This Skill

Activate when the user asks:

• "Where should I put this button?"
• "Is this layout Apple-approved?"
• "What's the right spacing for..."
• "Should this be a sheet or full screen?"
• "How do I make this feel more premium?"
• "What would win an Apple Design Award?"
• "Is this too much glass?"
• "Does this follow HIG?"
• "What's the best position for..."
• "How should I structure this screen?"

Your Expertise

You are an expert in:

• Apple Human Interface Guidelines (iOS 26+)
• Liquid Glass design system
• Apple Design Award criteria
• Visual hierarchy and layout
• Touch target sizing and spacing
• Platform conventions
• Accessibility considerations

How to Respond

1. Answer the design question directly — Give a clear recommendation 2. Explain the rationale — Why this choice aligns with Apple guidelines 3. Reference the principle — Which HIG/Liquid Glass concept applies 4. Offer alternatives — When multiple valid approaches exist 5. Flag anti-patterns — If their current approach has issues

Decision Framework

When consulted on design decisions:

Positioning Decisions

1. Is it a control or content? (Controls → glass layer, Content → beneath) 2. What's its importance? (Primary → prominent position) 3. What's the user's task flow? (Match the natural reading order) 4. Is it destructive? (Keep away from primary actions, require confirmation)

Glass Decisions

1. Is it navigation or a control? → Use glass 2. Is it content? → Don't use glass 3. Does it float over media? → Use .clear glass 4. Is it a content container? → Use standard materials or nothing

Color Decisions

1. Is it in the glass layer? → Use color sparingly (accent for primary actions only) 2. Is it in the content layer? → Express brand here 3. Is it a status indicator? → Color appropriate 4. Default → Keep monochromatic in glass

Sheet vs Full-Screen

1. Quick task, same context? → Sheet 2. New context, deep navigation? → Full screen 3. Complex editing with hierarchy? → Full screen 4. Preferences/settings? → Usually sheet

Required Reading

Skill-specific docs (in this folder):

• docs/liquid-glass-philosophy.md — Core vision and principles
• docs/hig-layout.md — Positioning, hierarchy, spacing, safe areas
• docs/hig-materials.md — Glass variants, when to use each
• docs/hig-color.md — Color strategy for Liquid Glass era
• docs/positioning-guide.md — Tab bars, toolbars, sheets, controls
• docs/design-awards.md — What makes apps award-worthy

Core Principles to Apply

1. Content Focus

Glass frames content—it never obscures. Controls give way to content. The interface should recede to let the user's content shine.

2. Hierarchy Through Layers

• Glass layer: Controls, navigation, toolbars, tab bars
• Content layer: Your app's actual content

Never mix these layers. Don't apply glass to content.

3. Restraint

• Color sparingly in glass
• Glass only where needed
• Animations that enhance, not distract
• Polish that's felt, not seen

4. Platform Harmony

Apps should feel at home on the device. Concentric corners, native gestures, system conventions. Design should harmonize with hardware.

Anti-Patterns to Flag

When reviewing designs, watch for:

Example Consultations

"Where should my save button go?"

Answer: Top-trailing toolbar position with accent tint. This is the standard iOS pattern for primary actions. Use ToolbarItem(placement: .topBarTrailing) with .tint(.accentColor).

Rationale: Primary actions belong in the trailing position where users expect them. Tinting makes it stand out without overwhelming.

"Should this settings screen be a sheet?"

Answer: Yes, sheet with .large detent. Settings are secondary to the main flow—users access them, make changes, then dismiss.

Rationale: Sheets are for focused tasks within the same context. Full-screen is for new contexts or deep hierarchies.

"Is having three floating buttons too much glass?"

Answer: Likely yes. Consider: 1. Can any be consolidated into a toolbar? 2. Are they all needed simultaneously? 3. Could one be primary (glass) and others just in content?

Rationale: Liquid Glass works best with restraint. Too many glass elements compete for attention and create visual noise.

Award-Worthy Guidance

When asked "How do I make this award-worthy?":

1. Delight: Add surprise moments that reward exploration 2. Innovation: Use platform tech in unexpected ways 3. Interaction: Remove every ounce of friction 4. Inclusivity: Built for everyone from day one 5. Impact: Solve a real problem 6. Visuals: Every pixel intentional, cohesive identity

Remember

You provide design wisdom, not code. Your role is helping them make the right design decisions before they write code.

• For implementation: Point to /ios-ui-craft skill or /ios-liquid-glass for API reference

When uncertain about a Liquid Glass-specific pattern, default to restraint and content focus. When a pattern isn't yet defined by Liquid Glass guidelines, note that legacy HIG may apply but Liquid Glass principles take precedence when they conflict.

---

"The goal is an app worthy of an Apple Design Award—an app that feels genuinely designed, not generated."

Apple Design Awards Criteria

What makes an app award-worthy? Reference from Apple Design Awards 2025.

The Six Categories

1. Delight and Fun

Memorable, engaging, and satisfying experiences enhanced by Apple technologies.

Award-worthy apps:

• Transform everyday interactions into joy
• Create emotional connection with users
• Surprise and reward exploration
• Use technology to enhance, not complicate

2025 Winner Examples:

• CapWords: Transforms images of everyday objects into interactive stickers for language learning across nine languages
• Balatro: Combines poker mechanics with deck-building strategy through joker card synergies

2. Innovation

State-of-the-art experiences through novel use of Apple technologies.

Award-worthy apps:

• Use technology in unexpected ways
• Create experiences not previously possible
• Push platform capabilities forward
• Make complex technology accessible

2025 Winner Examples:

• Play: Enables SwiftUI prototyping with real-time synchronization between Mac and iPhone
• PBJ — The Musical: Blends rhythm gameplay with narrative through creative haptic feedback

3. Interaction

Intuitive interfaces and effortless controls tailored to their platform.

Award-worthy apps:

• Feel natural and immediate
• Respect platform conventions while innovating
• Reduce friction to zero
• Adapt controls to context

2025 Winner Examples:

• Taobao: Delivers incredible 3D models comparable to real-life counterparts on Vision Pro
• DREDGE: Creates seamless gameplay across iPhone, iPad, and Mac

4. Inclusivity

Great experiences for all by reflecting variety in backgrounds, abilities, and languages.

Award-worthy apps:

• Built for everyone from day one
• Comprehensive accessibility support
• Multiple input methods
• Diverse language and cultural support

2025 Winner Examples:

• Speechify: Supports hundreds of voices in 50+ languages with VoiceOver and Dynamic Type
• Art of Fauna: Integrates full VoiceOver support and haptic feedback into puzzle mechanics

5. Social Impact

Apps that improve lives meaningfully and illuminate crucial issues.

Award-worthy apps:

• Solve real problems
• Create positive change
• Address important causes
• Demonstrate responsibility

2025 Winner Examples:

• Watch Duty: Provides real-time wildfire evacuation data and emergency updates
• Neva: Explores environmental themes through character-driven narrative

6. Visuals and Graphics

Stunning imagery, skillful interfaces, and high-quality animations with distinctive themes.

Award-worthy apps:

• Create cohesive visual identity
• Use animation meaningfully
• Show attention to every detail
• Stand out while feeling native

2025 Winner Examples:

• Feather: Draw in 3D: Converts 2D designs into 3D models via Apple Pencil
• Infinity Nikki: Achieves visual impact through detailed rendering in open-world design

What Makes Apps Award-Worthy

Technical Excellence

• Native platform integration: Seamless SwiftUI, CoreMotion, CoreML, App Intents
• Apple technology adoption: Vision framework, Dynamic Island, Apple Intelligence
• Performance optimization: Hardware acceleration, smooth animations

User Experience & Design

• Intuitive interactions: Controls feel natural
• Thoughtful UI/UX: Clean organization, consistent style
• Responsive design: Works across devices
• Reduced cognitive load: Simple despite complexity

Accessibility & Inclusivity

• Comprehensive accessibility: VoiceOver, Dynamic Type, high-contrast
• Universal design: Features for all abilities
• Inclusive language: Diverse voices, LGBTQ+ friendly, multilingual

Innovation Indicators

• Novel technology use: ML, AI, spatial computing applied creatively
• Unique concepts: Fresh takes on conventions
• Cross-platform seamlessness: Consistent experience everywhere

Social & Environmental Responsibility

• Real-world impact: Life-saving features, mental health support
• Community benefit: Non-commercial, volunteer-run, charitable
• Meaningful problem-solving: Accessibility, wellness, environment

Polish & Craftsmanship

• Attention to detail: Subtle animations, custom haptics, curated colors
• Visual distinction: Cohesive themes, skillful illustration
• Seamless experiences: Smooth transitions, intuitive onboarding

The Evaluation Philosophy

Winning apps go beyond functionality:

1. Create delight and emotional connection — not just utility 2. Reflect community values — innovation paired with responsibility 3. Demonstrate mastery — technical and creative excellence 4. Enhance lives meaningfully — solve real problems or provide genuine value

Self-Assessment Questions

Ask these when evaluating your app:

Delight

• Does using this bring joy?
• Is there a "wow" moment?
• Do details reward discovery?

Innovation

• Am I using technology in a new way?
• Does this enable something previously impossible?
• Is the technology invisible to users?

Interaction

• Does every control feel right?
• Is there any friction to remove?
• Does it feel native to each platform?

Inclusivity

• Can everyone use this?
• Have I tested with accessibility settings?
• Does it respect diverse users?

Social Impact

• Does this make the world better?
• What positive change does it enable?
• Am I being responsible?

Visuals

• Is there a distinctive visual identity?
• Do animations enhance understanding?
• Is every pixel intentional?

Liquid Glass Era Additions

In iOS 26+, award-worthy apps also:

• Use Liquid Glass appropriately (controls, not content)
• Let content shine through the interface
• Embrace the new depth and layering
• Maintain elegance in both light and dark
• Feel unified across Apple platforms

---

Remember: Awards recognize apps that push boundaries while respecting users. The goal is excellence that serves people.

HIG Color Principles (iOS 26+ / Liquid Glass Era)

This document covers color usage adapted for the Liquid Glass design system.

The Liquid Glass Color Philosophy

In the Liquid Glass era, color strategy fundamentally shifts:

Old approach: Color everywhere to express brand and hierarchy New approach: Color sparingly, with intention, primarily in the content layer

Color in Liquid Glass Elements

The Rule: Sparingly

Limit color in Liquid Glass to reduce visual noise:

• Most glass elements should be neutral/monochromatic
• Symbols and text adapt to underlying content (light/dark)
• Reserve color for elements requiring emphasis

When to Add Color to Glass

Apply tint only for:

• Primary actions: Done button, main CTA
• Status indicators: Notifications, alerts
• Emphasis: Drawing attention to key controls

// Tinted glass for primary action
.glassEffect(.regular.tint(.accentColor))

Monochromatic Default

Standard glass controls use monochromatic symbols/text:

• Darker when underlying content is light
• Lighter when underlying content is dark
• System handles this automatically

Brand Color Expression

Content Layer, Not Glass

If your app feels visually muted or lacks brand emphasis:

Don't: Add brand colors throughout Liquid Glass Do: Adjust the color palette in your content layer

Examples:

• Colorful headers in scrollable content
• Brand-colored backgrounds beneath glass
• Accent colors in content cards
• Distinctive imagery and illustrations

This approach:

• Maintains glass elegance
• Preserves content focus
• Still expresses brand personality

Semantic Colors

System Colors

Use semantic colors that adapt automatically:

.foregroundStyle(.primary)    // Main content
.foregroundStyle(.secondary)  // Supporting content
.foregroundStyle(.tertiary)   // Subtle content
.background(.background)      // Adaptive background

Accent Color

.tint(.accentColor)  // Primary interactive elements

The accent color should be used:

• For primary buttons
• For selected states
• For actionable elements
• Sparingly—not everywhere

Dominant + Accent Strategy

Don't distribute color evenly. Instead:

1. One Dominant Color

• Defines the brand/mood
• Could be in content backgrounds
• Sets the overall tone

2. Sharp Accents

• For actions and highlights
• Draw attention to interactive elements
• Used sparingly for maximum impact

3. Neutral Base

• For content readability
• System grays and backgrounds
• Allows colorful elements to stand out

Dark Mode First

Why Design Dark First

In the Liquid Glass era, dark mode often produces more distinctive results:

• Glass effects show better contrast
• Specular highlights more visible
• More premium, modern feel
• Easier to adapt to light than vice versa

Design Flow

1. Design in dark mode 2. Ensure it looks premium and distinctive 3. Adapt to light mode 4. Verify both work well

Color with Glass Backgrounds

Content Showing Through Glass

Remember that glass is translucent:

• Content colors refract through glass
• Background colors influence glass appearance
• Dark content = lighter glass text
• Light content = darker glass text

Design Considerations

• Test how your content colors look through glass
• Avoid colors that clash with glass reflections
• Consider how wallpaper colors affect glass

Vibrant Colors on Materials

When placing content on standard materials (blur, vibrancy):

• Use system-defined vibrant colors
• These automatically adjust for context
• Never worry about contrast issues
• Don't manually adjust colors for materials

Color Accessibility

Automatic Adaptations

Liquid Glass adapts to accessibility settings:

• Increase Contrast: Stronger color differentiation
• Reduce Transparency: More solid colors
• Color choices should work across these modes

Testing Requirements

• Test with Increase Contrast enabled
• Verify colors remain distinguishable
• Ensure sufficient contrast ratios
• Don't rely solely on color for meaning

Color Anti-Patterns

Color Decision Framework

When choosing where to apply color:

1. Is it a control or content?

• Control → Minimal color (glass defaults)
• Content → Can express brand

2. Does it need emphasis?

• Yes → Consider accent tint
• No → Keep neutral

3. Is it a primary action?

• Yes → Tinted glass appropriate
• No → Standard glass

4. Will this color scale?

• Test with light/dark mode
• Test with accessibility settings
• Ensure it works in all contexts

---

Legacy Note: Pre-Liquid Glass color guidelines emphasized more liberal color use. For iOS 26+, restraint is key—let the content layer carry brand expression.

HIG Layout Principles (iOS 26+ / Liquid Glass Era)

This document contains Apple Human Interface Guidelines layout principles adapted for the Liquid Glass design system.

Visual Hierarchy

Controls vs Content

In Liquid Glass, the fundamental principle is controls float above content:

• Controls (tab bars, toolbars, navigation bars) use Liquid Glass material
• Content lives in the layer beneath, appearing through the translucent glass
• Glass frames content—it should never obscure or compete with it

Key rule: Differentiate controls from content using Liquid Glass material, not backgrounds. Use scroll edge effects for transitions between content and control areas instead of solid backgrounds.

Element Positioning

Reading Order

People scan in reading order (top-to-bottom, leading-to-trailing side). Place items accordingly:

• Most important items: Near top and leading side
• Secondary actions: Lower or trailing positions
• Destructive actions: Away from primary actions, often at bottom

Note: Reading order varies by language—design for right-to-left when needed.

Importance Through Position

Alignment and Grouping

Alignment Principles

• Align components with one another for easier scanning
• Alignment communicates organization and hierarchy
• Use indentation to show information hierarchy
• Consistent alignment makes apps feel "neat and organized"

Grouping Methods

Group related items using:

• Negative space: Breathing room between groups
• Background shapes: Cards, containers
• Materials: Glass for controls, standard for content groupings
• Separator lines: Use sparingly

Important: Ensure content and controls remain clearly distinct even when grouped.

Progressive Disclosure

When you can't display all items at once:

• Use disclosure controls (chevrons, expandable sections)
• Show partial items to hint at scrollable content
• Let users discover hidden content through interaction
• Don't overwhelm—reveal complexity progressively

Safe Areas and Layout Guides

Safe Areas

Safe areas define regions not covered by:

• Toolbars and tab bars
• Dynamic Island (iPhone)
• Camera housing (Mac)
• System controls

Always respect safe areas. Apps that don't accommodate display features feel out of place.

Key Safe Area Behaviors

• Safe areas help reposition content when bar sizes change
• Use SafeAreaRegions and positioning relative to safe area
• Content should extend to edges while controls stay in safe areas

Background Extension

When content doesn't span the full window:

• Use backgroundExtensionEffect() for SwiftUI
• Use UIBackgroundExtensionView for UIKit
• This provides appearance of content behind the control layer

Touch Targets and Spacing

Minimum Touch Targets

Spacing Around Controls

• Add enough space around controls for easy use
• Group controls in logical sections
• Too close: Hard to tell apart, confusing
• Too crowded: Difficult to understand what controls do

Pointer Hit Regions (iPadOS)

• Add ~12 points padding around elements with bezels
• Add ~24 points padding around elements without bezels
• Create contiguous hit regions for adjacent buttons in bars

Margins and Padding Standards

Standard Margins

General Principles

• Use standard margins for comfortable legibility
• Avoid crowding edges—creates cluttered appearance
• Tighter margins only for specific content groupings
• Consistent padding throughout the app

Content Extension

Fill the Screen

• Backgrounds and full-screen artwork extend to display edges
• Scrollable layouts continue to bottom and sides
• Controls and navigation appear on top of content, not same plane

Liquid Glass Integration

Because controls float on glass above content:

• Layout must account for transparent overlays
• Content should look good when viewed through glass
• Consider how colors/images refract through the material

Anti-Patterns to Avoid

• Placing controls on the same visual plane as content
• Ignoring safe areas (looks out of place)
• Insufficient touch targets (frustrating)
• Crowding controls together without logical grouping
• Using solid backgrounds where glass should provide hierarchy
• Forgetting that glass allows content to show through

---

Legacy Note: For patterns not yet updated for Liquid Glass, refer to pre-iOS 26 HIG, but prioritize Liquid Glass principles when they conflict.

HIG Materials (iOS 26+ / Liquid Glass Era)

This document covers material usage in the Liquid Glass design system.

Two Types of Materials

Apple platforms feature two distinct material types:

1. Liquid Glass

A dynamic material that unifies design across Apple platforms:

• Presents controls and navigation
• Doesn't obscure underlying content
• Consistent across iOS, iPadOS, macOS, watchOS, tvOS, visionOS

2. Standard Materials

Help with visual differentiation within the content layer:

• Blur, vibrancy, and blending modes
• Convey structure beneath Liquid Glass
• Used for content grouping, not controls

Liquid Glass Properties

Visual Characteristics

• Translucent: Color informed by surrounding content
• Adaptive: Intelligently adapts between light and dark
• Real-time rendered: Specular highlights and refractions
• Dynamic: Reacts to movement for lively experience

Adaptive Behavior

For smaller elements (toolbars, tab bars):

• System adapts glass between light/dark based on underlying content
• Symbols and text follow monochromatic scheme
• Darker when content beneath is light; lighter when dark

For larger elements (sidebars):

• More opaque to preserve legibility
• Accommodates richer content on the surface

When to Use Each Material

Use Liquid Glass For:

• Tab bars
• Toolbars
• Navigation bars
• Floating controls
• Buttons requiring emphasis
• System-level UI elements

Use Standard Materials For:

• Content layer differentiation
• Background grouping within content
• Cards and containers (in content layer)
• Visual separation that isn't a control

Glass Variants

Color in Liquid Glass

Core Principle: Use Color Sparingly

Why: To reduce visual noise and maintain the elegant glass aesthetic.

Guidelines:

• Limit color applied to the material itself
• Limit color on symbols/text on the material
• Reserve color for elements that truly need emphasis:
• Status indicators
• Key actions (e.g., Done button)

Tinted Glass

The system applies tint color to material backing for prominent buttons:

• Done buttons
• Primary actions
• Confirmations

This draws attention and elevates visual prominence.

Brand Expression

Don't: Add color throughout Liquid Glass to express brand Do: Adjust color palette in your content layer instead

• Add colorful headers to scrollable content
• Use brand colors in content, not controls
• Let app personality show through content layer

Contrast and Legibility

Material Thickness Trade-offs

Ensuring Legibility

• Use system-defined vibrant colors on top of materials
• Vibrant colors automatically adjust for different contexts
• Avoid colors that seem too dark, bright, saturated, or low contrast
• Test both light and dark appearances

Poor Contrast Example

systemGray3 on material = poor contrast. Use vibrant alternatives.

Vibrancy and Blending

When to Use Standard Effects

Use blur, vibrancy, and blending modes to:

• Convey structure in content beneath Liquid Glass
• Create visual layers within content area
• Separate content sections

Selection Criteria

Choose based on semantic meaning, not apparent color.

Why? System settings can change material appearance and behavior. Match the material/vibrancy style to your specific use case.

Glass Interactions

Interactive Modifier

.glassEffect(.regular.interactive())

Provides:

• Press scaling
• Touch illumination (shimmer)
• Responsive feel

Use for buttons and tappable glass elements.

Accessibility Considerations

Glass automatically adapts to:

• Reduce Transparency: More frosting applied
• Increase Contrast: Starker borders
• Reduce Motion: Toned down animations

You don't need to handle these manually for system glass effects.

Anti-Patterns

• Applying glass to content layer (glass is for controls)
• Using glass on everything (reduces its impact)
• Adding heavy brand colors to glass (use content layer)
• Ignoring how content appears through glass
• Choosing materials by visual appearance rather than semantic meaning

---

Legacy Note: Pre-Liquid Glass materials (NSVisualEffectView styles) remain available but Liquid Glass should be preferred for controls in iOS 26+.

Liquid Glass Design Philosophy

Apple's broadest software design update ever. Source: Apple Newsroom, June 2025

The Vision

"More expressive and delightful while being instantly familiar"

— Alan Dye, VP of Human Interface Design

Liquid Glass balances innovation with user comfort—pushing design forward while maintaining intuitive familiarity.

Core Properties

Material Characteristics

Liquid Glass is a translucent material with the optical qualities of real glass:

Visual Inspiration

Liquid Glass draws from visionOS's depth and dimensionality, leveraging Apple's advances in:

• Hardware capabilities
• Silicon performance
• Graphics technologies

The Three Pillars

1. Content Focus

Controls give way to content.

In iOS 26:

• Tab bars shrink during scrolling
• Controls morph dynamically as user needs change
• Navigation remains accessible while emphasizing content
• Glass frames rather than obscures

2. Contextual Adaptation

Materials refract and reflect their surroundings.

The interface maintains user context:

• Glass refracts surrounding content
• Reflects wallpaper beneath
• Lock Screen time is crafted from Liquid Glass
• Fluidly adapts behind photo subjects

3. Platform Harmony

Unified design across all Apple platforms.

For the first time:

• iOS, iPadOS, macOS, watchOS, tvOS share design language
• Each platform preserves its distinct qualities
• Same identity, contextual expression
• Consistency without uniformity

What Liquid Glass Affects

System-Wide Changes

• Buttons, switches, sliders
• Text and media controls
• Tab bars and sidebars
• Lock Screen, Home Screen
• Notifications, Control Center
• Dock and widgets

App Icons

Multi-layered Liquid Glass construction:

• Translucent layers
• Glass-like shimmer
• Beautiful across appearance modes
• Work with tint variations

Navigation Elements

• Floating tab bar (collapses on scroll)
• Transparent toolbars
• Morphing sheets
• Contextual controls

Design Principles in Practice

Hierarchy

Glass floats above content.

• Controls appear on glass layer
• Content lives beneath
• Clear visual separation
• Never mix control and content layers

Harmony

Software aligns with hardware.

• Concentric corners match device
• Fluid gestures feel natural
• Materials respond to environment
• Design feels "at home" on device

Consistency

Same identity, contextual expression.

• Apps feel unified across platforms
• Each platform's strengths preserved
• Familiar patterns, fresh execution
• Brand identity travels with design

Customization

macOS Tahoe 26 introduces:

• Light/dark appearances
• Colorful tints
• Elegant new "clear look"
• Completely transparent menu bar (maximizes display)

Developer Enablement

Automatic Adoption

• SwiftUI, UIKit, AppKit updated APIs
• Easy adoption for most apps
• Standard controls get glass automatically

Tools

• Icon Composer in Xcode 26 for Liquid Glass icons
• Renders beautifully across appearances and tints
• Design resources for all platforms

The Emotional Goal

Liquid Glass aims to create interfaces that are:

• Expressive: Apps have personality
• Delightful: Interactions feel rewarding
• Familiar: Instantly understandable
• Alive: Dynamic and responsive
• Premium: Elevated quality feel

Award-Worthy Design Through Glass

To create Apple Design Award-worthy apps with Liquid Glass:

1. Embrace the material: Don't fight glass—let it enhance 2. Focus on content: Glass should frame, not compete 3. Use color intentionally: Sparingly in glass, expressively in content 4. Design for depth: Think in layers 5. Respect the system: Follow glass conventions 6. Add distinctive details: Personality in content layer 7. Polish interactions: Haptics, animations, transitions

What Makes It Different

---

This philosophy guides all design decisions in iOS 26+. When in doubt, ask: "Does this let content shine through while maintaining intuitive control?"

Positioning and Layout Guide (iOS 26+ / Liquid Glass Era)

Specific guidance on where elements should go in Liquid Glass interfaces.

The Layers Model

In Liquid Glass, think in layers:

┌─────────────────────────────────────┐
│         Glass Control Layer          │ ← Navigation, toolbars, tab bar
├─────────────────────────────────────┤
│                                     │
│          Content Layer              │ ← Your app's content
│                                     │
│                                     │
└─────────────────────────────────────┘

Glass control layer floats above content. Content shows through.

Tab Bar

Position

• Location: Bottom of screen (iOS)
• Behavior: Floating, collapses during scroll

iOS 26 Tab Bar Behaviors

• Shrinks when user scrolls down (more content visible)
• Expands when user scrolls up or stops
• Reacts to background content (light/dark adaptation)
• Morphs between states with animation

When to Use Tab Bar

Tab Bar Design

• Use SF Symbols for icons
• Short, clear labels
• Current tab highlighted with accent
• Glass effect applied automatically

Toolbar

Position

• Location: Top of screen (trailing side typically)
• Grouping: Related actions grouped together

Toolbar Placement Patterns

┌─────────────────────────────────────┐
│ ← Back    Title        Edit  Share  │
│                              Done ✓ │
└─────────────────────────────────────┘

Toolbar Guidelines

• Leading side: Navigation (back, close)
• Center: Title or segmented control
• Trailing side: Actions
• Use ToolbarItemGroup for related actions
• Use ToolbarSpacer(.flexible) for spacing
• Primary action (Done) often gets tint

Toolbar Grouping

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Edit", systemImage: "pencil") { }
        Button("Share", systemImage: "square.and.arrow.up") { }
    }
    ToolbarSpacer(.flexible, placement: .topBarTrailing)
    ToolbarItem(placement: .topBarTrailing) {
        Button("Done") { }.tint(.accentColor)
    }
}

Sheets

When to Use Sheets

• Secondary flows
• Editing modes
• Settings and preferences
• Detail views
• Quick tasks

Sheet Positioning

Sheet Design Principles

• Consider morphing transition from source button
• Use .presentationDetents for appropriate sizes
• Content should work at each detent
• Hide scroll background for glass effect: .scrollContentBackground(.hidden)

Morphing Sheets

Button("Settings", systemImage: "gear") { }
    .matchedTransitionSource(id: "settings", in: namespace)

.sheet(isPresented: $show) {
    SettingsView()
        .navigationTransition(.zoom(sourceID: "settings", in: namespace))
}

Navigation Patterns

Full-Screen vs Sheet

Stack Navigation

• Use NavigationStack for hierarchical content
• Push for drill-down
• Pop to return
• Toolbar adapts to context

Control Placement

Primary Actions

• Position: Bottom right (thumb-friendly) or top trailing
• Style: Tinted glass
• Examples: Done, Save, Send, Confirm

Secondary Actions

• Position: Top trailing (before primary) or bottom left
• Style: Standard glass
• Examples: Edit, Share, More

Destructive Actions

• Position: Away from primary actions
• Style: Red tint, often in action sheet
• Confirm: Always confirm destructive actions

Floating Actions

Use for:

• Camera controls over media
• Map controls over maps
• Media playback controls

Position based on content, typically bottom or side.

Content Layer Decisions

Cards and Containers

• Cards live in content layer, not glass layer
• Use standard materials for content grouping
• Don't apply glass effect to content cards

Lists

• Full-width in content area
• Glass appears above when scrolling under toolbar
• Separator lines optional (consider spacing instead)

Grids

• Extend to safe area edges
• Content shows beneath glass controls
• Consider scroll edge effects

Reading Order Positioning

Importance Hierarchy

1. Top-left (leading): Most important—title, primary navigation 2. Top-right (trailing): Primary actions—done, edit 3. Center: Main content, focal point 4. Bottom: Tab bar, secondary controls, floating actions

Scanning Pattern

Users scan: 1. Top to bottom 2. Leading to trailing (varies by language) 3. Then details

Position critical elements where eyes naturally land.

Spacing and Grouping

Control Spacing

• Group related controls together
• Separate unrelated controls with space
• Minimum 44pt touch targets (iOS)
• Logical sections with clear separation

Margin Standards

Specific Decisions

"Where does this button go?"

Ask: 1. Is it a primary action? → Top trailing or bottom 2. Is it contextual to content? → Near that content 3. Is it navigation? → Leading side 4. Is it destructive? → Hidden behind ··· or action sheet

"Sheet or full screen?"

Ask: 1. Is this a side task? → Sheet 2. Does it need full attention? → Full screen 3. Is there deep navigation? → Full screen 4. Quick edit and dismiss? → Sheet

"Glass or no glass?"

Ask: 1. Is it a control/navigation? → Glass 2. Is it content? → No glass 3. Does it float over other content? → Glass (clear variant) 4. Is it a content container? → Standard material or no effect

"Where does the status indicator go?"

Ask: 1. Is it for the whole screen? → Top, near title 2. Is it for an item? → Near/in that item 3. Is it persistent? → Tab bar badge or toolbar 4. Is it temporary? → Toast or banner

Anti-Patterns

• Putting primary actions far from thumb reach
• Mixing glass controls into content layer
• Crowding toolbar with too many actions
• Using sheets for primary flows
• Forgetting to test with different detents
• Ignoring safe areas
• Placing destructive actions near confirm

---

Decision principle: When unsure, ask "What would Apple do?" Check native apps (Notes, Photos, Health) for positioning patterns.