Skip to content
Browse
Library

Apple iPhone 18 Pro. Midnight hardware gallery.

  • Commerce
  • Dark theme
  • 13 colors
  • 2 typefaces

Apple — a black-stage product reveal where oversized SF Pro Display headlines sit beneath meticulously rendered hardware imagery. The page moves between absolute black hero scenes, charcoal information bands, and occasional white comparison surfaces; blue is reserved for purchase and navigational links while burgundy product finishes stay inside the device storytelling. Broad 28px media corners, near-invisible elevation, compact utility navigation, and dense product-detail modules make the interface feel like a controlled exhibition rather than a conventional card-based storefront.

Visit apple.com
Screenshot of Apple iPhone 18 Pro
Captured from apple.com on October 11, 2026

Apple iPhone 18 Pro design system

Apple iPhone 18 Pro

Brand1

  • Filled Buy and Learn More controls — a concentrated blue punctuates the otherwise monochrome purchase path

Accent3

  • Links on black and charcoal surfaces, including inline learning paths and section navigation

  • Links on pale surfaces and footer-like utility contexts

  • Technical camera-spec emphasis within product storytelling

Neutrals8

  • Hero canvas, full-bleed media stages, feature-tile backgrounds, and dark product controls

  • Raised navigation and near-black control surfaces

  • Charcoal content bands, comparison panels, and dark text on white sections

  • Hairline card borders, translucent control fills, and dark chrome

  • Input outlines, secondary dividers, and subdued interface text

  • Muted explanatory copy, inactive labels, and subdued metadata

  • Primary text on dark surfaces and pale alternate section backgrounds

  • High-contrast dark-surface text, bright comparison cards, and icon details

semantic1

  • Small New labels and release-status annotations

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

White on Apple Blue

4.70 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.