Apple
light theme
Independent Style Review

Apple-Style Design System

The Apple design system uses a light-themed visual language. The primary brand color is Azure (#0071e3); text is Ink (#1d1d1f) on a Fog (#f5f5f7) background. Typography is set in SF Pro Display and SF Pro Text. This DESIGN.md contains 14 color tokens and a 8-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Apple.

Color Palette

FONTS

Typography

Component Previews

Independent Style Review

Apple-style design system: color codes and fonts

Theme
light
Primary color
Azure (#0071e3)
Fonts
SF Pro Display, SF Pro Text
Source
apple.com

Gallery wall at natural light — enormous type casts shadows on a white surface, color enters only as product.

Apple's MacBook Neo product page radiates cool luminosity — a gallery-white canvas where enormous weight-700 headlines at 80-96px dominate above feather-light body copy, creating a tension between mass and air. The page background stays #f5f5f7, one step off pure white, giving cards and content wells a surface-lift effect without any shadows. Negative letter-spacing tightens progressively with size — display headlines track at -0.022em while body text breathes at -0.003em, a signature move that makes large type feel chiseled rather than loose. The single interactive accent (#0071e3 CTA blue) appears only on the 'Buy' pill button and nav links, rationed so every appearance reads as an instruction to act. Product gradients — dark-to-citrus-green, dark-to-blue, dark-to-violet — serve as full-bleed theatrical backdrops for each color finish showcase, never decorating UI chrome.

Original style summary

Apple color codes

ColorHEXCSS tokenUsage
Ink#1d1d1f--color-inkPrimary text, headings, nav labels, icon fills — near-black with just enough warmth to avoid harshness on white
Graphite#707070--color-graphiteSecondary body copy, captions, footnotes, muted nav items
Slate#474747--color-slateTertiary body text, supporting link text, secondary nav
Ash#333333--color-ashIcon strokes, mid-weight body text, button labels in ghost state
Fog#f5f5f7--color-fogPage canvas background, section divider bands, badge fills
Snow#ffffff--color-snowCard surfaces, nav background, elevated container fills
Obsidian#000000--color-obsidianDark card variant, hero icon fills, maximum-contrast black card
Silver Mist#e8e8ed--color-silver-mistFrosted pill button background (country selector), input backgrounds
Azure#0071e3--color-azurePrimary CTA button fill, active nav 'Buy' button — the sole permission-to-act color on the entire page
Cobalt Link#0066cc--color-cobalt-linkInline text links, navigation anchor colors — slightly darker than Azure to distinguish interactive text from interactive buttons
Citrus Finish#dddc8c--color-citrus-finishProduct color swatch — Citrus finish selector chip
Blush Finish#e8d0d0--color-blush-finishProduct color swatch — Blush finish selector chip
Indigo Finish#596680--color-indigo-finishProduct color swatch — Indigo finish selector chip
Caution#b64400--color-cautionBadge warning text, price asterisk callouts — deep amber-orange for inline semantic alerts

Which fonts does Apple use?

FontWeightsFallback
SF Pro Display600, 700Inter, system-ui
SF Pro Text300, 400, 500, 600Inter, system-ui
RoleSizeLine heightToken
caption12px1.33--text-caption
body-sm14px1.43--text-body-sm
body17px1.47--text-body
subheading20px1.4--text-subheading
heading-sm24px1.29--text-heading-sm
heading40px1.17--text-heading
heading-lg56px1.07--text-heading-lg
display96px1.04--text-display

How do I use this DESIGN.md?

  1. Download the DESIGN.md file and place it in your project root.
  2. Tell Claude Code, Cursor, v0 or Google Stitch: “Design the UI following the rules in DESIGN.md.”
  3. Use Fork & Customize to adapt the colors, fonts or components to your own brand.

Raw DESIGN.md file →

This page is MakeMyMD's independent review of the colors, typography and spacing visible on Apple's public website (apple.com). It is not an official brand guideline; MakeMyMD is not affiliated with or endorsed by Apple. The Apple name and trademarks belong to their owner; no brand imagery, logos or copy are used. Rights holders can request removal at [email protected].

Design Systems

Similar design systems