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.
Files changed (247) hide show
  1. package/.claude/hooks/lib/preferences-parser.cjs +1 -0
  2. package/.claude/hooks/lib/preferences-writer.cjs +1 -0
  3. package/.claude/hooks/post-edit-watch.cjs +1 -0
  4. package/.claude/hooks/session-end-foldin.cjs +1 -0
  5. package/.claude/hooks/session-state-loader.cjs +1 -0
  6. package/.claude/hooks/skill-activation.cjs +1 -0
  7. package/.claude/settings.json +10 -1
  8. package/.github/assets/logo-bg.png +0 -0
  9. package/AGENTS.md +20 -1
  10. package/CHANGELOG.md +482 -0
  11. package/MIGRATION.md +103 -0
  12. package/README.ja.md +56 -19
  13. package/README.ko.md +47 -30
  14. package/README.md +48 -30
  15. package/README.zh-TW.md +59 -22
  16. package/agents/AGENT.md +8 -7
  17. package/agents/omd-codex-image.md +1 -1
  18. package/agents/omd-critic.md +6 -7
  19. package/agents/omd-designer-review.md +1 -1
  20. package/agents/omd-final-qa.md +1 -1
  21. package/agents/omd-humanizer.md +38 -0
  22. package/agents/omd-kr-writer.md +3 -4
  23. package/agents/omd-locale-adapter.md +12 -16
  24. package/agents/omd-master.md +24 -19
  25. package/agents/omd-microcopy.md +1 -1
  26. package/agents/omd-orchestrator.md +7 -8
  27. package/agents/omd-slop-auditor.md +31 -0
  28. package/agents/omd-ux-researcher.md +1 -1
  29. package/data/reference-fingerprints.json +1995 -38
  30. package/dist/bin/oh-my-design.js +16 -8
  31. package/dist/bin/oh-my-design.js.map +1 -1
  32. package/dist/chunk-UJIHCEYF.js +99 -0
  33. package/dist/chunk-UJIHCEYF.js.map +1 -0
  34. package/dist/doctor-LDWSFM3I.js +763 -0
  35. package/dist/doctor-LDWSFM3I.js.map +1 -0
  36. package/dist/install-skills-ZZFNJ2II.js +1120 -0
  37. package/dist/install-skills-ZZFNJ2II.js.map +1 -0
  38. package/docs/CLI_QUICKSTART.md +157 -0
  39. package/package.json +25 -4
  40. package/scripts/postinstall.cjs +5 -4
  41. package/skills/claude-design/SKILL.md +38 -14
  42. package/skills/claude-design/references/claude-design-flow.md +11 -11
  43. package/skills/claude-design/references/codebase-analysis.md +5 -4
  44. package/skills/omd-final-qa/SKILL.md +1 -1
  45. package/skills/omd-harness/SKILL.md +51 -50
  46. package/skills/omd-humanize/SKILL.md +116 -0
  47. package/skills/omd-humanize/agents/openai.yaml +4 -0
  48. package/skills/omd-humanize/references/locale-playbooks.md +102 -0
  49. package/skills/omd-humanize/references/sources.md +11 -0
  50. package/skills/omd-init/SKILL.md +18 -12
  51. package/skills/omd-locale-adapter/SKILL.md +58 -91
  52. package/skills/omd-orchestrator/SKILL.md +11 -5
  53. package/skills/omd-reference-capture/SKILL.md +80 -26
  54. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
  55. package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
  56. package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
  57. package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
  58. package/skills/omd-slop-audit/SKILL.md +110 -0
  59. package/skills/omd-slop-audit/agents/openai.yaml +4 -0
  60. package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
  61. package/skills/omd-slop-audit/references/sources.md +24 -0
  62. package/web/references/104/DESIGN.md +354 -0
  63. package/web/references/11st/DESIGN.md +197 -316
  64. package/web/references/29cm/DESIGN.md +297 -393
  65. package/web/references/42dot/DESIGN.md +390 -0
  66. package/web/references/8percent/DESIGN.md +438 -0
  67. package/web/references/ably/DESIGN.md +267 -572
  68. package/web/references/acer/DESIGN.md +329 -0
  69. package/web/references/airbnb/DESIGN.md +219 -557
  70. package/web/references/alipay/DESIGN.md +179 -420
  71. package/web/references/apple/DESIGN.md +224 -498
  72. package/web/references/asleep/DESIGN.md +402 -0
  73. package/web/references/au/DESIGN.md +334 -0
  74. package/web/references/autopedia/DESIGN.md +382 -0
  75. package/web/references/aws-cloudscape/DESIGN.md +241 -0
  76. package/web/references/baemin/DESIGN.md +332 -491
  77. package/web/references/banksalad/DESIGN.md +269 -180
  78. package/web/references/barogo/DESIGN.md +416 -0
  79. package/web/references/beusable/DESIGN.md +464 -0
  80. package/web/references/bilibili/DESIGN.md +206 -374
  81. package/web/references/bmw/DESIGN.md +162 -276
  82. package/web/references/brandi/DESIGN.md +184 -325
  83. package/web/references/catchtable/DESIGN.md +219 -264
  84. package/web/references/cgv/DESIGN.md +317 -0
  85. package/web/references/channeltalk/DESIGN.md +210 -336
  86. package/web/references/china-airlines/DESIGN.md +291 -0
  87. package/web/references/cjonstyle/DESIGN.md +453 -0
  88. package/web/references/class101/DESIGN.md +168 -387
  89. package/web/references/classum/DESIGN.md +228 -203
  90. package/web/references/claude/DESIGN.md +242 -479
  91. package/web/references/clay/DESIGN.md +179 -377
  92. package/web/references/clickhouse/DESIGN.md +254 -343
  93. package/web/references/cohere/DESIGN.md +214 -324
  94. package/web/references/coinone/DESIGN.md +199 -179
  95. package/web/references/corca/DESIGN.md +414 -0
  96. package/web/references/coupang/DESIGN.md +205 -475
  97. package/web/references/cursor/DESIGN.md +240 -381
  98. package/web/references/dabang/DESIGN.md +248 -213
  99. package/web/references/dable/DESIGN.md +431 -0
  100. package/web/references/datarize/DESIGN.md +217 -330
  101. package/web/references/dealicious/DESIGN.md +402 -0
  102. package/web/references/drdiary/DESIGN.md +404 -0
  103. package/web/references/elastic/DESIGN.md +238 -0
  104. package/web/references/elevenlabs/DESIGN.md +183 -321
  105. package/web/references/eslite/DESIGN.md +257 -0
  106. package/web/references/evaair/DESIGN.md +338 -0
  107. package/web/references/expo/DESIGN.md +238 -331
  108. package/web/references/familymart-tw/DESIGN.md +254 -0
  109. package/web/references/ferrari/DESIGN.md +160 -377
  110. package/web/references/figma/DESIGN.md +197 -451
  111. package/web/references/fitpet/DESIGN.md +445 -0
  112. package/web/references/flex/DESIGN.md +170 -253
  113. package/web/references/framer/DESIGN.md +197 -340
  114. package/web/references/freee/DESIGN.md +211 -533
  115. package/web/references/friendliai/DESIGN.md +431 -0
  116. package/web/references/frip/DESIGN.md +440 -0
  117. package/web/references/gangnamunni/DESIGN.md +154 -591
  118. package/web/references/gaudiolab/DESIGN.md +414 -0
  119. package/web/references/google/DESIGN.md +290 -398
  120. package/web/references/hashicorp/DESIGN.md +273 -318
  121. package/web/references/heydealer/DESIGN.md +429 -0
  122. package/web/references/humanscape/DESIGN.md +433 -0
  123. package/web/references/hyundai/DESIGN.md +158 -368
  124. package/web/references/hyundaicard/DESIGN.md +171 -121
  125. package/web/references/ibm/DESIGN.md +227 -378
  126. package/web/references/idus/DESIGN.md +450 -0
  127. package/web/references/igaworks/DESIGN.md +437 -0
  128. package/web/references/inflearn/DESIGN.md +221 -366
  129. package/web/references/intuit/DESIGN.md +244 -0
  130. package/web/references/jandi/DESIGN.md +191 -291
  131. package/web/references/jobplanet/DESIGN.md +415 -0
  132. package/web/references/kakao/DESIGN.md +287 -475
  133. package/web/references/kakaobank/DESIGN.md +220 -521
  134. package/web/references/kakaogames/DESIGN.md +220 -0
  135. package/web/references/kakaopay/DESIGN.md +207 -526
  136. package/web/references/karrot/DESIGN.md +227 -251
  137. package/web/references/kb-kookmin/DESIGN.md +308 -0
  138. package/web/references/kbank/DESIGN.md +220 -175
  139. package/web/references/kmong/DESIGN.md +281 -356
  140. package/web/references/krds/DESIGN.md +245 -19
  141. package/web/references/kream/DESIGN.md +224 -359
  142. package/web/references/kurly/DESIGN.md +211 -533
  143. package/web/references/lamborghini/DESIGN.md +198 -360
  144. package/web/references/lguplus/DESIGN.md +259 -0
  145. package/web/references/likelion/DESIGN.md +283 -0
  146. package/web/references/line/DESIGN.md +396 -355
  147. package/web/references/linear.app/DESIGN.md +209 -562
  148. package/web/references/lotteon/DESIGN.md +386 -0
  149. package/web/references/lovable/DESIGN.md +255 -349
  150. package/web/references/makinarocks/DESIGN.md +149 -349
  151. package/web/references/maum-ai/DESIGN.md +423 -0
  152. package/web/references/medibloc/DESIGN.md +425 -0
  153. package/web/references/megabox/DESIGN.md +232 -0
  154. package/web/references/mercari/DESIGN.md +217 -434
  155. package/web/references/microsoft/DESIGN.md +234 -388
  156. package/web/references/mildang/DESIGN.md +411 -0
  157. package/web/references/millie/DESIGN.md +183 -504
  158. package/web/references/minimax/DESIGN.md +264 -322
  159. package/web/references/miricanvas/DESIGN.md +182 -355
  160. package/web/references/miro/DESIGN.md +234 -232
  161. package/web/references/mistral.ai/DESIGN.md +231 -314
  162. package/web/references/mixi/DESIGN.md +234 -0
  163. package/web/references/moin/DESIGN.md +445 -0
  164. package/web/references/mongodb/DESIGN.md +219 -316
  165. package/web/references/musinsa/DESIGN.md +184 -510
  166. package/web/references/mynavi/DESIGN.md +242 -0
  167. package/web/references/myrealtrip/DESIGN.md +169 -406
  168. package/web/references/naver/DESIGN.md +328 -499
  169. package/web/references/naverwebtoon/DESIGN.md +172 -395
  170. package/web/references/nhn/DESIGN.md +169 -346
  171. package/web/references/nhncloud/DESIGN.md +185 -123
  172. package/web/references/notion/DESIGN.md +271 -475
  173. package/web/references/nrise/DESIGN.md +417 -0
  174. package/web/references/ohouse/DESIGN.md +210 -549
  175. package/web/references/oliveyoung/DESIGN.md +217 -326
  176. package/web/references/ollama/DESIGN.md +241 -308
  177. package/web/references/onestore/DESIGN.md +248 -0
  178. package/web/references/palantir/DESIGN.md +256 -0
  179. package/web/references/panasonic/DESIGN.md +276 -0
  180. package/web/references/patternfly/DESIGN.md +259 -0
  181. package/web/references/payhere/DESIGN.md +438 -0
  182. package/web/references/pega/DESIGN.md +262 -0
  183. package/web/references/peoplefund/DESIGN.md +431 -0
  184. package/web/references/petfriends/DESIGN.md +428 -0
  185. package/web/references/pinkfong/DESIGN.md +199 -367
  186. package/web/references/pinterest/DESIGN.md +258 -308
  187. package/web/references/poya/DESIGN.md +286 -0
  188. package/web/references/pozalabs/DESIGN.md +438 -0
  189. package/web/references/protopie/DESIGN.md +419 -0
  190. package/web/references/qraft/DESIGN.md +448 -0
  191. package/web/references/quotabook/DESIGN.md +449 -0
  192. package/web/references/recruit/DESIGN.md +247 -0
  193. package/web/references/remember/DESIGN.md +202 -396
  194. package/web/references/resend/DESIGN.md +274 -348
  195. package/web/references/sakura-internet/DESIGN.md +269 -0
  196. package/web/references/samsung/DESIGN.md +157 -359
  197. package/web/references/sandoll/DESIGN.md +445 -0
  198. package/web/references/sanity/DESIGN.md +241 -375
  199. package/web/references/scatterlab/DESIGN.md +412 -0
  200. package/web/references/selectstar/DESIGN.md +439 -0
  201. package/web/references/servicenow/DESIGN.md +289 -0
  202. package/web/references/shinhanbank/DESIGN.md +161 -341
  203. package/web/references/shinhancard/DESIGN.md +208 -319
  204. package/web/references/sionic/DESIGN.md +454 -0
  205. package/web/references/sktelecom/DESIGN.md +310 -0
  206. package/web/references/socar/DESIGN.md +125 -32
  207. package/web/references/softbank/DESIGN.md +231 -0
  208. package/web/references/sony/DESIGN.md +234 -0
  209. package/web/references/soop/DESIGN.md +261 -0
  210. package/web/references/spacex/DESIGN.md +184 -323
  211. package/web/references/spotify/DESIGN.md +253 -394
  212. package/web/references/squeezebits/DESIGN.md +441 -0
  213. package/web/references/stayfolio/DESIGN.md +422 -0
  214. package/web/references/stripe/DESIGN.md +212 -491
  215. package/web/references/supabase/DESIGN.md +244 -316
  216. package/web/references/tabling/DESIGN.md +415 -0
  217. package/web/references/taishinbank/DESIGN.md +243 -0
  218. package/web/references/teamlab/DESIGN.md +240 -0
  219. package/web/references/teamsparta/DESIGN.md +472 -0
  220. package/web/references/tellingme/DESIGN.md +392 -0
  221. package/web/references/tesla/DESIGN.md +244 -427
  222. package/web/references/thsr/DESIGN.md +284 -0
  223. package/web/references/thumbtack/DESIGN.md +302 -0
  224. package/web/references/together.ai/DESIGN.md +257 -304
  225. package/web/references/toss/DESIGN.md +251 -593
  226. package/web/references/toss-securities/DESIGN.md +255 -178
  227. package/web/references/tossbank/DESIGN.md +195 -491
  228. package/web/references/toyota/DESIGN.md +238 -0
  229. package/web/references/tving/DESIGN.md +197 -245
  230. package/web/references/typed/DESIGN.md +413 -0
  231. package/web/references/uber/DESIGN.md +256 -333
  232. package/web/references/udn/DESIGN.md +250 -0
  233. package/web/references/upbit/DESIGN.md +145 -256
  234. package/web/references/upstage/DESIGN.md +211 -204
  235. package/web/references/uswds/DESIGN.md +287 -0
  236. package/web/references/vercel/DESIGN.md +236 -440
  237. package/web/references/wanted/DESIGN.md +215 -487
  238. package/web/references/wise/DESIGN.md +223 -231
  239. package/web/references/wisetracker/DESIGN.md +462 -0
  240. package/web/references/wooribank/DESIGN.md +245 -0
  241. package/web/references/yanolja/DESIGN.md +250 -419
  242. package/web/references/yeogiotte/DESIGN.md +235 -418
  243. package/web/references/zapier/DESIGN.md +256 -377
  244. package/web/references/zendesk/DESIGN.md +288 -0
  245. package/web/references/zigzag/DESIGN.md +200 -621
  246. package/dist/install-skills-7UUDOLG2.js +0 -734
  247. package/dist/install-skills-7UUDOLG2.js.map +0 -1
