№ apple-com

Apple

Cool, spacious, minimalist; crisp sans serif geometry on a serene, light-filled expanse.

Split Studiominimalism swiss brutalism consumer tech ecommercelight

The page uses a full-bleed image of the MacBook Air to immediately showcase the product. Clean typography and ample white space create a sense of clarity and sophistication, emphasizing the product's design. · apple product page, macbook air, minimalist design, tech website, product showcase, split screen, clean interface, modern laptop

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · pastel

SwatchHexOKLCHSuggested roleCopy

Hex#0474e4
OKLCHoklch(57.0% 0.191 256)
RoleDominant
find sites →
Hex#205c7c
OKLCHoklch(45.1% 0.080 236)
RoleSurface
find sites →
Hex#94c6e2
OKLCHoklch(80.1% 0.066 233)
RoleInk
find sites →
Hex#6ca4ac
OKLCHoklch(68.3% 0.060 207)
RoleAccent
find sites →
Hex#9dbcca
OKLCHoklch(77.7% 0.039 227)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	SF Pro Text	34px	600	1.47	-0.374px	Aa Bb Cc
h2	SF Pro Text	12px	400	1.33	-0.12px	Aa Bb Cc
h3	SF Pro Display	40px	600	1.1	0	Aa Bb Cc
body	SF Pro Text	17px	400	1.47	-0.374px	Aa Bb Cc
caption	SF Pro Text	12px	400	1.33	-0.12px	Aa Bb Cc
button	SF Pro Text	17px	400	2.41	0	Aa Bb Cc

Spacing scale

10px

11px

12px

17px

20px

24px

26px

37px

44px

114px

Radius scale

0px

8px

11px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0474e4;
  --color-surface: #205c7c;
  --color-ink: #94c6e2;
  --color-accent: #6ca4ac;
  --color-detail: #9dbcca;
}

/* CSS variables exposed by source */
:root {
  --r-localnav-text-zoom-factor: 1;
  --r-localnav-viewport-small-min-width: 320px;
  --r-globalnav-background-opened: #fafafc;
  --hero-content-height: 692px;
  --sk-productred: rgb(175, 30, 45);
  --sk-footnote-reduced-offset-top: -.86em;
  --sk-enviro-green: rgb(0, 217, 89);
  --sk-body-text-color: rgb(29, 29, 31);
  --sk-body-font-stack: text;
  --sk-fill-secondary: rgb(250, 250, 252);
  --sk-fill-tertiary: rgb(245, 245, 247);
  --r-localnav-viewport-medium-min-width: 834px;
  --globalnav-height: 44px;
  --sk-fill-orange-secondary: rgb(255, 249, 244);
  --sk-link-disabled-opacity: 0.42;
  --media-gallery-dotnav-gap: 12px;
  --sk-footnote-font-size: 0.6em;
  --sk-fill-gray-secondary: rgb(134, 134, 139);
  --sk-fill-red: rgb(227, 0, 0);
  --sk-fill-green-secondary: rgb(245, 255, 246);
  --media-gallery-bottom-content-padding-right: 48px;
  --sk-paragraph-plus-element-margin: 0.8em;
  --r-sk-safe-area-inset-start: 0px;
  --r-localnav-gn-height: 44px;
  --sk-headline-plus-first-element-margin: 0.8em;
  --sk-fill: rgb(255, 255, 255);
  --r-localnav-viewport-large-query: min-width(1024px);
  --r-localeswitcher-height: 70px;
  --sk-glyph-orange: rgb(182, 68, 0);
  --sk-fill-orange: rgb(245, 99, 0);
  --r-globalmessage-segment-height: 0px;
  --sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72);
  --sk-paragraph-plus-headline-margin: 1.6em;
  --sk-glyph-red: rgb(227, 0, 0);
  --r-localnav-viewport-medium-max-width: 1023px;
  --sk-glyph-gray-secondary-alt: rgb(66, 66, 69);
  --sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88);
  --sk-focus-color: #0071e3;
  --media-gallery-tile-width: 930px;
  --media-gallery-section-padding-bottom: 12px;
  --sk-glyph-gray: rgb(29, 29, 31);
  --media-gallery-dotnav-iconcontrol-margin-right: calc(12px + 0px);
  --sk-glyph-gray-tertiary: rgb(134, 134, 139);
  --sk-fill-green: rgb(3, 161, 14);
  --r-globalnav-height: 44px;
  --globalnav-collective-height: calc(44px + 70px);
  --r-localnav-viewport-medium-query: min-width(834px);
  --sk-focus-offset: 1px;
  --r-sk-start: left;
  --sk-body-link-color: rgb(0, 102, 204);
  --r-localnav-viewport-small-max-width: 833px;
  --sk-enviro-neutral: rgb(232, 232, 237);
  --sk-fill-gray-tertiary: rgb(210, 210, 215);
  --media-gallery-tile-height: 523px;
  --media-gallery-slide-duration: 800ms;
  --fam-gallery-tile-height: 234px;
  --sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16);
  --sk-focus-color-alt: rgb(0, 0, 0);
  --media-gallery-bottom-content-padding-bottom: 40px;
  --sk-glyph-green: rgb(0, 128, 9);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Apple.
