taewoongheo/apple-hig

Apple HIG Design System

Fixed Design Tokens

Colors:
  background:     #FFFFFF (light) / #000000 (dark)
  text.primary:   #000000 (light) / #FFFFFF (dark)
  text.secondary: #8E8E93 (iOS systemGray)
  accent:         #007AFF (iOS system blue) — ONE color only
  separator:      #E5E5EA (light) / #38383A (dark)
  destructive:    #FF3B30
  success:        #34C759
  warning:        #FF9500
  fill.primary:   rgba(120,120,128,0.2) (light) / rgba(120,120,128,0.36) (dark)
  fill.secondary: rgba(120,120,128,0.16) (light) / rgba(120,120,128,0.32) (dark)
  grouped.bg:     #F2F2F7 (light) / #1C1C1E (dark)

Spacing (8pt grid):
  xs: 4    sm: 8    md: 16    lg: 24    xl: 32

Layout:
  margin (device-specific layoutMargins):
    375pt (iPhone SE/8):  16pt
    390pt (iPhone 14/15): 20pt
    430pt (iPhone Pro Max): 20pt
  margin (content-type):
    list/card UI:         16px (Material default)
    text-heavy/reading:   20-24px (readableContentGuide basis)
    wellness/meditation:  24px (px-6)
  touch-target: 44pt minimum
  corner-radius: 12px (cards, sheets) / 10px (buttons) / 8px (inputs)
  separator-height: 0.5px (StyleSheet.hairlineWidth)

CJK Readability (Korean basis, body 17px):
  optimal CPL: 20-30 chars/line (WCAG CJK max 40)
  px-4 (16px) → 358pt → ~21 chars (lower bound, general UI)
  px-6 (24px) → 342pt → ~20 chars (text-heavy screen upper bound)
  px-8 (32px) → 326pt → ~19 chars (too narrow, not recommended)

Typography Scale

| Style | Size | Weight | Line Height | Use | |-------|------|--------|-------------|-----| | Large Title | 34pt | Bold | 41pt | Screen titles (scrollable) | | Title 1 | 28pt | Bold | 34pt | Major sections | | Title 2 | 22pt | Bold | 28pt | Sub-sections | | Title 3 | 20pt | Semibold | 25pt | Minor sections | | Headline | 17pt | Semibold | 22pt | Emphasized body | | Body | 17pt | Regular | 22pt | Default text | | Callout | 16pt | Regular | 21pt | Secondary content | | Subheadline | 15pt | Regular | 20pt | Supporting text | | Footnote | 13pt | Regular | 18pt | Tertiary info | | Caption 1 | 12pt | Regular | 16pt | Labels, timestamps | | Caption 2 | 11pt | Regular | 13pt | Fine print |

Rules:

• Maximum 3 text levels per screen (e.g., Title + Body + Caption)
• Font weight creates hierarchy, NOT color
• System font only (SF Pro on iOS, Roboto on Android)

UI/UX Pattern Selection Rules

Navigation: When to Use What

| Pattern | Use When | Example | |---------|----------|---------| | Push (stack) | Drilling into detail, hierarchical | List → Detail | | Modal (full screen) | Self-contained task, blocking | New item creation, timer | | Modal (page sheet) | Non-blocking overlay task | Edit, filter settings | | Bottom sheet | Quick action, partial context | Share, sort options, simple input | | Tab | Top-level parallel sections (max 5) | Home, Search, Settings |

Decision flow:

Need a new screen?
├─ Child of current content → Push
├─ Independent task (complete/cancel) → Modal
├─ Quick selection/action → Bottom Sheet
└─ Top-level app section → Tab

Content Layout: When to Use What

| Pattern | Use When | Example | |---------|----------|---------| | Grouped list | Settings, options, forms | Settings screen | | Plain list | Homogeneous items, many rows | Message list | | Scroll + sections | Mixed content types | Home/dashboard | | Grid | Visual items, browsing | Photos, card collections | | Form | Sequential data input | Sign-up, info entry |

Editing: When to Use What

| Pattern | Use When | Example | |---------|----------|---------| | Inline edit | Single field, quick change | Tap name to edit | | Edit mode | Multiple fields at once | List reorder/delete | | Separate screen | Complex edit with validation | Profile edit | | Bottom sheet | Quick selection from options | Category picker |

Confirmation: When to Use What

| Pattern | Use When | Example | |---------|----------|---------| | No confirmation | Reversible action | Archive (undo available) | | Alert dialog | Destructive + irreversible | Account deletion | | Action sheet | Multiple options from one trigger | Take photo/choose/delete | | Inline feedback | Success/completion | Toast, checkmark |

Empty States

• Centered icon + message + single action button
• Icon: SF Symbol style, secondary color
• Message: 1-2 lines, explain what will appear here
• Action: primary button to get started

Component Patterns

Navigation

• Tab Bar: 5 tabs max, icon + label, 49pt height
• Navigation Bar: Large title collapses on scroll, back button always present
• Modal: Card-style presentation (corner radius top), swipe-down to dismiss

Lists

• Row height: minimum 44pt
• Separator: inset from leading edge (aligned with text, not icon)
• Disclosure indicator: chevron.right for drill-down
• Swipe actions: leading (positive actions), trailing (destructive)
• Section headers: uppercase 13pt footnote, secondary color

Inputs

• Text field: 36pt height, 16px horizontal padding
• Toggle: iOS switch style, no custom toggles
• Picker: inline or wheel style, never dropdown

Feedback

• Alert: Title + message + 1-2 actions, destructive action is red
• Action Sheet: Bottom-anchored, cancel always separate at bottom
• Toast: Top or bottom, auto-dismiss 3-5s, no required user action

Layout Principles

1. Generous whitespace — when in doubt, add more space
2. Clean backgrounds — no gradients, no patterns, no textures
3. Consistent spacing — same gap between same-level elements
4. Alignment — text and elements align to a consistent leading edge
5. Semantic grouping — related items grouped with background or spacing

Dark Mode Rules

• Use semantic colors (auto-adapt)
• Shadows → remove or reduce; use borders instead
• White backgrounds → pure black (#000000)
• Grouped backgrounds → #1C1C1E
• Card backgrounds → #2C2C2E
• Reduce image saturation slightly
• Maintain contrast ratios (4.5:1 minimum for text)

Reference: Copy Apple's Native Apps

Settings: Grouped inset list, section headers, right-detail value display Notes: Large title, search bar below nav, swipe actions on rows Reminders: Colored circles, expandable sections, inline editing Weather: Full-bleed backgrounds (exception to the clean rule — weather only)

When in doubt → open Apple Settings app → copy the pattern exactly.

Answer in Korean.