№ developer-apple-com

Developer Apple

Deep navy expanse, stark geometric type, cool digital precision—a focused, powerful clarity.

Split Studiominimalism swiss brutalism dark mode developer toolsdark

The page uses a stark, high-contrast split-screen layout. The left side features a prominent call to action, while the right showcases developer videos. Typography is clean and functional, prioritizing clarity over ornamentation. · developer website, apple developer, coding platform, developer portal, tech website, developer tools, wdc26, developer videos

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: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#0ec3fb
OKLCHoklch(76.3% 0.147 228)
RoleDominant
find sites →
Hex#1c3c84
OKLCHoklch(37.7% 0.127 263)
RoleSurface
find sites →
Hex#4cd0f7
OKLCHoklch(80.1% 0.125 221)
RoleInk
find sites →
Hex#a6835f
OKLCHoklch(63.5% 0.066 67)
RoleAccent
find sites →
Hex#a3b0cc
OKLCHoklch(75.6% 0.043 266)
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
h2	SF Pro Text	12px	400	1.33	-0.12px	Aa Bb Cc
h3	SF Pro Display	32px	600	1.13	0.128px	Aa Bb Cc
body	SF Pro Text	17px	400	1.47	-0.374px	Aa Bb Cc
caption	SF Pro Display	21px	400	1.19	0.231px	Aa Bb Cc
button	SF Pro Text	14px	400	1.43	0	Aa Bb Cc

Spacing scale

6px

8px

9px

10px

18px

20px

21px

24px

26px

34px

40px

44px

51px

Radius scale

0px

5px

18px

28px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #0ec3fb;
  --color-surface: #1c3c84;
  --color-ink: #4cd0f7;
  --color-accent: #a6835f;
  --color-detail: #a3b0cc;
}

/* CSS variables exposed by source */
:root {
  --color-button-text: #fff;
  --r-globalnav-background-opened: #fafafc;
  --glyph-blue: #2997ff;
  --sk-productred: rgb(175, 30, 45);
  --sk-footnote-reduced-offset-top: -0.86em;
  --sk-enviro-green: rgb(0, 217, 89);
  --system-secondary: rgb(193, 193, 193);
  --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);
  --sk-fill-orange-secondary: rgb(255, 249, 244);
  --sk-link-disabled-opacity: 0.42;
  --sk-lockup-tiny-margin: 0.2em;
  --sk-footnote-font-size: 0.6em;
  --sk-fill-red: rgb(227, 0, 0);
  --sk-tile-padding: 2em 2.5em;
  --sk-fill-green-secondary: rgb(245, 255, 246);
  --sk-links-stacked-margin: 0.4em;
  --sk-fill-gray-secondary: rgb(134, 134, 139);
  --code-var: #027db0;
  --sk-paragraph-plus-element-margin: 0.8em;
  --r-sk-safe-area-inset-start: 0px;
  --sk-headline-plus-first-element-margin: 0.8em;
  --system-tertiary: rgb(123, 123, 123);
  --sk-fill: rgb(255, 255, 255);
  --sk-glyph-orange: rgb(182, 68, 0);
  --sk-fill-orange: rgb(245, 99, 0);
  --r-globalmessage-segment-height: 0px;
  --sc-gallery-side-padding: calc(
		50vw - min(980px, 87.5%) / 2
	);
  --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);
  --sk-glyph-gray-secondary-alt: rgb(66, 66, 69);
  --sk-lockup-elevated-margin: 1.4em;
  --sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88);
  --sk-focus-color: #0071e3;
  --sk-glyph-gray: rgb(29, 29, 31);
  --sk-glyph-gray-tertiary: rgb(134, 134, 139);
  --sc-viewport-content-responsive: 87.5%;
  --sk-fill-green: rgb(3, 161, 14);
  --r-globalnav-height: 44px;
  --r-sk-start: left;
  --sk-focus-offset: 1px;
  --sk-body-link-color: rgb(0, 102, 204);
  --sk-enviro-neutral: rgb(232, 232, 237);
  --sk-fill-gray-tertiary: rgb(210, 210, 215);
  --sc-section-content: 980px;
  --code-enum: #37799d;
  --sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16);
  --sk-focus-color-alt: rgb(0, 0, 0);
  --code-type: #22575c;
  --sk-lockup-reduced-margin: 1em;
  --sk-glyph-green: rgb(0, 128, 9);
  --code-preprocessor: #78492b;
  --code-background: #f9fafa;
  --sk-glyph: rgb(0, 0, 0);
  --sk-fill-gray-secondary-alpha: rgba(0, 0, 0, 0.48);
  --sk-fill-gray-alpha: rgba(0, 0, 0, 0.88);
  --sk-fill-gray-quaternary-alpha: rgba(0, 0, 0, 0.08);
}

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 Developer Apple.
Reference design system (extracted from the live site):
- Palette: #0ec3fb, #1c3c84, #4cd0f7, #a6835f, #a3b0cc
- 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/developer-apple-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

