Remixes of apple.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Apple
description: |
Apple's design system embodies minimalist sophistication and clarity. The
aesthetic is defined by generous whitespace, ultra-precise typography with
negative letter-spacing on display sizes, and a restrained but vibrant accent
color that commands attention. The system prioritizes legibility and hierarchy
through weight and size rather than color complexity. Surfaces are either pure
white or a subtle warm neutral gray, creating a calm, distraction-free
environment. The overall mood is premium, accessible, and deeply
considered—every element has spatial and visual purpose. Interactions are
gentle and responsive, with soft opacity shifts and color transitions that
feel natural rather than jarring.
source:
url: "https://apple.com"
pagesAnalyzed: 6
extractedAt: 2026-10-26
tokensMeasured: true
colors:
primary: "#0071E3"
accent: "#2997FF"
canvas: "#FFFFFF"
surface: "#F5F5F7"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#1D1D1F"
muted: "#6E6E73"
faint: "#F5F5F7"
hairline: "#D2D2D7"
accent-1: "#0066CC"
accent-2: "#0000EE"
accent-3: "#B64400"
neutral-1: "#333336"
neutral-2: "#E8E8ED"
typography:
display-xl:
fontFamily: "SF Pro Display"
fontSize: 80px
fontWeight: 600
lineHeight: 1.05
letterSpacing: -1.2px
display-lg:
fontFamily: "SF Pro Display"
fontSize: 64px
fontWeight: 600
lineHeight: 1.06
letterSpacing: -0.58px
display-md:
fontFamily: "SF Pro Display"
fontSize: 56px
fontWeight: 600
lineHeight: 1.07
letterSpacing: -0.28px
display-sm:
fontFamily: "SF Pro Display"
fontSize: 48px
fontWeight: 600
lineHeight: 1.08
letterSpacing: -0.14px
display-xs:
fontFamily: "SF Pro Display"
fontSize: 40px
fontWeight: 600
lineHeight: 1.1
letterSpacing: 0px
heading-xl:
fontFamily: "SF Pro Display"
fontSize: 32px
fontWeight: 600
lineHeight: 1.13
letterSpacing: 0.13px
heading-lg:
fontFamily: "SF Pro Display"
fontSize: 28px
fontWeight: 400
lineHeight: 1.14
letterSpacing: 0.2px
heading-lg-strong:
fontFamily: "SF Pro Display"
fontSize: 28px
fontWeight: 600
lineHeight: 1.14
letterSpacing: 0.2px
heading-md:
fontFamily: "SF Pro Display"
fontSize: 24px
fontWeight: 600
lineHeight: 1.17
letterSpacing: 0.22px
heading-sm:
fontFamily: "SF Pro Display"
fontSize: 19px
fontWeight: 600
lineHeight: 1.21
letterSpacing: 0.23px
heading-xs:
fontFamily: "SF Pro Text"
fontSize: 14.04px
fontWeight: 600
lineHeight: 1.33
letterSpacing: -0.12px
body-md:
fontFamily: "SF Pro Text"
fontSize: 17px
fontWeight: 400
lineHeight: 1.18
letterSpacing: -0.37px
body-md-strong:
fontFamily: "SF Pro Text"
fontSize: 17px
fontWeight: 600
lineHeight: 1.47
letterSpacing: -0.37px
body-sm:
fontFamily: "SF Pro Text"
fontSize: 14px
fontWeight: 400
lineHeight: 1.29
letterSpacing: -0.22px
body-sm-strong:
fontFamily: "SF Pro Text"
fontSize: 14px
fontWeight: 600
lineHeight: 1.29
letterSpacing: -0.22px
body-xs:
fontFamily: "SF Pro Text"
fontSize: 12px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.12px
body-xs-loose:
fontFamily: "SF Pro Text"
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: -0.12px
button:
fontFamily: "SF Pro Text"
fontSize: 17px
fontWeight: 400
lineHeight: 2.41
letterSpacing: 0px
caption-sm:
fontFamily: "SF Pro Text"
fontSize: 12px
fontWeight: 600
lineHeight: 1.33
letterSpacing: -0.12px
caption-xs:
fontFamily: "SF Pro Text"
fontSize: 10px
fontWeight: 600
lineHeight: 1.2
letterSpacing: -0.08px
rounded:
none: 0px
xs: 8px
sm: 11px
md: 28px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 36px
section: 40px
band: 44px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F5F5F7"
surfaceRaised: "#EBEBED"
text: "#000000"
textMuted: "#1D1D1F"
border: "#D2D2D7"
accent: "#0071E3"
accentFg: "#FFFFFF"
focusRing: "#0071E3"
elevation: shadow
dark:
bg: "#090F16"
surface: "#181D24"
surfaceRaised: "#242930"
text: "#F5F9FE"
textMuted: "#9BA0A6"
border: "#30353B"
accent: "#007BF7"
accentFg: "#0B0B0C"
focusRing: "#0071E3"
elevation: "border+surface"
components:
button-filled:
typography: "{typography.button}"
textColor: "rgba(0, 0, 0, 0.8)"
border: "3px solid rgba(0, 0, 0, 0.04)"
height: 42px
padding: "0px 14px 0px 14px"
rounded: "{rounded.sm}"
backgroundColor: "rgb(250, 250, 252)"
button-primary:
typography: "{typography.body-md}"
textColor: "{colors.on-primary}"
height: 20px
padding: "11px 21px 11px 21px"
rounded: 980px
backgroundColor: "{colors.primary}"
button-filled-sm:
typography: "{typography.body-sm}"
textColor: "{colors.on-primary}"
height: 36px
padding: "8px 15px 8px 15px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.body}"
button-primary-sm:
typography: "{typography.body-sm}"
textColor: "{colors.on-primary}"
height: 18px
padding: "8px 15px 8px 15px"
rounded: 980px
backgroundColor: "{colors.primary}"
button-icon:
textColor: "rgba(0, 0, 0, 0.48)"
height: 24px
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
rounded: "50%"
backgroundColor: "rgba(210, 210, 215, 0.64)"
button-outline:
typography: "{typography.body-md}"
textColor: "{colors.accent-1}"
border: "1px solid {colors.accent-1}"
height: 20px
padding: "11px 21px 11px 21px"
rounded: 980px
card:
typography: "{typography.body-xs-loose}"
textColor: "rgba(0, 0, 0, 0.56)"
card-featured:
textColor: "rgba(255, 255, 255, 0.92)"
padding: "32px 32px 32px 32px"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
rounded: "{rounded.md}"
backgroundColor: "rgb(36, 36, 38)"
card-2:
textColor: "rgba(0, 0, 0, 0.88)"
padding: "32px 32px 32px 32px"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
navigation:
textColor: "{colors.body}"
height: 44px
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
backgroundColor: "rgba(255, 255, 255, 0.8)"
navigation-2:
textColor: "{colors.body}"
height: 44px
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
footer:
typography: "{typography.body-xs-loose}"
textColor: "rgba(0, 0, 0, 0.56)"
backgroundColor: "{colors.surface}"
link:
textColor: "{colors.accent}"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
backgroundColor: "{colors.ink}"
link-lg:
textColor: "{colors.accent-1}"
fontSize: 17px
fontFamily: "SF Pro Text"
fontWeight: 400
lineHeight: 1.47
badge-text:
typography: "{typography.caption-sm}"
textColor: "{colors.accent-3}"
height: 16px
states:
button-focus-visible:
target: button
state: focus-visible
opacity: 1
link-hover:
target: link
state: hover
textDecoration: none
link-focus:
target: link
state: focus
outline: none
nav-hover:
target: nav
state: hover
opacity: 1
button-hover:
target: button
state: hover
opacity: 1
button-active:
target: button
state: active
outline: none
other-hover:
target: other
state: hover
textColor: "{colors.ink}"
link-focus-visible:
target: link
state: focus-visible
outline: none
other-focus:
target: other
state: focus
outline: none
link-disabled:
target: link
state: disabled
textDecoration: none
card-hover:
target: card
state: hover
textDecoration: none
other-focus-visible:
target: other
state: focus-visible
outline: none
other-active:
target: other
state: active
outline: none
input-focus:
target: input
state: focus
outline: none
link-active:
target: link
state: active
textDecoration: none
other-disabled:
target: other
state: disabled
textDecoration: none
card-focus-visible:
target: card
state: focus-visible
outline: none
button-disabled:
target: button
state: disabled
opacity: 0.32
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 3
navLinksVisible: 13
menuToggleVisible: true
headingPx: 32
bodyPx: 17
sectionPaddingX: 0
- width: 768
containerWidth: 736
gridColumns: 3
navLinksVisible: 3
menuToggleVisible: true
headingPx: 48
bodyPx: 17
sectionPaddingX: 12
- width: 1024
containerWidth: 980
gridColumns: 3
navLinksVisible: 78
menuToggleVisible: true
headingPx: 48
bodyPx: 17
sectionPaddingX: 12
- width: 1280
containerWidth: 980
gridColumns: 3
navLinksVisible: 78
menuToggleVisible: true
headingPx: 56
bodyPx: 17
sectionPaddingX: 12
- width: 1440
containerWidth: 980
gridColumns: 3
navLinksVisible: 78
menuToggleVisible: true
headingPx: 56
bodyPx: 17
sectionPaddingX: 12
coverage:
statesFound: 114
gradientsFound: 0
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Apple's design system embodies minimalist sophistication and clarity. The aesthetic is defined by generous whitespace, ultra-precise typography with negative letter-spacing on display sizes, and a restrained but vibrant accent color that commands attention. The system prioritizes legibility and hierarchy through weight and size rather than color complexity. Surfaces are either pure white or a subtle warm neutral gray, creating a calm, distraction-free environment. The overall mood is premium, accessible, and deeply considered—every element has spatial and visual purpose. Interactions are gentle and responsive, with soft opacity shifts and color transitions that feel natural rather than jarring.
Key Characteristics
#0071E3)28px){colors.primary} — #0071E3): Primary call-to-action buttons, brand accent in hero sections, active and interactive states, focus rings. High saturation blue that stands out against neutral surfaces.{colors.accent} — #2997FF): Secondary accent for hero bands and decorative elements; lighter, more approachable variant of the primary.{colors.accent-1} — #0066CC): Decorative use only; no measured role in UI hierarchy.{colors.accent-2} — #0000EE): Decorative use only; no measured role in UI hierarchy.{colors.accent-3} — #B64400): Decorative use only; no measured role in UI hierarchy.{colors.canvas} — #FFFFFF): Default page background; label and text color on brand-colored surfaces.{colors.surface} — #F5F5F7): Card and panel backgrounds; placeholder and tertiary text color.{colors.ink} — #000000): Headings and primary text at full contrast.{colors.body} — #1D1D1F): Body copy; primary reading text.{colors.muted} — #6E6E73): Secondary text, captions, and supporting information.{colors.hairline} — #D2D2D7): 1px borders, dividers, and subtle structural lines.{colors.neutral-1} — #333336): Measured but no declared role; available for edge cases.{colors.neutral-2} — #E8E8ED): Measured but no declared role; available for edge cases.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | SF Pro Display | 80px | 600 | 1.05 | -1.2px | Maximum impact; hero section headlines |
| Display LG | SF Pro Display | 64px | 600 | 1.06 | -0.58px | Large campaign headers |
| Display MD | SF Pro Display | 56px | 600 | 1.07 | -0.28px | Section headers at 1280px+ |
| Display SM | SF Pro Display | 48px | 600 | 1.08 | -0.14px | Primary heading; scales down at 768px |
| Display XS | SF Pro Display | 40px | 600 | 1.1 | 0px | Secondary heading size |
| Heading XL | SF Pro Display | 32px | 600 | 1.13 | 0.13px | Large subsection headers |
| Heading LG (Strong) | SF Pro Display | 28px | 600 | 1.14 | 0.2px | Subsection headers; paired with body-md |
| Heading LG (Regular) | SF Pro Display | 28px | 400 | 1.14 | 0.2px | Lighter weight heading option |
| Heading MD | SF Pro Display | 24px | 600 | 1.17 | 0.22px | Mid-level section headers |
| Heading SM | SF Pro Display | 19px | 600 | 1.21 | 0.23px | Smaller subsection labels |
| Heading XS | SF Pro Display | 14.04px | 600 | 1.33 | -0.12px | Caption-level headings |
| Body MD | SF Pro Text | 17px | 400 | 1.18 | -0.37px | Primary body copy; button text |
| Body MD (Strong) | SF Pro Text | 17px | 600 | 1.47 | -0.37px | Emphasized body text; strong semantic weight |
| Body SM | SF Pro Text | 14px | 400 | 1.29 | -0.22px | Secondary body text; smaller contexts |
| Body SM (Strong) | SF Pro Text | 14px | 600 | 1.29 | -0.22px | Emphasized smaller text |
| Body XS | SF Pro Text | 12px | 400 | 1 | -0.12px | Tight compact text; links |
| Body XS (Loose) | SF Pro Text | 12px | 400 | 1.33 | -0.12px | Compact text with more breathing room; list items |
| Caption SM | SF Pro Text | 12px | 600 | 1.33 | -0.12px | Label; bold caption text |
| Caption XS | SF Pro Text | 10px | 600 | 1.2 | -0.08px | Smallest caption; fine print |
| Button | SF Pro Text | 17px | 400 | 2.41 | 0px | Interactive button label; uses body-md metrics with tall line-height |
font-weight: 600) is reserved for headings and strong semantic emphasis; 400 is body and neutral elements.{typography.body-md}) but with an abnormally tall line-height: 2.41 for vertical centering in button containers.Primary Button
{typography.body-md} (SF Pro Text, 17px, 400 weight){colors.primary} (#0071E3){colors.canvas} (#FFFFFF)11px 21px{rounded.full} (9999px — pill shape)1px solid rgba(0, 0, 0, 0) (transparent)20px (auto; content-driven)auto (shrink-fit)var(--sk-button-color-hover))var(--sk-button-color-active))outline: 2px solid {colors.primary} (#0071E3)opacity: var(--sk-button-disabled-opacity) (typically 0.42)Primary Button (Small)
{typography.body-sm} (SF Pro Text, 14px, 400 weight){colors.primary} (#0071E3){colors.canvas} (#FFFFFF)8px 15px{rounded.full} (9999px)1px solid rgba(0, 0, 0, 0)18pxautoFilled Button (Light)
{typography.body-md} (SF Pro Text, 17px, 400 weight)rgb(250, 250, 252) (near-white with subtle gray cast)rgba(0, 0, 0, 0.8) (dark with slight transparency)0px 14px{rounded.sm} (11px)3px solid rgba(0, 0, 0, 0.04) (hairline, almost invisible)42px349px (fixed in measured context)41px (for vertical centering)Filled Button (Small, Dark)
{typography.body-sm} (SF Pro Text, 14px, 400 weight)rgb(29, 29, 31) ({colors.body} darkness){colors.canvas} (#FFFFFF)8px 15px{rounded.xs} (8px)1px solid rgba(0, 0, 0, 0)36pxautoOutline Button
{typography.body-md} (SF Pro Text, 17px, 400 weight)rgba(0, 0, 0, 0) (transparent)rgb(0, 102, 204) (secondary blue #0066CC)11px 21px{rounded.full} (9999px)1px solid rgb(0, 102, 204)20pxautovar(--sk-button-color-hover))Icon Button
{typography.body-md} (SF Pro Text, 17px, 400 weight)rgba(210, 210, 215, 0.64) (light gray with transparency)rgba(0, 0, 0, 0.48) (muted dark)0px (square icon)50% (circle)0px24px24pxCard (Default / Transparent)
rgba(0, 0, 0, 0) (transparent){rounded.none} (0px — sharp)0px0pxrgba(0, 0, 0, 0.56) (muted){typography.caption-sm} (SF Pro Text, 12px, 400 weight)transform: scale(var(--card-element-scale))