Notion design.md
Black ink, warm paper and a highlighter pen
A friendly document on warm off-white paper: huge, tightly tracked black headlines in Inter, one highlighted word in a yellow pill, hand-drawn line doodles, a single blue for the main action and the product shown as calm, softly shadowed windows.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/notion/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Notion, 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 notion.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
NotionInter
Free substitute: Inter 400/500/600/700 (Google Fonts)
Lyon Text
Free substitute: Source Serif 4 400 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 96px | 600 | -4.6px |
| heading | 54px | 700 | -1.875px |
| heading-sm | 42px | 700 | -1.5px |
| card-title | 22px | 700 | -0.25px |
| lead | 20px | 400 | -0.125px |
| quote | 18px | 400 | 0 |
| body | 16px | 500 | 0 |
| button | 16px | 500 | 0 |
| ui | 14px | 500 | 0 |
| caption | 12px | 500 | 0.125px |
- tags
- 4px
- cards
- 12px
- inputs
- 8px
- buttons
- 8px
The files
Loading…
Screenshots and measurements taken by Faundr from notion.com for reference. Inspired by Notion, not its official design system; Faundr isn’t affiliated with Notion, 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.