@@ -8,635 +8,282 @@ primary_color: "#5e6ad2"
8
8
  logo:
9
9
  type: simpleicons
10
10
  slug: linear
11
- verified: "2026-05-15"
11
+ verified: "2026-07-12"
12
12
  omd: "0.1"
13
13
  ds:
14
14
  name: Linear Brand
15
15
  url: "https://linear.app/brand"
16
16
  type: brand
17
- description: Linear's brand guidelines with wordmark, logomark, and color specifications.
18
- og_image: "https://linear.app/api/og/generic?title=Brand&v=3"
17
+ description: Linear's official identity and asset-use guidance; public marketing/product-preview measurements remain a separate evidence domain.
18
+ verification_v2:
19
+ schema: 2
20
+ checked: "2026-07-12"
21
+ surfaces:
22
+ - { id: home, kind: marketing-product, url: "https://linear.app/", inspected: "2026-07-12" }
23
+ - { id: method, kind: official-method, url: "https://linear.app/method", inspected: "2026-07-12" }
24
+ - { id: customers, kind: marketing-customer, url: "https://linear.app/customers", inspected: "2026-07-12" }
25
+ - { id: pricing, kind: product-pricing, url: "https://linear.app/pricing", inspected: "2026-07-12" }
26
+ sources:
27
+ - { id: home-live, kind: product-surface, url: "https://linear.app/", captured: "2026-07-12" }
28
+ - { id: method-live, kind: product-surface, url: "https://linear.app/method", captured: "2026-07-12" }
29
+ - { id: customers-live, kind: product-surface, url: "https://linear.app/customers", captured: "2026-07-12" }
30
+ - { id: pricing-live, kind: product-surface, url: "https://linear.app/pricing", captured: "2026-07-12" }
31
+ - { id: brand-official, kind: official-doc, url: "https://linear.app/brand", captured: "2026-07-12" }
32
+ conflicts: []
33
+ claims:
34
+ "tokens.colors.primary": &home_evidence { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-12" }
35
+ "tokens.colors.canvas": *home_evidence
36
+ "tokens.colors.foreground": *home_evidence
37
+ "tokens.colors.secondary": *home_evidence
38
+ "tokens.colors.muted": *home_evidence
39
+ "tokens.colors.quiet": *home_evidence
40
+ "tokens.colors.primary-action": *home_evidence
41
+ "tokens.colors.on-primary-action": *home_evidence
42
+ "tokens.colors.hairline": *home_evidence
43
+ "tokens.typography.family.ui": *home_evidence
44
+ "tokens.typography.family.mono": *home_evidence
45
+ "tokens.typography.display.size": *home_evidence
46
+ "tokens.typography.display.weight": *home_evidence
47
+ "tokens.typography.display.lineHeight": *home_evidence
48
+ "tokens.typography.display.tracking": *home_evidence
49
+ "tokens.typography.display.use": *home_evidence
50
+ "tokens.typography.heading.size": *home_evidence
51
+ "tokens.typography.heading.weight": *home_evidence
52
+ "tokens.typography.heading.lineHeight": *home_evidence
53
+ "tokens.typography.heading.tracking": *home_evidence
54
+ "tokens.typography.heading.use": *home_evidence
55
+ "tokens.typography.body.size": &method_evidence { surface_id: method, source_id: method-live, method: live-inspect, captured: "2026-07-12" }
56
+ "tokens.typography.body.weight": *method_evidence
57
+ "tokens.typography.body.lineHeight": *method_evidence
58
+ "tokens.typography.body.tracking": *method_evidence
59
+ "tokens.typography.body.use": *method_evidence
60
+ "tokens.typography.navigation.size": *home_evidence
61
+ "tokens.typography.navigation.weight": *home_evidence
62
+ "tokens.typography.navigation.lineHeight": *home_evidence
63
+ "tokens.typography.navigation.tracking": *home_evidence
64
+ "tokens.typography.navigation.use": *home_evidence
65
+ "tokens.typography.mono.size": *home_evidence
66
+ "tokens.typography.mono.weight": *home_evidence
67
+ "tokens.typography.mono.lineHeight": *home_evidence
68
+ "tokens.typography.mono.use": *home_evidence
69
+ "tokens.spacing.xs": *home_evidence
70
+ "tokens.spacing.sm": *home_evidence
71
+ "tokens.spacing.md": *home_evidence
72
+ "tokens.spacing.lg": *home_evidence
73
+ "tokens.spacing.xl": *home_evidence
74
+ "tokens.rounded.product-control": *home_evidence
75
+ "tokens.rounded.card": *home_evidence
76
+ "tokens.rounded.full": *home_evidence
77
+ "tokens.shadow.primary-action": *home_evidence
78
+ "tokens.components.primary-action.type": *home_evidence
79
+ "tokens.components.primary-action.bg": *home_evidence
80
+ "tokens.components.primary-action.fg": *home_evidence
81
+ "tokens.components.primary-action.border": *home_evidence
82
+ "tokens.components.primary-action.radius": *home_evidence
83
+ "tokens.components.primary-action.padding": *home_evidence
84
+ "tokens.components.primary-action.height": *home_evidence
85
+ "tokens.components.primary-action.font": *home_evidence
86
+ "tokens.components.primary-action.states": *home_evidence
87
+ "tokens.components.primary-action.use": *home_evidence
88
+ "tokens.components.secondary-action.type": *home_evidence
89
+ "tokens.components.secondary-action.bg": *home_evidence
90
+ "tokens.components.secondary-action.fg": *home_evidence
91
+ "tokens.components.secondary-action.radius": *home_evidence
92
+ "tokens.components.secondary-action.padding": *home_evidence
93
+ "tokens.components.secondary-action.height": *home_evidence
94
+ "tokens.components.secondary-action.font": *home_evidence
95
+ "tokens.components.secondary-action.states": *home_evidence
96
+ "tokens.components.secondary-action.use": *home_evidence
97
+ "tokens.components.nav-trigger.type": *home_evidence
98
+ "tokens.components.nav-trigger.bg": *home_evidence
99
+ "tokens.components.nav-trigger.fg": *home_evidence
100
+ "tokens.components.nav-trigger.radius": *home_evidence
101
+ "tokens.components.nav-trigger.padding": *home_evidence
102
+ "tokens.components.nav-trigger.height": *home_evidence
103
+ "tokens.components.nav-trigger.font": *home_evidence
104
+ "tokens.components.nav-trigger.states": *home_evidence
105
+ "tokens.components.nav-trigger.use": *home_evidence
106
+ "tokens.components.product-menu-item.type": *home_evidence
107
+ "tokens.components.product-menu-item.bg": *home_evidence
108
+ "tokens.components.product-menu-item.fg": *home_evidence
109
+ "tokens.components.product-menu-item.radius": *home_evidence
110
+ "tokens.components.product-menu-item.padding": *home_evidence
111
+ "tokens.components.product-menu-item.font": *home_evidence
112
+ "tokens.components.product-menu-item.states": *home_evidence
113
+ "tokens.components.product-menu-item.use": *home_evidence
114
+ "tokens.components.customer-card.type": &customers_evidence { surface_id: customers, source_id: customers-live, method: live-inspect, captured: "2026-07-12" }
115
+ "tokens.components.customer-card.bg": *customers_evidence
116
+ "tokens.components.customer-card.fg": *customers_evidence
117
+ "tokens.components.customer-card.radius": *customers_evidence
118
+ "tokens.components.customer-card.padding": *customers_evidence
119
+ "tokens.components.customer-card.use": *customers_evidence
19
120
  tokens:
20
121
  source: reconciled
21
- extracted: "2026-06-08"
22
- components_harvested: true
23
- note: "freq×sat picked link color #828fff; CSS var --color-brand-bg=#5e6ad2 is the canonical primary. TIER 2 multi-route harvest (home/pricing/customers/now) 2026-06-09 — no public DS; app behind auth."
122
+ extracted: "2026-07-12"
123
+ note: "Fresh four-route capture with 65 component variants and six safe menu expansions. Marketing, embedded product preview, Method, customer, pricing, and brand evidence remain separate."
24
124
  colors:
25
125
  primary: "#5e6ad2"
26
- accent: "#7170ff"
27
- accent-hover: "#828fff"
28
- background: "#0f1011"
29
126
  canvas: "#08090a"
30
- surface: "#191a1b"
31
- surface-2: "#28282c"
32
127
  foreground: "#f7f8f8"
33
- text-secondary: "#d0d6e0"
128
+ secondary: "#d0d6e0"
34
129
  muted: "#8a8f98"
35
- text-quaternary: "#62666d"
130
+ quiet: "#62666d"
131
+ primary-action: "#e5e5e6"
132
+ on-primary-action: "#08090a"
133
+ hairline: "#1c1d1e"
36
134
  typography:
37
- family: { sans: "Inter", mono: "Berkeley Mono" }
38
- display-xl: { size: 72, weight: 510, lineHeight: 1.00, tracking: -1.584, use: "Hero headlines, maximum impact" }
39
- display-lg: { size: 64, weight: 510, lineHeight: 1.00, tracking: -1.408, use: "Secondary hero text" }
40
- display: { size: 48, weight: 510, lineHeight: 1.00, tracking: -1.056, use: "Section headlines" }
41
- heading-1: { size: 32, weight: 400, lineHeight: 1.13, tracking: -0.704, use: "Major section titles" }
42
- heading-2: { size: 24, weight: 400, lineHeight: 1.33, tracking: -0.288, use: "Sub-section headings" }
43
- heading-3: { size: 20, weight: 590, lineHeight: 1.33, tracking: -0.24, use: "Feature titles, card headers" }
44
- body-lg: { size: 18, weight: 400, lineHeight: 1.60, use: "Introduction text, feature descriptions" }
45
- body: { size: 17, weight: 400, lineHeight: 1.60, use: "Body, emphasized content" }
46
- spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32 }
47
- rounded: { sm: 4, md: 8, lg: 12, full: 9999 }
135
+ family: { ui: "Inter", mono: "Berkeley Mono" }
136
+ display: { size: 48, weight: 510, lineHeight: 1, tracking: -1.056, use: "Repeated public section display heading" }
137
+ heading: { size: 24, weight: 590, lineHeight: 1.33, tracking: -0.288, use: "Public feature and card heading" }
138
+ body: { size: 15, weight: 400, lineHeight: 1.6, tracking: -0.165, use: "Method and public descriptive body" }
139
+ navigation: { size: 13, weight: 400, lineHeight: 1.5, tracking: -0.13, use: "Public navigation and compact product-preview labels" }
140
+ mono: { size: 14, weight: 400, lineHeight: 1.71, use: "Embedded public product-preview technical input" }
141
+ spacing: { xs: 4, sm: 8, md: 12, lg: 24, xl: 32 }
142
+ rounded: { product-control: 6, card: 8, full: 9999 }
48
143
  shadow:
49
- subtle: "rgba(0,0,0,0.03) 0px 1.2px 0px"
50
- inset: "rgba(0,0,0,0.2) 0px 0px 12px 0px inset"
144
+ primary-action: "0 0 1px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.07), 0 3px 2px rgba(0,0,0,0.04)"
145
+ components_harvested: true
51
146
  components:
52
- primary-cta: { type: button, bg: "#e5e5e6", fg: "#08090a", border: "1px solid #e5e5e6", radius: "9999px", height: "32px", padding: "0 12px", font: "13px / 510", shadow: "layered drop stack rgba(0,0,0,0.08) 0px 0px 1px · rgba(0,0,0,0.07) 0px 1px 1px · rgba(0,0,0,0.04) 0px 3px 2px", use: "Highest-priority CTA on dark surfaces (Sign up / Open app); 44px hero variant at 16px/510, 0 20px" }
53
- secondary-cta: { type: button, bg: "rgba(255,255,255,0.05)", fg: "#f7f8f8", radius: "9999px", height: "40px", padding: "0 14px", font: "13px / 510", shadow: "inset hairline + ring rgba(255,255,255,0.03) 0px 0px 0px 1px inset · rgba(0,0,0,0.6) 0px 0px 0px 1px · rgba(0,0,0,0.1) 0px 4px 4px", use: "Paired alternative beside the primary CTA (Contact sales next to Get started); 44px hero variant" }
54
- brand-cta-lime: { type: button, bg: "#e4f222", fg: "#08090a", radius: "6px", padding: "24px 32px", font: "15px / 590", use: "High-emphasis marketing conversion banner (Build now) Linear's loudest single accent; 8px live banner variant" }
55
- brand-fill-button: { type: button, bg: "#5e6ad2", fg: "#ffffff", radius: "6px", height: "32px", padding: "0 16px", font: "14px / 510", hover: "#828fff", use: "Brand-accent fills; reserved indigo, surfaces on skip-link and in-product accents" }
56
- ghost-button: { type: button, bg: "rgba(255,255,255,0.02)", fg: "#e2e4e7", border: "1px solid #24282c", radius: "6px", focus: "rgba(0,0,0,0.1) 0px 4px 12px", use: "Tertiary actions, low-emphasis secondary CTAs" }
57
- nav-link: { type: tab, active: "text #f7f8f8 idle #8a8f98", radius: "9999px", height: "32px", padding: "0 12px", font: "13px / 400", use: "Top nav bar links (Product / Resources)" }
58
- dropdown-popover: { type: dialog, bg: "#101112", border: "1px solid rgba(255,255,255,0.08)", radius: "12px", use: "Product / Resources navigation flyouts; nested submenu #161718, 8px radius, 1px solid rgba(255,255,255,0.05)" }
59
- search-input: { type: input, bg: "#141516", fg: "#8a8f98", radius: "9999px", height: "40px", padding: "0 16px", font: "14px / 400", shadow: "inset+ring stack rgba(255,255,255,0.03) 0px 0px 0px 1px inset · rgba(0,0,0,0.1) 0px 4px 4px", use: "Changelog / docs search field; in-app triggers Cmd+K palette" }
60
- filter-pill: { type: badge, bg: "transparent", fg: "#d0d6e0", border: "1px solid #23252a", radius: "9999px", height: "26px", padding: "0 10px 0 5px", font: "12px / 510", use: "Tags, filter chips, category labels (Performance, iOS)" }
61
- pagination-button: { type: button, bg: "rgba(255,255,255,0.05)", fg: "#f7f8f8", radius: "9999px", height: "40px", padding: "0 16px", font: "15px / 510", shadow: "inset+ring stack (matches secondary CTA)", use: "Changelog Load more pagination" }
62
- card: { type: card, bg: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.08)", radius: "8px", shadow: "rgba(0,0,0,0.2) 0px 0px 0px 1px ring", hover: "subtle background-opacity increase", use: "Translucent surface (never solid); 12px featured, 22px large panels" }
63
- default-card-refero: { type: card, bg: "#0f1011", radius: "6px", use: "Refero-captured in-product card surface" }
64
- command-palette: { type: dialog, bg: "#191a1b", border: "1px solid rgba(255,255,255,0.08)", radius: "12px", shadow: "multi-layer Dialog stack rgba(0,0,0,0.08) 0px 0px 1px … rgba(0,0,0,0) 0px 8px 2px", use: "Cmd+K command palette, modals; backdrop rgba(0,0,0,0.85)" }
65
- filter-pill-success: { type: badge, bg: "#10b981", fg: "#f7f8f8", radius: "50%", font: "10px / 510", use: "Status dots, completion indicators; 9999px chip variant" }
147
+ primary-action: { type: button, bg: "#e5e5e6", fg: "#08090a", border: "1px solid #e5e5e6", radius: "9999px", padding: "0 20px", height: "44px", font: "16px / 510", states: "default captured; compact 32px variant remains local", use: "Highest-priority public get-started action" }
148
+ secondary-action: { type: button, bg: "rgba(255,255,255,0.05)", fg: "#f7f8f8", radius: "9999px", padding: "0 20px", height: "44px", font: "16px / 510", states: "default captured; no universal hover token promoted", use: "Paired public contact-sales action" }
149
+ nav-trigger: { type: button, bg: "transparent", fg: "#8a8f98", radius: "9999px", padding: "0 12px", height: "32px", font: "13px / 400", states: "focus, hover, pressed, expanded, and menu-open observed across current routes", use: "Current public navigation trigger" }
150
+ product-menu-item: { type: tab, bg: "transparent", fg: "#f7f8f8", radius: "8px", padding: "12px 16px 12px 12px", font: "16px / 400", states: "selected, expanded, and menu-open captured in the embedded product preview", use: "Current embedded product-preview menu row" }
151
+ customer-card: { type: card, bg: "transparent", fg: "#f7f8f8", radius: "8px", padding: "24px 32px", use: "Large current customer-story card; lime sibling remains a surface-local editorial variant" }
66
152
  ---