SF Pro Text

12px

400

1.33

-0.12px

Aa Bb Cc

SF Pro Display

32px

600

1.13

0.128px

Aa Bb Cc

body

SF Pro Text

17px

400

1.47

-0.374px

Aa Bb Cc

caption

SF Pro Display

21px

400

1.19

0.231px

Aa Bb Cc

button

SF Pro Text

14px

400

1.43

Aa Bb Cc

:root { --color-dominant: #0ec3fb; --color-surface: #1c3c84; --color-ink: #4cd0f7; --color-accent: #a6835f; --color-detail: #a3b0cc; } /* CSS variables exposed by source */ :root { --color-button-text: #fff; --r-globalnav-background-opened: #fafafc; --glyph-blue: #2997ff; --sk-productred: rgb(175, 30, 45); --sk-footnote-reduced-offset-top: -0.86em; --sk-enviro-green: rgb(0, 217, 89); --system-secondary: rgb(193, 193, 193); --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); --sk-fill-orange-secondary: rgb(255, 249, 244); --sk-link-disabled-opacity: 0.42; --sk-lockup-tiny-margin: 0.2em; --sk-footnote-font-size: 0.6em; --sk-fill-red: rgb(227, 0, 0); --sk-tile-padding: 2em 2.5em; --sk-fill-green-secondary: rgb(245, 255, 246); --sk-links-stacked-margin: 0.4em; --sk-fill-gray-secondary: rgb(134, 134, 139); --code-var: #027db0; --sk-paragraph-plus-element-margin: 0.8em; --r-sk-safe-area-inset-start: 0px; --sk-headline-plus-first-element-margin: 0.8em; --system-tertiary: rgb(123, 123, 123); --sk-fill: rgb(255, 255, 255); --sk-glyph-orange: rgb(182, 68, 0); --sk-fill-orange: rgb(245, 99, 0); --r-globalmessage-segment-height: 0px; --sc-gallery-side-padding: calc( 50vw - min(980px, 87.5%) / 2 ); --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); --sk-glyph-gray-secondary-alt: rgb(66, 66, 69); --sk-lockup-elevated-margin: 1.4em; --sk-glyph-gray-alpha: rgba(0, 0, 0, 0.88); --sk-focus-color: #0071e3; --sk-glyph-gray: rgb(29, 29, 31); --sk-glyph-gray-tertiary: rgb(134, 134, 139); --sc-viewport-content-responsive: 87.5%; --sk-fill-green: rgb(3, 161, 14); --r-globalnav-height: 44px; --r-sk-start: left; --sk-focus-offset: 1px; --sk-body-link-color: rgb(0, 102, 204); --sk-enviro-neutral: rgb(232, 232, 237); --sk-fill-gray-tertiary: rgb(210, 210, 215); --sc-section-content: 980px; --code-enum: #37799d; --sk-fill-gray-tertiary-alpha: rgba(0, 0, 0, 0.16); --sk-focus-color-alt: rgb(0, 0, 0); --code-type: #22575c; --sk-lockup-reduced-margin: 1em; --sk-glyph-green: rgb(0, 128, 9); --code-preprocessor: #78492b; --code-background: #f9fafa; --sk-glyph: rgb(0, 0, 0); --sk-fill-gray-secondary-alpha: rgba(0, 0, 0, 0.48); --sk-fill-gray-alpha: rgba(0, 0, 0, 0.88); --sk-fill-gray-quaternary-alpha: rgba(0, 0, 0, 0.08); }

Build a landing page in the visual style of Developer Apple. Reference design system (extracted from the live site): - Palette: #0ec3fb, #1c3c84, #4cd0f7, #a6835f, #a3b0cc - 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/developer-apple-com