Claude design.md
A literary serif on warm ivory paper, inked in near-black
A calm, bookish page: warm ivory canvas, light serif headlines, quiet warm-gray sans for everything else, near-black ink for the only action color, and a small clay-orange spark kept for the logo and rare accents.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/claude/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Claude, 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 claude.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
anthropicSerif
Free substitute: Source Serif 4 300/400/500 (Google Fonts)
anthropicSans
Free substitute: DM Sans 400/500/600 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 56px | 330 | 0 |
| heading | 52px | 500 | 0 |
| heading-sm | 32px | 500 | 0 |
| price | 24px | 600 | 0 |
| subheading | 19px | 500 | 0 |
| question | 18px | 400 | 0 |
| body-lg | 17px | 400 | 0 |
| body | 15px | 400 | 0 |
| button | 15px | 500 | 0 |
| caption | 12px | 400 | 0.12px |
- tags
- 12px
- cards
- 24px
- inputs
- 9.6px
- buttons
- 8px
The files
Loading…
Screenshots and measurements taken by Faundr from claude.com for reference. Inspired by Claude, not its official design system; Faundr isn’t affiliated with Claude, 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.
