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
@@ -4,427 +4,265 @@ name: Lamborghini
4
4
  country: IT
5
5
  category: automotive
6
6
  homepage: "https://www.lamborghini.com"
7
- primary_color: "#f4c01a"
7
+ primary_color: "#ffc000"
8
8
  logo:
9
9
  type: simpleicons
10
10
  slug: lamborghini
11
- verified: "2026-05-15"
11
+ verified: "2026-07-13"
12
12
  omd: "0.1"
13
+ verification_v2:
14
+ schema: 2
15
+ checked: "2026-07-13"
16
+ surfaces:
17
+ - { id: home, kind: marketing, url: "https://www.lamborghini.com/ko-en", inspected: "2026-07-13" }
18
+ - { id: global-home, kind: marketing, url: "https://www.lamborghini.com/en-en", inspected: "2026-07-13" }
19
+ - { id: models, kind: marketing, url: "https://www.lamborghini.com/en-en/models", inspected: "2026-07-13" }
20
+ sources:
21
+ - { id: home-live, kind: product-surface, url: "https://www.lamborghini.com/ko-en", captured: "2026-07-13" }
22
+ - { id: global-home-live, kind: product-surface, url: "https://www.lamborghini.com/en-en", captured: "2026-07-13" }
23
+ - { id: models-live, kind: product-surface, url: "https://www.lamborghini.com/en-en/models", captured: "2026-07-13" }
24
+ - { id: corporate-look, kind: official-doc, url: "https://www.lamborghini.com/en-en/news/automobili-lamborghini-launches-its-new-corporate-look", captured: "2026-07-13" }
25
+ - { id: brand-manifesto, kind: official-doc, url: "https://www.lamborghini.com/en-en/beyond/brand-manifesto", captured: "2026-07-13" }
26
+ - { id: lambotype-design, kind: brand-asset, url: "https://charactertype.com/typefaces/lamborghini/", captured: "2026-07-13" }
27
+ - { id: website-terms, kind: license, url: "https://www.lamborghini.com/en-en/privacy-legal", captured: "2026-07-13" }
28
+ conflicts: []
29
+ claims:
30
+ "tokens.colors.primary": &home_live { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
31
+ "tokens.colors.primary-muted": *home_live
32
+ "tokens.colors.surface-light": *home_live
33
+ "tokens.colors.foreground": *home_live
34
+ "tokens.colors.on-primary": *home_live
35
+ "tokens.colors.inverse": *home_live
36
+ "tokens.colors.muted": *home_live
37
+ "tokens.typography.family.ui": *home_live
38
+ "tokens.spacing.xs": *home_live
39
+ "tokens.spacing.sm": *home_live
40
+ "tokens.spacing.md": *home_live
41
+ "tokens.spacing.lg": *home_live
42
+ "tokens.spacing.section": *home_live
43
+ "tokens.rounded.square": *home_live
44
+ "tokens.components.accent-cta.type": *home_live
45
+ "tokens.components.accent-cta.bg": *home_live
46
+ "tokens.components.accent-cta.fg": *home_live
47
+ "tokens.components.accent-cta.radius": *home_live
48
+ "tokens.components.accent-cta.padding": *home_live
49
+ "tokens.components.accent-cta.font": *home_live
50
+ "tokens.components.accent-cta.states": *home_live
51
+ "tokens.components.accent-cta.use": *home_live
52
+ "tokens.components.outline-action.type": *home_live
53
+ "tokens.components.outline-action.fg": *home_live
54
+ "tokens.components.outline-action.border": *home_live
55
+ "tokens.components.outline-action.radius": *home_live
56
+ "tokens.components.outline-action.padding": *home_live
57
+ "tokens.components.outline-action.font": *home_live
58
+ "tokens.components.outline-action.states": *home_live
59
+ "tokens.components.outline-action.use": *home_live
60
+ "tokens.components.menu-link.type": *home_live
61
+ "tokens.components.menu-link.fg": *home_live
62
+ "tokens.components.menu-link.radius": *home_live
63
+ "tokens.components.menu-link.padding": *home_live
64
+ "tokens.components.menu-link.font": *home_live
65
+ "tokens.components.menu-link.states": *home_live
66
+ "tokens.components.menu-link.use": *home_live
67
+ "tokens.components.selected-tab.type": *home_live
68
+ "tokens.components.selected-tab.fg": *home_live
69
+ "tokens.components.selected-tab.border": *home_live
70
+ "tokens.components.selected-tab.radius": *home_live
71
+ "tokens.components.selected-tab.padding": *home_live
72
+ "tokens.components.selected-tab.font": *home_live
73
+ "tokens.components.selected-tab.states": *home_live
74
+ "tokens.components.selected-tab.use": *home_live
75
+ "tokens.components.news-card.type": *home_live
76
+ "tokens.components.news-card.fg": *home_live
77
+ "tokens.components.news-card.radius": *home_live
78
+ "tokens.components.news-card.padding": *home_live
79
+ "tokens.components.news-card.use": *home_live
13
80
  tokens:
14
- source: prose-derived
15
- extracted: "2026-06-09"
81
+ source: live-extract
82
+ extracted: "2026-07-13"
16
83
  components_harvested: true
17
84
  colors:
18
85
  primary: "#ffc000"
19
- primary-alt: "#f4c01a"
20
- canvas: "#000000"
86
+ primary-muted: "#917300"
87
+ surface-light: "#ffffff"
88
+ foreground: "#202020"
21
89
  on-primary: "#000000"
22
- white: "#ffffff"
23
- gold-dark: "#917300"
24
- gold-text: "#ffce3e"
25
- cyan: "#29abe2"
26
- link: "#3860be"
27
- teal: "#1eaedb"
28
- charcoal: "#202020"
29
- dark-iron: "#181818"
30
- near-white: "#f8f8f8"
31
- mist: "#e6e6e6"
32
- smoke: "#f5f5f5"
33
- graphite: "#494949"
34
- ash: "#7d7d7d"
35
- steel: "#969696"
36
- slate: "#666666"
37
- iron: "#555555"
38
- shadow: "#313131"
90
+ inverse: "#ffffff"
91
+ muted: "#969696"
39
92
  typography:
40
- family: { sans: "LamboType", mono: "LamboType" }
41
- hero-display: { size: 120, weight: 400, lineHeight: 0.92, use: "Hero, uppercase, maximum impact" }
42
- display-2: { size: 80, weight: 400, lineHeight: 1.13, use: "Major section titles, uppercase" }
43
- section: { size: 54, weight: 400, lineHeight: 1.19, use: "Section title, uppercase" }
44
- subsection: { size: 40, weight: 400, lineHeight: 1.15, use: "Sub-section, uppercase" }
45
- feature: { size: 27, weight: 400, lineHeight: 1.37, use: "Feature heading, uppercase" }
46
- card-title: { size: 24, weight: 400, use: "Card title" }
47
- body-large: { size: 18, weight: 400, lineHeight: 1.56, use: "Body large" }
48
- body: { size: 16, weight: 400, lineHeight: 1.50, use: "Primary body / UI" }
49
- button: { size: 14, weight: 400, lineHeight: 1.00, tracking: 0.2, use: "Ghost buttons, uppercase" }
50
- caption: { size: 14, weight: 700, lineHeight: 1.14, tracking: -0.42, use: "Caption, uppercase, negative tracking" }
51
- label: { size: 12, weight: 400, lineHeight: 1.83, tracking: 0.96, use: "Micro labels, badges, uppercase" }
52
- micro: { size: 10, weight: 400, lineHeight: 1.00, tracking: 0.225, use: "Smallest text, uppercase" }
53
- spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 56 }
54
- rounded: { sm: 0, md: 2, lg: 20, full: 9999 }
55
- shadow:
56
- overlay: "rgba(0,0,0,0.7)"
57
- fog: "rgba(0,0,0,0.5)"
58
- mist: "rgba(0,0,0,0.25)"
93
+ family: { ui: "LamboType" }
94
+ spacing: { xs: 8, sm: 16, md: 24, lg: 32, section: 48 }
95
+ rounded: { square: 0 }
59
96
  components:
