---
name: "Apple"
mode: "light"
---
# Apple
## Visual theme and atmosphere
Apple's design language is a study in restraint: near-white canvas, generous breathing room, and one vivid blue accent that makes every action feel deliberate. Typography is the primary voice — SF Pro set with negative tracking that tightens as size grows, giving headlines architectural clarity without weight. The product IS the design: large product photography and lifestyle imagery dominate, while chrome recedes into thin borders, ghost navigation, and hairline rules.
White room with a single blue switch.
## Color palette and roles
- **Apple Blue (#0071e3)**: Filled action buttons, selected states — the only chromatic interactive color, used sparingly so each appearance carries weight.
- **Link Blue (#0066cc)**: Outlined action borders, inline links — deeper saturation than Apple Blue, used where a filled pill would be too loud.
- **Signal Blue (#2997ff)**: Decorative borders, image outlines, icon strokes — the lightest blue in the system, used for atmospheric emphasis rather than interaction.
- **Onyx (#000000)**: Heading borders, nav borders, dark image backgrounds — true black for maximum contrast in promotional and heading contexts.
- **Carbon (#1d1d1f)**: Primary text, heading borders, nav rules, card borders — the dominant ink color, near-black with a whisper of warmth.
- **Smoke (#333333)**: Secondary text, nav fills, button borders — the workhorse neutral for borders and icons that need more presence than mid-gray.
- **Graphite (#474747)**: Nav text, nav borders, link borders — sits between Carbon and Smoke for tertiary hierarchy.
- **Ash (#707070)**: Footer text, list borders, nav borders, muted body text — the mid-gray for content that should be present but quiet.
- **Mist (#858585)**: Body borders, icon strokes, button borders — the lightest functional gray, for hairline rules on light surfaces.
- **Pebble (#e2e2e5)**: Button background fills, disabled surfaces — the only near-white surface that is deliberately grayer than the canvas.
- **Frost (#f5f5f7)**: Page canvas, body backgrounds, footer surface — the signature Apple light gray, slightly cooler than pure white.
- **Ice (#f4f8fb)**: Elevated surface washes, subtle fills, button text on dark backgrounds — barely-blue tint that lifts a section without declaring it.
## Typography rules
- **Display**: SF Pro Display, 600, 56px. Display headlines and large feature text — sizes 40px+ use the display cut for tighter aperture and stronger negative tracking; 700 reserved for promotional lockups, 400 for editorial product names. Fallback: Inter, system-ui..
- **Body**: SF Pro Text, 400, 17px. Body, navigation, buttons, subheads — the working typeface; 400 for body copy, 300 for subheads and refined labels, 600 for nav items and button text; negative tracking tightens from -0.022em at 12px to -0.01em at 44px. Fallback: Inter, system-ui..
- **Caption**: SF Pro Text, 400, 12px. Smallest functional label size in the type scale (line-height 1.33)..
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 980px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 500ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Use #0071e3 only for filled action buttons and selected/active states — one color, one job.
- Pair every filled blue button with an outlined blue secondary action, never stack two filled buttons.
- Set body text at 17px with -0.016em letter-spacing — the negative tracking is what makes Apple type feel precise, not the size alone.
- Let product photography fill the full viewport width — never constrain hero images to a max-width container.
- Use 980px border-radius for every interactive button, tag, and pill — the fully rounded shape is non-negotiable.
- Set section backgrounds to full-bleed #f5f5f7 or a single product color wash — never use card containers inside a section.
- Weight 300 for subheads and editorial descriptors creates the signature Apple whisper-voice — 400 is for body, 600 is for nav.
- Never use #0071e3 for text, borders, or decoration — it is exclusively a button fill color.
- Never add drop shadows to cards, buttons, or nav — the system uses hairline borders and surface shifts, not elevation.
- Never set headlines at 700 weight for product names — 600 is the maximum; 700 only appears in editorial lockups or promotional art.
- Never use a card or panel inside a #f5f5f7 section — the canvas itself is the surface; containers break the spatial logic.
- Never constrain the main content to a narrow column — Apple pages breathe at 100% width with internal max-widths only for text-heavy blocks.
- Never use radius below 980px for buttons or above 8px for cards/images — these are the only two radius values in the system.
- Never mix the three blues in one interactive element — #0071e3 is fill, #0066cc is outlined action, #2997ff is decorative.
---
name: "Apple"
mode: "light"
---
# Apple
## Visual theme and atmosphere
Apple's design language is a study in restraint: near-white canvas, generous breathing room, and one vivid blue accent that makes every action feel deliberate. Typography is the primary voice — SF Pro set with negative tracking that tightens as size grows, giving headlines architectural clarity without weight. The product IS the design: large product photography and lifestyle imagery dominate, while chrome recedes into thin borders, ghost navigation, and hairline rules.
White room with a single blue switch.
## Color palette and roles
- **Apple Blue (#0071e3)**: Filled action buttons, selected states — the only chromatic interactive color, used sparingly so each appearance carries weight.
- **Link Blue (#0066cc)**: Outlined action borders, inline links — deeper saturation than Apple Blue, used where a filled pill would be too loud.
- **Signal Blue (#2997ff)**: Decorative borders, image outlines, icon strokes — the lightest blue in the system, used for atmospheric emphasis rather than interaction.
- **Onyx (#000000)**: Heading borders, nav borders, dark image backgrounds — true black for maximum contrast in promotional and heading contexts.
- **Carbon (#1d1d1f)**: Primary text, heading borders, nav rules, card borders — the dominant ink color, near-black with a whisper of warmth.
- **Smoke (#333333)**: Secondary text, nav fills, button borders — the workhorse neutral for borders and icons that need more presence than mid-gray.
- **Graphite (#474747)**: Nav text, nav borders, link borders — sits between Carbon and Smoke for tertiary hierarchy.
- **Ash (#707070)**: Footer text, list borders, nav borders, muted body text — the mid-gray for content that should be present but quiet.
- **Mist (#858585)**: Body borders, icon strokes, button borders — the lightest functional gray, for hairline rules on light surfaces.
- **Pebble (#e2e2e5)**: Button background fills, disabled surfaces — the only near-white surface that is deliberately grayer than the canvas.
- **Frost (#f5f5f7)**: Page canvas, body backgrounds, footer surface — the signature Apple light gray, slightly cooler than pure white.
- **Ice (#f4f8fb)**: Elevated surface washes, subtle fills, button text on dark backgrounds — barely-blue tint that lifts a section without declaring it.
## Typography rules
- **Display**: SF Pro Display, 600, 56px. Display headlines and large feature text — sizes 40px+ use the display cut for tighter aperture and stronger negative tracking; 700 reserved for promotional lockups, 400 for editorial product names. Fallback: Inter, system-ui..
- **Body**: SF Pro Text, 400, 17px. Body, navigation, buttons, subheads — the working typeface; 400 for body copy, 300 for subheads and refined labels, 600 for nav items and button text; negative tracking tightens from -0.022em at 12px to -0.01em at 44px. Fallback: Inter, system-ui..
- **Caption**: SF Pro Text, 400, 12px. Smallest functional label size in the type scale (line-height 1.33)..
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 980px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 500ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Use #0071e3 only for filled action buttons and selected/active states — one color, one job.
- Pair every filled blue button with an outlined blue secondary action, never stack two filled buttons.
- Set body text at 17px with -0.016em letter-spacing — the negative tracking is what makes Apple type feel precise, not the size alone.
- Let product photography fill the full viewport width — never constrain hero images to a max-width container.
- Use 980px border-radius for every interactive button, tag, and pill — the fully rounded shape is non-negotiable.
- Set section backgrounds to full-bleed #f5f5f7 or a single product color wash — never use card containers inside a section.
- Weight 300 for subheads and editorial descriptors creates the signature Apple whisper-voice — 400 is for body, 600 is for nav.
- Never use #0071e3 for text, borders, or decoration — it is exclusively a button fill color.
- Never add drop shadows to cards, buttons, or nav — the system uses hairline borders and surface shifts, not elevation.
- Never set headlines at 700 weight for product names — 600 is the maximum; 700 only appears in editorial lockups or promotional art.
- Never use a card or panel inside a #f5f5f7 section — the canvas itself is the surface; containers break the spatial logic.
- Never constrain the main content to a narrow column — Apple pages breathe at 100% width with internal max-widths only for text-heavy blocks.
- Never use radius below 980px for buttons or above 8px for cards/images — these are the only two radius values in the system.
- Never mix the three blues in one interactive element — #0071e3 is fill, #0066cc is outlined action, #2997ff is decorative.
---
name: "Apple"
mode: "light"
---
# Apple
## Visual theme and atmosphere
Apple's design language is a study in restraint: near-white canvas, generous breathing room, and one vivid blue accent that makes every action feel deliberate. Typography is the primary voice — SF Pro set with negative tracking that tightens as size grows, giving headlines architectural clarity without weight. The product IS the design: large product photography and lifestyle imagery dominate, while chrome recedes into thin borders, ghost navigation, and hairline rules.
White room with a single blue switch.
## Color palette and roles
- **Apple Blue (#0071e3)**: Filled action buttons, selected states — the only chromatic interactive color, used sparingly so each appearance carries weight.
- **Link Blue (#0066cc)**: Outlined action borders, inline links — deeper saturation than Apple Blue, used where a filled pill would be too loud.
- **Signal Blue (#2997ff)**: Decorative borders, image outlines, icon strokes — the lightest blue in the system, used for atmospheric emphasis rather than interaction.
- **Onyx (#000000)**: Heading borders, nav borders, dark image backgrounds — true black for maximum contrast in promotional and heading contexts.
- **Carbon (#1d1d1f)**: Primary text, heading borders, nav rules, card borders — the dominant ink color, near-black with a whisper of warmth.
- **Smoke (#333333)**: Secondary text, nav fills, button borders — the workhorse neutral for borders and icons that need more presence than mid-gray.
- **Graphite (#474747)**: Nav text, nav borders, link borders — sits between Carbon and Smoke for tertiary hierarchy.
- **Ash (#707070)**: Footer text, list borders, nav borders, muted body text — the mid-gray for content that should be present but quiet.
- **Mist (#858585)**: Body borders, icon strokes, button borders — the lightest functional gray, for hairline rules on light surfaces.
- **Pebble (#e2e2e5)**: Button background fills, disabled surfaces — the only near-white surface that is deliberately grayer than the canvas.
- **Frost (#f5f5f7)**: Page canvas, body backgrounds, footer surface — the signature Apple light gray, slightly cooler than pure white.
- **Ice (#f4f8fb)**: Elevated surface washes, subtle fills, button text on dark backgrounds — barely-blue tint that lifts a section without declaring it.
## Typography rules
- **Display**: SF Pro Display, 600, 56px. Display headlines and large feature text — sizes 40px+ use the display cut for tighter aperture and stronger negative tracking; 700 reserved for promotional lockups, 400 for editorial product names. Fallback: Inter, system-ui..
- **Body**: SF Pro Text, 400, 17px. Body, navigation, buttons, subheads — the working typeface; 400 for body copy, 300 for subheads and refined labels, 600 for nav items and button text; negative tracking tightens from -0.022em at 12px to -0.01em at 44px. Fallback: Inter, system-ui..
- **Caption**: SF Pro Text, 400, 12px. Smallest functional label size in the type scale (line-height 1.33)..
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 980px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 500ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Use #0071e3 only for filled action buttons and selected/active states — one color, one job.
- Pair every filled blue button with an outlined blue secondary action, never stack two filled buttons.
- Set body text at 17px with -0.016em letter-spacing — the negative tracking is what makes Apple type feel precise, not the size alone.
- Let product photography fill the full viewport width — never constrain hero images to a max-width container.
- Use 980px border-radius for every interactive button, tag, and pill — the fully rounded shape is non-negotiable.
- Set section backgrounds to full-bleed #f5f5f7 or a single product color wash — never use card containers inside a section.
- Weight 300 for subheads and editorial descriptors creates the signature Apple whisper-voice — 400 is for body, 600 is for nav.
- Never use #0071e3 for text, borders, or decoration — it is exclusively a button fill color.
- Never add drop shadows to cards, buttons, or nav — the system uses hairline borders and surface shifts, not elevation.
- Never set headlines at 700 weight for product names — 600 is the maximum; 700 only appears in editorial lockups or promotional art.
- Never use a card or panel inside a #f5f5f7 section — the canvas itself is the surface; containers break the spatial logic.
- Never constrain the main content to a narrow column — Apple pages breathe at 100% width with internal max-widths only for text-heavy blocks.
- Never use radius below 980px for buttons or above 8px for cards/images — these are the only two radius values in the system.
- Never mix the three blues in one interactive element — #0071e3 is fill, #0066cc is outlined action, #2997ff is decorative.
---
name: "Apple"
mode: "light"
---
# Apple
## Visual theme and atmosphere
Apple's design language is a study in restraint: near-white canvas, generous breathing room, and one vivid blue accent that makes every action feel deliberate. Typography is the primary voice — SF Pro set with negative tracking that tightens as size grows, giving headlines architectural clarity without weight. The product IS the design: large product photography and lifestyle imagery dominate, while chrome recedes into thin borders, ghost navigation, and hairline rules.
White room with a single blue switch.
## Color palette and roles
- **Apple Blue (#0071e3)**: Filled action buttons, selected states — the only chromatic interactive color, used sparingly so each appearance carries weight.
- **Link Blue (#0066cc)**: Outlined action borders, inline links — deeper saturation than Apple Blue, used where a filled pill would be too loud.
- **Signal Blue (#2997ff)**: Decorative borders, image outlines, icon strokes — the lightest blue in the system, used for atmospheric emphasis rather than interaction.
- **Onyx (#000000)**: Heading borders, nav borders, dark image backgrounds — true black for maximum contrast in promotional and heading contexts.
- **Carbon (#1d1d1f)**: Primary text, heading borders, nav rules, card borders — the dominant ink color, near-black with a whisper of warmth.
- **Smoke (#333333)**: Secondary text, nav fills, button borders — the workhorse neutral for borders and icons that need more presence than mid-gray.
- **Graphite (#474747)**: Nav text, nav borders, link borders — sits between Carbon and Smoke for tertiary hierarchy.
- **Ash (#707070)**: Footer text, list borders, nav borders, muted body text — the mid-gray for content that should be present but quiet.
- **Mist (#858585)**: Body borders, icon strokes, button borders — the lightest functional gray, for hairline rules on light surfaces.
- **Pebble (#e2e2e5)**: Button background fills, disabled surfaces — the only near-white surface that is deliberately grayer than the canvas.
- **Frost (#f5f5f7)**: Page canvas, body backgrounds, footer surface — the signature Apple light gray, slightly cooler than pure white.
- **Ice (#f4f8fb)**: Elevated surface washes, subtle fills, button text on dark backgrounds — barely-blue tint that lifts a section without declaring it.
## Typography rules
- **Display**: SF Pro Display, 600, 56px. Display headlines and large feature text — sizes 40px+ use the display cut for tighter aperture and stronger negative tracking; 700 reserved for promotional lockups, 400 for editorial product names. Fallback: Inter, system-ui..
- **Body**: SF Pro Text, 400, 17px. Body, navigation, buttons, subheads — the working typeface; 400 for body copy, 300 for subheads and refined labels, 600 for nav items and button text; negative tracking tightens from -0.022em at 12px to -0.01em at 44px. Fallback: Inter, system-ui..
- **Caption**: SF Pro Text, 400, 12px. Smallest functional label size in the type scale (line-height 1.33)..
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 980px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 500ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Use #0071e3 only for filled action buttons and selected/active states — one color, one job.
- Pair every filled blue button with an outlined blue secondary action, never stack two filled buttons.
- Set body text at 17px with -0.016em letter-spacing — the negative tracking is what makes Apple type feel precise, not the size alone.
- Let product photography fill the full viewport width — never constrain hero images to a max-width container.
- Use 980px border-radius for every interactive button, tag, and pill — the fully rounded shape is non-negotiable.
- Set section backgrounds to full-bleed #f5f5f7 or a single product color wash — never use card containers inside a section.
- Weight 300 for subheads and editorial descriptors creates the signature Apple whisper-voice — 400 is for body, 600 is for nav.
- Never use #0071e3 for text, borders, or decoration — it is exclusively a button fill color.
- Never add drop shadows to cards, buttons, or nav — the system uses hairline borders and surface shifts, not elevation.
- Never set headlines at 700 weight for product names — 600 is the maximum; 700 only appears in editorial lockups or promotional art.
- Never use a card or panel inside a #f5f5f7 section — the canvas itself is the surface; containers break the spatial logic.
- Never constrain the main content to a narrow column — Apple pages breathe at 100% width with internal max-widths only for text-heavy blocks.
- Never use radius below 980px for buttons or above 8px for cards/images — these are the only two radius values in the system.
- Never mix the three blues in one interactive element — #0071e3 is fill, #0066cc is outlined action, #2997ff is decorative.
---
name: "Apple"
mode: "light"
---
# Apple
## Visual theme and atmosphere
Apple's design language is a study in restraint: near-white canvas, generous breathing room, and one vivid blue accent that makes every action feel deliberate. Typography is the primary voice — SF Pro set with negative tracking that tightens as size grows, giving headlines architectural clarity without weight. The product IS the design: large product photography and lifestyle imagery dominate, while chrome recedes into thin borders, ghost navigation, and hairline rules.
White room with a single blue switch.
## Color palette and roles
- **Apple Blue (#0071e3)**: Filled action buttons, selected states — the only chromatic interactive color, used sparingly so each appearance carries weight.
- **Link Blue (#0066cc)**: Outlined action borders, inline links — deeper saturation than Apple Blue, used where a filled pill would be too loud.
- **Signal Blue (#2997ff)**: Decorative borders, image outlines, icon strokes — the lightest blue in the system, used for atmospheric emphasis rather than interaction.
- **Onyx (#000000)**: Heading borders, nav borders, dark image backgrounds — true black for maximum contrast in promotional and heading contexts.
- **Carbon (#1d1d1f)**: Primary text, heading borders, nav rules, card borders — the dominant ink color, near-black with a whisper of warmth.
- **Smoke (#333333)**: Secondary text, nav fills, button borders — the workhorse neutral for borders and icons that need more presence than mid-gray.
- **Graphite (#474747)**: Nav text, nav borders, link borders — sits between Carbon and Smoke for tertiary hierarchy.
- **Ash (#707070)**: Footer text, list borders, nav borders, muted body text — the mid-gray for content that should be present but quiet.
- **Mist (#858585)**: Body borders, icon strokes, button borders — the lightest functional gray, for hairline rules on light surfaces.
- **Pebble (#e2e2e5)**: Button background fills, disabled surfaces — the only near-white surface that is deliberately grayer than the canvas.
- **Frost (#f5f5f7)**: Page canvas, body backgrounds, footer surface — the signature Apple light gray, slightly cooler than pure white.
- **Ice (#f4f8fb)**: Elevated surface washes, subtle fills, button text on dark backgrounds — barely-blue tint that lifts a section without declaring it.
## Typography rules
- **Display**: SF Pro Display, 600, 56px. Display headlines and large feature text — sizes 40px+ use the display cut for tighter aperture and stronger negative tracking; 700 reserved for promotional lockups, 400 for editorial product names. Fallback: Inter, system-ui..
- **Body**: SF Pro Text, 400, 17px. Body, navigation, buttons, subheads — the working typeface; 400 for body copy, 300 for subheads and refined labels, 600 for nav items and button text; negative tracking tightens from -0.022em at 12px to -0.01em at 44px. Fallback: Inter, system-ui..
- **Caption**: SF Pro Text, 400, 12px. Smallest functional label size in the type scale (line-height 1.33)..
## Spacing and shape
- Base unit: 4px.
- Default gap: 12px.
- Card padding: 24px.
- Section padding: 64px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 980px.
## Motion
Use restrained motion. Fast feedback lasts 120ms; composed transitions last 500ms; easing is cubic-bezier(0.25, 0.1, 0.25, 1).
## Guardrails
- Use #0071e3 only for filled action buttons and selected/active states — one color, one job.
- Pair every filled blue button with an outlined blue secondary action, never stack two filled buttons.
- Set body text at 17px with -0.016em letter-spacing — the negative tracking is what makes Apple type feel precise, not the size alone.
- Let product photography fill the full viewport width — never constrain hero images to a max-width container.
- Use 980px border-radius for every interactive button, tag, and pill — the fully rounded shape is non-negotiable.
- Set section backgrounds to full-bleed #f5f5f7 or a single product color wash — never use card containers inside a section.
- Weight 300 for subheads and editorial descriptors creates the signature Apple whisper-voice — 400 is for body, 600 is for nav.
- Never use #0071e3 for text, borders, or decoration — it is exclusively a button fill color.
- Never add drop shadows to cards, buttons, or nav — the system uses hairline borders and surface shifts, not elevation.
- Never set headlines at 700 weight for product names — 600 is the maximum; 700 only appears in editorial lockups or promotional art.
- Never use a card or panel inside a #f5f5f7 section — the canvas itself is the surface; containers break the spatial logic.
- Never constrain the main content to a narrow column — Apple pages breathe at 100% width with internal max-widths only for text-heavy blocks.
- Never use radius below 980px for buttons or above 8px for cards/images — these are the only two radius values in the system.
- Never mix the three blues in one interactive element — #0071e3 is fill, #0066cc is outlined action, #2997ff is decorative.
