oh-my-design-cli 1.8.7 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/hooks/lib/preferences-parser.cjs +1 -0
- package/.claude/hooks/lib/preferences-writer.cjs +1 -0
- package/.claude/hooks/post-edit-watch.cjs +1 -0
- package/.claude/hooks/session-end-foldin.cjs +1 -0
- package/.claude/hooks/session-state-loader.cjs +1 -0
- package/.claude/hooks/skill-activation.cjs +1 -0
- package/.claude/settings.json +10 -1
- package/.github/assets/logo-bg.png +0 -0
- package/AGENTS.md +20 -1
- package/CHANGELOG.md +482 -0
- package/MIGRATION.md +103 -0
- package/README.ja.md +56 -19
- package/README.ko.md +47 -30
- package/README.md +48 -30
- package/README.zh-TW.md +59 -22
- package/agents/AGENT.md +8 -7
- package/agents/omd-codex-image.md +1 -1
- package/agents/omd-critic.md +6 -7
- package/agents/omd-designer-review.md +1 -1
- package/agents/omd-final-qa.md +1 -1
- package/agents/omd-humanizer.md +38 -0
- package/agents/omd-kr-writer.md +3 -4
- package/agents/omd-locale-adapter.md +12 -16
- package/agents/omd-master.md +24 -19
- package/agents/omd-microcopy.md +1 -1
- package/agents/omd-orchestrator.md +7 -8
- package/agents/omd-slop-auditor.md +31 -0
- package/agents/omd-ux-researcher.md +1 -1
- package/data/reference-fingerprints.json +1995 -38
- package/dist/bin/oh-my-design.js +16 -8
- package/dist/bin/oh-my-design.js.map +1 -1
- package/dist/chunk-UJIHCEYF.js +99 -0
- package/dist/chunk-UJIHCEYF.js.map +1 -0
- package/dist/doctor-LDWSFM3I.js +763 -0
- package/dist/doctor-LDWSFM3I.js.map +1 -0
- package/dist/install-skills-ZZFNJ2II.js +1120 -0
- package/dist/install-skills-ZZFNJ2II.js.map +1 -0
- package/docs/CLI_QUICKSTART.md +157 -0
- package/package.json +25 -4
- package/scripts/postinstall.cjs +5 -4
- package/skills/claude-design/SKILL.md +38 -14
- package/skills/claude-design/references/claude-design-flow.md +11 -11
- package/skills/claude-design/references/codebase-analysis.md +5 -4
- package/skills/omd-final-qa/SKILL.md +1 -1
- package/skills/omd-harness/SKILL.md +51 -50
- package/skills/omd-humanize/SKILL.md +116 -0
- package/skills/omd-humanize/agents/openai.yaml +4 -0
- package/skills/omd-humanize/references/locale-playbooks.md +102 -0
- package/skills/omd-humanize/references/sources.md +11 -0
- package/skills/omd-init/SKILL.md +18 -12
- package/skills/omd-locale-adapter/SKILL.md +58 -91
- package/skills/omd-orchestrator/SKILL.md +11 -5
- package/skills/omd-reference-capture/SKILL.md +80 -26
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
- package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
- package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
- package/skills/omd-slop-audit/SKILL.md +110 -0
- package/skills/omd-slop-audit/agents/openai.yaml +4 -0
- package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
- package/skills/omd-slop-audit/references/sources.md +24 -0
- package/web/references/104/DESIGN.md +354 -0
- package/web/references/11st/DESIGN.md +197 -316
- package/web/references/29cm/DESIGN.md +297 -393
- package/web/references/42dot/DESIGN.md +390 -0
- package/web/references/8percent/DESIGN.md +438 -0
- package/web/references/ably/DESIGN.md +267 -572
- package/web/references/acer/DESIGN.md +329 -0
- package/web/references/airbnb/DESIGN.md +219 -557
- package/web/references/alipay/DESIGN.md +179 -420
- package/web/references/apple/DESIGN.md +224 -498
- package/web/references/asleep/DESIGN.md +402 -0
- package/web/references/au/DESIGN.md +334 -0
- package/web/references/autopedia/DESIGN.md +382 -0
- package/web/references/aws-cloudscape/DESIGN.md +241 -0
- package/web/references/baemin/DESIGN.md +332 -491
- package/web/references/banksalad/DESIGN.md +269 -180
- package/web/references/barogo/DESIGN.md +416 -0
- package/web/references/beusable/DESIGN.md +464 -0
- package/web/references/bilibili/DESIGN.md +206 -374
- package/web/references/bmw/DESIGN.md +162 -276
- package/web/references/brandi/DESIGN.md +184 -325
- package/web/references/catchtable/DESIGN.md +219 -264
- package/web/references/cgv/DESIGN.md +317 -0
- package/web/references/channeltalk/DESIGN.md +210 -336
- package/web/references/china-airlines/DESIGN.md +291 -0
- package/web/references/cjonstyle/DESIGN.md +453 -0
- package/web/references/class101/DESIGN.md +168 -387
- package/web/references/classum/DESIGN.md +228 -203
- package/web/references/claude/DESIGN.md +242 -479
- package/web/references/clay/DESIGN.md +179 -377
- package/web/references/clickhouse/DESIGN.md +254 -343
- package/web/references/cohere/DESIGN.md +214 -324
- package/web/references/coinone/DESIGN.md +199 -179
- package/web/references/corca/DESIGN.md +414 -0
- package/web/references/coupang/DESIGN.md +205 -475
- package/web/references/cursor/DESIGN.md +240 -381
- package/web/references/dabang/DESIGN.md +248 -213
- package/web/references/dable/DESIGN.md +431 -0
- package/web/references/datarize/DESIGN.md +217 -330
- package/web/references/dealicious/DESIGN.md +402 -0
- package/web/references/drdiary/DESIGN.md +404 -0
- package/web/references/elastic/DESIGN.md +238 -0
- package/web/references/elevenlabs/DESIGN.md +183 -321
- package/web/references/eslite/DESIGN.md +257 -0
- package/web/references/evaair/DESIGN.md +338 -0
- package/web/references/expo/DESIGN.md +238 -331
- package/web/references/familymart-tw/DESIGN.md +254 -0
- package/web/references/ferrari/DESIGN.md +160 -377
- package/web/references/figma/DESIGN.md +197 -451
- package/web/references/fitpet/DESIGN.md +445 -0
- package/web/references/flex/DESIGN.md +170 -253
- package/web/references/framer/DESIGN.md +197 -340
- package/web/references/freee/DESIGN.md +211 -533
- package/web/references/friendliai/DESIGN.md +431 -0
- package/web/references/frip/DESIGN.md +440 -0
- package/web/references/gangnamunni/DESIGN.md +154 -591
- package/web/references/gaudiolab/DESIGN.md +414 -0
- package/web/references/google/DESIGN.md +290 -398
- package/web/references/hashicorp/DESIGN.md +273 -318
- package/web/references/heydealer/DESIGN.md +429 -0
- package/web/references/humanscape/DESIGN.md +433 -0
- package/web/references/hyundai/DESIGN.md +158 -368
- package/web/references/hyundaicard/DESIGN.md +171 -121
- package/web/references/ibm/DESIGN.md +227 -378
- package/web/references/idus/DESIGN.md +450 -0
- package/web/references/igaworks/DESIGN.md +437 -0
- package/web/references/inflearn/DESIGN.md +221 -366
- package/web/references/intuit/DESIGN.md +244 -0
- package/web/references/jandi/DESIGN.md +191 -291
- package/web/references/jobplanet/DESIGN.md +415 -0
- package/web/references/kakao/DESIGN.md +287 -475
- package/web/references/kakaobank/DESIGN.md +220 -521
- package/web/references/kakaogames/DESIGN.md +220 -0
- package/web/references/kakaopay/DESIGN.md +207 -526
- package/web/references/karrot/DESIGN.md +227 -251
- package/web/references/kb-kookmin/DESIGN.md +308 -0
- package/web/references/kbank/DESIGN.md +220 -175
- package/web/references/kmong/DESIGN.md +281 -356
- package/web/references/krds/DESIGN.md +245 -19
- package/web/references/kream/DESIGN.md +224 -359
- package/web/references/kurly/DESIGN.md +211 -533
- package/web/references/lamborghini/DESIGN.md +198 -360
- package/web/references/lguplus/DESIGN.md +259 -0
- package/web/references/likelion/DESIGN.md +283 -0
- package/web/references/line/DESIGN.md +396 -355
- package/web/references/linear.app/DESIGN.md +209 -562
- package/web/references/lotteon/DESIGN.md +386 -0
- package/web/references/lovable/DESIGN.md +255 -349
- package/web/references/makinarocks/DESIGN.md +149 -349
- package/web/references/maum-ai/DESIGN.md +423 -0
- package/web/references/medibloc/DESIGN.md +425 -0
- package/web/references/megabox/DESIGN.md +232 -0
- package/web/references/mercari/DESIGN.md +217 -434
- package/web/references/microsoft/DESIGN.md +234 -388
- package/web/references/mildang/DESIGN.md +411 -0
- package/web/references/millie/DESIGN.md +183 -504
- package/web/references/minimax/DESIGN.md +264 -322
- package/web/references/miricanvas/DESIGN.md +182 -355
- package/web/references/miro/DESIGN.md +234 -232
- package/web/references/mistral.ai/DESIGN.md +231 -314
- package/web/references/mixi/DESIGN.md +234 -0
- package/web/references/moin/DESIGN.md +445 -0
- package/web/references/mongodb/DESIGN.md +219 -316
- package/web/references/musinsa/DESIGN.md +184 -510
- package/web/references/mynavi/DESIGN.md +242 -0
- package/web/references/myrealtrip/DESIGN.md +169 -406
- package/web/references/naver/DESIGN.md +328 -499
- package/web/references/naverwebtoon/DESIGN.md +172 -395
- package/web/references/nhn/DESIGN.md +169 -346
- package/web/references/nhncloud/DESIGN.md +185 -123
- package/web/references/notion/DESIGN.md +271 -475
- package/web/references/nrise/DESIGN.md +417 -0
- package/web/references/ohouse/DESIGN.md +210 -549
- package/web/references/oliveyoung/DESIGN.md +217 -326
- package/web/references/ollama/DESIGN.md +241 -308
- package/web/references/onestore/DESIGN.md +248 -0
- package/web/references/palantir/DESIGN.md +256 -0
- package/web/references/panasonic/DESIGN.md +276 -0
- package/web/references/patternfly/DESIGN.md +259 -0
- package/web/references/payhere/DESIGN.md +438 -0
- package/web/references/pega/DESIGN.md +262 -0
- package/web/references/peoplefund/DESIGN.md +431 -0
- package/web/references/petfriends/DESIGN.md +428 -0
- package/web/references/pinkfong/DESIGN.md +199 -367
- package/web/references/pinterest/DESIGN.md +258 -308
- package/web/references/poya/DESIGN.md +286 -0
- package/web/references/pozalabs/DESIGN.md +438 -0
- package/web/references/protopie/DESIGN.md +419 -0
- package/web/references/qraft/DESIGN.md +448 -0
- package/web/references/quotabook/DESIGN.md +449 -0
- package/web/references/recruit/DESIGN.md +247 -0
- package/web/references/remember/DESIGN.md +202 -396
- package/web/references/resend/DESIGN.md +274 -348
- package/web/references/sakura-internet/DESIGN.md +269 -0
- package/web/references/samsung/DESIGN.md +157 -359
- package/web/references/sandoll/DESIGN.md +445 -0
- package/web/references/sanity/DESIGN.md +241 -375
- package/web/references/scatterlab/DESIGN.md +412 -0
- package/web/references/selectstar/DESIGN.md +439 -0
- package/web/references/servicenow/DESIGN.md +289 -0
- package/web/references/shinhanbank/DESIGN.md +161 -341
- package/web/references/shinhancard/DESIGN.md +208 -319
- package/web/references/sionic/DESIGN.md +454 -0
- package/web/references/sktelecom/DESIGN.md +310 -0
- package/web/references/socar/DESIGN.md +125 -32
- package/web/references/softbank/DESIGN.md +231 -0
- package/web/references/sony/DESIGN.md +234 -0
- package/web/references/soop/DESIGN.md +261 -0
- package/web/references/spacex/DESIGN.md +184 -323
- package/web/references/spotify/DESIGN.md +253 -394
- package/web/references/squeezebits/DESIGN.md +441 -0
- package/web/references/stayfolio/DESIGN.md +422 -0
- package/web/references/stripe/DESIGN.md +212 -491
- package/web/references/supabase/DESIGN.md +244 -316
- package/web/references/tabling/DESIGN.md +415 -0
- package/web/references/taishinbank/DESIGN.md +243 -0
- package/web/references/teamlab/DESIGN.md +240 -0
- package/web/references/teamsparta/DESIGN.md +472 -0
- package/web/references/tellingme/DESIGN.md +392 -0
- package/web/references/tesla/DESIGN.md +244 -427
- package/web/references/thsr/DESIGN.md +284 -0
- package/web/references/thumbtack/DESIGN.md +302 -0
- package/web/references/together.ai/DESIGN.md +257 -304
- package/web/references/toss/DESIGN.md +251 -593
- package/web/references/toss-securities/DESIGN.md +255 -178
- package/web/references/tossbank/DESIGN.md +195 -491
- package/web/references/toyota/DESIGN.md +238 -0
- package/web/references/tving/DESIGN.md +197 -245
- package/web/references/typed/DESIGN.md +413 -0
- package/web/references/uber/DESIGN.md +256 -333
- package/web/references/udn/DESIGN.md +250 -0
- package/web/references/upbit/DESIGN.md +145 -256
- package/web/references/upstage/DESIGN.md +211 -204
- package/web/references/uswds/DESIGN.md +287 -0
- package/web/references/vercel/DESIGN.md +236 -440
- package/web/references/wanted/DESIGN.md +215 -487
- package/web/references/wise/DESIGN.md +223 -231
- package/web/references/wisetracker/DESIGN.md +462 -0
- package/web/references/wooribank/DESIGN.md +245 -0
- package/web/references/yanolja/DESIGN.md +250 -419
- package/web/references/yeogiotte/DESIGN.md +235 -418
- package/web/references/zapier/DESIGN.md +256 -377
- package/web/references/zendesk/DESIGN.md +288 -0
- package/web/references/zigzag/DESIGN.md +200 -621
- package/dist/install-skills-7UUDOLG2.js +0 -734
- package/dist/install-skills-7UUDOLG2.js.map +0 -1
|
@@ -4,457 +4,316 @@ name: Cursor
|
|
|
4
4
|
country: US
|
|
5
5
|
category: developer-tools
|
|
6
6
|
homepage: "https://www.cursor.com"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
primary_color: "#26251e"
|
|
8
8
|
logo:
|
|
9
9
|
type: simpleicons
|
|
10
10
|
slug: cursor
|
|
11
|
-
verified: "2026-
|
|
11
|
+
verified: "2026-07-13"
|
|
12
12
|
omd: "0.1"
|
|
13
13
|
ds:
|
|
14
14
|
name: Cursor Brand
|
|
15
|
-
url: "https://
|
|
15
|
+
url: "https://cursor.com/en-US/brand"
|
|
16
16
|
type: brand
|
|
17
|
-
description:
|
|
17
|
+
description: Official brand guidance for Cursor names and distributed logo, icon, and avatar assets.
|
|
18
18
|
og_image: "https://cursor.com/public/opengraph-image.png"
|
|
19
|
+
verification_v2:
|
|
20
|
+
schema: 2
|
|
21
|
+
checked: "2026-07-13"
|
|
22
|
+
surfaces:
|
|
23
|
+
- { id: home, kind: public-marketing, url: "https://cursor.com/", inspected: "2026-07-13" }
|
|
24
|
+
- { id: surface-2, kind: duplicate-public-marketing-snapshot, url: "https://cursor.com/", inspected: "2026-07-13" }
|
|
25
|
+
- { id: surface-3, kind: localized-public-marketing, url: "https://cursor.com/en-US", inspected: "2026-07-13" }
|
|
26
|
+
sources:
|
|
27
|
+
- { id: public-capture, kind: product-surface, url: "https://cursor.com/", captured: "2026-07-13" }
|
|
28
|
+
- { id: brand-context, kind: official-doc, url: "https://cursor.com/en-US/brand", captured: "2026-07-13" }
|
|
29
|
+
- { id: docs-context, kind: official-doc, url: "https://cursor.com/docs", captured: "2026-07-13" }
|
|
30
|
+
- { id: changelog-context, kind: official-doc, url: "https://cursor.com/en-US/changelog/1-0", captured: "2026-07-13" }
|
|
31
|
+
conflicts: []
|
|
32
|
+
claims:
|
|
33
|
+
"tokens.colors.primary": &home { surface_id: home, source_id: public-capture, method: live-inspect, captured: "2026-07-13" }
|
|
34
|
+
"tokens.colors.canvas": *home
|
|
35
|
+
"tokens.colors.surface": *home
|
|
36
|
+
"tokens.colors.surface-muted": *home
|
|
37
|
+
"tokens.colors.surface-emphasis": *home
|
|
38
|
+
"tokens.colors.surface-selected": *home
|
|
39
|
+
"tokens.colors.accent": *home
|
|
40
|
+
"tokens.colors.on-primary": *home
|
|
41
|
+
"tokens.colors.gold": *home
|
|
42
|
+
"tokens.typography.family.ui": *home
|
|
43
|
+
"tokens.typography.body.size": *home
|
|
44
|
+
"tokens.typography.body.weight": *home
|
|
45
|
+
"tokens.typography.body.lineHeight": *home
|
|
46
|
+
"tokens.typography.body.use": *home
|
|
47
|
+
"tokens.typography.action-sm.size": *home
|
|
48
|
+
"tokens.typography.action-sm.weight": *home
|
|
49
|
+
"tokens.typography.action-sm.lineHeight": *home
|
|
50
|
+
"tokens.typography.action-sm.tracking": *home
|
|
51
|
+
"tokens.typography.action-sm.use": *home
|
|
52
|
+
"tokens.spacing.xxs": *home
|
|
53
|
+
"tokens.spacing.xs": *home
|
|
54
|
+
"tokens.spacing.sm": *home
|
|
55
|
+
"tokens.spacing.md": *home
|
|
56
|
+
"tokens.spacing.lg": *home
|
|
57
|
+
"tokens.spacing.xl": *home
|
|
58
|
+
"tokens.spacing.xxl": *home
|
|
59
|
+
"tokens.rounded.sm": *home
|
|
60
|
+
"tokens.rounded.md": *home
|
|
61
|
+
"tokens.rounded.full": *home
|
|
62
|
+
"tokens.components.marketing-card.type": *home
|
|
63
|
+
"tokens.components.marketing-card.bg": *home
|
|
64
|
+
"tokens.components.marketing-card.radius": *home
|
|
65
|
+
"tokens.components.marketing-card.padding": *home
|
|
66
|
+
"tokens.components.marketing-card.font": *home
|
|
67
|
+
"tokens.components.marketing-card.use": *home
|
|
19
68
|
tokens:
|
|
20
|
-
source:
|
|
21
|
-
extracted: "2026-
|
|
69
|
+
source: live-extract
|
|
70
|
+
extracted: "2026-07-13"
|
|
22
71
|
colors:
|
|
23
72
|
primary: "#26251e"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
surface: "#
|
|
28
|
-
surface-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
error: "#cf2d56"
|
|
33
|
-
success: "#1f8a65"
|
|
34
|
-
on-primary: "#f2f1ed"
|
|
73
|
+
canvas: "#f7f7f4"
|
|
74
|
+
surface: "#f2f1ed"
|
|
75
|
+
surface-muted: "#e6e5e0"
|
|
76
|
+
surface-emphasis: "#ebeae5"
|
|
77
|
+
surface-selected: "#e1e0db"
|
|
78
|
+
accent: "#f54e00"
|
|
79
|
+
on-primary: "#f7f7f4"
|
|
80
|
+
gold: "#c08532"
|
|
35
81
|
typography:
|
|
36
|
-
family: {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
body-serif: { size: 19.2, weight: 500, lineHeight: 1.50, use: "Editorial body, jjannon cswh" }
|
|
42
|
-
body-serif-sm: { size: 17.28, weight: 400, lineHeight: 1.35, use: "Standard body, descriptions" }
|
|
43
|
-
body-sans: { size: 16, weight: 400, lineHeight: 1.50, use: "UI body text" }
|
|
44
|
-
button: { size: 14, weight: 400, lineHeight: 1.00, use: "Primary button label" }
|
|
45
|
-
caption: { size: 11, weight: 400, lineHeight: 1.50, use: "Small captions, metadata" }
|
|
46
|
-
mono-body: { size: 12, weight: 400, lineHeight: 1.67, use: "Code blocks" }
|
|
47
|
-
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
|
|
48
|
-
rounded: { sm: 4, md: 8, lg: 10, full: 9999 }
|
|
49
|
-
shadow:
|
|
50
|
-
ambient: "rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px"
|
|
51
|
-
focus: "rgba(0,0,0,0.1) 0px 4px 12px"
|
|
52
|
-
elevated: "rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px"
|
|
53
|
-
components_harvested: true
|
|
82
|
+
family: { ui: "CursorGothic" }
|
|
83
|
+
body: { size: 16, weight: 400, lineHeight: 1.5, use: "Current public marketing body, cards, and primary actions" }
|
|
84
|
+
action-sm: { size: 14, weight: 400, lineHeight: 1, tracking: 0.14, use: "Compact public actions" }
|
|
85
|
+
spacing: { xxs: 2, xs: 3, sm: 4, md: 6, lg: 8, xl: 12, xxl: 16 }
|
|
86
|
+
rounded: { sm: 4, md: 8, full: 9999 }
|
|
54
87
|
components:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
button-tertiary: { type: button, bg: "#e1e0db", fg: "#26251e", radius: "9999px", use: "Active filter, selected tags" }
|
|
58
|
-
button-ghost: { type: button, bg: "rgba(38,37,30,0.06)", fg: "rgba(38,37,30,0.55)", padding: "6px 12px", use: "Tertiary actions, dismiss" }
|
|
59
|
-
card: { type: card, bg: "#e6e5e0", border: "1px solid rgba(38,37,30,0.1)", radius: "8px", shadow: "rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px", hover: "shadow intensifies", use: "Cards, containers" }
|
|
60
|
-
input: { type: input, bg: "transparent", fg: "#26251e", border: "1px solid rgba(38,37,30,0.1)", focus: "border rgba(38,37,30,0.2) or accent orange", use: "Text inputs, textarea" }
|
|
61
|
-
tab: { type: tab, fg: "#26251e", active: "1px bottom border rgba(38,37,30,0.1)", use: "Tab navigation" }
|
|
62
|
-
timeline-step: { type: listItem, fg: "#26251e", states: "thinking #dfa88f, grep #9fc9a2, read #9fbbe0, edit #c0a8dd", use: "AI timeline operation steps" }
|
|
88
|
+
marketing-card: { type: card, bg: "#f2f1ed", radius: "4px", padding: "15.9px 17.5px 20px", font: "16px / 400 / CursorGothic", use: "Public marketing feature card" }
|
|
89
|
+
components_harvested: true
|
|
63
90
|
---
|
|
64
91
|
|
|
65
92
|
# Design System Inspiration of Cursor
|
|
66
93
|
|
|
67
94
|
## 1. Visual Theme & Atmosphere
|
|
68
95
|
|
|
69
|
-
Cursor
|
|
96
|
+
Cursor is an AI code editor whose public product story spans autocomplete, editing, agent workflows, and enterprise controls. Its current public home presents that technical scope through a restrained warm palette: paper-like light surfaces, an ink-brown primary, and an orange link accent rather than the high-contrast blue often associated with developer tools. The official brand guide treats the name as simply “Cursor” and distributes a family of 2D/2.5D logos, app icons, and avatars, while the public product navigation now foregrounds Agents, Cloud, CLI, Mobile, Automations, Review, and Tab. This reference records the present public marketing surface—not the authenticated editor or dashboard—and keeps its embedded editor-like demonstrations separate from product-app claims.
|
|
70
97
|
|
|
71
|
-
The
|
|
98
|
+
The observed system is compact and deliberately repetitive: `#f7f7f4` canvas, `#26251e` text and primary actions, 4px feature cards, and very large pill radii for compact actions. `CursorGothic` is the dominant rendered public family. Public embedded demos introduce their own local chrome, so they are not evidence that every observed control is a general Cursor application token.
|
|
72
99
|
|
|
73
|
-
|
|
100
|
+
### Do
|
|
74
101
|
|
|
75
|
-
|
|
76
|
-
-
|
|
77
|
-
-
|
|
78
|
-
- berkeleyMono for code and technical labels
|
|
79
|
-
- Warm off-white background (`#f2f1ed`) instead of pure white -- the entire system is warm-shifted
|
|
80
|
-
- Primary text color `#26251e` (warm near-black with yellow undertone)
|
|
81
|
-
- Accent orange `#f54e00` for brand highlight and links
|
|
82
|
-
- oklab-space borders at various alpha levels for perceptually uniform edge treatment
|
|
83
|
-
- Pill-shaped elements with extreme radius (33.5M px, effectively full-pill)
|
|
84
|
-
- 8px base spacing system with fine-grained sub-8px increments (1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px)
|
|
102
|
+
- Use the observed warm canvas `#f7f7f4`, primary ink `#26251e`, and warm card surfaces before introducing a neutral gray.
|
|
103
|
+
- Use a full pill only for action patterns with matching captured geometry; use 4px for the observed public feature cards.
|
|
104
|
+
- Keep the orange `#f54e00` as the observed text-link accent, not a substitute for every filled action.
|
|
85
105
|
|
|
86
|
-
###
|
|
106
|
+
### Don't
|
|
87
107
|
|
|
88
|
-
-
|
|
89
|
-
-
|
|
90
|
-
-
|
|
91
|
-
- **DON'T** use default tracking on display sizes — it reads as generic and undersells Cursor's typographic care.
|
|
92
|
-
- **DO** use the three-font system deliberately: CursorGothic for display, jjannon serif for body and editorial passages, berkeleyMono for code.
|
|
93
|
-
- **DON'T** mix fonts from outside the system — adding a fourth voice fragments the carefully curated typographic palette.
|
|
94
|
-
- **DO** use `oklab()` color space for borders and overlays where supported — perceptually uniform colors maintain consistency across backgrounds.
|
|
95
|
-
- **DON'T** fall back to flat rgba() borders without considering perceptual contrast on different surface tints.
|
|
96
|
-
- **DO** use full-pill buttons (extreme radius) for primary CTAs — they're part of the warm, approachable feel.
|
|
97
|
-
- **DON'T** use sharp 2-4px corners on buttons — that aesthetic belongs to engineering brands like NVIDIA, not Cursor's editorial warmth.
|
|
108
|
+
- Do not treat the public homepage or its embedded examples as an authenticated Cursor editor specification.
|
|
109
|
+
- Do not add hover, pressed, focus, error, loading, or motion values from class names alone; this capture contains no interaction event records.
|
|
110
|
+
- Do not substitute a system font where `CursorGothic` is called for, or promote isolated demo fonts to the general UI family.
|
|
98
111
|
|
|
99
112
|
## 2. Color Palette & Roles
|
|
100
113
|
|
|
101
|
-
###
|
|
102
|
-
|
|
103
|
-
- **
|
|
104
|
-
- **
|
|
105
|
-
- **
|
|
106
|
-
- **
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
- **
|
|
110
|
-
- **Gold** (`#c08532`):
|
|
111
|
-
|
|
112
|
-
###
|
|
113
|
-
|
|
114
|
-
- **
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
- **Read** (`#9fbbe0`): Soft blue for file reading operations.
|
|
120
|
-
- **Edit** (`#c0a8dd`): Soft lavender for editing operations.
|
|
121
|
-
|
|
122
|
-
### Surface Scale
|
|
123
|
-
- **Surface 100** (`#f7f7f4`): Lightest button/card surface, barely tinted.
|
|
124
|
-
- **Surface 200** (`#f2f1ed`): Primary page background.
|
|
125
|
-
- **Surface 300** (`#ebeae5`): Button default background, subtle emphasis.
|
|
126
|
-
- **Surface 400** (`#e6e5e0`): Card backgrounds, secondary surfaces.
|
|
127
|
-
- **Surface 500** (`#e1e0db`): Tertiary button background, deeper emphasis.
|
|
128
|
-
|
|
129
|
-
### Border Colors
|
|
130
|
-
- **Border Primary** (`oklab(0.263084 -0.00230259 0.0124794 / 0.1)`): Standard border, 10% warm brown in oklab space.
|
|
131
|
-
- **Border Medium** (`oklab(0.263084 -0.00230259 0.0124794 / 0.2)`): Emphasized border, 20% warm brown.
|
|
132
|
-
- **Border Strong** (`rgba(38, 37, 30, 0.55)`): Strong borders, table rules.
|
|
133
|
-
- **Border Solid** (`#26251e`): Full-opacity dark border for maximum contrast.
|
|
134
|
-
- **Border Light** (`#f2f1ed`): Light border matching page background.
|
|
135
|
-
|
|
136
|
-
### Shadows & Depth
|
|
137
|
-
- **Card Shadow** (`rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`): Heavy elevated card with warm oklab border ring.
|
|
138
|
-
- **Ambient Shadow** (`rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px`): Subtle ambient glow for floating elements.
|
|
114
|
+
### Current public marketing colors
|
|
115
|
+
|
|
116
|
+
- **Primary ink** (`#26251e`): observed text, borders, and filled public action background.
|
|
117
|
+
- **Canvas** (`#f7f7f4`): observed homepage body and inverse action text.
|
|
118
|
+
- **Card surface** (`#f2f1ed`): observed public feature card and menu surface.
|
|
119
|
+
- **Muted surface** (`#e6e5e0`): observed compact secondary action and avatar/pill container surface.
|
|
120
|
+
- **Emphasis surface** (`#ebeae5`): observed embedded-demo surface.
|
|
121
|
+
- **Selected surface** (`#e1e0db`): observed disabled compact-control background in the public embedded demo.
|
|
122
|
+
- **Accent link** (`#f54e00`): observed tertiary-link text and border.
|
|
123
|
+
- **Gold** (`#c08532`): observed in a small embedded-demo pill; keep this bounded rather than treating it as the global accent.
|
|
124
|
+
|
|
125
|
+
### Observed border treatment
|
|
126
|
+
|
|
127
|
+
- **Primary action border** (`#26251e`, 1px): observed on the public filled action.
|
|
128
|
+
- **Ghost action border** (`oklab(0.263084 -0.00230259 0.0124794 / 0.2)`, 1px): observed on the compact public ghost action.
|
|
129
|
+
- **Embedded selected-tab edge** (`oklab(0.263084 -0.00230259 0.0124794 / 0.1)`, right edge): observed in a static embedded demo.
|
|
130
|
+
|
|
131
|
+
No generic error or success token is retained: the supplied current capture does not establish one.
|
|
139
132
|
|
|
140
133
|
## 3. Typography Rules
|
|
141
134
|
|
|
142
|
-
###
|
|
143
|
-
|
|
144
|
-
- **
|
|
145
|
-
- **
|
|
146
|
-
- **
|
|
147
|
-
- **
|
|
148
|
-
- **
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
|
155
|
-
|
|
156
|
-
|
|
|
157
|
-
|
|
|
158
|
-
|
|
|
159
|
-
|
|
|
160
|
-
| Body Sans | CursorGothic | 16px (1.00rem) | 400 | 1.50 | normal/0.08px | UI body text |
|
|
161
|
-
| Button Label | CursorGothic | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Primary button text |
|
|
162
|
-
| Button Caption | CursorGothic | 14px (0.88rem) | 400 | 1.50 | 0.14px | Secondary button with `"ss09"` |
|
|
163
|
-
| Caption | CursorGothic | 11px (0.69rem) | 400-500 | 1.50 | normal | Small captions, metadata |
|
|
164
|
-
| System Heading | system-ui | 20px (1.25rem) | 700 | 1.55 | normal | System UI headings |
|
|
165
|
-
| System Caption | system-ui | 13px (0.81rem) | 500-600 | 1.33 | normal | System UI labels |
|
|
166
|
-
| System Micro | system-ui | 11px (0.69rem) | 500 | 1.27 (tight) | 0.048px | Uppercase micro labels |
|
|
167
|
-
| Mono Body | berkeleyMono | 12px (0.75rem) | 400 | 1.67 (relaxed) | normal | Code blocks |
|
|
168
|
-
| Mono Small | berkeleyMono | 11px (0.69rem) | 400 | 1.33 | -0.275px | Inline code, terminal |
|
|
169
|
-
| Lato Heading | Lato | 16px (1.00rem) | 600 | 1.33 | normal | Lato section headings |
|
|
170
|
-
| Lato Caption | Lato | 14px (0.88rem) | 400-600 | 1.33 | normal | Lato captions |
|
|
171
|
-
| Lato Micro | Lato | 12px (0.75rem) | 400-600 | 1.27 (tight) | 0.053px | Lato small labels |
|
|
172
|
-
|
|
173
|
-
### Principles
|
|
174
|
-
- **Gothic compression for impact**: CursorGothic at display sizes uses -2.16px letter-spacing at 72px, progressively relaxing: -0.72px at 36px, -0.325px at 26px, -0.11px at 22px, normal at 16px and below. The tracking creates a sense of precision engineering.
|
|
175
|
-
- **Serif for soul**: jjannon provides literary warmth. The `"cswh"` feature adds contextual swash alternates that give body text a calligraphic quality.
|
|
176
|
-
- **Three typographic voices**: Gothic (display/UI), serif (editorial/body), mono (code/technical). Each serves a distinct communication purpose.
|
|
177
|
-
- **Weight restraint**: CursorGothic uses weight 400 almost exclusively, relying on size and tracking for hierarchy rather than weight. System-ui components use 500-700 for functional emphasis.
|
|
135
|
+
### Evidence classes
|
|
136
|
+
|
|
137
|
+
- **Live computed public family — `CursorGothic`:** 643 visible computed uses across the captured public homepage records, including headings, body, actions, cards, tabs, menus, and toggles. The supplied `FontFaceSet` evidence reports it loaded with four Cursor-hosted WOFF2 sources. This is the only promoted general public UI/content family.
|
|
138
|
+
- **Live computed but bounded embedded-demo families — `Lato` and `EB Garamond`:** respectively 24 and 19 visible uses, each with loaded FontFace/source corroboration. Their observed contexts are embedded examples within the public marketing page, not evidence of Cursor’s general UI family.
|
|
139
|
+
- **Live computed but isolated — `berkeleyMono`:** one visible input use and two loaded source URLs. It is retained as a narrow observed technical/demo occurrence, not a general family token.
|
|
140
|
+
- **System values — `system-ui` and `-apple-system`:** visible operating-system stacks, not Cursor-owned type assets and not substitutes for a named family.
|
|
141
|
+
- **Declared-only assets:** `CursorGothic Fallback`, `CursorIcons16`, and the captured KaTeX families have declarations but no visible computed use in this bundle. They are not promoted to typography tokens.
|
|
142
|
+
- **Official distributed brand assets:** the official brand page distributes logos, icons, and avatars, not a public font package or font licence. No public licence for the Cursor-hosted font files was located; the embedded page files are evidence of live delivery, not permission to redistribute them.
|
|
143
|
+
- **Unresolved legacy claim:** the prior `jjannon` body-family claim has no supporting current computed-use/FontFaceSet evidence in the supplied collector and is omitted.
|
|
144
|
+
|
|
145
|
+
### Current public hierarchy samples
|
|
146
|
+
|
|
147
|
+
| Role | Family | Size | Weight | Line height | Boundary |
|
|
148
|
+
|---|---|---:|---:|---:|---|
|
|
149
|
+
| Public body/card/action | CursorGothic | 16px | 400 | 24px | Repeated current public marketing use |
|
|
150
|
+
| Compact public action | CursorGothic | 14px | 400 | 14px | Full-pill action and compact header patterns |
|
|
151
|
+
| Embedded product-demo label | system-ui | 13px | 400 | 17.3333px | Local demo chrome, not a named-brand font claim |
|
|
152
|
+
| Embedded technical input | berkeleyMono | not generalized | not generalized | not generalized | One observed visible use only |
|
|
178
153
|
|
|
179
154
|
## 4. Component Stylings
|
|
180
155
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
-
|
|
187
|
-
-
|
|
188
|
-
-
|
|
189
|
-
-
|
|
190
|
-
-
|
|
191
|
-
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
-
|
|
196
|
-
-
|
|
197
|
-
-
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
-
|
|
205
|
-
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
-
|
|
209
|
-
-
|
|
210
|
-
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
- Background: `#f7f7f4` (Surface 100) or `#f2f1ed` (Surface 200)
|
|
215
|
-
- Text: `#26251e` or `oklab(0.263 / 0.9)` (90%)
|
|
216
|
-
- Padding: 0px 8px 1px 12px
|
|
217
|
-
- Use: Dropdown triggers, subtle interactive elements
|
|
218
|
-
|
|
219
|
-
### Cards & Containers
|
|
220
|
-
- Background: `#e6e5e0` or `#f2f1ed`
|
|
221
|
-
- Border: `1px solid oklab(0.263 / 0.1)` (warm brown at 10%)
|
|
222
|
-
- Radius: 8px (standard), 4px (compact), 10px (featured)
|
|
223
|
-
- Shadow: `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px` for elevated cards
|
|
224
|
-
- Hover: shadow intensification
|
|
225
|
-
|
|
226
|
-
### Inputs & Forms
|
|
227
|
-
- Background: transparent or surface
|
|
156
|
+
All claims below preserve the supplied collector’s selector and surface provenance. `home`, `surface-2`, and `surface-3` are public homepage capture records (`https://cursor.com/` and `https://cursor.com/en-US`); no authenticated product application or documentation chrome was captured. The top-level interaction array is empty, so static `selected`, `unchecked`, and `disabled` markup is not a behavioral state specification.
|
|
157
|
+
|
|
158
|
+
### Public marketing actions
|
|
159
|
+
|
|
160
|
+
**Filled primary action — `home::[data-omd-capture="64"]`**
|
|
161
|
+
- Background: `#26251e`
|
|
162
|
+
- Text: `#f7f7f4`
|
|
163
|
+
- Border: `1px solid #26251e`
|
|
164
|
+
- Radius: `3.35544e+07px` (full pill)
|
|
165
|
+
- Padding: `12.48px 21.6px 12.8px`
|
|
166
|
+
- Font: `16px / 400 / CursorGothic`
|
|
167
|
+
- Use: Public homepage primary action
|
|
168
|
+
|
|
169
|
+
**Compact filled action — `home::[data-omd-capture="8"]`**
|
|
170
|
+
- Background: `#26251e`
|
|
171
|
+
- Text: `#f7f7f4`
|
|
172
|
+
- Border: `1px solid #26251e`
|
|
173
|
+
- Radius: `3.35544e+07px` (full pill)
|
|
174
|
+
- Padding: `5.6px 10.5px 5.88px`
|
|
175
|
+
- Font: `14px / 400 / CursorGothic`
|
|
176
|
+
- Use: Public compact/header action
|
|
177
|
+
|
|
178
|
+
**Compact secondary action — `home::[data-omd-capture="101"]`**
|
|
179
|
+
- Background: `#e6e5e0`
|
|
180
|
+
- Text: `#26251e`
|
|
181
|
+
- Border: `1px solid oklab(0.263084 -0.00230259 0.0124794 / 0.025)`
|
|
182
|
+
- Radius: `3.35544e+07px` (full pill)
|
|
183
|
+
- Padding: `5.6px 10.5px 5.88px`
|
|
184
|
+
- Font: `14px / 400 / CursorGothic`
|
|
185
|
+
- Use: Public compact secondary action
|
|
186
|
+
|
|
187
|
+
**Compact ghost action — `home::[data-omd-capture="7"]`**
|
|
188
|
+
- Background: transparent
|
|
228
189
|
- Text: `#26251e`
|
|
229
|
-
-
|
|
230
|
-
-
|
|
231
|
-
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
-
|
|
237
|
-
-
|
|
238
|
-
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
-
|
|
256
|
-
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
-
|
|
262
|
-
-
|
|
190
|
+
- Border: `1px solid oklab(0.263084 -0.00230259 0.0124794 / 0.2)`
|
|
191
|
+
- Radius: `3.35544e+07px` (full pill)
|
|
192
|
+
- Padding: `5.6px 10.5px 5.88px`
|
|
193
|
+
- Font: `14px / 400 / CursorGothic`
|
|
194
|
+
- Use: Public compact ghost action
|
|
195
|
+
|
|
196
|
+
**Tertiary text action — `home::[data-omd-capture="18"]`**
|
|
197
|
+
- Background: transparent
|
|
198
|
+
- Text: `#f54e00`
|
|
199
|
+
- Radius: `0px`
|
|
200
|
+
- Font: `16px / 400 / CursorGothic`
|
|
201
|
+
- Use: Public marketing text link
|
|
202
|
+
|
|
203
|
+
### Public marketing cards
|
|
204
|
+
|
|
205
|
+
**Feature card — `home::[data-omd-capture="53"]`**
|
|
206
|
+
- Background: `#f2f1ed`
|
|
207
|
+
- Radius: `4px`
|
|
208
|
+
- Padding: `15.9px 17.5px 20px`
|
|
209
|
+
- Font: `16px / 400 / CursorGothic`
|
|
210
|
+
- Use: Public marketing feature card
|
|
211
|
+
|
|
212
|
+
**Large feature card — `home::[data-omd-capture="9"]`**
|
|
213
|
+
- Background: `#f2f1ed`
|
|
214
|
+
- Radius: `4px`
|
|
215
|
+
- Padding: `17.5px`
|
|
216
|
+
- Font: `16px / 400 / CursorGothic`
|
|
217
|
+
- Use: Public large feature-card wrapper
|
|
218
|
+
|
|
219
|
+
### Embedded public-demo chrome
|
|
220
|
+
|
|
221
|
+
**Selected tab — `home::[data-omd-capture="11"]`**
|
|
222
|
+
- Background: `#f7f7f4`
|
|
223
|
+
- Text: `#26251e`
|
|
224
|
+
- Border: `0px 1px 0px 0px solid oklab(0.263084 -0.00230259 0.0124794 / 0.1)`
|
|
225
|
+
- Padding: `0px 8px 1px 12px`
|
|
226
|
+
- Font: `14px / 400 / CursorGothic`
|
|
227
|
+
- Selected: static selected markup in the public embedded demo
|
|
228
|
+
- Use: Embedded marketing product-demo tab
|
|
229
|
+
|
|
230
|
+
**Prompt input — `home::[data-omd-capture="14"]`**
|
|
231
|
+
- Background: transparent
|
|
232
|
+
- Text: `#26251e`
|
|
233
|
+
- Padding: `8px 8px 6px`
|
|
234
|
+
- Font: `13px / 400 / system-ui`
|
|
235
|
+
- Use: Embedded marketing product-demo input
|
|
263
236
|
|
|
264
|
-
|
|
237
|
+
**Disabled compact control — `home::[data-omd-capture="17"]`**
|
|
238
|
+
- Background: `#e1e0db`
|
|
239
|
+
- Text: `oklab(0.263084 -0.00230259 0.0124794 / 0.6)`
|
|
240
|
+
- Radius: `3.35544e+07px` (full pill)
|
|
241
|
+
- Disabled: static disabled markup in the public embedded demo
|
|
242
|
+
- Use: Embedded marketing product-demo compact control
|
|
265
243
|
|
|
266
|
-
|
|
267
|
-
- Base unit: 8px
|
|
268
|
-
- Fine scale: 1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px (sub-8px for micro-adjustments)
|
|
269
|
-
- Standard scale: 8px, 10px, 12px, 14px (derived from extraction)
|
|
270
|
-
- Extended scale (inferred): 16px, 24px, 32px, 48px, 64px, 96px
|
|
271
|
-
- Notable: fine-grained sub-8px increments for precise icon/text alignment
|
|
272
|
-
|
|
273
|
-
### Grid & Container
|
|
274
|
-
- Max content width: approximately 1200px
|
|
275
|
-
- Hero: centered single-column with generous top padding (80-120px)
|
|
276
|
-
- Feature sections: 2-3 column grids for cards and features
|
|
277
|
-
- Full-width sections with warm cream or slightly darker backgrounds
|
|
278
|
-
- Sidebar layouts for documentation and settings pages
|
|
279
|
-
|
|
280
|
-
### Whitespace Philosophy
|
|
281
|
-
- **Warm negative space**: The cream background means whitespace has warmth and texture, unlike cold white minimalism. Large empty areas feel cozy rather than clinical.
|
|
282
|
-
- **Compressed text, open layout**: Aggressive negative letter-spacing on CursorGothic headlines is balanced by generous surrounding margins. Text is dense; space around it breathes.
|
|
283
|
-
- **Section variation**: Alternating surface tones (cream → lighter cream → cream) create subtle section differentiation without harsh boundaries.
|
|
284
|
-
|
|
285
|
-
### Border Radius Scale
|
|
286
|
-
- Micro (1.5px): Fine detail elements
|
|
287
|
-
- Small (2px): Inline elements, code spans
|
|
288
|
-
- Medium (3px): Small containers, inline badges
|
|
289
|
-
- Standard (4px): Cards, images, compact buttons
|
|
290
|
-
- Comfortable (8px): Primary buttons, cards, menus
|
|
291
|
-
- Featured (10px): Larger containers, featured cards
|
|
292
|
-
- Full Pill (33.5M px / 9999px): Pill buttons, tags, badges
|
|
244
|
+
No hover, pressed, focus, error, menu-opening, or toast variant is recorded as observed interaction evidence.
|
|
293
245
|
|
|
294
|
-
##
|
|
246
|
+
## 5. Layout Principles
|
|
295
247
|
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
| Border Medium (Level 1b) | `oklab(0.263 / 0.2) 0px 0px 0px 1px` | Emphasized borders, active states |
|
|
301
|
-
| Ambient (Level 2) | `rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px` | Floating elements, subtle glow |
|
|
302
|
-
| Elevated Card (Level 3) | `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab ring` | Modals, popovers, elevated cards |
|
|
303
|
-
| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` on button focus | Interactive focus feedback |
|
|
248
|
+
- The captured public homepage body is a `#f7f7f4` canvas with 52px top padding at the 1440×900 collector viewport.
|
|
249
|
+
- Public feature-card variants repeatedly use 4px corners with card-local padding around 15–20px.
|
|
250
|
+
- Public compact actions repeat a full-pill radius with either 14px/14px or 16px/16px CursorGothic type, depending on the captured action scale.
|
|
251
|
+
- The evidence has one desktop viewport and duplicate locale records. It does not establish a responsive breakpoint system, page-wide grid contract, or authenticated-product layout.
|
|
304
252
|
|
|
305
|
-
|
|
253
|
+
## 6. Depth & Elevation
|
|
306
254
|
|
|
307
|
-
|
|
308
|
-
- Warm cream surface variations create subtle tonal depth without shadows
|
|
309
|
-
- oklab borders at 10% and 20% create a spectrum of edge definition
|
|
310
|
-
- No harsh divider lines -- section separation through background tone shifts and spacing
|
|
255
|
+
Current evidence establishes tonal separation through the warm canvas and `#f2f1ed`, `#e6e5e0`, `#ebeae5`, and `#e1e0db` surfaces. It also establishes the explicitly captured oklab borders on compact public actions and the embedded selected tab. The supplied samples do not justify a reusable shadow scale, modal elevation rule, or generic focus shadow token.
|
|
311
256
|
|
|
312
257
|
## 7. Interaction & Motion
|
|
313
258
|
|
|
314
|
-
|
|
315
|
-
- Buttons: text color shifts to `--color-error` (`#cf2d56`) on hover -- a distinctive warm crimson that signals interactivity
|
|
316
|
-
- Links: color shift to accent orange (`#f54e00`) or underline decoration with `rgba(38, 37, 30, 0.4)`
|
|
317
|
-
- Cards: shadow intensification on hover (ambient → elevated)
|
|
318
|
-
|
|
319
|
-
### Focus States
|
|
320
|
-
- Shadow-based focus: `rgba(0,0,0,0.1) 0px 4px 12px` for depth-based focus indication
|
|
321
|
-
- Border focus: `oklab(0.263 / 0.2)` (20% border) for input/form focus
|
|
322
|
-
- Consistent warm tone in all focus states -- no cold blue focus rings
|
|
323
|
-
|
|
324
|
-
### Transitions
|
|
325
|
-
- Color transitions: 150ms ease for text/background color changes
|
|
326
|
-
- Shadow transitions: 200ms ease for elevation changes
|
|
327
|
-
- Transform: subtle scale or translate for interactive feedback
|
|
259
|
+
The collector reports `interactionCount: 0` and an empty `interactions` array. Some captured class strings contain transition or pseudo-class names, but no computed before/after observation ties them to a trigger or a visual result. Therefore this reference preserves only static markup markers in §4 and defines no reusable hover, focus, pressed, animation, duration, or easing token.
|
|
328
260
|
|
|
329
261
|
## 8. Responsive Behavior
|
|
330
262
|
|
|
331
|
-
|
|
332
|
-
| Name | Width | Key Changes |
|
|
333
|
-
|------|-------|-------------|
|
|
334
|
-
| Mobile | <600px | Single column, reduced padding, stacked navigation |
|
|
335
|
-
| Tablet Small | 600-768px | 2-column grids begin |
|
|
336
|
-
| Tablet | 768-900px | Expanded card grids, sidebar appears |
|
|
337
|
-
| Desktop Small | 900-1279px | Full layout forming |
|
|
338
|
-
| Desktop | >1279px | Full layout, maximum content width |
|
|
339
|
-
|
|
340
|
-
### Touch Targets
|
|
341
|
-
- Buttons use comfortable padding (6px-14px vertical, 8px-14px horizontal)
|
|
342
|
-
- Pill buttons maintain tap-friendly sizing with 3px-10px padding
|
|
343
|
-
- Navigation links at 14px with adequate spacing for touch
|
|
344
|
-
|
|
345
|
-
### Collapsing Strategy
|
|
346
|
-
- Hero: 72px CursorGothic → 36px → 26px on smaller screens, maintaining proportional letter-spacing
|
|
347
|
-
- Navigation: horizontal links → hamburger menu on mobile
|
|
348
|
-
- Feature cards: 3-column → 2-column → single column stacked
|
|
349
|
-
- Code editor screenshots: maintain aspect ratio, may shrink with border treatment preserved
|
|
350
|
-
- Timeline visualization: horizontal → vertical stacking
|
|
351
|
-
- Section spacing: 80px+ → 48px → 32px on mobile
|
|
352
|
-
|
|
353
|
-
### Image Behavior
|
|
354
|
-
- Editor screenshots maintain warm border treatment at all sizes
|
|
355
|
-
- AI timeline adapts from horizontal to vertical layout
|
|
356
|
-
- Product screenshots use responsive images with consistent border radius
|
|
357
|
-
- Full-width hero images scale proportionally
|
|
263
|
+
The supplied evidence is limited to a 1440×900 capture viewport and repeated public homepage records. No mobile, breakpoint, drawer, or navigation-collapse behavior is established. Keep responsive behavior unresolved rather than deriving it from framework class names.
|
|
358
264
|
|
|
359
265
|
## 9. Agent Prompt Guide
|
|
360
266
|
|
|
361
|
-
|
|
362
|
-
-
|
|
363
|
-
-
|
|
364
|
-
-
|
|
365
|
-
-
|
|
366
|
-
- Accent: `#f54e00` (orange)
|
|
367
|
-
- Error/hover: `#cf2d56` (warm crimson)
|
|
368
|
-
- Success: `#1f8a65` (muted teal)
|
|
369
|
-
- Border: `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` or `rgba(38, 37, 30, 0.1)` as fallback
|
|
370
|
-
|
|
371
|
-
### Example Component Prompts
|
|
372
|
-
- "Create a hero section on `#f2f1ed` warm cream background. Headline at 72px CursorGothic weight 400, line-height 1.10, letter-spacing -2.16px, color `#26251e`. Subtitle at 17.28px jjannon weight 400, line-height 1.35, color `rgba(38,37,30,0.55)`. Primary CTA button (`#ebeae5` bg, 8px radius, 10px 14px padding) with hover text shift to `#cf2d56`."
|
|
373
|
-
- "Design a card: `#e6e5e0` background, border `1px solid rgba(38,37,30,0.1)`. Radius 8px. Title at 22px CursorGothic weight 400, letter-spacing -0.11px. Body at 17.28px jjannon weight 400, color `rgba(38,37,30,0.55)`. Use `#f54e00` for link accents."
|
|
374
|
-
- "Build a pill tag: `#e6e5e0` background, `rgba(38,37,30,0.6)` text, full-pill radius (9999px), 3px 8px padding, 14px CursorGothic weight 400."
|
|
375
|
-
- "Create navigation: sticky `#f2f1ed` background with backdrop-filter blur. 14px system-ui weight 500 for links, `#26251e` text. CTA button right-aligned with `#ebeae5` bg and 8px radius. Bottom border `1px solid rgba(38,37,30,0.1)`."
|
|
376
|
-
- "Design an AI timeline showing four steps: Thinking (`#dfa88f`), Grep (`#9fc9a2`), Read (`#9fbbe0`), Edit (`#c0a8dd`). Each step: 14px system-ui label + 16px CursorGothic description + vertical connecting line in `rgba(38,37,30,0.1)`."
|
|
377
|
-
|
|
378
|
-
### Iteration Guide
|
|
379
|
-
1. Always use warm tones -- `#f2f1ed` background, `#26251e` text, never pure white/black for primary surfaces
|
|
380
|
-
2. Letter-spacing scales with font size for CursorGothic: -2.16px at 72px, -0.72px at 36px, -0.325px at 26px, normal at 16px
|
|
381
|
-
3. Use `rgba(38, 37, 30, alpha)` as a CSS-compatible fallback for oklab borders
|
|
382
|
-
4. Three fonts, three voices: CursorGothic (display/UI), jjannon (editorial), berkeleyMono (code)
|
|
383
|
-
5. Pill shapes (9999px radius) for tags and filters; 8px radius for primary buttons and cards
|
|
384
|
-
6. Hover states use `#cf2d56` text color -- the warm crimson shift is a signature interaction
|
|
385
|
-
7. Shadows use large blur values (28px, 70px) for diffused atmospheric depth
|
|
386
|
-
8. The sub-8px spacing scale (1.5, 2, 2.5, 3, 4, 5, 6px) is critical for icon/text micro-alignment
|
|
267
|
+
- Use `#f7f7f4` canvas, `#26251e` primary ink, and `#f2f1ed` public feature-card surfaces.
|
|
268
|
+
- For a public primary action, use `#26251e` / `#f7f7f4`, a 1px `#26251e` border, full-pill radius, `12.48px 21.6px 12.8px` padding, and `16px / 400 / CursorGothic`.
|
|
269
|
+
- For a compact secondary action, use `#e6e5e0`, `#26251e`, the observed 1px low-alpha oklab border, full-pill radius, and `5.6px 10.5px 5.88px` padding.
|
|
270
|
+
- Use `#f54e00` for observed tertiary text-link treatment; do not claim it is a universal action or error color.
|
|
271
|
+
- Do not invent interaction behavior, responsive values, dashboard controls, or typography beyond the evidence classes in §3.
|
|
387
272
|
|
|
388
273
|
## 10. Voice & Tone
|
|
389
274
|
|
|
390
|
-
|
|
275
|
+
Current first-party product language is direct and task-oriented: Cursor’s official documentation describes an AI-powered code editor that understands a codebase and lets a user describe what to build or change; the product’s 1.0 release names concrete additions such as Bugbot, Background Agent, Jupyter support, memories, and one-click MCP setup. Keep public copy specific to an engineering action, feature, or control.
|
|
391
276
|
|
|
392
|
-
| Context |
|
|
277
|
+
| Context | Observed direction |
|
|
393
278
|
|---|---|
|
|
394
|
-
|
|
|
395
|
-
|
|
|
396
|
-
|
|
|
397
|
-
| Error (model) | Specific. "Claude rate limit reached. Switch model or wait." |
|
|
398
|
-
|
|
399
|
-
**Voice samples**
|
|
400
|
-
- Marketing CTA (KR): *"macOS용 다운로드"* <!-- verified: cursor.com/ko homepage 2026-05 -->
|
|
401
|
-
|
|
402
|
-
**Forbidden phrases.** "10× developer", "AI-powered" without specificity. Aggressive comparison-mode marketing.
|
|
279
|
+
| Product explanation | Name the coding task or workflow before the AI capability. |
|
|
280
|
+
| CTA | Use a concise imperative such as the official public “Download” or “Get Cursor.” |
|
|
281
|
+
| Release communication | Lead with a named release and concrete features, as in the Cursor 1.0 changelog. |
|
|
403
282
|
|
|
404
283
|
## 11. Brand Narrative
|
|
405
284
|
|
|
406
|
-
Cursor
|
|
285
|
+
Cursor is presented by its own documentation as an AI-powered code editor that understands a user’s codebase and helps with natural-language coding tasks. The current public product ecosystem extends that editor-centered proposition across Agents, Cloud, CLI, Mobile, Automations, Review, and Tab. Cursor’s official 1.0 release framed its evolution around code review, Background Agent access, Jupyter editing, memories, MCP setup, and a dashboard rather than around a change to a public visual-token specification.
|
|
286
|
+
|
|
287
|
+
The public brand guide is intentionally practical: it supplies ways to represent Cursor consistently, asks third parties to call the product “Cursor” rather than “Cursor AI” or “Cursor Code,” and distributes logo, icon, and avatar variants. It does not publish a public font licence or an official design-token system, so the typography and component facts in this document remain bounded to the supplied live collector evidence.
|
|
407
288
|
|
|
408
289
|
## 12. Principles
|
|
409
290
|
|
|
410
|
-
1. **
|
|
411
|
-
2. **
|
|
412
|
-
3. **
|
|
413
|
-
4. **
|
|
414
|
-
5. **Typography micro-alignment matters.** Sub-8px spacing scale (1.5/2/2.5/3) for icon-text alignment. *UI implication:* don't round to 4px increments; the 1.5px granularity is intentional.
|
|
291
|
+
1. **Name the product Cursor.** *UI implication:* use the official product name; do not extend it to “Cursor AI” or “Cursor Code.”
|
|
292
|
+
2. **Make engineering work concrete.** *UI implication:* describe a coding action, tool, model, or workflow rather than relying on generic AI claims.
|
|
293
|
+
3. **Keep public marketing warm and restrained.** *UI implication:* start from the observed cream/ink/orange hierarchy and reserve accents for their recorded roles.
|
|
294
|
+
4. **Separate product claims from promotional demos.** *UI implication:* do not turn the homepage’s embedded editor-like controls into a full authenticated-app component system.
|
|
415
295
|
|
|
416
296
|
## 13. Personas
|
|
417
297
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
**Sarah Lin, 33, Seattle.** Senior backend engineer. Cursor as primary IDE for 6 months. Uses tab autocomplete + Cmd+K refactoring + Composer for multi-file changes.
|
|
421
|
-
|
|
422
|
-
**Henrik Sondergaard, 41, Copenhagen.** Indie developer building SaaS. Multi-file Composer is the workflow that justifies the subscription.
|
|
298
|
+
The official public materials support stakeholder groups rather than named fictional users: individual developers getting started with Tab, Inline Edit, and Agent; developers using an agent with tools and terminal commands; and enterprise teams managing model access, MCP controls, and system-level rules. These are evidence-backed groups, not synthetic personas.
|
|
423
299
|
|
|
424
|
-
**
|
|
300
|
+
- **Individual developer:** learns core editor workflows such as autocomplete, inline edits, and agent chat through official quickstart material.
|
|
301
|
+
- **Agent workflow user:** uses Cursor’s assistant for complex coding tasks, terminal commands, and code editing.
|
|
302
|
+
- **Engineering organization administrator:** configures controls and privacy/security settings for teams at scale.
|
|
425
303
|
|
|
426
304
|
## 14. States
|
|
427
305
|
|
|
428
|
-
|
|
429
|
-
|---|---|
|
|
430
|
-
| **Empty (welcome)** | Centered "Open folder" CTA + recent projects |
|
|
431
|
-
| **Empty (no AI history)** | "Try Cmd+K to get started" with keyboard shortcut hint |
|
|
432
|
-
| **Loading (model thinking)** | Inline cursor-blink (1.5px width, crimson) where model is composing |
|
|
433
|
-
| **Loading (file applying changes)** | Diff view with applying state, accept/reject buttons |
|
|
434
|
-
| **Error (model)** | Inline below input. "Claude rate limit reached. Switch model or wait." |
|
|
435
|
-
| **Error (apply failed)** | Diff stays visible, error tooltip with specific reason |
|
|
436
|
-
| **Success (changes applied)** | Soft cream pulse on file tabs, no toast |
|
|
437
|
-
| **Success (Composer commit)** | Multi-file diff folds into success summary |
|
|
438
|
-
| **Skeleton (welcome cards)** | Warm-cream rectangles, no shimmer |
|
|
439
|
-
| **Disabled (no model selected)** | 0.5 opacity + crimson "Select a model" link |
|
|
440
|
-
| **Loading (long agent run)** | Persistent progress with step trace, cancellable |
|
|
306
|
+
Only three static markers appear in the supplied public marketing capture: a selected embedded-demo tab, an unchecked embedded-demo toggle, and disabled compact controls. They do not establish product state behavior. Empty, loading, error, success, skeleton, and recovery treatments are unresolved for the authenticated editor and dashboard.
|
|
441
307
|
|
|
442
308
|
## 15. Motion & Easing
|
|
443
309
|
|
|
444
|
-
|
|
445
|
-
|---|---|---|
|
|
446
|
-
| `motion-instant` | 0ms | Cursor commit |
|
|
447
|
-
| `motion-fast` | 150ms | Hover crimson shift |
|
|
448
|
-
| `motion-blink` | 530ms | Cursor blink (model composing) |
|
|
449
|
-
| `motion-standard` | 250ms | Modal, panel |
|
|
450
|
-
|
|
451
|
-
Easings: standard cubic-bezier. **Crimson hover** is the only color animation. `prefers-reduced-motion: reduce` disables blink (steady cursor).
|
|
310
|
+
No duration, easing curve, or reduced-motion behavior is promoted. The capture includes no interaction events; CSS class names that mention transitions are not sufficient evidence of a reusable motion rule.
|
|
452
311
|
|
|
453
312
|
---
|
|
454
313
|
|
|
455
|
-
**Verified:** 2026-
|
|
456
|
-
**Tier 1 sources:** cursor.com
|
|
457
|
-
**Tier 2 sources:** styles.refero.design
|
|
458
|
-
**
|
|
459
|
-
|
|
460
|
-
|
|
314
|
+
**Verified:** 2026-07-13
|
|
315
|
+
**Tier 1 sources:** `https://cursor.com/`; `https://cursor.com/en-US`; `https://cursor.com/en-US/brand`; `https://cursor.com/docs`; `https://cursor.com/en-US/changelog/1-0`; supplied `artifacts/reference-evidence/cursor.json`.
|
|
316
|
+
**Tier 2 sources:** `https://getdesign.md/cursor` (directory record only); `https://styles.refero.design/?q=Cursor` (attempted; no usable result returned).
|
|
317
|
+
**Conflicts unresolved:** none
|
|
318
|
+
|
|
319
|
+
Tier 2’s “sleek dark interface, gradient accents” catalog summary conflicts with the supplied current public warm-surface evidence and is not used.
|