60
- button-gold: { type: button, bg: "#ffc000", fg: "#000000", radius: 0, padding: "24px", font: "16px/400", use: "Primary CTA Discover More, Tickets" }
61
- button-ghost: { type: button, bg: "transparent", fg: "#ffffff", radius: 0, padding: "16px", use: "Secondary CTA on dark, 1px white border 50% opacity" }
62
- button-white: { type: button, bg: "#ffffff", fg: "#202020", radius: 0, use: "Light-mode primary CTA" }
63
- button-black: { type: button, bg: "#000000", fg: "#202020", radius: 0, use: "Inverted CTA on light sections" }
64
- button-gray: { type: button, bg: "#969696", fg: "#202020", radius: 0, use: "Subtle/tertiary action" }
65
- card-standard: { type: card, bg: "#202020", radius: 0, use: "Card/panel on black canvas, full-bleed photo + white text" }
66
- badge-tag: { type: badge, bg: "#969696", fg: "#ffffff", radius: 2, padding: "8px", font: "10px", use: "Metallic pill tag" }
97
+ accent-cta: { type: button, bg: "#ffc000", fg: "#000000", radius: "0px", padding: "24px", font: "16px / 400 / LamboType", states: "captured in selected/tab-selected surface context; no activation transition asserted", use: "Marketing accent action at home::[data-omd-capture=\"45\"]" }
98
+ outline-action: { type: button, fg: "#ffffff", border: "1px solid #ffffff", radius: "0px", padding: "24px", font: "16px / 400 / LamboType", states: "captured in selected/tab-selected surface context; no activation transition asserted", use: "Marketing secondary action at home::[data-omd-capture=\"46\"]" }
99
+ menu-link: { type: button, fg: "#ffffff", radius: "0px", padding: "16px 0px", font: "18px / 400 / LamboType", states: "default capture; menu open/close transition was not captured", use: "Burger-menu hierarchy link at home::[data-omd-capture=\"4\"]" }
100
+ selected-tab: { type: tab, fg: "#ffffff", border: "0px 0px 2px #ffc000", radius: "0px", padding: "24px", font: "16px / 400 / LamboType", states: "selected and tab-selected after observed tab interaction", use: "React tab at home::[data-omd-capture=\"41\"]" }
101
+ news-card: { type: card, fg: "#202020", radius: "0px", padding: "0px", use: "News-card image wrapper at home::div.card-news__image-wrapper" }
67
102
  ---
68
103
 
69
- # Design System Inspiration of Lamborghini
104
+ # Lamborghini Design Reference
70
105
 
71
106
  ## 1. Visual Theme & Atmosphere
72
107
 
