Apple Hig Designer

Design System Specifications

Typography System

Font Family: San Francisco (SF Pro)

/* System Font Stack for Web */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
}

/* Font Size Scale (iOS) */
--text-caption2: 11px;    /* Caption 2 */
--text-caption1: 12px;    /* Caption 1 */
--text-footnote: 13px;    /* Footnote */
--text-subhead: 15px;     /* Subheadline */
--text-body: 17px;        /* Body - Default */
--text-headline: 17px;    /* Headline (semibold) */
--text-title3: 20px;      /* Title 3 */
--text-title2: 22px;      /* Title 2 */
--text-title1: 28px;      /* Title 1 */
--text-large-title: 34px; /* Large Title */

Typography Rules:

• Use SF Pro Display for sizes ≥ 20pt
• Use SF Pro Text for sizes < 20pt
• Maintain consistent line-height (1.2-1.5)
• Use weight for hierarchy, not just size

Color System

/* Apple System Colors - Light Mode */
:root {
  /* Primary Colors */
  --system-blue: #007AFF;
  --system-green: #34C759;
  --system-indigo: #5856D6;
  --system-orange: #FF9500;
  --system-pink: #FF2D55;
  --system-purple: #AF52DE;
  --system-red: #FF3B30;
  --system-teal: #5AC8FA;
  --system-yellow: #FFCC00;

  /* Gray Scale */
  --system-gray: #8E8E93;
  --system-gray2: #AEAEB2;
  --system-gray3: #C7C7CC;
  --system-gray4: #D1D1D6;
  --system-gray5: #E5E5EA;
  --system-gray6: #F2F2F7;

  /* Semantic Colors */
  --label-primary: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --label-quaternary: rgba(60, 60, 67, 0.18);

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-tertiary: #FFFFFF;

  /* Separators */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --system-blue: #0A84FF;
    --system-green: #30D158;
    --system-indigo: #5E5CE6;
    --system-orange: #FF9F0A;
    --system-pink: #FF375F;
    --system-purple: #BF5AF2;
    --system-red: #FF453A;
    --system-teal: #64D2FF;
    --system-yellow: #FFD60A;

    --system-gray: #8E8E93;
    --system-gray2: #636366;
    --system-gray3: #48484A;
    --system-gray4: #3A3A3C;
    --system-gray5: #2C2C2E;
    --system-gray6: #1C1C1E;

    --label-primary: #FFFFFF;
    --label-secondary: rgba(235, 235, 245, 0.6);
    --label-tertiary: rgba(235, 235, 245, 0.3);
    --label-quaternary: rgba(235, 235, 245, 0.18);

    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;

    --separator: rgba(84, 84, 88, 0.6);
    --separator-opaque: #38383A;
  }
}

Spacing System

8pt Grid System:

:root {
  --space-1: 4px;   /* Extra small */
  --space-2: 8px;   /* Small */
  --space-3: 12px;  /* Medium-small */
  --space-4: 16px;  /* Medium */
  --space-5: 20px;  /* Medium-large */
  --space-6: 24px;  /* Large */
  --space-8: 32px;  /* Extra large */
  --space-10: 40px; /* 2X large */
  --space-12: 48px; /* 3X large */
}

Touch Target Requirements:

• iOS: Minimum 44×44 points
• visionOS: Minimum 60 points tap area
• Always add sufficient padding for small visual elements

Border Radius (Concentric Design)

:root {
  /* Base radius values */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px; /* Capsule */
}

/* Concentric Rule: inner_radius + padding = outer_radius */
/* Example: 8px inner + 8px padding = 16px outer */

Component Patterns

Buttons

/* Primary Button - Capsule Style */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--system-blue);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-primary:active {
  transform: scale(0.98);
}

