Skip to main content
What can we help you with?
< All Topics
Print

Apple Human Interface Design System

Posted
Updated
ByPeter Westerman

Personal Assistant – Apple HIG Design System

Version: 2.0.0 (Apple HIG Compliant)
Date: January 31, 2026
Status: Design Specification

🎨 Design Philosophy

Based on Apple’s Human Interface Guidelines 2026, featuring:

  • Liquid Glass: Real-time blur, depth-based refraction, and specular highlights
  • Content Focus: Interface serves content, not the other way around
  • Clear Hierarchy: Visual weight communicates importance
  • Device Continuity: Consistent experience across devices
  • Semantic Colors: Automatic light/dark mode adaptation

## 📐 Layout System

### Grid & Spacing

– Base Unit: 8pt grid system

– Minimum Touch Target: 44pt × 44pt (Apple standard)

– Padding Scale:

– XS: 4pt

– S: 8pt

– M: 16pt

– L: 24pt

– XL: 32pt

– XXL: 48pt

### Corner Radius

– Cards/Panels: 16pt (standard)

– Buttons: 12pt

– Small elements: 8pt

– Large containers: 20pt

🔤 Typography (San Francisco Font Family)

Text Styles (iOS Dynamic Type)

Style Size Weight Line Height Usage
Large Title 34pt Regular 41pt Page titles
Title 1 28pt Regular 34pt Section headers
Title 2 22pt Regular 28pt Card titles
Title 3 20pt Semibold 25pt Group headings
Headline 17pt Semibold 22pt Emphasis
Body 17pt Regular 22pt Primary text
Callout 16pt Regular 21pt Secondary text
Subhead 15pt Regular 20pt Labels
Footnote 13pt Regular 18pt Supporting text
Caption 1 12pt Regular 16pt Captions
Caption 2 11pt Regular 13pt Fine print

Font Stack (Web)


-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 
'Helvetica Neue', 'Segoe UI', system-ui, sans-serif

🎨 Color System (Semantic Colors)

Light Mode Colors

Primary Colors

  • System Blue: #007AFF (Primary actions, links)
  • System Green: #34C759 (Success, positive)
  • System Orange: #FF9500 (Warnings)
  • System Red: #FF3B30 (Errors, destructive)
  • System Gray: #8E8E93 (Inactive/disabled)

Label Colors (Text)

  • Label: rgba(0, 0, 0, 0.85) – Primary text
  • Secondary Label: rgba(0, 0, 0, 0.55) – Secondary text
  • Tertiary Label: rgba(0, 0, 0, 0.25) – Tertiary text
  • Quaternary Label: rgba(0, 0, 0, 0.10) – Placeholder text

Background Colors

  • System Background: #FFFFFF – Primary background
  • Secondary System Background: #F2F2F7 – Grouped content
  • Tertiary System Background: #FFFFFF – Third level
  • System Grouped Background: #F2F2F7 – Grouped lists

Fill Colors (For UI elements)

  • System Fill: rgba(120, 120, 128, 0.20) – Primary fill
  • Secondary System Fill: rgba(120, 120, 128, 0.16) – Secondary fill
  • Tertiary System Fill: rgba(118, 118, 128, 0.12) – Tertiary fill
  • Quaternary System Fill: rgba(116, 116, 128, 0.08) – Quaternary fill

Dark Mode Colors

Primary Colors

  • System Blue: #0A84FF
  • System Green: #30D158
  • System Orange: #FF9F0A
  • System Red: #FF453A
  • System Gray: #98989D

Label Colors

  • Label: rgba(255, 255, 255, 0.85)
  • Secondary Label: rgba(255, 255, 255, 0.55)
  • Tertiary Label: rgba(255, 255, 255, 0.25)
  • Quaternary Label: rgba(255, 255, 255, 0.10)

Background Colors

  • System Background: #000000
  • Secondary System Background: #1C1C1E
  • Tertiary System Background: #2C2C2E
  • System Grouped Background: #000000

Fill Colors

  • System Fill: rgba(120, 120, 128, 0.36)
  • Secondary System Fill: rgba(120, 120, 128, 0.32)
  • Tertiary System Fill: rgba(118, 118, 128, 0.24)
  • Quaternary System Fill: rgba(116, 116, 128, 0.18)

🪟 Materials & Blur Effects

Material Types (iOS 15+ standard)

  • Ultra Thin Material: Subtle frost glass (least blur)
  • Thin Material: Light blur
  • Regular Material: Standard blur (default)
  • Thick Material: Heavy blur
  • Ultra Thick Material: Maximum blur

CSS Implementation


