Raycast design.md
A launcher's glow in a near-black room, struck by one red
A native-app look on the web: near-black canvas, white Inter set medium, gray text made from white at lower opacity, and a light-gray keycap button as the only action. Raycast red lives in the hero light streaks, the logo and tiny eyebrows; product windows float in glassy, deeply shadowed frames.
What “Use in my project” copies
Download https://faundr.dev/resources/design-md/raycast/DESIGN.md and save it as design.md at the project root. It's a design guide inspired by Raycast, 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 raycast.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
Inter
Free substitute: Inter (Google Fonts, free; it is the original)
GeistMono
Free substitute: Geist Mono 400 (Google Fonts)
| Role | Size | Weight | Tracking |
|---|---|---|---|
| display | 64px | 600 | 0 |
| heading | 32px | 500 | -0.8px |
| heading-sm | 24px | 500 | 0.2px |
| section-title | 20px | 500 | 0.2px |
| body-lg | 18px | 400 | 0.18px |
| body | 16px | 500 | 0 |
| button | 14px | 500 | 0.2px |
| caption | 13px | 400 | 0.1px |
- tags
- 1000px
- cards
- 20px
- inputs
- 8px
- buttons
- 8px
The files
Loading…
Screenshots and measurements taken by Faundr from raycast.com for reference. Inspired by Raycast, not its official design system; Faundr isn’t affiliated with Raycast, 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.