/* Secondary Button */
.btn-secondary {
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 600;
  color: var(--system-blue);
  background: rgba(0, 122, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}

Glass Effect (Optional - Only When Requested)

Note: Glass/frosted effects should only be used when the user explicitly requests them. Default designs should use solid backgrounds for better readability and performance.

/* Glass Background - USE ONLY WHEN EXPLICITLY REQUESTED */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 12px 24px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  .glass-panel {
    background: rgba(28, 28, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

Cards (Default - Solid Background)

.card {
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Card with Grouped Style */
.card-grouped {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.card-grouped-item {
  background: var(--bg-tertiary);
  padding: var(--space-4);
  border-bottom: 1px solid var(--separator);
}

.card-grouped-item:last-child {
  border-bottom: none;
}

Input Fields

.input-field {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--font-system);
  font-size: 17px;
  color: var(--label-primary);
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  outline: none;
  transition: box-shadow 0.2s ease;
}

.input-field:focus {
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3);
}

.input-field::placeholder {
  color: var(--label-tertiary);
}

Tab Bars

Tab bars provide top-level navigation between app sections. Use filled SF Symbols and always show text labels.

Design Rules:

• Position at bottom of screen (iOS style)
• Minimum 44×44pt touch targets per tab
• Always display text labels (never icon-only)
• Use filled SF Symbols for selected state
• Support badge for notifications (red oval, white text)
• Never hide or disable tab buttons

/* Tab Bar Container */
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 49px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-primary);
  border-top: 0.5px solid var(--separator);
}

/* Tab Item */
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 12px;
  color: var(--system-gray);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.tab-item--active {
  color: var(--system-blue);
}

.tab-item__icon {
  font-size: 24px;
  margin-bottom: 2px;
}

.tab-item__label {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 500;
}

/* Badge */
.tab-item__badge {
  position: absolute;
  top: 2px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--system-red);
  border-radius: 9px;
  text-align: center;
  line-height: 18px;
}

Toolbars

Toolbars provide context-specific actions. Organize items into three sections: leading, center, and trailing.

Design Rules:

• Three sections: leading (back/title), center (tools), trailing (actions)
• Maximum 3 item groups
• Use SF Symbols without borders
• Primary action uses .prominent style on trailing side
• Back button: circular with symbol only (no text)
• Titles: concise, under 15 characters

/* Toolbar Container */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 var(--space-4);
  background: var(--bg-primary);
  border-bottom: 0.5px solid var(--separator);
}

/* Toolbar Sections */
.toolbar__leading,
.toolbar__center,
.toolbar__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.toolbar__leading {
  min-width: 70px;
  justify-content: flex-start;
}

.toolbar__center {
  flex: 1;
  justify-content: center;
}

.toolbar__trailing {
  min-width: 70px;
  justify-content: flex-end;
}

/* Toolbar Title */
.toolbar__title {
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 600;
  color: var(--label-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toolbar Button */
.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  color: var(--system-blue);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.toolbar-btn:active {
  background: rgba(0, 122, 255, 0.1);
}

/* Back Button - Circular Symbol Only */
.toolbar-btn--back {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 50%;
}

/* Primary Action - Prominent Style */
.toolbar-btn--prominent {
  font-weight: 600;
  background: var(--system-blue);
  color: #FFFFFF;
  border-radius: var(--radius-full);
  padding: 8px 16px;
}

.toolbar-btn--prominent:active {
  opacity: 0.9;
}

Sheets

Sheets present scoped tasks in a modal overlay. Support multiple height detents and swipe-to-dismiss.

Design Rules:

• Detents: large (100%), medium (50%)
• Include grabber indicator for resizable sheets (36×5px)
• Done button: top-right corner
• Cancel button: top-left corner
• Semi-transparent backdrop (rgba(0,0,0,0.4))
• Only one sheet visible at a time

/* Sheet Backdrop */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.sheet-backdrop--visible {
  opacity: 1;
}

/* Sheet Container */
.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 101;
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-default);
  max-height: calc(100vh - 44px);
  overflow: hidden;
}

.sheet--visible {
  transform: translateY(0);
}

/* Sheet Detents */
.sheet--medium {
  height: 50vh;
}

.sheet--large {
  height: calc(100vh - 44px);
}

/* Grabber Indicator */
.sheet__grabber {
  width: 36px;
  height: 5px;
  background: rgba(60, 60, 67, 0.3);
  border-radius: 2.5px;
  margin: 8px auto;
}

@media (prefers-color-scheme: dark) {
  .sheet__grabber {
    background: rgba(235, 235, 245, 0.3);
  }
}

/* Sheet Header */
.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 0.5px solid var(--separator);
}

