Prism prismd.fr
Extracted · 10 sections · 27 colors · grade A

cursor.com

Accent #1f8a65 · CursorGothic — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

27
colors
21
faces
10
shadows
19
keyframes
Get DESIGN.md tokens.json Repeindre ce design
cursor.com
rendu réel · source de vérité

cursor.com is built on a warm, off-white canvas (rgb(247, 247, 244)). The system uses rgb(38, 37, 30) as a near-neutral accent (low saturation). Crisp CTAs (3.35544e+07px radius) reinforce a precise, technical aesthetic alongside CursorGothic as the primary typeface. CursorGothic is paired with CursorGothic Fallback for secondary roles. A layered elevation system (10 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 19 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

27 colors measured · click any swatch to copy

Canvas
#f7f7f4
AAA 14.33:1
Ink
#26251e
AAA 14.33:1
Accent
#26251e
AAA 14.33:1
Line
#e6e5e0
Fail 1.18:1
Semantic states
error#cf2d56success#1f8a65warning#f54e00

3 semantic roles found.

27 colors mined from the live renderexpand
02

Type — the ladder, in the real face

4 roles · rendered live in the real CursorGothic (captured woff2) · lines are editable, click any spec to copy

display xl
display-xl26px · 400
display md
display-md22px · 400 · ×1.18
body
body16px · 400 · ×1.38
mono
mono13px · 400 · ×1.23
03

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale
xxs · 2px
xs · 6px
sm · 8px
md · 13px
base · 15px
lg · 22px
xl · 30px
2xl · 49px
3xl · 67px
Radius
none
0px
xs
4px
sm
8px
md
12px
lg
20px
xl
32px
full
9999px
04

Depth — elevation is extracted, not invented

10 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
05

Motion — easings, transitions & live keyframes

5 easing curves · 19 keyframes · hover a tile to preview

Easing & transitions
transition-2cubic-bezier(0.4, 0, 0.2, 1)
transition-3cubic-bezier(0.25, 1, 0.5, 1)
ease-out-springcubic-bezier(.25, 1, .5, 1)
default-transition-timing-functioncubic-bezier(.4, 0, .2, 1)
ease-outcubic-bezier(0, 0, .2, 1)
19 keyframe animations extracted
newsletter-submit-pulse
gallery-marquee-item-slide-up
spin
pulse
pulse-emit
pulse-bit
swipe-out-left
swipe-out-right
swipe-out-up
swipe-out-down
sonner-fade-in
sonner-fade-out
06

Components — the closed vocabulary

16 component families · 77 variants counted on the live DOM

ComponentVariants found
buttons×10
cards×10
tabs×10
links×10
nav Links×8
heading H2×7
code Block×6
heading H3×4
inputs×2
status Badge×2
footer Links×2
avatar×2
badges×1
heading H1×1
captions×1
skeleton×1
Component style specs (§4)expand

Buttons

Pill

  • Background: #26251e {colors.primary-focus}
  • Text: #f7f7f4 {colors.background}
  • Padding: 5.6px 10.5px 5.88px
  • Radius: 9999px
  • Border: 1px solid rgb(38, 37, 30)
  • Font: 14px weight 400
  • Use: Status pills, tags, chips
  • Focus: outline: rgb(38, 37, 30) solid 2px

Ghost

  • Background: transparent
  • Text: #26251e {colors.primary-focus}
  • Padding: 5.6px 15px
  • Radius: 0px
  • Border: 1px solid rgba(0, 0, 0, 0)
  • Font: 14px weight 400
  • Use: Subtle action, toolbar, nav button
  • Focus: outline: rgb(38, 37, 30) solid 2px

Outline

  • Background: transparent
  • Text: #26251e {colors.primary-focus}
  • Padding: 5.6px 10.5px 5.88px
  • Radius: 9999px
  • Border: 1px solid oklab(0.263084 -0.00230259 0.0124794 / 0.2)
  • Font: 14px weight 400
  • Use: Secondary action with border
  • Focus: outline: rgb(38, 37, 30) solid 2px

Secondary

  • Background: #26251e {colors.primary-focus}
  • Text: #f7f7f4 {colors.background}
  • Padding: 12.48px 21.6px 12.8px
  • Radius: 9999px
  • Border: 1px solid rgb(38, 37, 30)
  • Font: 16px weight 400
  • Use: Secondary action
  • Focus: outline: rgb(38, 37, 30) solid 2px

Icon Button

  • Background: transparent
  • Text: #f7f7f4 {colors.background}
  • Padding: 0px 0px 0px 4px
  • Radius: 0px
  • Font: 16px weight 400
  • Use: Toolbar/UI icons
  • Focus: outline: rgb(38, 37, 30) solid 2px

Secondary

  • Background: #e6e5e0 {colors.hairline}
  • Text: #26251e {colors.primary-focus}
  • Padding: 12.48px 21.6px 12.8px
  • Radius: 9999px
  • Border: 1px solid oklab(0.263084 -0.00230259 0.0124794 / 0.025)
  • Font: 16px weight 400
  • Use: Secondary action
  • Focus: outline: rgb(38, 37, 30) solid 2px
07

Layout — structure & dimensions

4 layout metrics measured

header 52px 1300px max-width
max Width1300px
header Height52px
sidebar Width219px
container Padding0px
08

Responsive — real breakpoints

5 media-query stops read from the live CSS

600px
767px
768px
900px
1279px
09

Do's & Don'ts

22 enforceable rules pulled verbatim from the spec

Do
Use Off-White (`#f7f7f4`) as the page background — it's intentionally not pure white
Use Text Primary (`#26251e`) for text — not pure black, it's warmer and more readable
Use CursorGothic as the primary typeface — it defines the brand personality
Use negative letter-spacing (-0.325px) at display sizes for compressed, editorial headlines
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Text Primary (`#26251e`) as the primary accent — it's the brand's signature interactive color
Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
Apply 7.9px 15px 12.8px padding inside cards — matches the design system's content breathing room
Use 4px border-radius on cards — consistent with the grid card corners
Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
Include exactly 8 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
Each card uses an icon (not photo) — the visual language is illustrative, not photographic
Lay out testimonials in a grid (6+ items) — quantity signals scale and trust
Build a content-dense footer (5 columns, ~33 links) — this site treats the footer as a sitemap, not an afterthought
Don't
Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't increase letter-spacing on headings — the type is designed to run tight at scale
Don't invent new shadow values — use only the extracted shadow levels
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard
Don't make the nav sticky — this design lets it scroll away to maximize content focus
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the cursor.com design system. Canvas #f7f7f4 · ink #26251e · accent #26251e. Type: CursorGothic — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.
Every value above was getComputedStyle-verified.
$ npx prismd add cursor
DESIGN.md · narrative spec tokens.json