Apple design.md
Products on stage, one blue pill to buy them
A gallery of edge-to-edge product tiles that alternate black and pale gray, each with a centered name in SF Pro semibold, a one-line tagline, a pair of blue pill buttons and a huge product photo. No cards, no shadows, no decoration: the product is the only image and blue is the only action.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/apple/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Apple, measured from their site: follow its colors, fonts, corners and components on every screen you create or change. Where it calls for a paid font, use the free alternative the file names.
The real page
Captured from apple.com in English, at 1440 px wide.
Colors
Click a color to copy it. Roles are in English, as in the file.
Type and shape
SF Pro Display
Free substitute: Inter 400/600/700 (Google Fonts)
SF Pro Text
Free substitute: Inter 400/600 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 56px | 600 | -0.28px |
| heading | 40px | 600 | 0 |
| subheading | 28px | 400 | 0.196px |
| tagline | 21px | 400 | 0.231px |
| body | 17px | 400 | -0.374px |
| button | 17px | 400 | -0.374px |
| body-sm | 14px | 400 | -0.224px |
| caption | 12px | 400 | -0.12px |
- tags
- 980px
- cards
- 0px
- inputs
- 11px
- buttons
- 980px
The files
Loading…
Screenshots and measurements taken by Faundr from apple.com for reference. Inspired by Apple, not its official design system; Faundr isn’t affiliated with Apple, and the name and marks belong to it.
Faundr
A design.md only works if someone checks it.
Faundr reads your design.md and checks every screen your AI touches: colors off the guide, rebuilt components, clipped menus, broken mobile.
