Nike design.md
Shouting condensed capitals over full-bleed athletes, on a plain white shelf
A retail page that steps aside for photography: full-bleed campaign images with huge condensed uppercase headlines in white, small white pill buttons, and a neutral white-and-light-gray shelf for products. The UI is black, white and gray; all color comes from the athletes.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/nike/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Nike, 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 nike.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
Nike Futura ND
Free substitute: Anton 400 (Google Fonts)
Helvetica Now Display
Free substitute: Inter 500 (Google Fonts)
Helvetica Now Text
Free substitute: Inter 400/500 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 76px | 500 | 0 |
| heading | 24px | 500 | 0 |
| body | 16px | 400 | 0 |
| nav | 16px | 500 | 0 |
| button | 16px | 500 | 0 |
| body-sm | 14px | 500 | 0 |
| caption | 12px | 500 | 0 |
- tags
- 30px
- cards
- 0px
- inputs
- 24px
- buttons
- 30px
The files
Loading…
Screenshots and measurements taken by Faundr from nike.com for reference. Inspired by Nike, not its official design system; Faundr isn’t affiliated with Nike, 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.