67
153
 
68
154
  # Design System Inspiration of Linear
69
155
 
70
156
  ## 1. Visual Theme & Atmosphere
71
157
 
72
- Linear's website is a masterclass in dark-mode-first product design a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.
158
+ Linear is a product-development system for planning and building software, and its public experience treats precision as atmosphere. The current pages use a deep `#08090a` canvas, near-white `#f7f8f8` type, narrow luminance steps for secondary information, and light-steel conversion actions rather than flooding the interface with its indigo identity color. Large Inter Variable headings compress at 48px/510 with negative tracking, while compact 13px navigation and embedded product previews create a tool-like layer beneath the editorial story.
73
159
 
74
- The typography system is built entirely on Inter Variable with OpenType features `"cv01"` and `"ss03"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.
75
-
76
- The color system is almost entirely achromatic — dark backgrounds with white/gray text — punctuated by a single brand accent: Linear's signature indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) that create structure without visual noise, like wireframes drawn in moonlight.
160
+ The distinctive part is the boundary between public marketing and inspectable product demonstration. The homepage embeds real-looking issue, menu, comment, and control compositions, but those samples do not authorize claims about every authenticated workspace state. Six safe menu expansions established current open/selected behavior for public nav and the embedded preview. Berkeley Mono was visibly used for six technical input/text elements. Tiempos Headline appeared once on a surface-local heading and is documented as an observation rather than promoted as the UI family. Linear's official Method and brand pages provide philosophy and identity context separately.
77
161
 
78
162
  **Key Characteristics:**
79
- - Dark-mode-native: `#08090a` marketing background, `#0f1011` panel background, `#191a1b` elevated surfaces
80
- - Inter Variable with `"cv01", "ss03"` globally geometric alternates for a cleaner aesthetic
81
- - Signature weight 510 (between regular and medium) for most UI text
82
- - Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
83
- - Brand indigo-violet: `#5e6ad2` (bg) / `#7170ff` (accent) / `#828fff` (hover) the only chromatic color in the system
84
- - Semi-transparent white borders throughout: `rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`
85
- - Button backgrounds at near-zero opacity: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
86
- - Multi-layered shadows with inset variants for depth on dark surfaces
87
- - Radix UI primitives as the component foundation (6 detected primitives)
88
- - Success green (`#27a644`, `#10b981`) used only for status indicators
163
+ - Dark-native public canvas with narrow neutral luminance hierarchy
164
+ - Loaded Inter Variable across 1,728 visible elements; Berkeley Mono in technical preview roles
165
+ - Light-steel pill as the main public CTA; indigo retained as identity evidence
166
+ - 6px embedded product controls, 8px cards/menu rows, full-pill public actions
167
+ - Current focus/hover/pressed and menu-open states captured across four routes
89
168
 
90
169
  ## 2. Color Palette & Roles
91
170
 