.sheet__cancel {
  color: var(--system-blue);
  font-size: 17px;
  background: none;
  border: none;
  cursor: pointer;
}

.sheet__done {
  color: var(--system-blue);
  font-size: 17px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
}

.sheet__title {
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 600;
  color: var(--label-primary);
}

/* Sheet Content */
.sheet__content {
  padding: var(--space-4);
  overflow-y: auto;
}

Alerts

Alerts deliver critical information requiring immediate attention. Use sparingly and provide clear actions.

Design Rules:

• Use only for critical information (sparingly)
• Maximum 3 buttons
• Button titles: specific verbs, avoid "OK"
• Cancel button: leading side (or bottom in stacked layout)
• Destructive style: only for unintended destructive actions
• Never show alerts at app startup

/* Alert Backdrop */
.alert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

/* Alert Container */
.alert {
  width: 270px;
  background: var(--bg-primary);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .alert {
    background: var(--bg-tertiary);
  }
}

/* Alert Content */
.alert__content {
  padding: 20px 16px;
}

.alert__title {
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 600;
  color: var(--label-primary);
  margin-bottom: 4px;
}

.alert__message {
  font-family: var(--font-system);
  font-size: 13px;
  color: var(--label-primary);
  line-height: 1.4;
}

/* Alert Buttons - Horizontal (2 buttons) */
.alert__buttons {
  display: flex;
  border-top: 0.5px solid var(--separator);
}

.alert__btn {
  flex: 1;
  padding: 12px;
  font-family: var(--font-system);
  font-size: 17px;
  color: var(--system-blue);
  background: transparent;
  border: none;
  cursor: pointer;
}

.alert__btn:not(:last-child) {
  border-right: 0.5px solid var(--separator);
}

.alert__btn:active {
  background: var(--bg-secondary);
}

/* Button Variants */
.alert__btn--cancel {
  font-weight: 400;
}

.alert__btn--default {
  font-weight: 600;
}

.alert__btn--destructive {
  color: var(--system-red);
}

/* Alert Buttons - Stacked (3+ buttons) */
.alert__buttons--stacked {
  flex-direction: column;
}

.alert__buttons--stacked .alert__btn {
  border-right: none;
  border-bottom: 0.5px solid var(--separator);
}

.alert__buttons--stacked .alert__btn:last-child {
  border-bottom: none;
}

Lists and Tables

Lists display rows of data with consistent structure. Distinguish between navigation (disclosure) and information (info button) accessories.

Design Rules:

• Minimum row height: 44px
• Info button (ⓘ): reveals details without navigation
• Disclosure indicator (>): navigates to subview
• Grouped style: 10px border-radius, 8px/16px margins
• Navigation: persistent highlight; Options: brief highlight + checkmark
• Inset separators start after leading content (60px)

/* List Container - Grouped Style */
.list {
  background: var(--bg-secondary);
}

.list-section {
  background: var(--bg-primary);
  border-radius: 10px;
  margin: var(--space-2) var(--space-4);
  overflow: hidden;
}

/* Section Header */
.list-section__header {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 400;
  color: var(--label-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* List Item */
.list-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px var(--space-4);
  background: var(--bg-primary);
  position: relative;
}

/* Separator - Full Width */
.list-item:not(:last-child) {
  border-bottom: 0.5px solid var(--separator);
}

/* Separator - Inset (after leading image) */
.list-item--inset:not(:last-child) {
  border-bottom: none;
}

.list-item--inset:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 60px;
  right: 0;
  bottom: 0;
  border-bottom: 0.5px solid var(--separator);
}

