Supabase design.md
Developer-clean white, one green that ships
A crisp developer page: white canvas, hairline-bordered bento cards, a geometric sans for headlines over Inter body, monospace snippets, and one deep green for the primary action and the second line of the hero.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/supabase/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Supabase, 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 supabase.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
Manrope
Free substitute: Manrope 450/500/600 (Google Fonts, free)
Inter
Free substitute: Inter 400/500 (Google Fonts, free)
Source Code Pro
Free substitute: Source Code Pro 500 (Google Fonts, free)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 46px | 500 | 0 |
| heading | 34px | 600 | 0 |
| lead | 22px | 450 | 0 |
| card-title | 16px | 600 | 0 |
| body-lg | 16px | 450 | 0 |
| body | 15px | 450 | 0 |
| button | 14px | 500 | 0 |
| mono | 13px | 500 | 0 |
| caption | 12px | 450 | 0 |
- tags
- 9999px
- cards
- 16px
- inputs
- 8px
- buttons
- 8px
The files
Loading…
Screenshots and measurements taken by Faundr from supabase.com for reference. Inspired by Supabase, not its official design system; Faundr isn’t affiliated with Supabase, 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.
