Typography
scale ratio 1.285- Cursor Gothiccss: CursorGothicdisplay40053%
- SF Pro (system-ui)css: system-uibody400 500 600 70031%
- Berkeley Monocss: berkeleyMonomono400 500 70014%
- Latoother400 6003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Cursor Gothic | 26px | 400 | 1.25 | -0.012em |
| headline | Cursor Gothic | 14px | 400 | 1.5 | 0.01em |
| title | Cursor Gothic | 22px | 400 | 1.3 | -0.005em |
| body | Cursor Gothic | 16px | 400 | 1.5 | 0em |
| body-sm | SF Pro (system-ui) | 13px | 400 | 1.55 | 0em |
| mono | Berkeley Mono | 12px | 400 | 1.667 | 0em |
Type scale
Aa11Aa12Aa13Aa14Aa16Aa19Aa20Aa22Aa26Aa36Aa72
- Body size
- 16px / 1.5
- Display size
- 26px
- Display tracking
- -0.012em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 13.60:1
- Muted on bg
- 4.00:1
- Accent on bg
- 3.11:1
- Dark mode
- follows system
Declared accent tokens
- --color-accent#F54E00painted
- --color-theme-accent#F54E00painted
Space, shape & depth
Spacing scale
- 2
- 3
- 4
- 4.5
- 5.5
- 6
- 7.5
- 8
- 10
- 12
- 13
- 15
- 16
- 17.5
Corner radii
4810pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 67px
Components
exact computed valuesbutton-primary
Download for macOS
- backgroundColor
- #26251E
- textColor
- #F7F7F4
- rounded
- 9999px
- padding
- 12.5px 21.6px
- height
- 43.3px
- fontFamily
- Cursor Gothic
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #26251E
button-secondary
Contact sales
- textColor
- #26251E
- rounded
- 9999px
- padding
- 5.6px 10.5px
- height
- 27.5px
- fontFamily
- Cursor Gothic
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #26251E33
card
- rounded
- 4px
- padding
- 15.9px
- backgroundColor
- #F2F1ED
Layout & motion
- Container
- 1300px
- Grid columns
- 23
- Hero
- left-aligned+media-below
- Navigation
- top-fixed
- Page height
- 8,199px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 120ms 150ms 200ms 600ms
- Transitions
- 89
- Keyframes
- 5
- Stack
- next.js, tailwind, google-tag-manager, vercel
Page sections (11)
01nav
02heroCursor is your coding agent for building ambitious software.
03logosTrusted every day by teams that build world-class software
04featuresView Behavior
05features#feature-realtime-sync
06testimonialsThe new way to build software.
07testimonialsAll Repos
08feature detailChangelog
09ctaRecent highlights
10ctaTry Cursor now.
11footerConnect
How Cursor compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 26px: smaller than 90% of indexed sites (median 60px).
- Type scale
- 1.28×: steeper than 50% of indexed sites (median 1.28×).
- Container
- 1300px: wider than 70% of indexed sites (median 1242px).
- Text contrast
- 13.6:1: lower than 82% of indexed sites (median 17.6:1).
- Page length
- 8,199px: shorter than 50% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Cursor Gothic
- The only site in the index that loads Cursor Gothic.
- Berkeley Mono
- One of 4 indexed sites that load Berkeley Mono (1%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Cursor use?
Cursor uses Cursor Gothic (loaded as "CursorGothic") for headings. SF Pro (system-ui) (loaded as "system-ui") is used for body text. Berkeley Mono (loaded as "berkeleyMono") is used for code.
What are Cursor's brand colors?
Cursor's website uses a light scheme: background #F2F1ED, surface #D9D5CF, text #26251E, muted text #26251E99 and borders #26251E1A.
How is Cursor's website laid out?
The most common corner radius is 4px, body text is 16px with 1.5 line height, and the page container is 1300px wide.
