Business

Apple

apple.com12 colors6 componentsSF Pro TextMulti-page · 12 screens

Remix Visit

Remix

Visit

12 screenshots captured· apple.com

1 / 12 · Apple · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from apple.com

Primary

#0071E3

Primary CTA, brand accent, active state

#2997FF

Secondary accent / hero band

#0066CC

Accent / decorative

#B64400

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#F5F5F7

Card / panel background

#000000

Headings / primary text

#1D1D1F

Body copy

#6E6E73

Captions, secondary text

#86868B

Tertiary / placeholder text

#D2D2D7

1px borders and dividers

#333336

Neutral

Typography · SF Pro Text

body17px · 400 · 20.0002px

button17px · 400 · 41px

link12px · 400 · 12px

list-item12px · 400 · 16.0005px

caption12px · 600 · 16.0005px

body14px · 400 · 18.0008px

body17px · 600 · 25px

body14px · 600 · 18.0008px

h314.04px · 600 · 18.7206px

button17px · 400 · 20.0002px

button14px · 400 · 18.0008px

caption10px · 600 · 12px

Typography · SF Pro Display

body21px · 400 · 25px

h148px · 600 · 52.0077px

h224px · 600 · 28px

h328px · 600 · 32.0001px

h180px · 600 · 84px

h248px · 600 · 52.0077px

h256px · 600 · 60px

h340px · 600 · 44px

heading28px · 400 · 32px

body21px · 700 · 25px

body19px · 400 · 23px

h164px · 600 · 68px

h240px · 600 · 44px

h419px · 600 · 23.0001px

h332px · 600 · 36px

heading28px · 600 · 32px

Spacing

24px

44px

40px

20px

16px

84px

32px

88px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 1px inset

Components · 6

Remixes of Apple

Latest remixes

No public remixes yet. Be the first to make one.

Remix it