Apple HIG Principles

The Three Pillars

Apple’s design philosophy rests on three principles that create the “Apple feel”:

1. Clarity

Text is legible at every size, icons are precise, adornments are subtle. Every element serves a purpose.

2. Deference

The UI helps people understand and interact with content — but never competes with it. Fluid motion, crisp typography, generous whitespace.

3. Depth

Visual layers and realistic motion create hierarchy. Translucency hints at layers behind. Depth gives context.

What People Usually Get Wrong

Many “Apple-style” websites are really just:

• oversized blur effects
• pale gradients with no content hierarchy
• floating cards with vague copy
• expensive-looking surfaces without clear information order

That is not clarity, deference, or depth. It is usually decoration standing in for product thinking.

Translate The Principles To Webspire

Use the principles as decision rules:

• Clarity: choose straightforward patterns first, then reduce visual noise inside them
• Deference: let headline, screenshot, and CTA lead; keep chrome quiet
• Depth: use layering sparingly on hero, nav, modal, or key cards, not everywhere

Good Webspire fits:

• hero patterns with restrained accents
• simple navbars and card systems
• glass or depth snippets applied to one focal area, not the full page

System Prompt for Apple-Style Design

Copy this into your AI assistant to generate Apple HIG-aligned websites:

You are a senior UI designer following Apple Human Interface Guidelines.

Design Rules:
- Typography: Use SF Pro or Inter. Headlines bold, body regular. Generous line-height (1.6+).
- Spacing: Multiples of 8px. Sections breathe with 80-120px vertical padding.
- Colors: Neutral base (gray-50 to gray-950). One accent color, used sparingly.
- Surfaces: Subtle translucency (backdrop-blur). Light borders (1px, 8-12% opacity).
- Radius: Smooth, continuous corners — 12-16px for cards, 8-10px for buttons.
- Motion: Ease-out curves, 200-350ms duration. Never decorative, always purposeful.
- Dark Mode: Elevated surfaces get lighter, not darker. Maintain contrast ratios.
- Hierarchy: Size > Weight > Color > Position. Never rely on color alone.
- Icons: SF Symbols style — 1.5px stroke, rounded caps, optical alignment.
- Content: UI defers to content. No competing decorations.

Anti-Patterns to AVOID:
- Gradients on text (except hero headlines)
- Drop shadows heavier than 0 4px 12px
- More than 2 font weights per section
- Animation duration > 500ms
- Borders thicker than 1px
- Saturated background colors

Bad vs. Better Brief

Weak prompt

Make this look like Apple.

Better prompt

Redesign this SaaS landing page with Apple HIG principles.
Prioritize clarity over ornament.
Use one accent color on a neutral palette.
Keep surfaces light, borders subtle, and spacing generous.
Apply translucency only to the navbar and the product spotlight card.
Do not introduce decorative gradients or heavy shadows.

The second version gives the model taste boundaries, not just a brand name.

Tailwind Token Preset

/* Apple HIG-inspired design tokens */
:root {
  /* Spacing scale (8px base) */
  --apple-space-xs: 0.5rem;    /* 8px */
  --apple-space-sm: 1rem;      /* 16px */
  --apple-space-md: 1.5rem;    /* 24px */
  --apple-space-lg: 2.5rem;    /* 40px */
  --apple-space-xl: 5rem;      /* 80px */
  --apple-space-2xl: 7.5rem;   /* 120px */

  /* Radius */
  --apple-radius-sm: 0.5rem;   /* 8px */
  --apple-radius-md: 0.75rem;  /* 12px */
  --apple-radius-lg: 1rem;     /* 16px */
  --apple-radius-xl: 1.5rem;   /* 24px */

  /* Shadows — subtle, layered */
  --apple-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04);
  --apple-shadow-md: 0 4px 12px oklch(0% 0 0 / 0.06), 0 1px 3px oklch(0% 0 0 / 0.04);
  --apple-shadow-lg: 0 8px 28px oklch(0% 0 0 / 0.08), 0 2px 6px oklch(0% 0 0 / 0.04);

  /* Typography */
  --apple-font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --apple-leading: 1.6;
  --apple-tracking-tight: -0.02em;
  --apple-tracking-normal: -0.01em;
}

Checklist

• [ ] Font: Inter or SF Pro, -0.02em tracking on headlines
• [ ] Spacing: 8px grid, sections min 80px vertical padding
• [ ] Colors: Neutral palette + 1 accent, OKLCH color space
• [ ] Surfaces: backdrop-blur on overlays, 1px borders at 8-12% opacity
• [ ] Corners: 12-16px on cards, 8-10px on buttons
• [ ] Shadows: Multi-layer, max opacity 8%
• [ ] Motion: ease-out, 200-350ms, functional only
• [ ] Dark mode: Elevated = lighter surface, not darker
• [ ] Content-first: UI never competes with content
• [ ] Blur and translucency used as focal emphasis, not as a page-wide effect