oh-my-design-cli 1.8.7 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/hooks/lib/preferences-parser.cjs +1 -0
- package/.claude/hooks/lib/preferences-writer.cjs +1 -0
- package/.claude/hooks/post-edit-watch.cjs +1 -0
- package/.claude/hooks/session-end-foldin.cjs +1 -0
- package/.claude/hooks/session-state-loader.cjs +1 -0
- package/.claude/hooks/skill-activation.cjs +1 -0
- package/.claude/settings.json +10 -1
- package/.github/assets/logo-bg.png +0 -0
- package/AGENTS.md +20 -1
- package/CHANGELOG.md +482 -0
- package/MIGRATION.md +103 -0
- package/README.ja.md +56 -19
- package/README.ko.md +47 -30
- package/README.md +48 -30
- package/README.zh-TW.md +59 -22
- package/agents/AGENT.md +8 -7
- package/agents/omd-codex-image.md +1 -1
- package/agents/omd-critic.md +6 -7
- package/agents/omd-designer-review.md +1 -1
- package/agents/omd-final-qa.md +1 -1
- package/agents/omd-humanizer.md +38 -0
- package/agents/omd-kr-writer.md +3 -4
- package/agents/omd-locale-adapter.md +12 -16
- package/agents/omd-master.md +24 -19
- package/agents/omd-microcopy.md +1 -1
- package/agents/omd-orchestrator.md +7 -8
- package/agents/omd-slop-auditor.md +31 -0
- package/agents/omd-ux-researcher.md +1 -1
- package/data/reference-fingerprints.json +1995 -38
- package/dist/bin/oh-my-design.js +16 -8
- package/dist/bin/oh-my-design.js.map +1 -1
- package/dist/chunk-UJIHCEYF.js +99 -0
- package/dist/chunk-UJIHCEYF.js.map +1 -0
- package/dist/doctor-LDWSFM3I.js +763 -0
- package/dist/doctor-LDWSFM3I.js.map +1 -0
- package/dist/install-skills-ZZFNJ2II.js +1120 -0
- package/dist/install-skills-ZZFNJ2II.js.map +1 -0
- package/docs/CLI_QUICKSTART.md +157 -0
- package/package.json +25 -4
- package/scripts/postinstall.cjs +5 -4
- package/skills/claude-design/SKILL.md +38 -14
- package/skills/claude-design/references/claude-design-flow.md +11 -11
- package/skills/claude-design/references/codebase-analysis.md +5 -4
- package/skills/omd-final-qa/SKILL.md +1 -1
- package/skills/omd-harness/SKILL.md +51 -50
- package/skills/omd-humanize/SKILL.md +116 -0
- package/skills/omd-humanize/agents/openai.yaml +4 -0
- package/skills/omd-humanize/references/locale-playbooks.md +102 -0
- package/skills/omd-humanize/references/sources.md +11 -0
- package/skills/omd-init/SKILL.md +18 -12
- package/skills/omd-locale-adapter/SKILL.md +58 -91
- package/skills/omd-orchestrator/SKILL.md +11 -5
- package/skills/omd-reference-capture/SKILL.md +80 -26
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-LICENSE.txt +202 -0
- package/skills/omd-reference-capture/scripts/PLAYWRIGHT-NOTICE.txt +5 -0
- package/skills/omd-reference-capture/scripts/THIRD_PARTY_NOTICES.md +3 -0
- package/skills/omd-reference-capture/scripts/capture-reference-evidence.mjs +159906 -0
- package/skills/omd-slop-audit/SKILL.md +110 -0
- package/skills/omd-slop-audit/agents/openai.yaml +4 -0
- package/skills/omd-slop-audit/references/pattern-catalog.md +96 -0
- package/skills/omd-slop-audit/references/sources.md +24 -0
- package/web/references/104/DESIGN.md +354 -0
- package/web/references/11st/DESIGN.md +197 -316
- package/web/references/29cm/DESIGN.md +297 -393
- package/web/references/42dot/DESIGN.md +390 -0
- package/web/references/8percent/DESIGN.md +438 -0
- package/web/references/ably/DESIGN.md +267 -572
- package/web/references/acer/DESIGN.md +329 -0
- package/web/references/airbnb/DESIGN.md +219 -557
- package/web/references/alipay/DESIGN.md +179 -420
- package/web/references/apple/DESIGN.md +224 -498
- package/web/references/asleep/DESIGN.md +402 -0
- package/web/references/au/DESIGN.md +334 -0
- package/web/references/autopedia/DESIGN.md +382 -0
- package/web/references/aws-cloudscape/DESIGN.md +241 -0
- package/web/references/baemin/DESIGN.md +332 -491
- package/web/references/banksalad/DESIGN.md +269 -180
- package/web/references/barogo/DESIGN.md +416 -0
- package/web/references/beusable/DESIGN.md +464 -0
- package/web/references/bilibili/DESIGN.md +206 -374
- package/web/references/bmw/DESIGN.md +162 -276
- package/web/references/brandi/DESIGN.md +184 -325
- package/web/references/catchtable/DESIGN.md +219 -264
- package/web/references/cgv/DESIGN.md +317 -0
- package/web/references/channeltalk/DESIGN.md +210 -336
- package/web/references/china-airlines/DESIGN.md +291 -0
- package/web/references/cjonstyle/DESIGN.md +453 -0
- package/web/references/class101/DESIGN.md +168 -387
- package/web/references/classum/DESIGN.md +228 -203
- package/web/references/claude/DESIGN.md +242 -479
- package/web/references/clay/DESIGN.md +179 -377
- package/web/references/clickhouse/DESIGN.md +254 -343
- package/web/references/cohere/DESIGN.md +214 -324
- package/web/references/coinone/DESIGN.md +199 -179
- package/web/references/corca/DESIGN.md +414 -0
- package/web/references/coupang/DESIGN.md +205 -475
- package/web/references/cursor/DESIGN.md +240 -381
- package/web/references/dabang/DESIGN.md +248 -213
- package/web/references/dable/DESIGN.md +431 -0
- package/web/references/datarize/DESIGN.md +217 -330
- package/web/references/dealicious/DESIGN.md +402 -0
- package/web/references/drdiary/DESIGN.md +404 -0
- package/web/references/elastic/DESIGN.md +238 -0
- package/web/references/elevenlabs/DESIGN.md +183 -321
- package/web/references/eslite/DESIGN.md +257 -0
- package/web/references/evaair/DESIGN.md +338 -0
- package/web/references/expo/DESIGN.md +238 -331
- package/web/references/familymart-tw/DESIGN.md +254 -0
- package/web/references/ferrari/DESIGN.md +160 -377
- package/web/references/figma/DESIGN.md +197 -451
- package/web/references/fitpet/DESIGN.md +445 -0
- package/web/references/flex/DESIGN.md +170 -253
- package/web/references/framer/DESIGN.md +197 -340
- package/web/references/freee/DESIGN.md +211 -533
- package/web/references/friendliai/DESIGN.md +431 -0
- package/web/references/frip/DESIGN.md +440 -0
- package/web/references/gangnamunni/DESIGN.md +154 -591
- package/web/references/gaudiolab/DESIGN.md +414 -0
- package/web/references/google/DESIGN.md +290 -398
- package/web/references/hashicorp/DESIGN.md +273 -318
- package/web/references/heydealer/DESIGN.md +429 -0
- package/web/references/humanscape/DESIGN.md +433 -0
- package/web/references/hyundai/DESIGN.md +158 -368
- package/web/references/hyundaicard/DESIGN.md +171 -121
- package/web/references/ibm/DESIGN.md +227 -378
- package/web/references/idus/DESIGN.md +450 -0
- package/web/references/igaworks/DESIGN.md +437 -0
- package/web/references/inflearn/DESIGN.md +221 -366
- package/web/references/intuit/DESIGN.md +244 -0
- package/web/references/jandi/DESIGN.md +191 -291
- package/web/references/jobplanet/DESIGN.md +415 -0
- package/web/references/kakao/DESIGN.md +287 -475
- package/web/references/kakaobank/DESIGN.md +220 -521
- package/web/references/kakaogames/DESIGN.md +220 -0
- package/web/references/kakaopay/DESIGN.md +207 -526
- package/web/references/karrot/DESIGN.md +227 -251
- package/web/references/kb-kookmin/DESIGN.md +308 -0
- package/web/references/kbank/DESIGN.md +220 -175
- package/web/references/kmong/DESIGN.md +281 -356
- package/web/references/krds/DESIGN.md +245 -19
- package/web/references/kream/DESIGN.md +224 -359
- package/web/references/kurly/DESIGN.md +211 -533
- package/web/references/lamborghini/DESIGN.md +198 -360
- package/web/references/lguplus/DESIGN.md +259 -0
- package/web/references/likelion/DESIGN.md +283 -0
- package/web/references/line/DESIGN.md +396 -355
- package/web/references/linear.app/DESIGN.md +209 -562
- package/web/references/lotteon/DESIGN.md +386 -0
- package/web/references/lovable/DESIGN.md +255 -349
- package/web/references/makinarocks/DESIGN.md +149 -349
- package/web/references/maum-ai/DESIGN.md +423 -0
- package/web/references/medibloc/DESIGN.md +425 -0
- package/web/references/megabox/DESIGN.md +232 -0
- package/web/references/mercari/DESIGN.md +217 -434
- package/web/references/microsoft/DESIGN.md +234 -388
- package/web/references/mildang/DESIGN.md +411 -0
- package/web/references/millie/DESIGN.md +183 -504
- package/web/references/minimax/DESIGN.md +264 -322
- package/web/references/miricanvas/DESIGN.md +182 -355
- package/web/references/miro/DESIGN.md +234 -232
- package/web/references/mistral.ai/DESIGN.md +231 -314
- package/web/references/mixi/DESIGN.md +234 -0
- package/web/references/moin/DESIGN.md +445 -0
- package/web/references/mongodb/DESIGN.md +219 -316
- package/web/references/musinsa/DESIGN.md +184 -510
- package/web/references/mynavi/DESIGN.md +242 -0
- package/web/references/myrealtrip/DESIGN.md +169 -406
- package/web/references/naver/DESIGN.md +328 -499
- package/web/references/naverwebtoon/DESIGN.md +172 -395
- package/web/references/nhn/DESIGN.md +169 -346
- package/web/references/nhncloud/DESIGN.md +185 -123
- package/web/references/notion/DESIGN.md +271 -475
- package/web/references/nrise/DESIGN.md +417 -0
- package/web/references/ohouse/DESIGN.md +210 -549
- package/web/references/oliveyoung/DESIGN.md +217 -326
- package/web/references/ollama/DESIGN.md +241 -308
- package/web/references/onestore/DESIGN.md +248 -0
- package/web/references/palantir/DESIGN.md +256 -0
- package/web/references/panasonic/DESIGN.md +276 -0
- package/web/references/patternfly/DESIGN.md +259 -0
- package/web/references/payhere/DESIGN.md +438 -0
- package/web/references/pega/DESIGN.md +262 -0
- package/web/references/peoplefund/DESIGN.md +431 -0
- package/web/references/petfriends/DESIGN.md +428 -0
- package/web/references/pinkfong/DESIGN.md +199 -367
- package/web/references/pinterest/DESIGN.md +258 -308
- package/web/references/poya/DESIGN.md +286 -0
- package/web/references/pozalabs/DESIGN.md +438 -0
- package/web/references/protopie/DESIGN.md +419 -0
- package/web/references/qraft/DESIGN.md +448 -0
- package/web/references/quotabook/DESIGN.md +449 -0
- package/web/references/recruit/DESIGN.md +247 -0
- package/web/references/remember/DESIGN.md +202 -396
- package/web/references/resend/DESIGN.md +274 -348
- package/web/references/sakura-internet/DESIGN.md +269 -0
- package/web/references/samsung/DESIGN.md +157 -359
- package/web/references/sandoll/DESIGN.md +445 -0
- package/web/references/sanity/DESIGN.md +241 -375
- package/web/references/scatterlab/DESIGN.md +412 -0
- package/web/references/selectstar/DESIGN.md +439 -0
- package/web/references/servicenow/DESIGN.md +289 -0
- package/web/references/shinhanbank/DESIGN.md +161 -341
- package/web/references/shinhancard/DESIGN.md +208 -319
- package/web/references/sionic/DESIGN.md +454 -0
- package/web/references/sktelecom/DESIGN.md +310 -0
- package/web/references/socar/DESIGN.md +125 -32
- package/web/references/softbank/DESIGN.md +231 -0
- package/web/references/sony/DESIGN.md +234 -0
- package/web/references/soop/DESIGN.md +261 -0
- package/web/references/spacex/DESIGN.md +184 -323
- package/web/references/spotify/DESIGN.md +253 -394
- package/web/references/squeezebits/DESIGN.md +441 -0
- package/web/references/stayfolio/DESIGN.md +422 -0
- package/web/references/stripe/DESIGN.md +212 -491
- package/web/references/supabase/DESIGN.md +244 -316
- package/web/references/tabling/DESIGN.md +415 -0
- package/web/references/taishinbank/DESIGN.md +243 -0
- package/web/references/teamlab/DESIGN.md +240 -0
- package/web/references/teamsparta/DESIGN.md +472 -0
- package/web/references/tellingme/DESIGN.md +392 -0
- package/web/references/tesla/DESIGN.md +244 -427
- package/web/references/thsr/DESIGN.md +284 -0
- package/web/references/thumbtack/DESIGN.md +302 -0
- package/web/references/together.ai/DESIGN.md +257 -304
- package/web/references/toss/DESIGN.md +251 -593
- package/web/references/toss-securities/DESIGN.md +255 -178
- package/web/references/tossbank/DESIGN.md +195 -491
- package/web/references/toyota/DESIGN.md +238 -0
- package/web/references/tving/DESIGN.md +197 -245
- package/web/references/typed/DESIGN.md +413 -0
- package/web/references/uber/DESIGN.md +256 -333
- package/web/references/udn/DESIGN.md +250 -0
- package/web/references/upbit/DESIGN.md +145 -256
- package/web/references/upstage/DESIGN.md +211 -204
- package/web/references/uswds/DESIGN.md +287 -0
- package/web/references/vercel/DESIGN.md +236 -440
- package/web/references/wanted/DESIGN.md +215 -487
- package/web/references/wise/DESIGN.md +223 -231
- package/web/references/wisetracker/DESIGN.md +462 -0
- package/web/references/wooribank/DESIGN.md +245 -0
- package/web/references/yanolja/DESIGN.md +250 -419
- package/web/references/yeogiotte/DESIGN.md +235 -418
- package/web/references/zapier/DESIGN.md +256 -377
- package/web/references/zendesk/DESIGN.md +288 -0
- package/web/references/zigzag/DESIGN.md +200 -621
- package/dist/install-skills-7UUDOLG2.js +0 -734
- package/dist/install-skills-7UUDOLG2.js.map +0 -1
|
@@ -4,427 +4,265 @@ name: Lamborghini
|
|
|
4
4
|
country: IT
|
|
5
5
|
category: automotive
|
|
6
6
|
homepage: "https://www.lamborghini.com"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
primary_color: "#ffc000"
|
|
8
8
|
logo:
|
|
9
9
|
type: simpleicons
|
|
10
10
|
slug: lamborghini
|
|
11
|
-
verified: "2026-
|
|
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:
|
|
15
|
-
extracted: "2026-
|
|
81
|
+
source: live-extract
|
|
82
|
+
extracted: "2026-07-13"
|
|
16
83
|
components_harvested: true
|
|
17
84
|
colors:
|
|
18
85
|
primary: "#ffc000"
|
|
19
|
-
primary-
|
|
20
|
-
|
|
86
|
+
primary-muted: "#917300"
|
|
87
|
+
surface-light: "#ffffff"
|
|
88
|
+
foreground: "#202020"
|
|
21
89
|
on-primary: "#000000"
|
|
22
|
-
|
|
23
|
-
|
|
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: {
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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
|
-
#
|
|
104
|
+
# Lamborghini — Design Reference
|
|
70
105
|
|
|
71
106
|
## 1. Visual Theme & Atmosphere
|
|
72
107
|
|
|
73
|
-
Lamborghini
|
|
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
|
-
|
|
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
|
-
|
|
114
|
+
## 2. Color Palette & Roles
|
|
78
115
|
|
|
79
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
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
|
-
|
|
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
|
-
###
|
|
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
|
-
|
|
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
|
-
|
|
256
|
-
|
|
257
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
276
|
-
-
|
|
277
|
-
-
|
|
278
|
-
- Use
|
|
279
|
-
-
|
|
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
|
-
|
|
288
|
-
-
|
|
289
|
-
-
|
|
290
|
-
-
|
|
291
|
-
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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 |
|
|
236
|
+
| Context | Source-backed direction |
|
|
363
237
|
|---|---|
|
|
364
|
-
|
|
|
365
|
-
|
|
|
366
|
-
|
|
|
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
|
-
|
|
244
|
+
Lamborghini’s official company material dates the founding to 1963 in Sant’Agata 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. **
|
|
381
|
-
2. **
|
|
382
|
-
3. **
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
**
|
|
426
|
-
**Tier
|
|
427
|
-
**
|
|
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
|