Figma design.md
Black and white chrome, all the color left to the work
A gallery wall: pure white canvas, pure black type in one regular weight, black buttons with 8px corners and no accent color at all, so the vivid design work in the media tiles carries every bit of color.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/figma/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Figma, 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 figma.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
figmaSans
Free substitute: Inter 300/400 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display-xl | 88px | 400 | -1.25px |
| display | 56px | 400 | -1.25px |
| heading-lg | 44px | 400 | -0.66px |
| heading | 30px | 400 | -0.66px |
| button | 18px | 330 | 0 |
| body | 16px | 400 | 0 |
| small | 14px | 400 | 0 |
- tags
- 9999px
- cards
- 24px
- inputs
- 8px
- buttons
- 8px
The files
Loading…
Screenshots and measurements taken by Faundr from figma.com for reference. Inspired by Figma, not its official design system; Faundr isn’t affiliated with Figma, 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.
