Apple Design Language for web applications. Use when building UI, choosing colors, typography, spacing, or component patterns for web projects that follow Apple's design philosophy (adapted from iOS HIG for web/Tailwind CSS).
Translates Apple's Human Interface Guidelines design philosophy into web-appropriate patterns using Tailwind CSS. Ensures visual consistency across iOS apps and web projects.
Apply when the agent:
text-3xl font-bold (28px)text-xl font-semibold (20px)text-base (16px)text-sm text-muted (14px)--bg-page, --bg-secondary, --bg-card--text-heading, --text-body, --text-secondary, --text-muted--blue, --green, --orange, --red, --purple-bg variant for subtle backgrounds--border (subtle), --border-strong (visible)[data-theme="dark"]p-5 or p-6 (20-24px)gap-6 (24px)rounded-2xl (16px) for large cards, rounded-xl (12px) for smallermax-w-6xl centeredgrid-cols-1 md:grid-cols-2 lg:grid-cols-3bg-green-bg text-green)shadow-sm to shadow-md (subtle, not heavy)shadow-lg (modals, dropdowns)transition-all duration-200 ease