Apple Design
Use this as an opt-in reference system, never as a default skin. It adapts
Emil Kowalski's Apple and WWDC synthesis for the web.
Studio and the project remain authoritative. Apple supplies behavior and
reasoning; project tokens supply color, type, spacing, material treatment, and
motion values.
Choose a branch
- For drag, swipe, sheets, springs, momentum, interruption, materials, and
reduced-motion behavior, read
Fluid Interaction.
- For product principles, feedback, agency, simplicity, typography, and
prototyping, read Design Foundations.
- Read both only when the task spans interaction behavior and product-level
design direction.
Workflow
- Confirm the user explicitly wants an Apple or fluid-physical reference.
State the interaction or product quality being borrowed; "make it look like
Apple" is not yet specific enough.
- Read the active Studio rules and project profile. Identify the current
behavior engine, motion tokens, platform, input methods, and accessibility
requirements.
- Translate the reference through Studio's three layers:
- behavior: response, interruption, velocity, boundaries, focus, and
state machinery may cross over.
- grammar: spatial continuity, hierarchy, feedback types, and state
relationships may cross over.
- skin: glass, blur, color, typography, radius, density, and numeric
motion values remain project decisions.
- Build or review the full interaction state graph, including interrupted,
reversed, reduced-motion, touch, pointer, keyboard, loading, and error
states that apply.
- Verify the rendered interaction. Gesture work requires a real-device check
when hardware is available; otherwise name the unverified risk.
Completion
The task is complete when the borrowed principle is named, behavior and skin
are separated, project tokens remain authoritative, every relevant state is
verified, and no supplier value silently became house law.
Source
Adapted from
emilkowalski/skills: apple-design,
which synthesizes Apple's WWDC design material for web implementation.
1---2name: apple-design3description: Opt-in Apple interface reference for translating WWDC principles into web UI. Use when the user explicitly asks for Apple-style, iOS-like, or fluid physical interaction behavior.4---56# Apple Design78Use this as an opt-in reference system, never as a default skin. It adapts9Emil Kowalski's Apple and WWDC synthesis for the web.1011Studio and the project remain authoritative. Apple supplies behavior and12reasoning; project tokens supply color, type, spacing, material treatment, and13motion values.1415## Choose a branch1617- For drag, swipe, sheets, springs, momentum, interruption, materials, and18 reduced-motion behavior, read19 [Fluid Interaction](references/fluid-interaction.md).20- For product principles, feedback, agency, simplicity, typography, and21 prototyping, read [Design Foundations](references/design-foundations.md).22- Read both only when the task spans interaction behavior and product-level23 design direction.2425## Workflow26271. Confirm the user explicitly wants an Apple or fluid-physical reference.28 State the interaction or product quality being borrowed; "make it look like29 Apple" is not yet specific enough.302. Read the active Studio rules and project profile. Identify the current31 behavior engine, motion tokens, platform, input methods, and accessibility32 requirements.333. Translate the reference through Studio's three layers:34 - **behavior:** response, interruption, velocity, boundaries, focus, and35 state machinery may cross over.36 - **grammar:** spatial continuity, hierarchy, feedback types, and state37 relationships may cross over.38 - **skin:** glass, blur, color, typography, radius, density, and numeric39 motion values remain project decisions.404. Build or review the full interaction state graph, including interrupted,41 reversed, reduced-motion, touch, pointer, keyboard, loading, and error42 states that apply.435. Verify the rendered interaction. Gesture work requires a real-device check44 when hardware is available; otherwise name the unverified risk.4546## Completion4748The task is complete when the borrowed principle is named, behavior and skin49are separated, project tokens remain authoritative, every relevant state is50verified, and no supplier value silently became house law.5152## Source5354Adapted from55[emilkowalski/skills: apple-design](https://github.com/emilkowalski/skills/tree/main/skills/apple-design),56which synthesizes Apple's WWDC design material for web implementation.
tommylower