92
- ### Background Surfaces
93
- - **Marketing Black** (`#010102` / `#08090a`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.
94
- - **Panel Dark** (`#0f1011`): Sidebar and panel backgrounds. One step up from the marketing black.
95
- - **Level 3 Surface** (`#191a1b`): Elevated surface areas, card backgrounds, dropdowns.
96
- - **Secondary Surface** (`#28282c`): The lightest dark surface used for hover states and slightly elevated components.
97
-
98
- ### Text & Content
99
- - **Primary Text** (`#f7f8f8`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.
100
- - **Secondary Text** (`#d0d6e0`): Cool silver-gray for body text, descriptions, and secondary content.
101
- - **Tertiary Text** (`#8a8f98`): Muted gray for placeholders, metadata, and de-emphasized content.
102
- - **Quaternary Text** (`#62666d`): The most subdued text — timestamps, disabled states, subtle labels.
103
-
104
- ### Brand & Accent
105
- - **Brand Indigo** (`#5e6ad2`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.
106
- - **Accent Violet** (`#7170ff`): Brighter variant for interactive elements — links, active states, selected items.
107
- - **Accent Hover** (`#828fff`): Lighter, more saturated variant for hover states on accent elements.
108
- - **Security Lavender** (`#7a7fad`): Muted indigo used specifically for security-related UI elements.
109
-
110
- ### Status Colors
111
- - **Green** (`#27a644`): Primary success/active status. Used for "in progress" indicators.
112
- - **Emerald** (`#10b981`): Secondary success — pill badges, completion states.
113
-
114
- ### Border & Divider
115
- - **Border Primary** (`#23252a`): Solid dark border for prominent separations.
116
- - **Border Secondary** (`#34343a`): Slightly lighter solid border.
117
- - **Border Tertiary** (`#3e3e44`): Lightest solid border variant.
118
- - **Border Subtle** (`rgba(255,255,255,0.05)`): Ultra-subtle semi-transparent border — the default.
119
- - **Border Standard** (`rgba(255,255,255,0.08)`): Standard semi-transparent border for cards, inputs, code blocks.
120
- - **Line Tint** (`#141516`): Nearly invisible line for the subtlest divisions.
121
- - **Line Tertiary** (`#18191a`): Slightly more visible divider line.
122
-
123
- ### Light Mode Neutrals (for light theme contexts)
124
- - **Light Background** (`#f7f8f8`): Page background in light mode.
125
- - **Light Surface** (`#f3f4f5` / `#f5f6f7`): Subtle surface tinting.
126
- - **Light Border** (`#d0d6e0`): Visible border in light contexts.
127
- - **Light Border Alt** (`#e6e6e6`): Alternative lighter border.
128
- - **Pure White** (`#ffffff`): Card surfaces, highlights.
129
-
130
- ### Overlay
131
- - **Overlay Primary** (`rgba(0,0,0,0.85)`): Modal/dialog backdrop — extremely dark for focus isolation.
171
+ - **Identity indigo** (`#5e6ad2`): official/live brand-defining accent, not the default public CTA fill.
172
+ - **Canvas** (`#08090a`): repeated current dark background.
173
+ - **Foreground** (`#f7f8f8`), **secondary** (`#d0d6e0`), **muted** (`#8a8f98`), **quiet** (`#62666d`): current information hierarchy.
174
+ - **Primary public action** (`#e5e5e6`) with `#08090a` content.
175
+ - **Hairline** (`#1c1d1e`): 8% white composited on `#08090a`, the current embedded/product boundary.
176
+
177
+ Neon lime is retained only as a captured customer-card editorial sibling, not a universal action or semantic token. Prior hover indigo and generic success colors are omitted without matching current interaction evidence.
132
178
 
133
179
  ## 3. Typography Rules
134
180
 
135
- ### Font Family
136
- - **Primary**: `Inter Variable`, with fallbacks: `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`
137
- - **Monospace**: `Berkeley Mono`, with fallbacks: `ui-monospace, SF Mono, Menlo`
138
- - **OpenType Features**: `"cv01", "ss03"` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.
139
-
140
- ### Hierarchy
141
-
142
- | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
143
- |------|------|------|--------|-------------|----------------|-------|
144
- | Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |
145
- | Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |
146
- | Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |
147
- | Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |
148
- | Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |
149
- | Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |
150
- | Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |
151
- | Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |
152
- | Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
153
- | Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |
154
- | Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |
155
- | Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |
156
- | Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |
157
- | Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |
158
- | Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |
159
- | Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |
160
- | Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |
161
- | Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |
162
- | Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |
163
- | Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |
164
- | Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |
165
- | Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |
166
- | Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |
167
- | Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |
168
- | Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |
169
- | Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |
170
- | Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |
171
-
172
- ### Principles
173
- - **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.
174
- - **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.
175
- - **OpenType as identity**: `"cv01", "ss03"` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.
176
- - **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.
177
-
178
- ## 4. Component Patterns
179
-
180
- Specs below are grouped by function. Unless marked *(Inferred)* or *(Refero)*, every value was measured via `getComputedStyle` on a live route (`linear.app` home, `/pricing`, `/customers`, `/now`) on 2026-06-09. Heights are rendered `getBoundingClientRect` values; colors are the computed paint converted to hex.
181
-
182
- ### Actions
183
-
184
- **primary cta (Sign up / Open app)**
185
- - Background: `#e5e5e6` (light neutral — the dark-page primary)
186
- - Text: `#08090a` (near-black)
187
- - Border: `1px solid #e5e5e6`
188
- - Radius: 9999px (full pill)
189
- - Height: 32px (nav) / 44px hero variant (16px text, 0px 20px padding)
190
- - Padding: 0px 12px (nav) → 0px 20px (hero)
191
- - Font: 13px weight 510 (nav) / 16px weight 510 (hero)
192
- - Shadow: layered drop stack `rgba(0,0,0,0.08) 0px 0px 1px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.01) 0px 5px 2px`
193
- - Use: Highest-priority CTA on dark surfaces ("Sign up", "Open app", "Get started")
194
-
195
- **secondary cta (Get started / Contact sales / Download)**
196
- - Background: `rgba(255,255,255,0.05)`
197
- - Text: `#f7f8f8`
198
- - Radius: 9999px (full pill)
199
- - Height: 40px (pricing) / 44px (hero); padding 0px 14px → 0px 20px
200
- - Font: 13–16px weight 510
201
- - Shadow: inset hairline + ring `rgba(255,255,255,0.03) 0px 0px 0px 1px inset, rgba(255,255,255,0.04) 0px 1px 0px 0px inset, rgba(0,0,0,0.6) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 4px 4px`
202
- - Use: Paired alternative beside the primary CTA — "Contact sales" next to "Get started"
203
-
204
- **brand cta (Lime "Build now")** *(Refero + live banner)*
205
- - Background: `#e4f222` (signature lime)
206
- - Text: `#08090a`
207
- - Radius: 6px (Refero) / 8px (live banner block, 24px 32px padding)
208
- - Font: Inter Variable 15px weight 590
209
- - Use: High-emphasis marketing conversion banner — Linear's loudest single accent
210
-
211
- **brand fill button** *(Inferred)*
212
- - Background: `#5e6ad2` (brand indigo) — measured live only on the visually-hidden "Skip to content" control (`#5e6ad2` fill, white text, 0px 16px, 32px, 14px/510)
213
- - Text: `#ffffff`
214
- - Hover: `#828fff` shift
215
- - Use: Brand-accent fills; in marketing chrome the indigo is reserved, surfacing on the skip-link and in-product accents rather than primary page CTAs
216
-
217
- **ghost button** *(Inferred)*
218
- - Background: `rgba(255,255,255,0.02)`
219
- - Text: `#e2e4e7`
220
- - Radius: 6px
221
- - Border: `1px solid #24282c`
222
- - Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
223
- - Use: Tertiary actions, low-emphasis secondary CTAs
224
-
225
- **inline chip button (toolbar)**
226
- - Background: `rgba(255,255,255,0.04)`
227
- - Text: `#d0d6e0`
228
- - Radius: 6px
229
- - Height: 28px; padding 0px 6px
230
- - Font: 13px weight 510
231
- - Use: In-product contextual labels surfaced in marketing ("Faster app launch")
232
-
233
- **icon button (circle)** *(Inferred)*
234
- - Background: `rgba(255,255,255,0.03)` → `rgba(255,255,255,0.05)`
235
- - Text: `#f7f8f8`
236
- - Radius: 50%
237
- - Border: `1px solid rgba(255,255,255,0.08)`
238
- - Use: Close, menu toggle, icon-only actions
239
-
240
- ### Navigation
241
-
242
- **top nav bar**
243
- - Background: transparent over near-black; sticky; 73px tall
244
- - Logomark left-aligned (SVG, 4px radius hit-area, 28px)
245
- - Links: Inter Variable 13px weight 400, idle `#8a8f98`, active/hover lightens to `#f7f8f8`
246
- - Link hit-area: 9999px radius, 0px 12px padding, 32px height
247
- - Right cluster: "Log in" ghost text + "Sign up" primary pill
248
- - Mobile: hamburger collapse at 768px
249
-
250
- **mega-menu / dropdown popover**
251
- - Background: `#101112` (one luminance step up from panel)
252
- - Radius: 12px
253
- - Border: `1px solid rgba(255,255,255,0.08)`
254
- - Nested submenu: `#161718` background, 8px radius, `1px solid rgba(255,255,255,0.05)` border
255
- - Use: "Product" / "Resources" navigation flyouts
256
-
257
- **footer**
258
- - Background: `#08090a` (marketing black)
259
- - Top divider: `1px solid #23252a`
260
- - Multi-column link layout; link text in `#8a8f98`, hover `#f7f8f8`
261
-
262
- ### Forms
263
-
264
- **search input**
265
- - Background: `#141516` (line tint)
266
- - Text / placeholder: `#8a8f98`
267
- - Radius: 9999px (rendered as 100px pill)
268
- - Height: 40px; padding 0px 16px
269
- - Font: 14px weight 400
270
- - Shadow: same inset+ring stack as the secondary CTA (`rgba(255,255,255,0.03) 0px 0px 0px 1px inset … rgba(0,0,0,0.1) 0px 4px 4px`)
271
- - Use: Changelog / docs search field; in-app, the same affordance triggers the `Cmd+K` command palette
272
-
273
- **text area** *(Inferred)*
274
- - Background: `rgba(255,255,255,0.02)`
275
- - Text: `#d0d6e0`
276
- - Border: `1px solid rgba(255,255,255,0.08)`
277
- - Padding: 12px 14px
278
- - Radius: 6px
279
-
280
- ### Data display
281
-
282
- **card / container**
283
- - Background: `rgba(255,255,255,0.02)` → `rgba(255,255,255,0.05)` (never solid — always translucent)
284
- - Border: `1px solid rgba(255,255,255,0.08)` (standard) or `1px solid rgba(255,255,255,0.05)` (subtle)
285
- - Radius: 8px (standard), 12px (featured), 22px (large panels)
286
- - Shadow: `rgba(0,0,0,0.2) 0px 0px 0px 1px` (ring) or layered multi-shadow stacks
287
- - Hover: subtle background-opacity increase
288
-
289
- **default card** *(Refero)*
290
- - Background: `#0f1011` (panel dark)
291
- - Radius: 6px
292
- - Use: Refero-captured in-product card surface
293
-
294
- **product screenshot frame**
295
- - Border: `1px solid rgba(255,255,255,0.08)` on dark
296
- - Top-rounded variant: `12px 12px 0px 0px` radius
297
- - Shadow: `rgba(0,0,0,0.4) 0px 2px 4px`
298
- - Use: Dashboard / issue previews dominating feature sections
299
-
300
- ### Overlays
301
-
302
- **command palette / dialog** *(Inferred, from §6 Dialog stack)*
303
- - Background: `#191a1b`
304
- - Border: `1px solid rgba(255,255,255,0.08)`
305
- - Radius: 12px
306
- - Shadow: multi-layer Dialog stack (`rgba(0,0,0,0.08) 0px 0px 1px … rgba(0,0,0,0) 0px 8px 2px`)
307
- - Backdrop: `rgba(0,0,0,0.85)`
308
- - Use: `Cmd+K` command palette, modals
309
-
310
- ### Feedback & Status
311
-
312
- **filter pill / tag**
313
- - Background: transparent
314
- - Text: `#d0d6e0`
315
- - Radius: 9999px (full pill)
316
- - Height: 26px; padding 0px 10px 0px 5px
317
- - Border: `1px solid #23252a`
318
- - Font: 12px weight 510
319
- - Use: Tags, filter chips, category labels ("Performance", "iOS")
320
-
321
- **pagination button (Load more)**
322
- - Background: `rgba(255,255,255,0.05)`
323
- - Text: `#f7f8f8`
324
- - Radius: 9999px
325
- - Height: 40px; padding 0px 16px
326
- - Font: 15px weight 510
327
- - Shadow: inset+ring stack (matches secondary CTA)
328
- - Use: Changelog "Load more" pagination
329
-
330
- **success pill** *(Inferred)*
331
- - Background: `#10b981`
332
- - Text: `#f7f8f8`
333
- - Radius: 50% (circular dot) or 9999px (chip)
334
- - Font: 10px weight 510
335
- - Use: Status dots, completion indicators
336
-
337
- **subtle badge** *(Inferred)*
338
- - Background: `rgba(255,255,255,0.05)`
339
- - Text: `#f7f8f8`
340
- - Padding: 0px 8px 0px 2px
341
- - Radius: 2px
342
- - Border: `1px solid rgba(255,255,255,0.05)`
343
- - Font: 10px weight 510
344
- - Use: Inline labels, version tags
181
+ ### Font evidence boundary
345
182
 
346
- ---
183
+ | Evidence class | Resolution |
184
+ |---|---|
185
+ | Official product-use | Public Linear surfaces and embedded product demonstrations establish Inter Variable and Berkeley Mono roles. |
186
+ | Live surface-use | Inter Variable loaded/high, 1,728 uses; Berkeley Mono loaded/high, six uses; Tiempos Headline loaded/medium, one heading use. |
187
+ | Official distributed asset | These first-party webfont files are not assumed redistributable. |
188
+ | Declared-only | SF Pro and system fallbacks remain fallback declarations. |
189
+ | Unresolved | Authenticated workspace and native/desktop overrides remain unresolved. |
190
+
191
+ | Role | Family | Size | Weight | Line height | Tracking |
192
+ |---|---|---:|---:|---:|---:|
193
+ | Section display | Inter Variable | 48px | 510 | 48px | -1.056px |
194
+ | Feature heading | Inter Variable | 24px | 590 | 31.92px | -0.288px |
195
+ | Method body | Inter Variable | 15px | 400 | 24px | -0.165px |
196
+ | Navigation | Inter Variable | 13px | 400 | 19.5px | -0.13px |
197
+ | Technical preview | Berkeley Mono | 14px | 400 | 24px | normal |
198
+
199
+ ## 4. Component Stylings
200
+
201
+ ### Current verified components
202
+
203
+ #### Primary and secondary public actions
204
+ - Primary: `#e5e5e6` / `#08090a`; secondary: 5% white / `#f7f8f8`
205
+ - Full-pill, 44px height, 0 20px, Inter 16px/510
206
+
207
+ #### Navigation trigger
208
+ - Transparent, `#8a8f98`, full-pill, 32px, 0 12px, Inter 13px/400
209
+ - Focus, hover, pressed, expanded, and menu-open states observed
210
+
211
+ #### Embedded product menu row
212
+ - Transparent / `#f7f8f8`, 8px radius, `12px 16px 12px 12px`
213
+ - Selected/open state captured; nested menu items use a separate 6px compact geometry
214
+
215
+ #### Customer story card
216
+ - Transparent surface, near-white copy, 8px radius, `24px 32px`
217
+ - The lime sibling is an editorial variant, not a universal card token
347
218
 
348
- **Verified:** 2026-06-09
349
- **Tier:** 2 (no public design system / Storybook; brand page at `linear.app/brand` is wordmark + color only; product app behind auth). Harvested across 4 public routes — home, `/pricing`, `/customers`, `/now`.
350
- **Tier 1 sources:** linear.app live DOM via playwright — nav links 13px / 400 / `#8a8f98` → `#f7f8f8` active, 9999px / 0×12 / 32px; primary CTA `#e5e5e6` fill / `#08090a` text / 9999px / 32px (nav) and 44px / 0×20 / 16px (hero); secondary CTA `rgba(255,255,255,0.05)` / 40–44px / inset+ring shadow; search input `#141516` / 40px / 100px pill; filter pill transparent / `#23252a` border / 26px; "Load more" `rgba(255,255,255,0.05)` / 40px; mega-menu popover `#101112` / 12px / `rgba(255,255,255,0.08)`, submenu `#161718` / 8px; footer `#08090a` with `#23252a` top divider; lime banner `#e4f222` / 8px.
351
- **Tier 2 sources:** styles.refero.design/style/90ce5883-bb24-4466-93f7-801cd617b0d1 (Primary Action Lime `#e4f222` / `#08090a` text / 6px / Inter Variable 590·15px ✓; Default Card `#0f1011` / 6px ✓); getdesign.md/linear — directory only.
352
- **Conflicts unresolved:** none. Refero captures the Lime "Build now" CTA (`#e4f222`); live homepage primary is the light neutral `#e5e5e6` ("Sign up"). Both retained as distinct action variants above.
219
+ Inputs, command palettes, authenticated issue controls, success badges, and dialogs are omitted from canonical machine components unless current evidence establishes their exact role.
353
220
 
354
221
  ## 5. Layout Principles
355
222
 
356
- ### Spacing System
357
- - Base unit: 8px
358
- - Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px
359
- - The 7px and 11px values suggest micro-adjustments for optical alignment
360
- - Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)
361
-
362
- ### Grid & Container
363
- - Max content width: approximately 1200px
364
- - Hero: centered single-column with generous vertical padding
365
- - Feature sections: 2–3 column grids for feature cards
366
- - Full-width dark sections with internal max-width constraints
367
- - Changelog: single-column timeline layout
368
-
369
- ### Whitespace Philosophy
370
- - **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.
371
- - **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.
372
- - **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.
373
-
374
- ### Border Radius Scale
375
- - Micro (2px): Inline badges, toolbar buttons, subtle tags
376
- - Standard (4px): Small containers, list items
377
- - Comfortable (6px): Buttons, inputs, functional elements
378
- - Card (8px): Cards, dropdowns, popovers
379
- - Panel (12px): Panels, featured cards, section containers
380
- - Large (22px): Large panel elements
381
- - Full Pill (9999px): Chips, filter pills, status tags
382
- - Circle (50%): Icon buttons, avatars, status dots
223
+ - Use a deep continuous canvas and create hierarchy through luminance before borders.
224
+ - Keep public conversion actions pill-shaped; keep embedded product controls compact at 6–8px.
225
+ - Let large editorial typography and product demonstration alternate rather than stacking generic cards.
226
+ - Preserve generous 24–32px card padding where customer stories become full compositions.
383
227
 
384
228
  ## 6. Depth & Elevation
385
229
 
386
- | Level | Treatment | Use |
387
- |-------|-----------|-----|
388
- | Flat (Level 0) | No shadow, `#010102` bg | Page background, deepest canvas |
389
- | Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | Toolbar buttons, micro-elevation |
390
- | Surface (Level 2) | `rgba(255,255,255,0.05)` bg + `1px solid rgba(255,255,255,0.08)` border | Cards, input fields, containers |
391
- | Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | Recessed panels, inner shadows |
392
- | Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | Border-as-shadow technique |
393
- | Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | Floating elements, dropdowns |
394
- | Dialog (Level 5) | Multi-layer stack: `rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | Popovers, command palette, modals |
395
- | Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + additional layers | Keyboard focus on interactive elements |
396
-
397
- **Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (`0.02` → `0.04` → `0.05`), creating a subtle stacking effect. The inset shadow technique (`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`) creates a unique "sunken" effect for recessed panels, adding dimensional depth that traditional dark themes lack.
230
+ Depth is low-contrast and layered: faint inset rings and small multi-layer action shadows on dark surfaces. The primary action shadow is role-specific, not a default for every control.
398
231
 
399
232
  ## 7. Do's and Don'ts
400
233
 
401
234
  ### Do
402
- - Use Inter Variable with `"cv01", "ss03"` on ALL text these features are fundamental to Linear's typeface identity
403
- - Use weight 510 as your default emphasis weight it's Linear's signature between-weight
404
- - Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
405
- - Build on near-black backgrounds: `#08090a` for marketing, `#0f1011` for panels, `#191a1b` for elevated surfaces
406
- - Use semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) instead of solid dark borders
407
- - Keep button backgrounds nearly transparent: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
408
- - Reserve brand indigo (`#5e6ad2` / `#7170ff`) for primary CTAs and interactive accents only
409
- - Use `#f7f8f8` for primary text — not pure `#ffffff`, which would be too harsh
410
- - Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg
235
+ - Use the verified neutral hierarchy and distinguish public actions from product-preview controls.
236
+ - Keep Inter Variable's observed 510/590 weights and negative display tracking.
237
+ - Treat open/selected states as component-local evidence.
411
238
 
412
239
  ### Don't
413
- - Don't use pure white (`#ffffff`) as primary text `#f7f8f8` prevents eye strain
414
- - Don't use solid colored backgrounds for buttons transparency is the system (rgba white at 0.02–0.05)
415
- - Don't apply the brand indigo decoratively it's reserved for interactive/CTA elements only
416
- - Don't use positive letter-spacing on display text — Inter at large sizes always runs negative
417
- - Don't use visible/opaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white
418
- - Don't skip the OpenType features (`"cv01", "ss03"`) — without them, it's generic Inter, not Linear's Inter
419
- - Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse
420
- - Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only
421
- - Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead
240
+ - Do not make neon lime or indigo the default CTA everywhere.
241
+ - Do not export embedded preview states as authenticated-app facts.
242
+ - Do not invent command palettes, status colors, or errors from Linear-like convention.
422
243
 
423
244
  ## 8. Responsive Behavior
424
245
 
425
- ### Breakpoints
426
- | Name | Width | Key Changes |
427
- |------|-------|-------------|
428
- | Mobile Small | <600px | Single column, compact padding |
429
- | Mobile | 600–640px | Standard mobile layout |
430
- | Tablet | 640–768px | Two-column grids begin |
431
- | Desktop Small | 768–1024px | Full card grids, expanded padding |
432
- | Desktop | 1024–1280px | Standard desktop, full navigation |
433
- | Large Desktop | >1280px | Full layout, generous margins |
434
-
435
- ### Touch Targets
436
- - Buttons use comfortable padding with 6px radius minimum
437
- - Navigation links at 13–14px with adequate spacing
438
- - Pill tags have 10px horizontal padding for touch accessibility
439
- - Icon buttons at 50% radius ensure circular, easy-to-tap targets
440
- - Search trigger is prominently placed with generous hit area
441
-
442
- ### Collapsing Strategy
443
- - Hero: 72px → 48px → 32px display text, tracking adjusts proportionally
444
- - Navigation: horizontal links + CTAs → hamburger menu at 768px
445
- - Feature cards: 3-column → 2-column → single column stacked
446
- - Product screenshots: maintain aspect ratio, may reduce padding
447
- - Changelog: timeline maintains single-column through all sizes
448
- - Footer: multi-column → stacked single column
449
- - Section spacing: 80px+ → 48px on mobile
450
-
451
- ### Image Behavior
452
- - Dashboard screenshots maintain border treatment at all sizes
453
- - Hero visuals simplify on mobile (fewer floating UI elements)
454
- - Product screenshots use responsive sizing with consistent radius
455
- - Dark background ensures screenshots blend naturally at any viewport
246
+ Public routes retain the dark canvas, pill navigation/actions, and type hierarchy as sections reflow. Authenticated workspace breakpoints and desktop-client layout remain unresolved.
456
247
 
457
248
  ## 9. Agent Prompt Guide
458
249
 
459
- ### Quick Color Reference
460
- - Primary CTA: Brand Indigo (`#5e6ad2`)
461
- - Page Background: Marketing Black (`#08090a`)
462
- - Panel Background: Panel Dark (`#0f1011`)
463
- - Surface: Level 3 (`#191a1b`)
464
- - Heading text: Primary White (`#f7f8f8`)
465
- - Body text: Silver Gray (`#d0d6e0`)
466
- - Muted text: Tertiary Gray (`#8a8f98`)
467
- - Subtle text: Quaternary Gray (`#62666d`)
468
- - Accent: Violet (`#7170ff`)
469
- - Accent Hover: Light Violet (`#828fff`)
470
- - Border (default): `rgba(255,255,255,0.08)`
471
- - Border (subtle): `rgba(255,255,255,0.05)`
472
- - Focus ring: Multi-layer shadow stack
473
-
474
- ### Example Component Prompts
475
- - "Create a hero section on `#08090a` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color `#f7f8f8`, font-feature-settings `'cv01', 'ss03'`. Subtitle at 18px weight 400, line-height 1.60, color `#8a8f98`. Brand CTA button (`#5e6ad2`, 6px radius, 8px 16px padding) and ghost button (`rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 6px radius)."
476
- - "Design a card on dark background: `rgba(255,255,255,0.02)` background, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color `#f7f8f8`. Body at 15px weight 400, color `#8a8f98`, letter-spacing -0.165px."
477
- - "Build a pill badge: transparent background, `#d0d6e0` text, 9999px radius, 0px 10px padding, `1px solid #23252a` border, 12px Inter Variable weight 510."
478
- - "Create navigation: dark sticky header on `#0f1011`. Inter Variable 13px weight 510 for links, `#d0d6e0` text. Brand indigo CTA `#5e6ad2` right-aligned with 6px radius. Bottom border: `1px solid rgba(255,255,255,0.05)`."
479
- - "Design a command palette: `#191a1b` background, `1px solid rgba(255,255,255,0.08)` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, `#f7f8f8` text. Results list with 13px weight 510 labels in `#d0d6e0` and 12px metadata in `#62666d`."
480
-
481
- ### Iteration Guide
482
- 1. Always set font-feature-settings `"cv01", "ss03"` on all Inter text — this is non-negotiable for Linear's look
483
- 2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px
484
- 3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)
485
- 4. Surface elevation via background opacity: `rgba(255,255,255, 0.02 → 0.04 → 0.05)` — never solid backgrounds on dark
486
- 5. Brand indigo (`#5e6ad2` / `#7170ff`) is the only chromatic color — everything else is grayscale
487
- 6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds
488
- 7. Berkeley Mono for any code or technical content, Inter Variable for everything else
489
-
490
- ---
250
+ > Build a precise dark product-development surface with a `#08090a` canvas, near-white and stepped gray text, Inter Variable, restrained negative tracking, light-steel full-pill primary actions, and compact 6–8px product-preview controls. Use only verified menu-open/selected states and omit speculative workspace components.
491
251
 
