Framer design.md
A black canvas where the product is the only light source
A pure-black, near-monochrome studio: white type in tight geometric headlines, gray Inter for everything else, small white 8px buttons, and one electric blue that belongs to the editor itself — frames, selections and the Publish button glowing out of the dark.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/framer/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Framer, 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 framer.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
GT Walsheim
Free substitute: Figtree 500 (Google Fonts)
Inter
Free substitute: Inter (Google Fonts, same family)
Input Mono
Free substitute: JetBrains Mono 400/700 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 54px | 500 | -2.16px |
| heading | 44px | 500 | -1.76px |
| body-lg | 18px | 400 | -0.2px |
| body | 15px | 400 | -0.1px |
| body-sm | 14px | 400 | -0.1px |
| label | 13px | 500 | 0 |
| button | 14px | 500 | 0 |
| mono | 12px | 400 | 0 |
| caption | 12px | 500 | 0 |
- tags
- 100px
- cards
- 20px
- inputs
- 8px
- buttons
- 8px
The files
Loading…
Screenshots and measurements taken by Faundr from framer.com for reference. Inspired by Framer, not its official design system; Faundr isn’t affiliated with Framer, 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.