/* List Item Content */
.list-item__leading {
  width: 40px;
  height: 40px;
  margin-right: var(--space-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.list-item__content {
  flex: 1;
  min-width: 0;
}

.list-item__title {
  font-family: var(--font-system);
  font-size: 17px;
  color: var(--label-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item__subtitle {
  font-family: var(--font-system);
  font-size: 15px;
  color: var(--label-secondary);
}

.list-item__value {
  font-family: var(--font-system);
  font-size: 17px;
  color: var(--label-secondary);
  margin-left: auto;
}

/* Accessories */
.list-item__accessory {
  margin-left: var(--space-2);
  color: var(--label-tertiary);
}

/* Disclosure Indicator - Navigation */
.list-item__disclosure {
  font-size: 14px;
  color: var(--label-quaternary);
}

/* Info Button - Details */
.list-item__info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--system-blue);
  color: var(--system-blue);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
}

/* Checkmark - Selection */
.list-item__checkmark {
  color: var(--system-blue);
  font-size: 18px;
  font-weight: 600;
}

/* Selection States */
.list-item--selected {
  background: var(--system-blue);
}

.list-item--selected .list-item__title,
.list-item--selected .list-item__subtitle {
  color: #FFFFFF;
}

/* Interactive State */
.list-item:active {
  background: var(--bg-secondary);
}

Animation Guidelines

Timing Functions

:root {
  /* Apple's preferred easing */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /* Spring-like easing */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Duration Scale

:root {
  --duration-instant: 100ms;  /* Micro-interactions */
  --duration-fast: 200ms;     /* Hover, focus states */
  --duration-normal: 300ms;   /* Standard transitions */
  --duration-slow: 500ms;     /* Complex animations */
}

Interaction Feedback

/* Press feedback */
.interactive {
  transition: transform var(--duration-instant) var(--ease-out);
}

.interactive:active {
  transform: scale(0.97);
}

/* Hover glow */
.interactive:hover {
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

SF Symbols Integration

Rendering Modes

1. Monochrome: Single color for all layers
2. Hierarchical: Opacity variations for depth
3. Palette: Custom colors per layer
4. Multicolor: Apple's intrinsic symbol colors

Usage Guidelines

• Toolbar/Navigation: Use outline variant
• Tab Bar: Use fill variant
• Match text size: Symbols auto-align with SF font
• Provide text alternatives: Always include aria-label

Web Implementation (Icon Font Alternative)

<!-- Using SF Symbols via system font -->
<span class="sf-symbol" aria-label="Settings">􀣋</span>

<!-- Or use equivalent system icons -->
<svg class="icon" aria-hidden="true">
  <use href="#icon-gear"></use>
</svg>

Accessibility Requirements

Color Contrast

• Normal text: 4.5:1 minimum (WCAG AA)
• Large text: 3:1 minimum
• Interactive elements: Clearly distinguishable states

Motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Semantic HTML

<!-- Always use semantic elements -->
<button type="button">Action</button>
<nav aria-label="Main navigation">...</nav>
<main role="main">...</main>

Output Format

When generating Apple-style UI code, always include:

1. Complete, runnable code (CSS/React/Vue)
2. Light/Dark mode support via CSS custom properties
3. Design rationale explaining HIG compliance
4. Responsive breakpoints for different devices
5. Accessibility attributes (aria-*, role, etc.)

Default Behavior

• Use solid backgrounds by default for better readability
• Glass/blur effects only when user explicitly requests
• Always provide non-glass fallback for browsers without backdrop-filter support

Example Output Structure

/**
 * Apple HIG Compliant Component
 *
 * Design Decisions:
 * - Uses SF Pro system font stack for native feel
 * - 44pt minimum touch target for accessibility
 * - Capsule shape for primary actions (HIG recommendation)
 * - Solid background for optimal readability
 * - Supports prefers-color-scheme for auto theming
 */

const AppleButton = ({ children, variant = 'primary', ...props }) => {
  return (
    <button
      className={`btn btn-${variant}`}
      {...props}
    >
      {children}
    </button>
  );
};

Best Practices Checklist

Before finalizing any design output, verify:

• Typography: Using SF Pro with correct size thresholds
• Colors: System colors with Light/Dark variants
• Spacing: Following 8pt grid
• Touch targets: Minimum 44×44pt
• Border radius: Concentric relationships maintained
• Animations: Using Apple-standard easing curves
• Accessibility: WCAG AA compliant, reduced motion support
• Consistency: Matches platform conventions
• Backgrounds: Solid by default, glass only when requested

Resources

• Apple Human Interface Guidelines
• Apple Design Resources
• SF Symbols
• Apple Fonts

This skill ensures Claude Code produces interfaces that meet Apple's exacting design standards, creating cohesive, accessible, and beautiful user experiences.