Reference design system (extracted from the live site):
- Palette: #0474e4, #205c7c, #94c6e2, #6ca4ac, #9dbcca
- Typefaces: SF Pro Text
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/apple-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

SF Pro Text

34px

600

1.47

-0.374px

Aa Bb Cc

SF Pro Text

12px

400

1.33

-0.12px

Aa Bb Cc

SF Pro Display

40px

600

1.1

Aa Bb Cc

body

SF Pro Text

17px

400

1.47

-0.374px

Aa Bb Cc

caption

SF Pro Text

12px

400

1.33

-0.12px

Aa Bb Cc

button

SF Pro Text

17px

400

2.41

Aa Bb Cc

:root { --color-dominant: #0474e4; --color-surface: #205c7c; --color-ink: #94c6e2; --color-accent: #6ca4ac; --color-detail: #9dbcca; } /* CSS variables exposed by source */ :root { --r-localnav-text-zoom-factor: 1; --r-localnav-viewport-small-min-width: 320px; --r-globalnav-background-opened: #fafafc; --hero-content-height: 692px; --sk-productred: rgb(175, 30, 45); --sk-footnote-reduced-offset-top: -.86em; --sk-enviro-green: rgb(0, 217, 89); --sk-body-text-color: rgb(29, 29, 31); --sk-body-font-stack: text; --sk-fill-secondary: rgb(250, 250, 252); --sk-fill-tertiary: rgb(245, 245, 247); --r-localnav-viewport-medium-min-width: 834px; --globalnav-height: 44px; --sk-fill-orange-secondary: rgb(255, 249, 244); --sk-link-disabled-opacity: 0.42; --media-gallery-dotnav-gap: 12px; --sk-footnote-font-size: 0.6em; --sk-fill-gray-secondary: rgb(134, 134, 139); --sk-fill-red: rgb(227, 0, 0); --sk-fill-green-secondary: rgb(245, 255, 246); --media-gallery-bottom-content-padding-right: 48px; --sk-paragraph-plus-element-margin: 0.8em; --r-sk-safe-area-inset-start: 0px; --r-localnav-gn-height: 44px; --sk-headline-plus-first-element-margin: 0.8em; --sk-fill: rgb(255, 255, 255); --r-localnav-viewport-large-query: min-width(1024px); --r-localeswitcher-height: 70px; --sk-glyph-orange: rgb(182, 68, 0); --sk-fill-orange: rgb(245, 99, 0); --r-globalmessage-segment-height: 0px; --sk-glyph-gray-secondary-alt-alpha: rgba(0, 0, 0, 0.72); --sk-paragraph-plus-headline-margin: 1.6em; --sk-glyph-red: rgb(227, 0, 0); --r-localnav-viewport-medium-max-width: 1023px; --sk-glyph-gray-secondary-alt: rgb(66, 66, 69); --sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88); --sk-focus-color: #0071e3; --media-gallery-tile-width: 930px; --media-gallery-section-padding-bottom: 12px; --sk-glyph-gray: rgb(29, 29, 31); --media-gallery-dotnav-iconcontrol-margin-right: calc(12px + 0px); --sk-glyph-gray-tertiary: rgb(134, 134, 139); --sk-fill-green: rgb(3, 161, 14); --r-globalnav-height: 44px; --globalnav-collective-height: calc(44px + 70px); --r-localnav-viewport-medium-query: min-width(834px); --sk-focus-offset: 1px; --r-sk-start: left; --sk-body-link-color: rgb(0, 102, 204); --r-localnav-viewport-small-max-width: 833px; --sk-enviro-neutral: rgb(232, 232, 237); --sk-fill-gray-tertiary: rgb(210, 210, 215); --media-gallery-tile-height: 523px; --media-gallery-slide-duration: 800ms; --fam-gallery-tile-height: 234px; --sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16); --sk-focus-color-alt: rgb(0, 0, 0); --media-gallery-bottom-content-padding-bottom: 40px; --sk-glyph-green: rgb(0, 128, 9); }

Build a landing page in the visual style of Apple. Reference design system (extracted from the live site): - Palette: #0474e4, #205c7c, #94c6e2, #6ca4ac, #9dbcca - Typefaces: SF Pro Text - Macrostructure: Split Studio Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/apple-com