73
- Lamborghini's website is a cathedral of darkness a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black true, uncompromising black (`#000000`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (`#FFC000`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.
108
+ Automobili Lamborghini is an Italian super sports car maker founded in 1963, whose current public positioning pairs technological performance with audacious design and its “Driving Humans Beyond” mission. The captured public web surfaces express that identity as editorial automotive marketing: large LamboType headlines, full-bleed product imagery, hard-edged controls, and a tightly observed palette of yellow, black, white, and neutral gray. This is not a reference for an authenticated vehicle, owner, dealer, checkout, or documentation product: the supplied evidence covers only three public marketing routes. Lamborghini’s 2024 corporate refresh explicitly reconnects black and white with yellow and gold accents, an official typeface, and a new icon set; the live capture corroborates LamboType in visible public UI rather than treating the older site snapshot as a universal product system.
74
109
 
75
- The hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a "MENU" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.
110
+ - **Source boundary:** `home`, `global-home`, and `models` are public marketing surfaces. No authenticated product, dealership workflow, configuration flow, or documentation chrome was supplied.
111
+ - **Measured character:** 0px controls and panels recur throughout the capture; yellow is observed on accent actions rather than elevated to a general semantic palette.
112
+ - **Current context:** the official 2024 identity update links the visual direction to the company’s brave, unexpected, and authentic values.
76
113
 
77
- Typography is the voice of this darkness. LamboType a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.
114
+ ## 2. Color Palette & Roles
78
115
 
79
- **Key Characteristics:**
80
- - True black (`#000000`) dominant surfaces with white and gold as the only relief colors
81
- - LamboType custom Neo-Grotesk font with 12° angled terminals inspired by aerodynamic car lines
82
- - Lamborghini Gold (`#FFC000`) as the sole accent color — used exclusively for primary CTA buttons
83
- - All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights
84
- - Full-viewport video heroes with cinematic event/vehicle content
85
- - Zero border-radius on buttons — sharp, angular, uncompromising rectangles
86
- - Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry
87
- - Bootstrap grid system + Element Plus/UI 68 components underneath
88
- - Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern
116
+ The roles below are limited to values that the supplied collector observed in computed styles on the three marketing surfaces.
89
117
 
90
- ## 2. Color Palette & Roles
118
+ - **Accent action `#ffc000`:** background on `btn-accent btn-large` at `home::[data-omd-capture="45"]`.
119
+ - **Alternate accent sample — `#917300`:** background on a separate `nav-btn explore ... btn-accent` sample at `home::[data-omd-capture="31"]`. It is an observed variant, not a documented hover contract.
120
+ - **Light fill / inverse text — `#ffffff`:** a captured filled primary button background and the foreground/border of outline controls.
121
+ - **Foreground — `#202020`:** recurring card and text color on the marketing routes.
122
+ - **On accent — `#000000`:** text and border color on the `#ffc000` accent action.
123
+ - **Muted control text — `#969696`:** captured on disabled/secondary carousel and tab samples.
91
124
 
