prism·mdthe design press

EXTRACTED · 10 SECTIONS · 27 COLORS · GRADE A 90/100

cursor.com

27 colours · CursorGothic woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json

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

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

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

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

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

Components — the closed vocabulary

16 component families · 77 variants counted on the live DOM

Component	Variants 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

Layout — structure & dimensions

4 layout metrics measured

max Width1300px

header Height52px

sidebar Width219px

container Padding0px

Responsive — real breakpoints

5 media-query stops read from the live CSS

600px

767px

768px

900px

1279px

Do's & Don'ts

22 enforceable rules pulled verbatim from the spec

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

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

A · Instrument B · Press