Mercury design.md
A midnight bank lit by one soft periwinkle pill
A hushed, ink-blue dark site: a cinematic landscape photo for the hero, pale lavender-gray type in unusually light in-between weights, and one periwinkle pill button as the only action. Product UI appears as quiet dark panels and soft off-white cards, separated by hairlines rather than color.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/mercury/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Mercury, 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 mercury.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
arcadiaDisplay
Free substitute: Inter Tight 400/500 (Google Fonts)
arcadia
Free substitute: Inter (variable, 350–500) from Google Fonts
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 49px | 480 | 0 |
| heading | 42px | 480 | 0.42px |
| heading-sm | 32px | 480 | 0.48px |
| subheading | 28px | 360 | 0.42px |
| title | 24px | 480 | 0.48px |
| body-lg | 18px | 360 | 0 |
| body | 16px | 400 | 0 |
| button | 16px | 420 | 0 |
| caption | 12px | 400 | 0.24px |
- tags
- 4px
- cards
- 12px
- inputs
- 32px
- buttons
- 32px
The files
Loading…
Screenshots and measurements taken by Faundr from mercury.com for reference. Inspired by Mercury, not its official design system; Faundr isn’t affiliated with Mercury, 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.