92
- ### Primary
93
- - **Lamborghini Gold** (`#FFC000`): The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons ("Discover More", "Tickets", "Start Configuration"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night
94
- - **Pure White** (`#FFFFFF`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice that speaks from the darkness
95
-
96
- ### Secondary & Accent
97
- - **Dark Gold** (`#917300`): Hover/pressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction
98
- - **Gold Text** (`#FFCE3E`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels
99
- - **Cyan Pulse** (`#29ABE2`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight
100
- - **Link Blue** (`#3860BE`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors
101
-
102
- ### Surface & Background
103
- - **Absolute Black** (`#000000`): The dominant surface color — used for page background, hero sections, header, footer, and most containers
104
- - **Charcoal** (`#202020`): Elevated dark surface (rgb 32, 32, 32) — the primary "dark gray" for cards, panels, and text containers sitting above the black canvas
105
- - **Dark Iron** (`#181818`): Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections
106
- - **Overlay Black** (`rgba(0,0,0,0.7)`): Semi-transparent overlay for modals and video dimming
107
- - **Near White** (`#F8F8F8`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections
108
- - **Mist** (`#E6E6E6`): Light gray surface for secondary light-mode containers
109
-
110
- ### Neutrals & Text
111
- - **Pure White** (`#FFFFFF`): Primary text on dark backgrounds — headlines, body, nav labels
112
- - **Smoke** (`#F5F5F5`): Secondary text on dark surfaces — slightly softer than pure white
113
- - **Graphite** (`#494949`): Dark gray text on light surfaces (rgb 73, 73, 73)
114
- - **Ash** (`#7D7D7D`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)
115
- - **Steel** (`#969696`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)
116
- - **Slate** (`#666666`): Alternative mid-gray for secondary content
117
- - **Iron** (`#555555`): Dark mid-gray for body text variants
118
- - **Shadow** (`#313131`): Very dark gray for text on dark surfaces where white is too strong
119
-
120
- ### Semantic & Accent
121
- - **Cyan Pulse** (`#29ABE2`): Used for informational highlights and interactive feedback
122
- - **Link Blue** (`#3860BE`): Universal hover state for all hyperlinks
123
- - **Teal Action** (`#1EAEDB`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)
124
-
125
- ### Gradient System
126
- - No explicit gradients in the color palette — the dark-to-light progression is achieved through surface layering: `#000000` → `#181818` → `#202020` → `#494949` → `#7D7D7D`
127
- - Video heroes use natural atmospheric gradients from the content itself
128
- - Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery
125
+ The bundle also records `#181818`, `#f5f5f5`, `#c4c4c4`, `#494949`, and `#7d7d7d` in local text or border contexts. They are not promoted to semantic, error, success, link, or global-surface tokens because the capture does not establish those roles.
129
126
 
130
127
  ## 3. Typography Rules
131
128
 
132
- ### Font Family
133
- - **Display & UI**: `LamboType`, Roboto, Helvetica Neue, Arial — custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12° angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek
134
- - **Fallback/UI**: `Open Sans` — used for some button/form contexts as system fallback
135
- - **No italic variants** observed on the marketing site — the brand voice is always upright
136
-
137
- ### Hierarchy
138
-
139
- | Role | Size | Weight | Line Height | Letter Spacing | Notes |
140
- |------|------|--------|-------------|----------------|-------|
141
- | Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |
142
- | Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |
143
- | Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |
144
- | Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |
145
- | Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |
146
- | Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |
147
- | Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |
148
- | Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |
149
- | Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |
150
- | Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |
151
- | Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |
152
- | Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |
153
- | Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |
154
- | Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |
155
-
156
- ### Principles
157
- - **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression
158
- - **Extreme scale range**: From 120px heroes to 10px micro labels — a 12:1 ratio that creates dramatic visual hierarchy
159
- - **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset
160
- - **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines — the typeface itself is so distinctive it doesn't need weight variation
161
- - **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic
162
- - **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes
163
- - **Single typeface discipline**: LamboType handles everything — the 12° angled terminals and hexagonal geometry provide visual coherence across all sizes
164
-
165
- ## 4. Component Stylings
166
-
167
- ### Buttons
168
- All buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.
169
-
170
- **Gold Accent CTA** — The primary action:
171
- - Default: bg `#FFC000` (Lamborghini Gold), text `#000000`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border
172
- - Hover: bg `#917300` (Dark Gold), darkens significantly
173
- - Class: `btn-accent btn-large`
174
- - Used for: "Discover More", "Tickets", "Start Configuration"
175
-
176
- **Transparent Ghost** — The secondary action on dark backgrounds:
177
- - Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, padding 16px, opacity 0.5
178
- - Hover: bg `#1EAEDB` (Teal Action), text white, opacity 0.7
179
- - Focus: bg `#1EAEDB`, border 1px solid `#000000`, outline 2px solid `#000000`
180
- - Used for: secondary CTAs on hero sections and dark panels
181
-
182
- **White Filled** — Light-mode primary:
183
- - Default: bg `#FFFFFF`, text `#202020`, no border
184
- - Used for: CTAs on dark sections where gold isn't appropriate
185
-
186
- **Black Filled** — Dark filled variant:
187
- - Default: bg `#000000`, text `#202020`
188
- - Used for: Inverted CTA on light sections
189
-
190
- **Gray Neutral** — Subtle action:
191
- - Default: bg `#969696`, text `#202020`
192
- - Used for: secondary/tertiary actions, badge-like buttons
193
-
194
- ### Cards & Containers
195
- - Background: `#202020` (Charcoal) on black canvas, or `#000000` on lighter sections
196
- - Border: `0px 1px solid #202020` bottom borders for section dividers
197
- - Border-radius: 0px (completely sharp corners)
198
- - Shadow: minimal, uses overlay opacity for depth
199
- - Content: full-bleed photography + overlaid text in white
200
-
201
- ### Inputs & Forms
202
- - Minimal form presence on the marketing site
203
- - Switch elements: border-radius 20px (the only rounded element), border 1px solid `#DDDDDD`
204
- - Cookie banner input style: white text on black with `#7D7D7D` borders
205
-
206
- ### Navigation
207
- - **Desktop**: Centered bull logo, "MENU" hamburger with icon on left, search icon + bookmarks icon on right
208
- - **Background**: Transparent (inherits black page background)
209
- - **Sticky**: Fixed to top, floats above content
210
- - **No visible borders or shadows** — elements float in the darkness
211
- - **"MENU" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon
212
- - **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape
213
-
214
- ### Image Treatment
215
- - **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage
216
- - **Event photography**: Full-bleed aerial shots of Lamborghini Arena events
217
- - **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width
218
- - **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel
219
- - **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility
220
-
221
- ### Distinctive Components
222
- - **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections
223
- - **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress
224
- - **Badge/Tag**: bg `#969696`, text white, padding 8px, fontSize 10px, borderRadius 2px — tiny metallic pills
129
+ ### Evidence classes
225
130
 
226
- ## 5. Layout Principles
131
+ - **Live computed + FontFaceSet use:** `LamboType` is the sole loaded, high-confidence family in the bundle. It has 805 visible uses across headings, text, buttons, cards, tabs, badges, and list items; the collector reports that the computed family is backed by a loaded `FontFace`.
132
+ - **Official product-use context:** Lamborghini’s 2024 corporate-look announcement says its official typeface was created for company communications. Character Type identifies the Lamborghini project as Lambotype, a variable custom family designed with Strichpunkt. This contextual evidence supports the live family story; it does not turn the captured site files into a reusable asset.
133
+ - **Declared-only asset:** `Lambo-icons` has an `@font-face` declaration but zero visible captured use. It is not a typography or icon token.
134
+ - **Fallback names:** Roboto, Helvetica Neue, and Arial appear behind `LamboType` in computed CSS stacks. The loaded LamboType face wins in the capture; fallback names are not promoted as brand families.
135
+ - **Licence boundary:** Lamborghini’s terms say site fonts and other material are protected and may not be reproduced or used without authorization. No public downstream LamboType web-font licence was found. Keep the family metadata, but mark a specimen unavailable unless the target project has its own licence; never substitute a system font while calling it LamboType.
227
136
 
228
- ### Spacing System
229
- - **Base unit**: 8px
230
- - **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px
231
- - **Button padding**: 16px (ghost), 24px (gold accent)
232
- - **Section padding**: 48–56px vertical, 40px horizontal
233
- - **Small spacing**: 2–5px for fine adjustments (badge padding, border spacing)
234
-
235
- ### Grid & Container
236
- - **Framework**: Bootstrap grid system (container + row + col)
237
- - **Max width**: 1440px (largest breakpoint)
238
- - **Columns**: Standard 12-column Bootstrap grid
239
- - **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge
240
- - **Content areas**: Centered within 1200px max-width containers
241
-
242
- ### Whitespace Philosophy
243
- Lamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.
244
-
245
- ### Border Radius Scale
246
- | Value | Context |
247
- |-------|---------|
248
- | 0px | Default for everything — buttons, cards, containers, images |
249
- | 1px | Subtle span elements |
250
- | 2px | Badges, close buttons, cookie elements — barely perceptible |
251
- | 20px | Toggle switches only — the sole rounded element |
137
+ ### Measured public-marketing hierarchy
252
138
 
253
- ## 6. Depth & Elevation
139
+ | Role | Size / weight / line height | Provenance |
140
+ |---|---|---|
141
+ | Display headline | 120px / 400 / 110px | `surface-3::h3.card-bt__title-primary` |
142
+ | Large display | 80px / 400 / 90px | `surface-3` body sample |
143
+ | Editorial heading | 54px / 400 / 64px | `surface-3::h3` sample |
144
+ | News heading | 27px / 400 / 37px | `home::h3.card-news__title` |
145
+ | Menu hierarchy link | 18px / 400 / 28px | `home::[data-omd-capture="4"]` |
146
+ | Body / control | 16px / 400 / 24px | recurring captured text/button/card sample |
147
+ | Small label | 10px / 400 / 10px, `0.225px` tracking | `home::[data-omd-capture="51"]` |
148
+
149
+ ## 4. Components
150
+
151
+ All values below are selector-level observations from the supplied public marketing capture. It reports seven successful tab interactions. The collector’s `selected` / `tab-selected` component labels are retained as provenance; they do not establish a general button-hover, menu, dialog, or form-state specification.
152
+
153
+ ### Marketing actions
154
+
155
+ **Accent CTA**
156
+ - Background: `#ffc000`
157
+ - Text: `#000000`
158
+ - Radius: `0px`
159
+ - Padding: `24px`
160
+ - Font: `16px / 400 / LamboType`
161
+ - Use: `home::[data-omd-capture="45"]` on public marketing routes
162
+ - States: Captured in selected/tab-selected surface context; no activation transition was asserted
163
+
164
+ **Outline action**
165
+ - Text: `#ffffff`
166
+ - Border: `1px solid #ffffff`
167
+ - Radius: `0px`
168
+ - Padding: `24px`
169
+ - Font: `16px / 400 / LamboType`
170
+ - Use: `home::[data-omd-capture="46"]` on public marketing routes
171
+ - States: Captured in selected/tab-selected surface context; no activation transition was asserted
172
+
173
+ ### Navigation and selection
174
+
175
+ **Menu hierarchy link**
176
+ - Text: `#ffffff`
177
+ - Radius: `0px`
178
+ - Padding: `16px 0px`
179
+ - Font: `18px / 400 / LamboType`
180
+ - Use: `home::[data-omd-capture="4"]`, `.burger-menu-link.lev-2-toggler`
181
+ - States: Default capture only; a menu open/close transition was not captured
182
+
183
+ **Selected tab**
184
+ - Text: `#ffffff`
185
+ - Border: `0px 0px 2px #ffc000`
186
+ - Radius: `0px`
187
+ - Padding: `24px`
188
+ - Font: `16px / 400 / LamboType`
189
+ - Use: `home::[data-omd-capture="41"]`, `.react-tabs__tab.react-tabs__tab--selected`
190
+ - States: Selected and tab-selected after an observed tab interaction
191
+
192
+ ### Editorial content
193
+
194
+ **News-card image wrapper**
195
+ - Text: `#202020`
196
+ - Radius: `0px`
197
+ - Padding: `0px`
198
+ - Use: `home::div.card-news__image-wrapper`; no card fill, border, shadow, or state is claimed from this transparent wrapper
254
199
 
255
- | Level | Treatment | Use |
256
- |-------|-----------|-----|
257
- | Level 0 (Abyss) | `#000000` flat | Page background, deepest layer |
258
- | Level 1 (Surface) | `#181818` or `#202020` | Cards, content panels, elevated sections |
259
- | Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrops, video dimming |
260
- | Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlays, hover states |
261
- | Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |
200
+ ## 5. Layout Principles
201
+
202
+ The capture repeatedly measures 8px, 16px, 24px, 32px, and 48px in local padding, margin, and gap values. The strongest observed local pattern is 24px: it occurs in action padding, tab padding, and layout gaps. A carousel shell is observed with `80px 0px` padding and an editorial-content card with `40px` padding, but neither value is promoted into the compact token scale because their roles are isolated. No grid, breakpoint, or max-width is claimed without an explicit measurement.
262
203
 
263
- ### Shadow Philosophy
264
- Lamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: `#000000` → `#181818` → `#202020` → `#494949`. This "darkness gradient" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.
204
+ ## 6. Depth & Elevation
265
205
 
266
- ### Decorative Depth
267
- - Full-bleed video provides atmospheric depth through cinematic lighting
268
- - The hexagonal pause button floats with a thin white outline stroke
269
- - Progress bars at hero section bottoms create a subtle horizon line
270
- - No gradients, glows, or blur effects on UI elements — the photography provides all visual richness
206
+ The captured component samples report `box-shadow: none`. Transparent wrappers and photography carry much of the page’s visual weight; this evidence does not establish a global black-canvas policy, overlay scale, modal treatment, or image gradient system. Treat depth beyond the observed no-shadow samples as unresolved.
271
207
 
272
208
  ## 7. Do's and Don'ts
273
209
 
274
210
  ### Do
275
- - Use absolute black (`#000000`) as the primary background — never dark gray as a substitute
276
- - Apply Lamborghini Gold (`#FFC000`) exclusively for primary CTA buttons never for decorative purposes
277
- - Set all display headings in uppercase with LamboType the brand voice is always SHOUTING
278
- - Use zero border-radius on buttons and cards sharp angles are non-negotiable
279
- - Maintain tight line-heights (0.92–1.19) on display type to create dense, architectural text blocks
280
- - Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds
281
- - Let full-viewport video/photography carry emotional weight — UI is infrastructure, not decoration
282
- - Reserve hexagonal geometry for UI icons and the video control button
283
- - Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis
284
- - Keep the gray palette achromatic — all neutrals are pure gray without color tinting
211
+
212
+ - Keep an adaptation scoped to the public-marketing evidence: LamboType, 0px control radius, and the explicitly observed yellow/white/charcoal roles.
213
+ - Preserve selector-level provenance when reusing the 24px accent action, white outline action, or selected tab.
214
+ - Use a properly licensed LamboType asset, or omit the specimen rather than substituting a system face.
215
+ - Treat the 2024 official identity announcement as brand context, not a release of a reusable design system.
285
216
 
286
217
  ### Don't
287
- - Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred
288
- - Apply border-radius to buttons or cards curved edges contradict the angular vehicle aesthetic
289
- - Use LamboType in italic or decorative styles the brand is always upright and direct
290
- - Add gradients to buttons or surfaces depth comes from surface layering, not blending
291
- - Use light backgrounds as the primary canvas darkness is the default state, light is the exception
292
- - Mix lowercase into display headings — the uppercase convention communicates authority and power
293
- - Add hover animations with scale or translate — interactions should be color-only (background/opacity shifts)
294
- - Use Open Sans for display text — LamboType must handle all visible typography
295
- - Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements
296
- - Apply shadows to elements — on a black canvas, shadows are meaningless; use surface color shifts instead
218
+
219
+ - Do not apply these marketing observations to configurator, owner, vehicle, dealer, checkout, or documentation UI without source evidence from that domain.
220
+ - Do not turn `#917300` into a hover token, or turn the observed color list into success/error/link semantics; those behaviors were not captured.
221
+ - Do not promote `Lambo-icons`, Roboto, Helvetica Neue, or Arial to a verified Lamborghini UI family.
222
+ - Do not invent menu, dialog, form-validation, carousel, or motion variants beyond the selected tab interaction that was observed.
297
223
 
298
224
  ## 8. Responsive Behavior
299
225
 
300
- ### Breakpoints
301
- | Name | Width | Key Changes |
302
- |------|-------|-------------|
303
- | Mobile Small | <425px | Single column, reduced type scale, stacked buttons |
304
- | Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |
305
- | Tablet Small | 576-768px | 2-column grid begins, padding adjusts |
306
- | Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |
307
- | Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |
308
- | Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |
309
- | Wide | >1440px | Content centered, margins expand, hero fills viewport |
310
-
311
- ### Touch Targets
312
- - Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44×44px)
313
- - Ghost buttons: 48px+ with 16px padding
314
- - Hamburger menu: large touch target (~48px square)
315
- - Hexagonal pause button: approximately 48px diameter
316
-
317
- ### Collapsing Strategy
318
- - **Navigation**: Always hamburger-based ("MENU" + icon) — no horizontal nav expansion on any breakpoint
319
- - **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit
320
- - **Display type**: Scales from 120px (desktop) → 80px (tablet) → 54px/40px (mobile)
321
- - **Button layout**: Side-by-side on desktop, stacks vertically on mobile
322
- - **Grid columns**: 3-column → 2-column → 1-column progression
323
- - **Section spacing**: Reduces from 56px → 40px → 24px vertical padding
324
-
325
- ### Image Behavior
326
- - Hero videos use `object-fit: cover` to maintain cinematic framing at all sizes
327
- - Vehicle images scale within their containers with maintained aspect ratios
328
- - Event photography crops to viewport width on narrow screens
329
- - Background images darken at edges to maintain text contrast on all viewports
226
+ The supplied evidence does not provide a viewport matrix or mobile/desktop comparison. Responsive breakpoints, navigation collapse behavior, touch-target policy, and image-art-direction rules remain unresolved rather than inferred from the marketing layout.
330
227
 
331
228
  ## 9. Agent Prompt Guide
332
229
 
333
- ### Quick Color Reference
334
- - Primary CTA: "Lamborghini Gold (#FFC000)"
335
- - Background: "Absolute Black (#000000)"
336
- - Surface: "Charcoal (#202020)"
337
- - Heading text: "Pure White (#FFFFFF)"
338
- - Body text: "Ash (#7D7D7D)"
339
- - Link hover: "Link Blue (#3860BE)"
340
- - Accent: "Cyan Pulse (#29ABE2)"
341
- - Border: "Pure White (#FFFFFF) at 50% opacity"
342
-
343
- ### Example Component Prompts
344
- - "Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below — sharp corners, 0px radius, 24px padding, black text"
345
- - "Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background — hover state changes to Teal Action (#1EAEDB) background with 70% opacity"
346
- - "Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right — all in white, sticky position"
347
- - "Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover"
348
- - "Design a section divider using a 1px solid bottom border in #202020 on a black canvas — the elevation difference is purely through surface color shift, not shadow"
349
-
350
- ### Iteration Guide
351
- When refining existing screens generated with this design system:
352
- 1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive
353
- 2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors
354
- 3. Use natural language descriptions, not CSS values — "sharp-cut golden rectangle" not "border-radius: 0px; background: #FFC000"
355
- 4. Describe the desired "feel" alongside specific measurements — "floating in total darkness" communicates the black canvas better than "background: #000000"
356
- 5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be
230
+ Use this reference as a constrained public-marketing direction, not an implementation kit for a vehicle or ownership product. A safe prompt names the source boundary and the measured inputs: “Create a public automotive editorial action with LamboType only when licensed, `#ffc000` background, `#000000` text, 0px radius, 24px padding, and no unobserved hover behavior.” Do not request a generic Lamborghini configurator, error state, account flow, or modal from this evidence.
357
231
 
358
232
  ## 10. Voice & Tone
359
233
 
360
- Lamborghini's voice is **Italian-bold and motorsport-aggressive.** ALL CAPS at display sizes signal Lamborghini's brutalist register. Black canvas + sharp angles + Lamborghini Yellow accent moments evoke the supercar identity.
234
+ The official manifesto frames Lamborghini as brave, unexpected, and authentic, with “Driving Humans Beyond” as its mission. The live public navigation and model marketing use concise, uppercase labels; the corporate-look announcement describes the identity change as a clearer expression of those values. This supports a direct, declarative marketing register—not an invented support, legal, or product-error voice.
361
235
 
362
- | Context | Tone |
236
+ | Context | Source-backed direction |
363
237
  |---|---|
364
- | CTA | UPPERCASE imperative. "DISCOVER", "CONFIGURE", "RESERVE" |
365
- | Marketing | Black canvas, photography-dominant, aggressive geometry |
366
- | Documentation | Sparse |
367
- | Error | Direct. "AN ERROR OCCURRED." |
368
-
369
- **Voice samples**
370
- - Brand register: ALL CAPS HEADLINES <!-- verified: lamborghini.com pattern observed -->
371
-
372
- **Forbidden phrases.** Soft language. Apology theatre. Direct Ferrari comparison.
238
+ | Brand statement | “Driving Humans Beyond” and a leadership position in the unexpected |
239
+ | Public marketing navigation | Brief uppercase labels such as “MODELS”, “OWNERSHIP”, and “NEWS” |
240
+ | Product storytelling | Model-focused, editorial presentation on the captured public pages |
373
241
 
374
242
  ## 11. Brand Narrative
375
243
 
376
- **Automobili Ferruccio Lamborghini S.p.A.** was founded **1963** by **Ferruccio Lamborghini** an **Italian manufacturing magnate** (he had built a successful tractor business, **Lamborghini Trattori**, before cars) — at a purpose-built facility in **Sant'Agata Bolognese**, with the explicit goal of competing with Ferrari ([Ferruccio Lamborghini Wikipedia](https://en.wikipedia.org/wiki/Ferruccio_Lamborghini), [Lamborghini.com History/Company](https://www.lamborghini.com/en-en/history/company)). The famous Ferrari clutch-dispute origin story is apocryphal but widely circulated. Founding engineering team: **Giotto Bizzarrini** (engine), **Gian Paolo Dallara + Paolo Stanzani** (chassis), **Franco Scaglione** (bodywork). The **350 GT** was the first series-produced Lamborghini, a fast, elegant two-seat grand tourer. **Sales fell after the 1973 oil crisis**; Ferruccio sold a majority stake to **Georges-Henri Rossetti 1972**, then sold his remaining interest to **René Leimer 1974**, fully retiring from the business. **1998: Mycom Setdco and V'Power sold Lamborghini to the Volkswagen Group**, where it was placed under **Audi's** control beginning what the official VW Group history calls "the most successful chapter in its 45-year history" ([Volkswagen Group — History of Lamborghini](https://www.volkswagen-group.com/en/the-history-of-the-brands-17668/the-history-of-lamborghini-17676)). Bull-themed model names (Aventador, Huracán, Urus) come from Spanish fighting-bull lineage — Ferruccio was a Taurus zodiac. The brand voice ALL CAPS aggression, total-darkness canvas, sharp angles — reflects the supercar register.
244
+ Lamborghini’s official company material dates the founding to 1963 in SantAgata Bolognese and describes more than sixty years of super sports car design and performance. Its current company framing adds sustainability, well-being, and inclusion to the “Driving Humans Beyond” mission. The 2024 corporate refresh is the relevant current evolution for this reference: it introduces a broader logo typeface, reconfirms black and white as primary hues with yellow and gold accents, and adds a new official typeface and icon set for company communications.
377
245
 
378
246
  ## 12. Principles
379
247
 
380
- 1. **UPPERCASE IS THE DEFAULT.** *UI implication:* display sizes ALL CAPS unless explicitly stated.
381
- 2. **Total darkness canvas.** *UI implication:* `#000` backgrounds dominant; light theme is exception.
382
- 3. **Lamborghini Yellow `#f4b81d` for accent.** *UI implication:* one yellow gesture per screen.
383
- 4. **Sharp angles, no rounded chrome.** *UI implication:* keep 0-2px radius.
384
- 5. **Bull mythology over feature copy.** *UI implication:* model-name storytelling beats spec sheets.
248
+ 1. **Brave.** The manifesto identifies courage as a brand value. *UI implication:* make emphasis deliberate and sparse rather than accumulating decorative emphasis.
249
+ 2. **Unexpected.** The manifesto asks the brand to push boundaries. *UI implication:* use the measured accent action only where a public-marketing action needs visual priority.
250
+ 3. **Authentic.** The official identity work ties visual expression to the company’s own design language. *UI implication:* retain 0px control geometry and licensed LamboType only where the cited marketing evidence applies.
385
251
 
386
252
  ## 13. Personas
387
253
 
388
- *Personas are fictional archetypes informed by Lamborghini user segments (supercar collectors, track-day enthusiasts, brand admirers), not individual people.*
389
-
390
- **Marcus Webb, 51, Miami.** Self-made tech founder. Aventador + Urus owner.
391
-
392
- **Heinz Müller, 44, Munich.** Track-day specialist. Huracán EVO RWD.
393
-
394
- **Sofia Park, 39, Seoul.** First Lamborghini buyer (Urus SUV).
254
+ No first-party persona segmentation or user-research evidence was supplied for this reverify. **[FILL IN: add research-backed audience needs only when an official or user-provided source is available.]**
395
255
 
396
256
  ## 14. States
397
257
 
398
- | State | Treatment |
399
- |---|---|
400
- | **Empty (configurator start)** | Model selector ALL CAPS |
401
- | **Empty (no test drives)** | "BOOK A TEST DRIVE" |
402
- | **Loading (configurator)** | Black canvas with car silhouette |
403
- | **Loading (price)** | Yellow accent number animation |
404
- | **Error (incompatible)** | UPPERCASE constraint message |
405
- | **Error (allocation)** | "BY ALLOCATION ONLY — CONTACT YOUR DEALER" |
406
- | **Success (saved)** | Yellow check animation |
407
- | **Success (booked)** | Dealer confirmation |
408
- | **Skeleton (showcase)** | Black placeholders |
409
- | **Disabled (locked)** | Yellow tooltip |
410
- | **Loading (long render)** | Persistent progress with bull silhouette |
258
+ The only observed interaction class is tabs: seven captured interactions produced `selected` / `tab-selected` provenance. Disabled carousel-control styling appears in component samples, but no disabled behavior was exercised. Empty, loading, error, success, skeleton, menu, dialog, form-validation, and toast states were not captured and are intentionally omitted.
411
259
 
412
260
  ## 15. Motion & Easing
413
261
 
414
- | Token | Value | Use |
415
- |---|---|---|
416
- | `motion-instant` | 0ms | Selection |
417
- | `motion-fast` | 150ms | Hover |
418
- | `motion-aggressive` | 400ms | Hero reveals — sharp not bouncy |
419
- | `motion-cinematic` | 800ms | Configurator transitions |
420
-
421
- Aggressive easing — never bouncy springs. `prefers-reduced-motion: reduce` disables hero animations.
262
+ No duration, easing, transition, or reduced-motion value was measured in the supplied evidence. Do not derive a motion scale from cinematic imagery or the corporate narrative.
422
263
 
423
264
  ---
424
-
425
- **Verified:** 2026-05-08 (omd:migrate run 32 — Apple-tier)
426
- **Tier 1 sources:** lamborghini.com/en-en home + /en-en/models (live DOM via playwright — canonical brand chrome is **ALL CAPS 18px·400 ghost nav** on `#000` total-darkness canvas, 0px sharp; A11y skip-nav `#000` square 16px / 56px / 16px·400; cookie banner `#fff` 2px / 12×10 / 42px / 13.008px·600 = GDPR utility track only).
427
- **Tier 2 sources:** styles.refero.design / getdesign.md — no record.
428
- **Tier 2 (Philosophy/history):** Wikipedia (Lamborghini, Ferruccio Lamborghini, History of Lamborghini), Volkswagen Group corporate (1998 Audi acquisition), Lamborghini.com/history, Automotive Hall of Fame.
429
- **Style ref:** `apple` (premium minimal, register adapted to brutalist).
430
- **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer cited cookie banner as canonical; the actual brand canon is **ALL CAPS 18px·400 ghost on dark canvas** — Lamborghini intentionally has **no filled Primary CTA** on home/models (the cinematic imagery + dealership routing is the brand's affordance, not a CTA button system).
265
+ **Verified:** 2026-07-13
266
+ **Tier 1 sources:** https://www.lamborghini.com/ko-en · https://www.lamborghini.com/en-en · https://www.lamborghini.com/en-en/models
267
+ **Tier 2 sources:** https://getdesign.md/lamborghini · https://styles.refero.design/style/c9c5be5a-aaa1-4338-9681-8378d2e24fbd
268
+ **Conflicts unresolved:** none