492
252
  ## 10. Voice & Tone
493
253
 
494
- Linear's voice is craftsman-like, direct, and quietly opinionated. The product's own README opens with *"This is not a manifesto. This is not a codex, not a whitepaper, and not a secret master plan. This is just a simple story"* — and that anti-grandeur register is the whole voice. It speaks to makers: software engineers, designers, product managers, founding teams. Technical vocabulary is used when appropriate, without apology. Marketing superlatives are never used. When Linear makes a claim, it is specific ("2-week cycles are the most common in software building") rather than promotional ("boost your team's productivity by 10x").
495
-
496
- | Context | Tone |
497
- |---|---|
498
- | Hero headlines | Declarative, opinionated. "The AI-native platform for modern product teams." |
499
- | Product descriptions | Concrete, mechanic-focused ("Cycles create a healthy routine and focus teams"). Never feature-listy. |
500
- | CTAs | Imperative verb + noun. "Start building", "Sign in", "Read the method". |
501
- | Issue / UI strings | Dense but unambiguous. Technical abbreviations are fine — the audience reads them. |
502
- | Docs / API reference | Peer-to-peer. Never condescending, never hedging. |
503
- | Changelog ("Now") | Specific, dated, ship-proud. "We shipped X. It does Y." |
504
- | Marketing copy | Craft-oriented — speaks about quality, speed, focus — not productivity metrics. |
505
- | Error messages | Specific and blameless. Never "An error occurred." |
506
- | Onboarding | One idea per screen. Keyboard shortcuts are taught inline, not in a tour. |
507
-
508
- **Forbidden phrases.** "10x", "boost your productivity", "empower your team", "unleash", "supercharge", "revolutionary". User-story vocabulary ("As a user, I want...") — the Linear Method explicitly rejects this frame, and it should not appear anywhere in product, marketing, or docs copy. "Easy peasy", "effortless" as self-descriptors. Performative onboarding toasts ("Great choice!"). Emoji on product or marketing surfaces — Linear does not add 🚀 or ✨ to its release notes.
254
+ Linear's public language is concise, opinionated, and operational. Describe how teams plan and build with direct verbs and clear tradeoffs. Product copy should name the work object, its state, and the next decision rather than celebrate process for its own sake. Method content may be more declarative, but it should still connect principles to how a team actually plans, discusses, and ships work. Keep labels short. Avoid decorative productivity claims and unsupported speed metrics; prioritize focus, momentum, quality, and deliberate workflow.
509
255
 