/* Liquid Glass Effect */
.material {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Dark Mode */
.dark .material {
  background: rgba(28, 28, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

🔘 Buttons

Button Styles

Primary Button (Filled)

  • Background: System Blue
  • Text: White, Headline weight
  • Padding: 12pt vertical, 20pt horizontal
  • Corner Radius: 12pt
  • Min Height: 44pt
  • Shadow: 0 2px 8px rgba(0, 122, 255, 0.3)

Secondary Button (Tinted)

  • Background: System Blue @ 15% opacity
  • Text: System Blue, Headline weight
  • Same dimensions as primary

Tertiary Button (Plain)

  • Background: Transparent
  • Text: System Blue, Regular weight
  • No border, just text

Button States

  • Default: Full opacity
  • Hover: 80% opacity
  • Pressed: Scale 0.96, 60% opacity
  • Disabled: 40% opacity

📱 Component Specifications

Navigation Bar

  • Height: 44pt (compact), 96pt (large title)
  • Background: Blur material
  • Title: Large Title (34pt) or Headline (17pt Semibold)

Sidebar

  • Width: 280pt (standard), 320pt (wide)
  • Background: Secondary System Background
  • Cell Height: Minimum 44pt
  • Cell Padding: 12pt vertical, 16pt horizontal

Cards

  • Background: System Background with material blur
  • Corner Radius: 16pt
  • Padding: 16pt-24pt
  • Shadow: 0 2px 12px rgba(0, 0, 0, 0.08)

Input Fields

  • Height: Minimum 44pt
  • Padding: 12pt vertical, 16pt horizontal
  • Corner Radius: 12pt
  • Border: 1px System Gray (unfocused), 2px System Blue (focused)
  • Font: Body (17pt Regular)

List Items

  • Height: Minimum 44pt
  • Padding: 12pt vertical, 16pt horizontal
  • Separator: Hairline (0.5pt) Quaternary Label

🎭 Animations & Transitions

Timing Functions

  • Standard Ease: cubic-bezier(0.4, 0.0, 0.2, 1.0) – 0.3s
  • Deceleration: cubic-bezier(0.0, 0.0, 0.2, 1.0) – 0.4s
  • Acceleration: cubic-bezier(0.4, 0.0, 1.0, 1.0) – 0.2s
  • Spring: cubic-bezier(0.5, 1.6, 0.4, 0.8) – 0.5s

Common Transitions

  • Fade: 0.2s ease
  • Scale: 0.3s spring
  • Slide: 0.3s deceleration
  • Morph: 0.4s spring

♿ Accessibility

Contrast Requirements

  • Normal Text: Minimum 4.5:1
  • Large Text: Minimum 3:1
  • UI Components: Minimum 3:1

Dynamic Type Support

  • All text scales with user preferences
  • Layout adapts to larger text sizes
  • Minimum touch targets maintained

Reduced Motion

  • Disable decorative animations
  • Use fade instead of slide/scale
  • Instant transitions when preferred

Reduced Transparency

  • Solid backgrounds instead of blur
  • Maintain semantic color system
  • Ensure sufficient contrast

📐 Specific Layout Guidelines

Chat Interface

  • Message Bubbles: 16pt corner radius
  • Avatar: 40pt circle
  • Spacing: 12pt between messages
  • Max Width: 75% of container
  • Padding: 12pt vertical, 16pt horizontal

Sidebar Items

  • Icon: 28pt square (SF Symbols preferred)
  • Label: Body text
  • Spacing: 12pt between icon and label
  • Active State: System Fill background, 12pt radius

Input Container

  • Height: Auto (min 52pt)
  • Max Height: 150pt (scrollable)
  • Padding: 16pt all sides
  • Bottom Safe Area: Add env(safe-area-inset-bottom)
  • Background: Material blur

🖼️ SF Symbols

Use SF Symbols for consistent iconography:

  • Send: paperplane.fill
  • Settings: gearshape.fill
  • Search: magnifyingglass
  • Copy: doc.on.doc
  • Dark Mode: moon.fill / sun.max.fill
  • Close: xmark.circle.fill

Size: 17pt (small), 22pt (regular), 28pt (large)

📱 Mobile Specific

Safe Areas

Always respect safe area insets:


padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);

Touch Targets

  • Minimum: 44pt × 44pt
  • Recommended: 48pt × 48pt
  • Spacing between: Minimum 8pt

🎨 Implementation Priority

Phase 1: Core Colors & Typography ✅

  • Implement semantic color system
  • Update to San Francisco font stack
  • Set up text styles hierarchy

Phase 2: Materials & Layout ⏳

  • Add blur/material effects
  • Update spacing to 8pt grid
  • Implement proper corner radii

Phase 3: Components & Interactions ⏳

  • Redesign buttons
  • Update cards and panels
  • Add proper animations

Phase 4: Accessibility & Polish ⏳

  • Dynamic type support
  • Reduced motion/transparency
  • Final contrast checks

📝 Text Fields

Design Specifications

Standard Text Field

  • Height: Minimum 44pt (iOS), 28pt (macOS)
  • Padding: 12pt vertical, 16pt horizontal
  • Corner Radius: 12pt (iOS), 6pt (macOS)
  • Font: Body (17pt Regular)
  • Border:
  • Unfocused: 1px System Gray at 20% opacity
  • Focused: 2px System Blue
  • Error: 2px System Red

States

  • Default: Light fill with subtle border
  • Focused: System Blue border, slightly lighter fill
  • Disabled: 40% opacity, System Gray
  • Error: System Red border, light red tint
  • Read-only: System Fill background, no border

Best Practices

  • Use placeholder text to communicate purpose (“Email”, “Password”)
  • Display appropriate keyboard types (email, phone, number pad, URL)
  • Include clear button (×) on the right when appropriate
  • For passwords, provide show/hide toggle
  • Validate input inline when possible
  • Show error messages below field (Footnote style, System Red)
  • Use secure text fields for sensitive data

Text Field Variants

With Icons

  • Icon size: 20pt
  • Icon position: 12pt from left edge
  • Text indent: Account for icon + spacing

With Accessories

  • Right accessory size: 28pt × 28pt
  • Examples: Search icon, microphone, clear button
  • Multiple accessories: Stack horizontally with 8pt spacing

Search Fields

  • Magnifying glass icon (left)
  • Clear button appears when text entered
  • Optional voice input button (right)
  • Rounded pill shape (corner radius = height/2)
  • Light System Fill background

🔽 Combo Boxes (Dropdown Menus)

Design Specifications

Standard Combo Box

  • Height: Minimum 44pt (iOS), 28pt (macOS)
  • Padding: 12pt vertical, 16pt horizontal
  • Corner Radius: 12pt
  • Font: Body (17pt Regular)
  • Chevron: 12pt, positioned 12pt from right edge

States

  • Closed: System Fill background, chevron down
  • Open: Menu appears with blur material
  • Selected: System Blue accent
  • Disabled: 40% opacity

Menu Specifications

Dropdown Menu

  • Background: Regular Material (blur effect)
  • Shadow: 0 4px 16px rgba(0, 0, 0, 0.12)
  • Corner Radius: 12pt
  • Max Height: 280pt (scrollable)
  • Border: 1px rgba(255, 255, 255, 0.18)

Menu Items

  • Height: 44pt
  • Padding: 12pt horizontal
  • Font: Body (17pt)
  • Hover: System Fill background
  • Selected: System Blue @ 15% opacity
  • Checkmark: 20pt, System Blue

Best Practices

  • Provide default selection when appropriate
  • Show selected value in collapsed state
  • Group related items with section headers
  • Support keyboard navigation (↑↓ arrows)
  • Allow type-to-search for long lists
  • Use Subhead style for section headers
  • Maximum 10-12 visible items before scrolling

📐 Layout Principles

Responsive Grid System

Grid Configuration

  • Base Unit: 8pt
  • Columns:
  • Mobile (Portrait): 4 columns
  • Mobile (Landscape): 8 columns
  • iPad (Portrait): 8 columns
  • iPad (Landscape): 12 columns
  • Desktop: 12 columns
  • Gutter: 16pt (mobile), 24pt (tablet), 32pt (desktop)
  • Margins: 16pt (mobile), 24pt (tablet), 48pt (desktop)

Safe Areas & Insets


/* Always respect safe area insets */
padding-top: max(16pt, env(safe-area-inset-top));
padding-bottom: max(16pt, env(safe-area-inset-bottom));
padding-left: max(16pt, env(safe-area-inset-left));
padding-right: max(16pt, env(safe-area-inset-right));

Layout Patterns

Stack Layouts

  • Vertical Stack (VStack):
  • Default spacing: 16pt
  • Section spacing: 24pt-32pt
  • Horizontal Stack (HStack):
  • Item spacing: 12pt
  • Group spacing: 24pt
  • Z-Stack: For overlays and layering

Content Width

  • Maximum Width:
  • Body text: 680pt (optimal readability)
  • Form content: 540pt
  • Wide content: 1200pt
  • Minimum Width: 320pt (iPhone SE)

Adaptive Layout

Size Classes

  • Compact Width: iPhone portrait, iPhone landscape (except Plus/Pro Max)
  • Regular Width: iPad any orientation, iPhone Plus/Pro Max landscape
  • Compact Height: iPhone landscape
  • Regular Height: iPhone portrait, iPad any orientation

Breakpoints

  • Small: < 375pt (iPhone SE)
  • Medium: 375pt – 414pt (iPhone)
  • Large: 414pt – 768pt (iPhone Plus/iPad mini)
  • XLarge: 768pt – 1024pt (iPad)
  • XXLarge: > 1024pt (iPad Pro/Desktop)

✍️ Writing Guidelines

Voice & Tone

Principles

  • Clear: Use simple, direct language
  • Concise: Respect users’ time
  • Friendly: Be warm but professional
  • Inclusive: Write for everyone
  • Empowering: Help users succeed

Content Types

Titles & Headlines

  • Format: Title Case (for UI), Sentence case (for content)
  • Length: Maximum 3-4 words
  • Style: Descriptive, action-oriented
  • Examples:
  • Good: “Add New Plant”
  • Bad: “Click here to add a new plant to your garden”

Body Text

  • Format: Sentence case
  • Paragraph Length: 2-3 sentences maximum
  • Avoid: Jargon, technical terms, passive voice
  • Use: Active voice, present tense

Button Labels

  • Format: Title Case
  • Length: 1-2 words
  • Style: Action verbs
  • Examples:
  • Good: “Save”, “Continue”, “Learn More”
  • Bad: “Click Here”, “Submit Form”, “OK”

Error Messages

  • Format: Sentence case
  • Structure: [Problem] + [Solution]
  • Tone: Helpful, not blaming
  • Examples:
  • Good: “Email address is invalid. Try name@example.com”
  • Bad: “Error: Invalid input detected in field”

Placeholder Text

  • Format: Sentence case
  • Style: Example or instruction
  • Examples:
  • “name@example.com”
  • “Search plants…”
  • “Enter garden name”

Terminology

Preferred Terms

  • Save (not Submit)
  • Delete (not Remove for permanent actions)
  • Cancel (not Go Back)
  • Sign In (not Log In for user-facing)
  • Settings (not Preferences on iOS)
  • Share (not Send To)

Accessibility Labels

  • Always provide labels for icon-only buttons
  • Be descriptive: “Delete plant from garden” not “Delete”
  • Avoid redundancy: “Submit button” → “Submit”

📊 Charting Data

Chart Types

Line Charts

  • Use For: Trends over time, continuous data
  • Line Weight: 2pt-3pt
  • Point Markers: 6pt-8pt circles
  • Grid Lines: Quaternary Label color, 0.5pt
  • Axis Labels: Caption 1 (12pt)

Bar Charts

  • Use For: Comparing categories, discrete data
  • Bar Width: Minimum 32pt, maximum 80pt
  • Spacing: 8pt between bars, 24pt between groups
  • Corner Radius: 4pt (top corners only)
  • Colors: Use semantic colors, System Fill for baseline

Pie Charts

  • Use For: Part-to-whole relationships (max 6 segments)
  • Minimum Segment: 5% of total
  • Labels: Outside with leader lines
  • Emphasis: Slight separation (4pt) for selected segment

Chart Specifications

Dimensions

  • Minimum Height: 200pt (mobile), 280pt (desktop)
  • Aspect Ratio: 16:9 (landscape), 4:3 (portrait)
  • Padding: 24pt all sides
  • Title Spacing: 16pt below title

Colors

  • Use sequential colors for ordered data
  • Use diverging colors for positive/negative
  • Maintain 3:1 contrast ratio minimum
  • Support light and dark modes

Interactivity

  • Hover: Show tooltip with data values
  • Tap: Select/highlight segment
  • Pinch: Zoom on mobile
  • Pan: Scroll through data
  • Legend: Tap to show/hide series

Best Practices

  • Always include axis labels and units
  • Provide legends for multi-series data
  • Use consistent scales for comparison
  • Show data values on hover/tap
  • Provide alternative text for accessibility
  • Start Y-axis at zero for bar charts
  • Use appropriate precision (avoid excessive decimals)

🎭 Modality

Modal Presentation Styles

Full Screen Modal

  • Usage: Complex tasks requiring full attention
  • Dimensions: Covers entire screen
  • Transition: Slide up from bottom
  • Dismissal:
  • Navigation bar with “Cancel” or “Done”
  • Swipe down gesture (iOS 13+)
  • Close button (top right or left based on action)

Sheet (Page Sheet)

  • Usage: Medium-complexity tasks
  • Dimensions:
  • iPad: 620pt × 540pt (centered)
  • iPhone: Full width, partial height
  • Corner Radius: 20pt (top corners)
  • Detents:
  • Medium: ~50% screen height
  • Large: ~90% screen height
  • Background: Dimmed content (40% opacity black)

Form Sheet

  • Usage: Simple data entry or selection
  • Dimensions: 540pt × 620pt (centered)
  • Corner Radius: 20pt
  • Background: Dimmed content (40% opacity black)
  • Position: Centered, repositions for keyboard

Popover

  • Usage: Contextual actions or info
  • Max Dimensions: 320pt × 480pt
  • Arrow: Points to trigger element
  • Background: Regular Material with shadow
  • Dismissal: Tap outside or select option

Modal Design Specifications

Header

  • Height: 56pt
  • Title: Headline (17pt Semibold), centered
  • Close Button: 28pt × 28pt, top corner
  • Divider: 0.5pt Quaternary Label

Content Area

  • Padding: 24pt horizontal, 16pt vertical
  • Spacing: 24pt between sections
  • Scrolling: If content exceeds available space
  • Background: System Background

Footer (Optional)

  • Height: 72pt
  • Padding: 16pt
  • Buttons: Full-width or side-by-side
  • Divider: 0.5pt Quaternary Label

Best Practices

  • Use modality sparingly—only when necessary
  • Provide clear exit path (Cancel/Done/Close)
  • Keep tasks simple and focused
  • Save user’s work before dismissing
  • Show title that identifies the task
  • Don’t stack multiple modals
  • Support swipe-to-dismiss gesture
  • Confirm before discarding changes

Confirmation Dialogs

Alert

  • Max Width: 270pt (compact), 320pt (regular)
  • Title: Headline (17pt Semibold)
  • Message: Body (17pt Regular), 2-3 lines max
  • Buttons:
  • One button: Full-width, 44pt height
  • Two buttons: Side-by-side
  • Three+ buttons: Stacked vertically
  • Destructive Action: System Red text
  • Preferred Action: Semibold weight

Action Sheet

  • Position: Bottom of screen (iPhone), popover (iPad)
  • Options: List of actions
  • Cancel: Always included, at bottom
  • Destructive: System Red text
  • Background: Regular Material

⚙️ Settings

Settings Screen Layout

Organization

  • Grouped Lists: Section-based organization
  • Search: At top for many settings
  • Hierarchy: Max 3 levels deep
  • Back Button: Always visible in navigation

Section Design

  • Header: Subhead (15pt Regular), System Gray
  • Footer: Footnote (13pt Regular), Secondary Label
  • Spacing: 24pt between sections

Settings Controls

Toggle Switch

  • Size: 51pt × 31pt
  • On Color: System Green
  • Off Color: System Fill
  • Label Position: Left side
  • Description: Below label (Footnote, Secondary Label)

Stepper

  • Size: 94pt × 29pt
  • Buttons: -, +
  • Value Display: Between buttons
  • Disabled: 40% opacity

Slider

  • Height: 44pt (including touch target)
  • Track Height: 3pt
  • Thumb: 28pt circle
  • Colors: System Blue (progress), System Fill (remainder)
  • Range Labels: Caption 1, on sides

Segmented Control

  • Height: 32pt
  • Segments: 2-5 options
  • Selected: System Background
  • Unselected: Transparent
  • Container: System Fill background, 8pt radius

Settings Patterns

List Items with Disclosure


[Icon] Label                    Value >
  • Icon: 28pt, left-aligned
  • Label: Body (17pt)
  • Value: Callout (16pt), Secondary Label
  • Chevron: 13pt, System Gray

Toggle Items


[Icon] Label                    [Toggle]
       Description
  • Description: Footnote, Secondary Label, below label

Action Items


[Icon] Action Label
  • Color: System Blue for standard, System Red for destructive

Best Practices

  • Group related settings together
  • Use descriptive section headers
  • Provide explanatory footer text
  • Show current values in list
  • Use appropriate controls for data type
  • Provide search for 10+ settings
  • Support iCloud sync when applicable
  • Include “About” section with version info

🏷️ Labels & Badges

Text Labels

Label Hierarchy

  • Primary Label: Body (17pt Regular), Label color
  • Secondary Label: Callout (16pt Regular), Secondary Label color
  • Tertiary Label: Footnote (13pt Regular), Tertiary Label color
  • Caption: Caption 1 (12pt Regular), Secondary Label color

Field Labels

  • Position: Above field
  • Style: Subhead (15pt Regular), Label color
  • Spacing: 8pt below label, above field
  • Required Indicator: System Red asterisk

Inline Labels

  • Style: Body (17pt Semibold) or Callout (16pt Semibold)
  • Usage: Within sentences or paragraphs
  • Color: Label color (for emphasis)

Badges

Notification Badge

  • Size: Minimum 20pt diameter
  • Background: System Red
  • Text: White, Caption 1 (12pt), Semibold
  • Position: Top-right corner of icon/button
  • Max Display: “99+” for values over 99

Status Badge

  • Height: 24pt
  • Padding: 6pt horizontal
  • Corner Radius: 12pt (pill shape)
  • Font: Caption 1 (12pt Semibold)
  • Colors:
  • Success: System Green background, white text
  • Warning: System Orange background, white text
  • Error: System Red background, white text
  • Info: System Blue background, white text
  • Neutral: System Fill background, Label text

Count Badge

  • Style: Similar to status badge
  • Usage: Show item count (e.g., “3 items”)
  • Color: System Fill background, Label text

Tag/Chip Components

Chip Design

  • Height: 32pt
  • Padding: 12pt horizontal
  • Corner Radius: 16pt
  • Background: Secondary System Fill
  • Text: Callout (16pt Regular), Label color
  • Icon: Optional, 16pt, 6pt spacing from text
  • Close Button: Optional, 18pt × 18pt

Chip States

  • Default: Secondary System Fill
  • Selected: System Blue @ 15% opacity, System Blue border (2pt)
  • Hover: Tertiary System Fill
  • Pressed: Quaternary System Fill

📋 Lists and Tables

List Styles

Plain List

  • Background: System Background
  • Separators: Full-width, Quaternary Label color, 0.5pt
  • Sections: Optional headers/footers
  • Index: Optional right-side alphabetical

Grouped List

  • Background: Secondary System Background
  • Groups: System Background, rounded corners (12pt)
  • Separators: Inset, Quaternary Label color, 0.5pt
  • Spacing: 24pt between groups
  • Headers: Subhead, 8pt above group
  • Footers: Footnote, 8pt below group

Inset Grouped List

  • Background: System Background
  • Groups: Secondary System Background, rounded corners (12pt)
  • Margins: 16pt horizontal
  • Separators: Inset, Quaternary Label color, 0.5pt

List Cell Styles

Standard Cell


[Image] Title
        Subtitle
  • Height: Minimum 44pt
  • Image: 40pt square, 12pt from left
  • Title: Body (17pt), Label
  • Subtitle: Footnote (13pt), Secondary Label
  • Padding: 12pt vertical, 16pt horizontal

Value Cell


Label                           Value
  • Label: Body (17pt), Label, left-aligned
  • Value: Body (17pt), Secondary Label, right-aligned

Subtitle Cell


Title                           Value
Subtitle
  • Title: Body (17pt), Label, left-aligned
  • Value: Callout (16pt), Secondary Label, right-aligned
  • Subtitle: Footnote (13pt), Secondary Label, below title

Cell Accessories

Disclosure Indicator

  • Icon: Chevron right
  • Size: 13pt
  • Color: Tertiary Label
  • Position: 16pt from right edge

Detail Button

  • Icon: Info circle
  • Size: 22pt
  • Color: System Blue
  • Touch Target: 44pt × 44pt

Checkmark

  • Icon: Checkmark
  • Size: 20pt
  • Color: System Blue
  • Usage: Selection indicator

Switch/Toggle

  • Size: 51pt × 31pt
  • Position: Right-aligned, vertically centered

Tables (macOS/iPadOS)

Table Header

  • Height: 32pt
  • Background: Secondary System Fill
  • Text: Subhead (15pt Semibold), Secondary Label
  • Border: 0.5pt Quaternary Label (bottom)
  • Sort Indicator: Chevron up/down, 10pt

Table Row

  • Height: Minimum 28pt (macOS), 44pt (iOS)
  • Alternating: Optional, Tertiary System Fill
  • Hover: System Fill
  • Selected: System Blue @ 15% opacity
  • Separator: 0.5pt Quaternary Label

Table Cell

  • Padding: 8pt vertical, 12pt horizontal
  • Text: Body (17pt iOS, 13pt macOS)
  • Alignment: Left (text), right (numbers), center (icons)

Interaction Patterns

Swipe Actions

  • Leading Actions: Non-destructive (flag, mark read)
  • Trailing Actions: Destructive (delete) on far right
  • Full Swipe: Executes first action
  • Icon: 22pt, centered
  • Color:
  • Default: System Fill
  • Destructive: System Red
  • Info: System Blue
  • Success: System Green

Pull to Refresh

  • Indicator: Activity indicator
  • Threshold: 60pt pull distance
  • Animation: Spring ease-out

Multi-Select

  • Mode Entry: Edit button or long press
  • Indicator: Circular checkboxes, left side
  • Selected: System Blue fill with white checkmark
  • Action Bar: Bottom of screen with actions

🎯 Tab Views

Tab Bar (iOS/iPadOS)

Specifications

  • Height: 49pt + safe area inset
  • Background: Regular Material (blur effect)
  • Border: 0.5pt Quaternary Label (top)
  • Position: Bottom of screen (iOS), top (macOS)

Tab Item

  • Total Width: Screen width / number of tabs
  • Touch Target: Full width × 49pt
  • Icon Size: 28pt (SF Symbol)
  • Label: Caption 2 (11pt Regular)
  • Spacing: 4pt between icon and label

States

  • Unselected:
  • Icon: System Gray
  • Label: System Gray
  • Selected:
  • Icon: System Blue (or tint color)
  • Label: System Blue
  • Optional indicator line (2pt, top)
  • Badge: Notification badge on icon

Tab Bar Guidelines

Number of Tabs

  • iPhone: 3-5 tabs maximum
  • iPad: 5-7 tabs maximum
  • More Tab: For 6+ tabs on iPhone, use “More” tab

Tab Organization

  • Order: Most important first (left)
  • Consistency: Same tabs across all app screens
  • Persistence: Selected tab maintained when switching

Best Practices

  • Always include labels (even with recognizable icons)
  • Use SF Symbols for consistency
  • Don’t use tab bar for actions (use toolbar)
  • All tabs should always be enabled
  • Don’t remove or hide tabs dynamically

Segmented Control (Tabs)

Specifications

  • Height: 32pt
  • Background: Tertiary System Fill
  • Corner Radius: 8pt
  • Segment Divider: 0.5pt Quaternary Label

Segment

  • Padding: 8pt horizontal
  • Min Width: 48pt
  • Font: Subhead (15pt Regular)
  • Selected:
  • Background: System Background
  • Shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
  • Font: Subhead (15pt Semibold)

Usage

  • 2-5 segments
  • Use for content filtering/views
  • Smooth sliding animation (0.3s)
  • Equal width segments preferred

Tab View (macOS)

Tab Design

  • Height: 28pt
  • Min Width: 80pt
  • Padding: 12pt horizontal
  • Background: Transparent (unselected), System Background (selected)
  • Border: 0.5pt Quaternary Label

Close Button

  • Size: 16pt × 16pt
  • Position: 8pt from left edge
  • Icon: × symbol
  • Hover: System Fill background

🎯 Lockups

Component Lockups

A “lockup” refers to a fixed arrangement of multiple UI elements that form a cohesive component, such as icon + label + value combinations.

Icon + Label Lockup


[Icon] Label
  • Icon Size: 28pt (standard), 40pt (prominent)
  • Spacing: 12pt between icon and label
  • Alignment: Center-aligned vertically
  • Font: Body (17pt) or Headline (17pt Semibold)

Icon + Label + Value


[Icon] Label                    Value
  • Layout: Icon and label left, value right
  • Value Font: Callout (16pt), Secondary Label
  • Min Height: 44pt
  • Usage: Settings, list items, metadata display

Icon + Title + Subtitle


[Icon] Title
       Subtitle
  • Icon Size: 40pt-60pt
  • Title: Body (17pt) or Headline (17pt Semibold)
  • Subtitle: Footnote (13pt), Secondary Label
  • Spacing: 4pt between title and subtitle

Avatar + Name + Status


[Avatar] Name
         Status • Online
  • Avatar Size: 40pt (standard), 60pt (large)
  • Name: Body (17pt) or Headline (17pt Semibold)
  • Status: Footnote (13pt), Secondary Label
  • Status Dot: 6pt, before status text

Brand Lockups

App Icon + Name


[App Icon] App Name
  • Icon Size: 60pt (standard), 80pt (large)
  • Corner Radius: Icon’s standard radius
  • Name: Title 2 (22pt) or Large Title (34pt)
  • Spacing: 16pt between icon and name

Logo + Tagline


[Logo]
Tagline text
  • Logo Height: 40pt-60pt
  • Tagline: Callout (16pt) or Subhead (15pt)
  • Spacing: 12pt between logo and tagline
  • Alignment: Center-aligned

Content Lockups

Metadata Display


Icon Label • Icon Label • Icon Label
  • Icons: 16pt SF Symbols
  • Text: Callout (16pt), Secondary Label
  • Separator: Bullet point (•)
  • Spacing: 8pt between elements

Stat Lockup


Value
Label
  • Value: Title 1 (28pt) or Large Title (34pt), Semibold
  • Label: Caption 1 (12pt), Secondary Label
  • Spacing: 4pt between value and label
  • Alignment: Center or left-aligned

Best Practices

  • Maintain consistent spacing within lockups
  • Use semantic colors for icons
  • Keep lockups compact and scannable
  • Ensure touch targets are minimum 44pt
  • Support dynamic type scaling
  • Align related lockups in lists/grids

🍔 Menus and Actions

Context Menus

Specifications

  • Background: Regular Material with blur
  • Corner Radius: 12pt
  • Shadow: 0 4px 16px rgba(0, 0, 0, 0.12)
  • Border: 1px rgba(255, 255, 255, 0.18)
  • Max Width: 320pt
  • Padding: 8pt vertical

Menu Item

  • Height: 44pt
  • Padding: 12pt horizontal
  • Font: Body (17pt Regular)
  • Icon: 20pt SF Symbol, 12pt spacing
  • Hover: System Fill background

Destructive Action

  • Color: System Red (icon and text)
  • Position: Bottom of menu (separated)
  • Separator: 0.5pt Quaternary Label, 8pt margins

Menu Sections

  • Separator: 0.5pt Quaternary Label, full width
  • Section Header: Subhead (15pt Regular), Secondary Label, 8pt padding

Menu Activation

Long Press (iOS)

  • Duration: 0.5 seconds
  • Feedback: Haptic feedback on activation
  • Preview: Optional content preview above menu

Right Click (macOS)

  • Immediate: Shows on mouse up
  • Position: At cursor location
  • Smart Positioning: Adjusts to stay on screen

Three-Dot Button

  • Icon: ellipsis.circle
  • Size: 28pt × 28pt
  • Touch Target: 44pt × 44pt
  • Position: Top right of card/cell

Pull-Down Menus

Button Style

  • Height: 44pt
  • Padding: 12pt horizontal
  • Chevron: 12pt, 8pt from right
  • Font: Body (17pt Regular) or Headline (17pt Semibold)

Menu Panel

  • Width: Match button width (min 200pt)
  • Max Height: 400pt (scrollable)
  • Animation: Scale from button (0.2s spring)

Action Sheets

Specifications

  • Position: Bottom of screen (iPhone), popover (iPad)
  • Background: Regular Material
  • Corner Radius: 20pt (top corners)
  • Animation: Slide up from bottom

Action Button

  • Height: 56pt
  • Font: Body (17pt Regular)
  • Alignment: Center
  • Separator: 0.5pt Quaternary Label

Cancel Button

  • Style: Same as action button
  • Position: Always at bottom
  • Spacing: 8pt gap above (separate group)

Toolbars

Toolbar (iOS)

  • Height: 44pt + safe area inset
  • Position: Bottom of screen
  • Background: Regular Material
  • Border: 0.5pt Quaternary Label (top)

Toolbar Item

  • Size: 28pt × 28pt icon
  • Touch Target: 44pt × 44pt
  • Spacing: Flexible (distributed evenly)
  • Label: Optional, Caption 2 (11pt)

Navigation Bar (iOS)

  • Height: 44pt (compact), 96pt (large title)
  • Position: Top of screen
  • Background: Regular Material
  • Border: 0.5pt Quaternary Label (bottom)

Bar Button Item

  • Size: 28pt × 28pt icon or text button
  • Font: Body (17pt Regular)
  • Color: System Blue
  • Position: Left or right side

🧭 Navigation and Search

Navigation Patterns

Hierarchical Navigation

  • Pattern: Drill down through levels
  • Back Button: Always visible, shows parent title
  • Animation: Slide horizontally (0.3s)
  • Depth: Recommend max 3-4 levels

Flat Navigation

  • Pattern: Tab bar or segmented control
  • Switching: Direct, no hierarchy
  • Animation: Crossfade (0.2s)
  • Usage: 3-7 peer sections

Content-Driven Navigation

  • Pattern: Follow content links/relationships
  • Examples: News feeds, social media
  • Back: Returns to previous view
  • History: Maintain navigation stack

Navigation Bar

Large Title

  • Height: 96pt (collapsed: 44pt)
  • Font: Large Title (34pt Regular)
  • Transition: Collapses on scroll
  • Usage: Top-level screens

Standard Title

  • Height: 44pt
  • Font: Headline (17pt Semibold)
  • Position: Center (iOS), left (macOS)
  • Usage: Nested screens

Navigation Actions

  • Leading: Back button or menu button
  • Trailing: Action buttons (max 2-3)
  • Icon Size: 22pt
  • Spacing: 8pt between multiple buttons

Search Interface

Search Bar

  • Height: 36pt (embedded), 44pt (standalone)
  • Corner Radius: 10pt (pill shape)
  • Background: Tertiary System Fill
  • Icon: Magnifying glass (20pt), left side
  • Padding: 8pt horizontal

Search States

  • Inactive: Placeholder text, clear button hidden
  • Active:
  • Animated expansion
  • Cancel button appears (iOS)
  • Clear button visible when text entered
  • Searching: Activity indicator replaces search icon

Search Results

  • Layout: List or grid
  • Highlighting: Bold matched text
  • Empty State: Helpful message, suggestions
  • Recent Searches: Show below search bar

Search Features

Scope Bar

  • Height: 44pt
  • Style: Segmented control
  • Position: Below search bar
  • Segments: 2-4 scopes maximum

Search Suggestions

  • Appearance: Dropdown below search bar
  • Background: Regular Material
  • Max Items: 5-7 suggestions
  • Icon: Optional category icons (20pt)

Filters

  • Trigger: Filter button (funnel icon)
  • Presentation: Sheet or popover
  • Active Indicator: Badge count on filter button
  • Clear All: Button to reset filters

Best Practices

Navigation

  • Maintain consistent navigation patterns
  • Provide clear way to go back
  • Show user’s location in hierarchy
  • Preserve scroll position on back
  • Support gesture navigation (swipe back)

Search

  • Make search prominent and discoverable
  • Provide instant results as user types
  • Show search history/suggestions
  • Support voice input when appropriate
  • Clear results when search dismissed
  • Preserve search state when appropriate

📚 References & Resources

Official Apple Documentation

Primary Resources

Design Guidelines by Topic

Components

Patterns

Platform-Specific

Design Tools & Resources

Figma Resources

Sketch Resources

Development

📝 Document History

Version 2.0.0 – February 2, 2026

  • Comprehensive expansion of design system documentation
  • Added detailed specifications for text fields and combo boxes
  • Expanded layout principles with responsive grid system
  • Added writing guidelines and content best practices
  • Included charting data visualization guidelines
  • Detailed modality and modal presentation patterns
  • Added settings screen layouts and controls
  • Documented labels, badges, and status indicators
  • Expanded lists and tables with interaction patterns
  • Added tab views and segmented controls
  • Included lockups and component arrangements
  • Detailed menus, actions, and toolbars
  • Comprehensive navigation and search patterns
  • Updated all references and resources

Version 1.0.0 – January 31, 2026

  • Initial design specification based on Apple HIG
  • Core color system, typography, and materials
  • Basic component specifications
  • Animation and accessibility guidelines

Last Updated: February 2, 2026
Maintained By: IT Influentials
For Project: Farmers Bounty Plugin

Table of Contents
Privacy Policy Terms and Conditions Cookie Policy