Typography
scale ratio 1.184- Interdisplay + body400 500 60092%
- Geist Monocss: GeistMonomono300 400 5008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 64px | 600 | 1.1 | 0em |
| headline | Inter | 20px | 500 | 0.01em | |
| title | Inter | 16px | 500 | 1.5 | 0em |
| body | Inter | 14px | 500 | 1.714 | 0.014em |
| body-sm | Inter | 13px | 400 | 1.8 | 0em |
| mono | Geist Mono | 14px | 500 | 1.6 | 0.021em |
Type scale
Aa10Aa11Aa12Aa13Aa14Aa15Aa16Aa18Aa20Aa22Aa24Aa32Aa56Aa64
- Body size
- 14px / 1.6
- Display size
- 64px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 20.04:1
- Muted on bg
- 7.30:1
- Accent on bg
- 16.05:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 4
- 8
- 12
- 14.5
- 15
- 16
- 20
- 24
- 32
- 40
- 50
Corner radii
568111220pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 224px
Components
exact computed valuesbutton-primary
Download
- backgroundColor
- #E6E6E6
- textColor
- #2F3031
- rounded
- 8px
- padding
- 8px 12px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
- shadow
- rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px in
card
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #434345
- shadow
- rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px
input
- rounded
- 0px
- height
- 37.2px
- padding
- 0px 4px
Layout & motion
- Container
- 1204px
- Grid columns
- 2
- Hero
- centered
- Navigation
- none-detected
- Page height
- 15,932px
- Easing
- ease
- Durations
- 100ms 200ms 300ms 400ms
- Transitions
- 392
- Keyframes
- 5
- Stack
- next.js, vercel
Page sections (10)
section labels are heuristic
01heroYour shortcut to everything.
02feature detail?Take shortcuts, not detours.
03feature detail?There’s an extension for that.
04features?Meet your new virtual assistant
05feature detail?Built for professionals like you.
06feature detail?Don't repeat yourself.
07features?Meeting notes
09logosTake the short way.
10footer
How Raycast compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.18×: flatter than 89% of indexed sites (median 1.28×).
- Container
- 1204px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 20.0:1: higher than 77% of indexed sites (median 17.6:1).
- Page length
- 15,932px: longer than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly 11px, shared by 3 of 274 indexed sites (1%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Geist Mono
- One of 14 indexed sites that load Geist Mono (5%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Raycast use?
Raycast uses Inter for headings and body text. Geist Mono (loaded as "GeistMono") is used for code.
What are Raycast's brand colors?
Raycast's website uses a dark scheme: background #07080A, text #FFFFFF, muted text #9C9C9D and borders #1B1C1E.
How is Raycast's website laid out?
The most common corner radius is 11px, body text is 14px with 1.6 line height, and the page container is 1204px wide.