510
256
  ## 11. Brand Narrative
511
257
 
512
- Linear was founded **January 2019** in San Francisco by **Karri Saarinen** (CEO), **Tuomas Artman** (CTO), and **Jori Lallo** (CPO) — all Finnish, with origins in the Helsinki startup community ([Linear About](https://linear.app/about), [Sequoia spotlight](https://sequoiacap.com/article/linear-spotlight/)). Their backgrounds were at Airbnb (Saarinen, Principal Designer), Coinbase (Lallo, Senior Engineer), and Uber (Artman, Senior Engineer). Saarinen and Lallo had previously co-founded **Kippt** (collaborative bookmarking, [YC 2012](https://research.contrary.com/company/linear)), which Coinbase acquired in 2014. In 2018 Lallo took a sabbatical and pitched the new tool to Saarinen and Artman; they bootstrapped Linear's first version for small/mid-size companies. Linear exited private beta in **June 2020** and was **profitable by June 2021 with negative lifetime burn** ([Pragmatic Engineer](https://newsletter.pragmaticengineer.com/p/linear)). The two funding rounds were both led by Sequoia Capital **Seed $4.2M (November 2019)** and **Series A $13M (December 2020)**. Their founding complaint is published on their public README: *"Craftsmanship was replaced with growth hacks. Our once so lively dreams have become positively lifeless."* The name itself was chosen as a design statement: *"We chose to name it Linear to signify progress."*
513
-
514
- That craft-first positioning has stayed the company's center of gravity. Linear publishes **The Linear Method** — a public document stating *"There is a lost art of building true quality software. To bring back the right focus, here are the foundational ideas Linear is built on."* The Method articulates opinions most companies would never publish: *"Write issues not user stories"*, *"A tool should work for you, not the other way around"*, *"Don't invent terms if possible"*. These are not marketing — they are internal operating principles made public because Linear wants to attract customers who already agree with them.
515
-
516
- What Linear refuses: bloat (*"A tool should be simple to get started with and grow more powerful as you scale"*), vocabulary inflation, the user-story framework, marketing metrics like "10x productivity", and the generic SaaS dark-theme-as-afterthought aesthetic. What it embraces: near-black as the native medium (not a toggled theme), Inter Variable at its 510 weight as a typographic signature, keyboard-first interaction, and publishing strong opinions *before* asking a customer to adopt them.
258
+ Linear presents software development as a system that benefits from clear principles, not a collection of disconnected tickets. Its Method turns product philosophy into explicit operating guidance, while the dark public interface and embedded product demonstrations make that discipline visible. The brand's indigo identifies Linear, but neutral structure does most of the interface work. That restraint supports the company's larger narrative: product teams need a shared environment where issues, projects, feedback, and progress remain connected without adding operational noise. Public customer stories show the system in organizational context, while embedded product compositions demonstrate how compact menus, labels, and states can make dense work legible. The visual language therefore combines editorial conviction with tool-like precision. It should feel fast because hierarchy is clear, not because motion or unsupported performance claims are added.
517
259
 
518
260
  ## 12. Principles
519
261
 
520
- 1. **A tool should work for you, not the other way around.** *(Linear Method, verbatim.)* The UI must never demand admin work to be useful. Keyboard shortcuts are first-class; mouse-only workflows are second-class.
521
- 2. **Productivity software needs to be designed for purpose.** *(Linear Method, verbatim.)* No generic SaaS templates. Every surface — issue list, cycle view, project brief — is shaped by the specific work it supports.
522
- 3. **Write issues not user stories.** *(Linear Method, verbatim.)* The "As a user, I want..." frame is banned from the product vocabulary and from Linear's own copy.
523
- 4. **Don't invent terms if possible.** *(Linear Method, verbatim.)* If a concept can use an existing word, use it. Proprietary jargon is a tax on every new user.
524
- 5. **Cycles over sprints.** *(Linear Method.)* Sprints are running — frantic, short-term. Cycles are rhythms — sustainable, repeated. Word choice is design.
525
- 6. **Craft is the product.** Linear's public README critiques the industry for replacing craft with growth hacks. The visible craft — exact letter-spacing, semi-transparent borders at 0.05 opacity, weight 510 as signature — is that critique made concrete.
526
- 7. **Ambitious goals are the only way to make a significant impact.** *(Linear Method, verbatim.)* Every project has a named owner and a specific brief. Vague roadmaps do not exist.
527
- 8. **Opinions are the feature.** Linear publishes opinions (The Method, the README) before the product converts anyone. Customers self-select for alignment; they are not sold.
528
- 9. **Darkness is the canvas, not a theme.** The near-black background is native to the product, not a dark-mode toggle. Light mode exists but is secondary. Chromatic restraint (single indigo-violet accent) is the same discipline.
529
- 10. **Designers and engineers work together.** *(Linear Method, verbatim: "Designers and engineers should work together on projects, creating a natural push and pull.")* The design system's precision and the product's UX cohesion both come from this pairing — no handoff artifacts, no siloed "design review".
262
+ 1. **Build with focus.** Reduce visual and operational noise around the next important action.
263
+ 2. **Make progress legible.** Hierarchy and state should help teams understand momentum.
264
+ 3. **Use opinionated defaults carefully.** Strong conventions should remain tied to verified roles.
265
+ 4. **Separate story from product truth.** Marketing demos, Method, brand assets, and private workspaces are distinct evidence domains, even when they share the same visual language.
530
266
 
531
267
  ## 13. Personas
532
268
 
533
- *Personas below are fictional archetypes informed by publicly observable Linear user segments (software engineers, product designers, engineering managers, early-stage founders), not individual people.*
269
+ Public material establishes task contexts only:
270
+ - A product or engineering lead planning work and reviewing progress.
271
+ - A software maker creating, prioritizing, or discussing issues.
272
+ - A cross-functional team evaluating workflow, pricing, or migration fit.
534
273
 
535
- **Lena Hoffmann, 32, Berlin.** Staff engineer at a Series-B SaaS startup. Uses Linear as her primary work surface — issues, cycles, documents — and refuses to switch to anything that requires more than one keystroke to capture a thought. Reads The Linear Method periodically to see how the team thinks. Has opinions about the exact width of the sidebar (a few pixels too narrow for her taste). Would not use Jira if she were paid to.
536
-
537
- **Juan Pablo Reyes, 28, Buenos Aires.** Product designer at a fintech startup. Uses Linear's issue list the way a composer uses a score — he can read the state of a project in five seconds from the shape of the list alone. Appreciates that cards do not have decorative illustrations or progress bars; the data is the design. Finds Linear's keyboard shortcuts addictive to the point of being slightly annoying when he uses other tools.
538
-
539
- **Mei-Ling Chen, 45, Taipei.** Engineering manager with 12 engineers reporting to her. Runs biweekly cycles. Relies on the cycle view to see slip without having to ask anyone. Values that Linear publishes its method publicly — she uses the Method as training material for new hires instead of writing her own playbook.
540
-
541
- **Matias Lahti, 26, Helsinki.** Founding engineer at a stealth startup. Introduced Linear to his co-founders on day one because he views project-management tool choice as culture-setting. Reads Linear's "Now" release notes as a weekly ritual. Views Linear's pricing page the way he views a well-designed terminal prompt — functional, opinionated, correctly small.
274
+ Project-specific names, team sizes, roles, metrics, and company stages are intentionally unspecified and must come from the product brief.
542
275
 
543
276
  ## 14. States
544
277
 
545
- | State | Treatment |
546
- |---|---|
547
- | **Empty (no issues)** | Near-black (`#08090a`) canvas. Single Primary Text line at 18px Inter Variable 510: "No issues yet." One ghost button "Create first issue". No illustration. No decorative progress bars. |
548
- | **Empty (filter with zero results)** | Tertiary Text (`#8a8f98`) caption: "No issues match this filter." Active filter chip visible above. Reset filter link in Accent Violet (`#7170ff`). |
549
- | **Loading (first paint)** | Skeleton bars at exact list-row heights using `rgba(255,255,255,0.03)` — one luminance step *below* the actual row background, so content paints in as a step-up rather than a step-down. 1.2s shimmer in cool gray. No spinners. |
550
- | **Loading (real-time sync)** | Nothing. Linear's sync is assumed; if it breaks, the offline banner surfaces instead. Persistent sync spinners would violate the "tool works for you" principle. |
551
- | **Error (offline / sync failed)** | Top banner at `rgba(255,255,255,0.05)` with Primary Text + an Accent Violet reconnect link. One sentence. Technical and honest ("Sync paused — will reconnect automatically"). |
552
- | **Error (command palette action failed)** | Inline below the command input. Muted red at 510 weight — Linear's palette does not include a vibrant error red, so the error tone stays in the cool, restrained register. |
553
- | **Error (form validation)** | Field-level. 13px caption below the field in muted red (`~#c45858` equivalent), describes what is invalid and what would be valid. No icon, no banner. |
554
- | **Success (issue created)** | Issue appears at the top of the list with a 300ms fade from 0 opacity. No toast. The issue's presence is the confirmation. |
555
- | **Success (cycle completed)** | Cycle chip transitions to Success Green (`#10b981`) with 510 weight label. One-time transition, no celebratory effects, no confetti. |
556
- | **Skeleton** | Semi-transparent white (`rgba(255,255,255,0.03)` → `0.05` shimmer) blocks at exact list-row dimensions. Never cool blue or purple — stays in the achromatic palette. |
557
- | **Disabled** | Opacity drops on both text and border together. Disabled buttons keep their 6px radius; geometry stable if re-enabled. |
558
- | **Keyboard focus ring** | Multi-layer shadow stack (Depth Level "Focus" from §6). Visible but not loud — matches the "subtle structure" philosophy. |
278
+ Public nav focus/hover/pressed and expanded/menu-open states are verified. Embedded menu selected/open is verified. Loading, empty, error, success, disabled workflow, and command-palette states remain absent.
559
279
 
560
280
  ## 15. Motion & Easing
561
281
 
562
- **Durations**:
563
-
564
- | Token | Value | Use |
565
- |---|---|---|
566
- | `motion-instant` | 0ms | Selection, toggle, keyboard shortcut commits |
567
- | `motion-fast` | 100ms | Hover, focus, button press — deliberately the fastest across the reference set |
568
- | `motion-standard` | 180ms | Sheet, modal, dropdown, command palette |
569
- | `motion-slow` | 280ms | Rare — hero reveals on marketing surfaces only |
570
-
571
- **Easings**:
572
-
573
- | Token | Curve | Use |
574
- |---|---|---|
575
- | `ease-enter` | `cubic-bezier(0.2, 0.6, 0.25, 1)` | Arriving — sheets, command palette, dropdowns |
576
- | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Dismissals |
577
- | `ease-standard` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | Two-way transitions, hover states |
578
-
579
- **Explicitly forbidden.** No spring. No bounce. No overshoot. Linear does not use a `cubic-bezier` with a middle control value above `1.0` anywhere. Motion is a precision instrument, not a delight vehicle. A bouncing button in Linear would undermine the entire craft argument.
580
-
581
- **Signature motions.**
582
-
583
- 1. **Command palette (⌘K).** The palette opens at `motion-fast` with `ease-enter` — 100ms is deliberately fast enough to feel like the UI responds at the speed of thought. A slower open would break the keyboard-first promise.
584
- 2. **Issue row fade-in.** New issues appearing at the top of a list fade from 0 to 1 over `motion-standard`. No slide, no scale. The issue either exists or it doesn't — the transition is the smallest necessary proof that something changed.
585
- 3. **Cycle completion.** When a cycle completes, the cycle header chip transitions color from Accent Violet to Success Green over `motion-slow` with `ease-standard`. One time, no repeat. This is the one place Linear's UI "celebrates" — and it celebrates by changing a color token, not by animating confetti.
586
- 4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Fade-ins become instant appearances. The app stays fully functional; the keyboard-first workflow gets no worse.
587
-
588
- <!--
589
- OmD v0.1 Sources — Philosophy Layer (sections 10–15)
590
-
591
- Direct verification via WebFetch (2026-04-19):
592
- - https://linear.app/method — confirms the existence of "The Linear Method" as
593
- a public philosophy document. Opening statement verbatim:
594
- "There is a lost art of building true quality software. To bring back
595
- the right focus, here are the foundational ideas Linear is built on."
596
- Includes explicit practice "Write issues not user stories" (rejecting the
597
- user-story frame).
598
- - https://linear.app/method/introduction — confirms the following verbatim
599
- principles used directly in §10 and §12:
600
- "Software project management tools should build with the end users –
601
- the creators – in mind."
602
- "Productivity software needs to be designed for purpose."
603
- "A tool should work for you, not the other way around."
604
- "Don't invent terms if possible, as these can confuse and have different
605
- meanings in different teams."
606
- "Ambitious goals are the only way to make a significant impact."
607
- "Cycles create a healthy routine and focus teams on what needs to happen
608
- next."
609
- "2-week cycles are the most common in software building."
610
- "Designers and engineers should work together on projects, creating a
611
- natural push and pull."
612
- - https://linear.app/readme — confirms the following verbatim statements used
613
- directly in §10 and §11:
614
- "This is not a manifesto. This is not a codex, not a whitepaper, and
615
- not a secret master plan. This is just a simple story."
616
- "Our mission is to create the tool for the story at hand. A tool that
617
- feels magical..."
618
- "Craftsmanship was replaced with growth hacks...Our once so lively
619
- dreams have become positively lifeless."
620
- "We chose to name it Linear to signify progress."
621
-
622
- Base DESIGN.md (sections 1–9) is the source for all token-level claims
623
- (near-black backgrounds #08090a/#0f1011/#191a1b, Inter Variable with "cv01"/
624
- "ss03", weight 510 as the signature, semi-transparent white borders
625
- at 0.05–0.08 alpha, brand indigo #5e6ad2/#7170ff, Berkeley Mono for code).
626
-
627
- Not independently verified via WebFetch — widely documented public facts used:
628
- - Linear was founded in 2019 by Karri Saarinen, Tuomas Artman, and Jori Lallo.
629
- - Karri's prior roles at companies including Airbnb and Coinbase are widely
630
- reported in tech press and in founder interviews.
631
-
632
- Personas (§13) are fictional archetypes informed by publicly observable
633
- Linear user segments (software engineers, product designers, engineering
634
- managers, early-stage founders). Names are illustrative; they do not refer
635
- to real people.
636
-
637
- Interpretive claims (e.g., "Cycles over sprints — word choice is design",
638
- "Darkness is the canvas, not a theme") are editorial readings connecting
639
- Linear's stated principles to the design system, not directly sourced
640
- Linear statements.
641
- -->
282
+ No reusable current duration or easing curve is promoted. Menu expansion proves state change, not a universal animation token.
283
+
284
+ ---
642
285
 
286
+ **Verified:** 2026-07-12 (omd:migrate)
287
+ **Tier 1 sources:** https://linear.app/ ; https://linear.app/method ; https://linear.app/customers ; https://linear.app/pricing ; https://linear.app/brand
288
+ **Tier 2 attempts:** getdesign.md/linear supplied a directory snippet; Refero was used only to discover historical lime/indigo and radius conflicts
289
+ **Conflicts unresolved:** none