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,412 +4,273 @@ name: SpaceX
|
|
|
4
4
|
country: US
|
|
5
5
|
category: consumer-tech
|
|
6
6
|
homepage: "https://www.spacex.com"
|
|
7
|
-
primary_color: "#
|
|
7
|
+
primary_color: "#f0f0fa"
|
|
8
8
|
logo:
|
|
9
9
|
type: simpleicons
|
|
10
10
|
slug: spacex
|
|
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.spacex.com/", inspected: "2026-07-13" }
|
|
18
|
+
- { id: surface-2, kind: marketing, url: "https://www.spacex.com/mission", inspected: "2026-07-13" }
|
|
19
|
+
- { id: surface-3, kind: product, url: "https://www.spacex.com/vehicles/starship", inspected: "2026-07-13" }
|
|
20
|
+
sources:
|
|
21
|
+
- { id: home-live, kind: product-surface, url: "https://www.spacex.com/", captured: "2026-07-13" }
|
|
22
|
+
- { id: mission-live, kind: product-surface, url: "https://www.spacex.com/mission", captured: "2026-07-13" }
|
|
23
|
+
- { id: starship-live, kind: product-surface, url: "https://www.spacex.com/vehicles/starship", captured: "2026-07-13" }
|
|
24
|
+
- { id: d-din-asset, kind: brand-asset, url: "https://www.spacex.com/D-DIN.e58c68e58b09fc0e.woff2", captured: "2026-07-13" }
|
|
25
|
+
- { id: d-din-bold-asset, kind: brand-asset, url: "https://www.spacex.com/D-DIN-Bold.9a5ce67e997fd030.woff2", captured: "2026-07-13" }
|
|
26
|
+
conflicts: []
|
|
27
|
+
claims:
|
|
28
|
+
"tokens.colors.primary": &home { surface_id: home, source_id: home-live, method: computed-style, captured: "2026-07-13" }
|
|
29
|
+
"tokens.colors.canvas": *home
|
|
30
|
+
"tokens.colors.foreground": *home
|
|
31
|
+
"tokens.colors.tab-selected": &mission { surface_id: surface-2, source_id: mission-live, method: computed-style, captured: "2026-07-13" }
|
|
32
|
+
"tokens.typography.family.ui": &ddin { surface_id: home, source_id: d-din-asset, method: computed-style-plus-fontfaceset-source, captured: "2026-07-13" }
|
|
33
|
+
"tokens.typography.family.display": &ddinbold { surface_id: home, source_id: d-din-bold-asset, method: computed-style-plus-fontfaceset-source, captured: "2026-07-13" }
|
|
34
|
+
"tokens.spacing.cta-x": *home
|
|
35
|
+
"tokens.spacing.icon": *home
|
|
36
|
+
"tokens.rounded.cta": *home
|
|
37
|
+
"tokens.rounded.icon": *home
|
|
38
|
+
"tokens.rounded.tab": *mission
|
|
39
|
+
"tokens.shadow.none": *home
|
|
40
|
+
"tokens.components.primary-cta.type": *home
|
|
41
|
+
"tokens.components.primary-cta.bg": *home
|
|
42
|
+
"tokens.components.primary-cta.fg": *home
|
|
43
|
+
"tokens.components.primary-cta.border": *home
|
|
44
|
+
"tokens.components.primary-cta.radius": *home
|
|
45
|
+
"tokens.components.primary-cta.padding": *home
|
|
46
|
+
"tokens.components.primary-cta.font": *home
|
|
47
|
+
"tokens.components.primary-cta.states": *home
|
|
48
|
+
"tokens.components.primary-cta.use": *home
|
|
49
|
+
"tokens.components.selected-tab.type": *mission
|
|
50
|
+
"tokens.components.selected-tab.fg": *mission
|
|
51
|
+
"tokens.components.selected-tab.border": *mission
|
|
52
|
+
"tokens.components.selected-tab.radius": *mission
|
|
53
|
+
"tokens.components.selected-tab.padding": *mission
|
|
54
|
+
"tokens.components.selected-tab.font": *mission
|
|
55
|
+
"tokens.components.selected-tab.states": *mission
|
|
56
|
+
"tokens.components.selected-tab.use": *mission
|
|
57
|
+
"tokens.components.carousel-previous.type": &starship { surface_id: surface-3, source_id: starship-live, method: computed-style, captured: "2026-07-13" }
|
|
58
|
+
"tokens.components.carousel-previous.fg": *starship
|
|
59
|
+
"tokens.components.carousel-previous.radius": *starship
|
|
60
|
+
"tokens.components.carousel-previous.padding": *starship
|
|
61
|
+
"tokens.components.carousel-previous.font": *starship
|
|
62
|
+
"tokens.components.carousel-previous.disabled": *starship
|
|
63
|
+
"tokens.components.carousel-previous.use": *starship
|
|
64
|
+
"tokens.components.circular-control.type": *home
|
|
65
|
+
"tokens.components.circular-control.bg": *home
|
|
66
|
+
"tokens.components.circular-control.fg": *home
|
|
67
|
+
"tokens.components.circular-control.radius": *home
|
|
68
|
+
"tokens.components.circular-control.padding": *home
|
|
69
|
+
"tokens.components.circular-control.font": *home
|
|
70
|
+
"tokens.components.circular-control.states": *home
|
|
71
|
+
"tokens.components.circular-control.use": *home
|
|
13
72
|
tokens:
|
|
14
|
-
source:
|
|
15
|
-
extracted: "2026-
|
|
73
|
+
source: reconciled
|
|
74
|
+
extracted: "2026-07-13"
|
|
75
|
+
components_harvested: true
|
|
16
76
|
colors:
|
|
17
77
|
primary: "#f0f0fa"
|
|
18
|
-
brand: "#000000"
|
|
19
78
|
canvas: "#000000"
|
|
20
79
|
foreground: "#f0f0fa"
|
|
21
|
-
|
|
22
|
-
surface: "#1a1a1f"
|
|
23
|
-
hairline: "#56565b"
|
|
24
|
-
accent-red: "#cc0000"
|
|
25
|
-
accent-amber: "#f5a623"
|
|
80
|
+
tab-selected: "#ffffff"
|
|
26
81
|
typography:
|
|
27
|
-
family: {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
nav-bold: { size: 13, weight: 700, lineHeight: 0.94, tracking: 1.17, use: "Nav emphasis, uppercase" }
|
|
31
|
-
nav: { size: 12, weight: 400, lineHeight: 2.00, use: "Nav link, uppercase" }
|
|
32
|
-
micro: { size: 10, weight: 400, lineHeight: 0.94, tracking: 1, use: "Micro label, uppercase" }
|
|
33
|
-
spacing: { xs: 3, sm: 5, md: 12, base: 15, lg: 20, xl: 24, xxl: 30 }
|
|
34
|
-
rounded: { sm: 4, md: 4, lg: 32, full: 9999 }
|
|
82
|
+
family: { ui: "D-DIN", display: "D-DIN-Bold" }
|
|
83
|
+
spacing: { cta-x: 20, icon: 18 }
|
|
84
|
+
rounded: { cta: 4, icon: 32, tab: 0 }
|
|
35
85
|
shadow:
|
|
36
|
-
none: "
|
|
37
|
-
components_harvested: true
|
|
86
|
+
none: "none"
|
|
38
87
|
components:
|
|
39
|
-
|
|
88
|
+
primary-cta: { type: button, bg: "rgba(0, 0, 0, 0.5)", fg: "#f0f0fa", border: "1px solid rgba(240, 240, 250, 0.35)", radius: "4px", padding: "0px 20px", font: "16px / 400 / D-DIN", states: "default snapshot only; no pseudo-state variant captured", use: "Cinematic CTA on the captured public home, Mission, and Starship pages" }
|
|
89
|
+
selected-tab: { type: tab, fg: "#ffffff", border: "0px 0px 1px", radius: "0px", padding: "0px", font: "16px / 600 / D-DIN", states: "selected and tab-selected after captured tab interaction", use: "Mission and Starship tab controls" }
|
|
90
|
+
carousel-previous: { type: button, fg: "rgba(16, 16, 16, 0.3)", radius: "0px", padding: "0px", font: "13.3333px / 400 / D-DIN", disabled: "disabled observed on Starship previous control", use: "Starship carousel previous control" }
|
|
91
|
+
circular-control: { type: button, bg: "rgba(240, 240, 250, 0.1)", fg: "#000000", radius: "32px", padding: "18px", font: "13.3333px / 400 / D-DIN", states: "default snapshot only; no variant captured", use: "Unlabelled circular control observed on all three captured public pages" }
|
|
40
92
|
---
|
|
41
93
|
|
|
42
|
-
#
|
|
94
|
+
# SpaceX — Design Reference
|
|
43
95
|
|
|
44
96
|
## 1. Visual Theme & Atmosphere
|
|
45
97
|
|
|
46
|
-
SpaceX
|
|
47
|
-
|
|
48
|
-
The typography system uses D-DIN, an industrial geometric typeface with DIN heritage (the German industrial standard). The defining characteristic is that virtually ALL text is uppercase with positive letter-spacing (0.96px–1.17px), creating a military/aerospace labeling system where every word feels stenciled onto a spacecraft hull. D-DIN-Bold at 48px with uppercase and 0.96px tracking for the hero creates headlines that feel like mission briefing titles. Even body text at 16px maintains the uppercase/tracked treatment at smaller scales.
|
|
49
|
-
|
|
50
|
-
What makes SpaceX distinctive is its radical minimalism: no shadows, no borders (except one ghost button border at `rgba(240,240,250,0.35)`), no color (only black and a spectral near-white `#f0f0fa`), no cards, no grids. The only visual element is photography + text. The ghost button with `rgba(240,240,250,0.1)` background and 32px radius is the sole interactive element — barely visible, floating over the imagery like a heads-up display. This isn't a design system in the traditional sense — it's a photographic exhibition with a type system and a single button.
|
|
98
|
+
SpaceX is a launch and spacecraft company whose public site connects an expansive mission—making life multiplanetary—with vehicle, launch, and human-spaceflight information. The captured public pages express that story through large edge-to-edge imagery, black scrims, cool off-white type, and a compact all-caps interface. The home page is a marketing surface; the Mission and Starship pages add product-program detail. This reference deliberately does not extend those observations to authenticated operations software, launch control, checkout, or other unobserved product domains.
|
|
51
99
|
|
|
52
|
-
|
|
53
|
-
- Pure black canvas with full-viewport cinematic photography — the interface is invisible
|
|
54
|
-
- D-DIN / D-DIN-Bold — industrial DIN-heritage typeface
|
|
55
|
-
- Universal uppercase + positive letter-spacing (0.96px–1.17px) — aerospace stencil aesthetic
|
|
56
|
-
- Near-white spectral text (`#f0f0fa`) — not pure white, a slight blue-violet tint
|
|
57
|
-
- Zero shadows, zero cards, zero containers — text on image only
|
|
58
|
-
- Single ghost button: `rgba(240,240,250,0.1)` background with spectral border
|
|
59
|
-
- Full-viewport sections — each section is a cinematic "scene"
|
|
60
|
-
- No decorative elements — every pixel serves the photography
|
|
100
|
+
The verified visual system is more specific than a generic “black-and-white” treatment. Its primary public CTA is a 50% black surface with `#f0f0fa` text and a faint cool-white border; selected tabs switch to `#ffffff`. D-DIN handles visible UI and body copy, while D-DIN-Bold is the loaded display face. Photography supplies the visual emphasis, not cards or shadows.
|
|
61
101
|
|
|
62
102
|
## 2. Color Palette & Roles
|
|
63
103
|
|
|
64
|
-
###
|
|
65
|
-
- **Space Black** (`#000000`): Page background, the void of space — at 50% opacity for overlay gradient
|
|
66
|
-
- **Spectral White** (`#f0f0fa`): Text color — not pure white, a slight blue-violet tint that mimics starlight
|
|
104
|
+
### Observed public-page roles
|
|
67
105
|
|
|
68
|
-
|
|
69
|
-
- **
|
|
70
|
-
- **
|
|
71
|
-
- **
|
|
106
|
+
- **Cool off-white / primary** (`#f0f0fa`): visible CTA and public-page text on the captured surfaces.
|
|
107
|
+
- **Canvas** (`#000000`): primary CTA scrim and dark public-page canvas.
|
|
108
|
+
- **Selected-tab white** (`#ffffff`): selected Mission/Starship tab text and underline.
|
|
109
|
+
- **CTA scrim** (`rgba(0, 0, 0, 0.5)`): primary CTA fill at `home::[data-omd-capture="23"]`.
|
|
110
|
+
- **CTA stroke** (`rgba(240, 240, 250, 0.35)`): primary CTA border on that same selector.
|
|
111
|
+
- **Circular-control fill** (`rgba(240, 240, 250, 0.1)`): unlabelled 32px-radius control observed on all three captured pages.
|
|
72
112
|
|
|
73
|
-
|
|
74
|
-
- **Dark Overlay** (`rgba(0, 0, 0, 0.5)`): Gradient overlay on photographs to ensure text legibility
|
|
75
|
-
|
|
76
|
-
### Resolved Surface Tints
|
|
77
|
-
The rgba overlays above resolve to these effective hex values when composited on the black canvas:
|
|
78
|
-
- **Ghost Surface Resolved** (`#1a1a1f`): `rgba(240, 240, 250, 0.1)` over `#000000`.
|
|
79
|
-
- **Ghost Border Resolved** (`#56565b`): `rgba(240, 240, 250, 0.35)` over `#000000`.
|
|
80
|
-
- **Photo-overlay Resolved** (`#0d0d0d`): Effective tone after the 50% black overlay on hero photography.
|
|
81
|
-
|
|
82
|
-
### Mission Status & Live-Indicator Accents
|
|
83
|
-
Used sparingly in countdown and launch-status modules:
|
|
84
|
-
- **Active Red** (`#cc0000`): Live transmission indicator, "active mission" status.
|
|
85
|
-
- **Status Amber** (`#f5a623`): Pre-launch / hold status, secondary warnings.
|
|
113
|
+
No semantic success, warning, error, countdown, or launch-status color is promoted: the supplied evidence does not ground those roles.
|
|
86
114
|
|
|
87
115
|
## 3. Typography Rules
|
|
88
116
|
|
|
89
|
-
###
|
|
90
|
-
- **Display**: `D-DIN-Bold` — bold industrial geometric
|
|
91
|
-
- **Body / UI**: `D-DIN`, fallbacks: `Arial, Verdana`
|
|
117
|
+
### Evidence classes
|
|
92
118
|
|
|
93
|
-
|
|
119
|
+
- **Live computed use, FontFaceSet, and source corroboration:** `D-DIN` is loaded with high confidence, has 313 visible captured uses across body, buttons, list items, tabs, and text, and is matched to SpaceX-hosted WOFF2/WOFF/OTF sources. It is the UI family token.
|
|
120
|
+
- **Live computed use, FontFaceSet, and source corroboration:** `D-DIN-Bold` is loaded with high confidence, has 49 visible captured uses in headings and text, and is matched to SpaceX-hosted WOFF2/WOFF/OTF sources. It is the display family token.
|
|
121
|
+
- **Declared-only:** `Roboto Mono` is declared by a SpaceX-hosted TTF but has zero visible captured uses. It is not a UI token. Its upstream open-source licensing does not establish current SpaceX product use.
|
|
122
|
+
- **Declared-only icon asset:** `swiper-icons` is declared with zero visible captured use and is not a typography token.
|
|
123
|
+
- **Unresolved:** one `D-DIN-Regular` computed-family observation has no matching loaded face or source record; it is not a separate family claim.
|
|
94
124
|
|
|
95
|
-
|
|
96
|
-
|------|------|------|--------|-------------|----------------|-------|
|
|
97
|
-
| Display Hero | D-DIN-Bold | 48px (3.00rem) | 700 | 1.00 (tight) | 0.96px | `text-transform: uppercase` |
|
|
98
|
-
| Body | D-DIN | 16px (1.00rem) | 400 | 1.50–1.70 | normal | Standard reading text |
|
|
99
|
-
| Nav Link Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |
|
|
100
|
-
| Nav Link | D-DIN | 12px (0.75rem) | 400 | 2.00 (relaxed) | normal | `text-transform: uppercase` |
|
|
101
|
-
| Caption Bold | D-DIN | 13px (0.81rem) | 700 | 0.94 (tight) | 1.17px | `text-transform: uppercase` |
|
|
102
|
-
| Caption | D-DIN | 12px (0.75rem) | 400 | 1.00 (tight) | normal | `text-transform: uppercase` |
|
|
103
|
-
| Micro | D-DIN | 10px (0.63rem) | 400 | 0.94 (tight) | 1px | `text-transform: uppercase` |
|
|
125
|
+
### Measured text observations
|
|
104
126
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
127
|
+
| Context | Family | Size / weight | Other measured properties |
|
|
128
|
+
|---|---|---|---|
|
|
129
|
+
| Public CTA | D-DIN | 16px / 400 | 24px line height; no letter-spacing value captured |
|
|
130
|
+
| Selected tab | D-DIN | 16px / 600 | transparent fill; 1px bottom border |
|
|
131
|
+
| Starship carousel previous | D-DIN | 13.3333px / 400 | 44px-high control; disabled value recorded separately |
|
|
132
|
+
|
|
133
|
+
The supplied font files confirm delivery to the SpaceX public web surface, not a downstream licence grant. The D-DIN licensing source is recorded in the verification notes; no SpaceX-published reuse licence was located in this packet’s source work.
|
|
110
134
|
|
|
111
135
|
## 4. Component Stylings
|
|
112
136
|
|
|
113
|
-
###
|
|
137
|
+
### Primary CTA
|
|
114
138
|
|
|
115
|
-
**
|
|
116
|
-
- Background: `rgba(
|
|
117
|
-
- Text:
|
|
118
|
-
- Padding: 18px
|
|
119
|
-
- Radius: 32px
|
|
139
|
+
**Public-page default**
|
|
140
|
+
- Background: `rgba(0, 0, 0, 0.5)`
|
|
141
|
+
- Text: `#f0f0fa`
|
|
120
142
|
- Border: `1px solid rgba(240, 240, 250, 0.35)`
|
|
121
|
-
-
|
|
122
|
-
-
|
|
143
|
+
- Radius: `4px`
|
|
144
|
+
- Padding: `0px 20px`
|
|
145
|
+
- Font: `16px / 400 / D-DIN`
|
|
146
|
+
- States: Default snapshot only; no pseudo-state variant captured
|
|
147
|
+
- Use: Cinematic CTA on the captured home, Mission, and Starship pages
|
|
123
148
|
|
|
124
|
-
|
|
125
|
-
- **None.** SpaceX does not use cards, panels, or containers. All content is text directly on full-viewport photographs. The absence of containers IS the design.
|
|
149
|
+
Provenance: `home::[data-omd-capture="23"]`, class `spx-button primary`; observed nine times across the three captured public pages.
|
|
126
150
|
|
|
127
|
-
###
|
|
128
|
-
- Not present on the homepage. The site is purely presentational.
|
|
151
|
+
### Selected tab
|
|
129
152
|
|
|
130
|
-
|
|
131
|
-
-
|
|
132
|
-
-
|
|
133
|
-
-
|
|
134
|
-
-
|
|
135
|
-
-
|
|
153
|
+
**Selected**
|
|
154
|
+
- Text: `#ffffff`
|
|
155
|
+
- Border: `0px 0px 1px`
|
|
156
|
+
- Radius: `0px`
|
|
157
|
+
- Padding: `0px`
|
|
158
|
+
- Font: `16px / 600 / D-DIN`
|
|
159
|
+
- States: Selected and tab-selected after captured tab interaction
|
|
160
|
+
- Use: Mission and Starship tab controls
|
|
136
161
|
|
|
137
|
-
|
|
138
|
-
- Full-viewport (100vh) photography sections
|
|
139
|
-
- Professional aerospace photography: rockets, Mars, space
|
|
140
|
-
- Dark gradient overlays (`rgba(0,0,0,0.5)`) for text legibility
|
|
141
|
-
- Each section = one full-screen photograph with text overlay
|
|
142
|
-
- No border radius, no frames — edge-to-edge imagery
|
|
162
|
+
Provenance: `surface-2::[data-omd-capture="26"]`, `role="tab"`, `aria-selected="true"`; the collector records tab interactions on Mission and Starship. No unobserved hover or focus variant is inferred.
|
|
143
163
|
|
|
144
|
-
|
|
164
|
+
### Carousel previous control
|
|
145
165
|
|
|
146
|
-
|
|
147
|
-
-
|
|
148
|
-
-
|
|
149
|
-
-
|
|
166
|
+
**Disabled**
|
|
167
|
+
- Text: `rgba(16, 16, 16, 0.3)`
|
|
168
|
+
- Radius: `0px`
|
|
169
|
+
- Padding: `0px`
|
|
170
|
+
- Font: `13.3333px / 400 / D-DIN`
|
|
171
|
+
- Disabled: Disabled observed on Starship previous control
|
|
172
|
+
- Use: Starship carousel previous control
|
|
150
173
|
|
|
151
|
-
|
|
152
|
-
- No traditional grid — each section is a full-viewport cinematic frame
|
|
153
|
-
- Text is positioned absolutely or with generous padding over imagery
|
|
154
|
-
- Left-aligned text blocks on photography backgrounds
|
|
155
|
-
- No max-width container — content bleeds to viewport edges
|
|
174
|
+
Provenance: `surface-3::[data-omd-capture="25"]`, class `swiper-button swiper-previous`, `disabled=true`. A separate enabled default was captured on Mission; this does not establish an unobserved disabled treatment for other controls.
|
|
156
175
|
|
|
157
|
-
###
|
|
158
|
-
- **Photography IS the whitespace**: Empty space in the design is never empty — it's filled with the dark expanse of space, the curve of a planet, or the flame of a rocket engine. Traditional whitespace concepts don't apply.
|
|
159
|
-
- **Vertical pacing through viewport**: Each section is exactly one viewport tall, creating a rhythmic scroll where each "page" reveals a new scene.
|
|
176
|
+
### Circular control
|
|
160
177
|
|
|
161
|
-
|
|
162
|
-
-
|
|
163
|
-
-
|
|
178
|
+
**Default**
|
|
179
|
+
- Background: `rgba(240, 240, 250, 0.1)`
|
|
180
|
+
- Text: `#000000`
|
|
181
|
+
- Radius: `32px`
|
|
182
|
+
- Padding: `18px`
|
|
183
|
+
- Font: `13.3333px / 400 / D-DIN`
|
|
184
|
+
- States: Default snapshot only; no variant captured
|
|
185
|
+
- Use: Unlabelled circular control observed on all three captured public pages
|
|
164
186
|
|
|
165
|
-
|
|
187
|
+
Provenance: `home::[data-omd-capture="32"]`; this record preserves the observed geometry without assigning a product purpose the capture does not identify.
|
|
188
|
+
|
|
189
|
+
## 5. Layout Principles
|
|
166
190
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
| Text (Level 2) | Spectral white text, no shadow | Content layer — text floats directly on image |
|
|
172
|
-
| Ghost (Level 3) | `rgba(240, 240, 250, 0.1)` surface | Barely-visible interactive layer |
|
|
191
|
+
- Use full-bleed imagery and dark overlays on the captured public marketing/program pages; do not generalize this pattern to an unobserved operational product.
|
|
192
|
+
- Keep the primary CTA compact: the measured public version is 50px high with `0px 20px` padding and a 4px radius.
|
|
193
|
+
- Retain sharp tab geometry and an underline for the selected tab rather than converting it into a filled pill.
|
|
194
|
+
- The capture records no box shadow on the primary CTA, selected tabs, carousel controls, or circular control.
|
|
173
195
|
|
|
174
|
-
|
|
196
|
+
## 6. Depth & Elevation
|
|
197
|
+
|
|
198
|
+
The observed controls use imagery, transparent fills, and a black scrim instead of shadow elevation. `box-shadow: none` was recorded on the representative CTA, tab, carousel, and circular-control elements. No general depth scale is claimed.
|
|
175
199
|
|
|
176
200
|
## 7. Do's and Don'ts
|
|
177
201
|
|
|
178
202
|
### Do
|
|
179
|
-
|
|
180
|
-
-
|
|
181
|
-
- Use D-DIN
|
|
182
|
-
-
|
|
183
|
-
-
|
|
184
|
-
- Apply dark gradient overlays for text legibility on photographs
|
|
185
|
-
- Let photography carry the emotional weight — the type system is functional, not expressive
|
|
203
|
+
|
|
204
|
+
- Keep public-page CTAs dark and translucent over imagery when using the measured SpaceX CTA pattern.
|
|
205
|
+
- Use D-DIN only where the loaded, public-web evidence applies; retain D-DIN-Bold for display contexts.
|
|
206
|
+
- Preserve the selected tab’s white text and 1px bottom border.
|
|
207
|
+
- Keep the source domain explicit when borrowing these marketing/program-page observations.
|
|
186
208
|
|
|
187
209
|
### Don't
|
|
188
|
-
|
|
189
|
-
- Don't
|
|
190
|
-
- Don't
|
|
191
|
-
- Don't
|
|
192
|
-
- Don't
|
|
193
|
-
- Don't reduce photography to thumbnails — every image is full-viewport
|
|
194
|
-
- Don't add decorative elements (icons, badges, dividers) — the design is photography + type + one button
|
|
210
|
+
|
|
211
|
+
- Don't replace the observed 4px CTA with a 32px pill; the 32px radius belongs only to the unlabelled circular control in this capture.
|
|
212
|
+
- Don't promote Roboto Mono, swiper-icons, or unresolved D-DIN-Regular as the SpaceX UI family.
|
|
213
|
+
- Don't invent semantic status colors, error states, motion timing, or product-workflow components from the public pages.
|
|
214
|
+
- Don't treat a public font URL as a downstream redistribution licence.
|
|
195
215
|
|
|
196
216
|
## 8. Responsive Behavior
|
|
197
217
|
|
|
198
|
-
|
|
199
|
-
| Name | Width | Key Changes |
|
|
200
|
-
|------|-------|-------------|
|
|
201
|
-
| Mobile | <600px | Stacked, reduced padding, smaller type |
|
|
202
|
-
| Tablet Small | 600–960px | Adjusted layout |
|
|
203
|
-
| Tablet | 960–1280px | Standard scaling |
|
|
204
|
-
| Desktop | 1280–1350px | Full layout |
|
|
205
|
-
| Large Desktop | 1350–1500px | Expanded |
|
|
206
|
-
| Ultra-wide | >1500px | Maximum viewport |
|
|
207
|
-
|
|
208
|
-
### Touch Targets
|
|
209
|
-
- Ghost buttons: 18px padding provides adequate touch area
|
|
210
|
-
- Navigation links: uppercase with generous letter-spacing aids readability
|
|
211
|
-
|
|
212
|
-
### Collapsing Strategy
|
|
213
|
-
- Photography: maintains full-viewport at all sizes, content reposition
|
|
214
|
-
- Hero text: 48px → scales down proportionally
|
|
215
|
-
- Navigation: horizontal → hamburger
|
|
216
|
-
- Text blocks: reposition but maintain overlay-on-photography pattern
|
|
217
|
-
- Full-viewport sections maintained on mobile
|
|
218
|
-
|
|
219
|
-
### Image Behavior
|
|
220
|
-
- Edge-to-edge photography at all viewport sizes
|
|
221
|
-
- Background-size: cover with center focus
|
|
222
|
-
- Dark overlay gradients adapt to content position
|
|
223
|
-
- No art direction changes — same photographs, responsive positioning
|
|
218
|
+
The supplied bundle is desktop-only at 1440×900. It confirms three public routes but does not contain a mobile viewport, breakpoint, responsive-image, or navigation-collapse observation. Responsive rules are therefore unresolved rather than extrapolated.
|
|
224
219
|
|
|
225
220
|
## 9. Agent Prompt Guide
|
|
226
221
|
|
|
227
|
-
|
|
228
|
-
- Background: Space Black (`#000000`)
|
|
229
|
-
- Text: Spectral White (`#f0f0fa`)
|
|
230
|
-
- Button background: Ghost (`rgba(240, 240, 250, 0.1)`)
|
|
231
|
-
- Button border: Ghost Border (`rgba(240, 240, 250, 0.35)`)
|
|
232
|
-
- Overlay: `rgba(0, 0, 0, 0.5)`
|
|
233
|
-
|
|
234
|
-
### Example Component Prompts
|
|
235
|
-
- "Create a full-viewport hero: background-image covering 100vh, dark gradient overlay rgba(0,0,0,0.5). Headline at 48px D-DIN-Bold, uppercase, letter-spacing 0.96px, spectral white (#f0f0fa) text. Ghost CTA button: rgba(240,240,250,0.1) bg, 1px solid rgba(240,240,250,0.35) border, 32px radius, 18px padding."
|
|
236
|
-
- "Design a navigation: transparent over photography. D-DIN 13px weight 700, uppercase, letter-spacing 1.17px, spectral white text. SpaceX wordmark left-aligned."
|
|
237
|
-
- "Build a content section: full-viewport height, background photography with dark overlay. Left-aligned text block with 48px D-DIN-Bold uppercase heading, 16px D-DIN body text, and ghost button below."
|
|
238
|
-
- "Create a micro label: D-DIN 10px, uppercase, letter-spacing 1px, spectral white, line-height 0.94."
|
|
239
|
-
|
|
240
|
-
### Iteration Guide
|
|
241
|
-
1. Start with photography — the image IS the design
|
|
242
|
-
2. All text is uppercase with positive letter-spacing — no exceptions
|
|
243
|
-
3. Only two colors: black and spectral white (#f0f0fa)
|
|
244
|
-
4. Ghost buttons are the only interactive element — transparent, spectral-bordered
|
|
245
|
-
5. Zero shadows, zero cards, zero decorative elements
|
|
246
|
-
6. Every section is full-viewport (100vh) — cinematic pacing
|
|
222
|
+
Use this reference only for an image-led public aerospace/program page: black canvas or a dark photo overlay; D-DIN UI copy; a 50px-high CTA with `rgba(0, 0, 0, 0.5)` fill, `#f0f0fa` text, `1px solid rgba(240, 240, 250, 0.35)` border, 4px radius, and `0px 20px` padding. Use a sharp selected tab with `#ffffff` text and a 1px bottom border. Do not use this prompt as evidence for SpaceX operations software, mobile behavior, font redistribution, status semantics, or motion.
|
|
247
223
|
|
|
248
224
|
---
|
|
249
225
|
|
|
250
226
|
## 10. Voice & Tone
|
|
251
227
|
|
|
252
|
-
|
|
228
|
+
The official Mission and About pages use direct, outcome-led public language: “Making life multiplanetary,” vehicle capability, reusability, and named programs. The captured CTAs are short uppercase imperatives such as “LEARN MORE,” “RESERVE YOUR RIDE,” and “JOIN A MISSION.” This is an observation of those public pages, not a general writing rule for unobserved internal or transactional surfaces.
|
|
253
229
|
|
|
254
|
-
|
|
255
|
-
|---|---|
|
|
256
|
-
| Hero headlines | Declarative, all-caps, mission-forward. "MAKING HUMANITY MULTIPLANETARY", "MAKING HISTORY". No superlatives beyond factual firsts. |
|
|
257
|
-
| Program descriptions | Capability + number + destination. "Starship is the world's most powerful launch vehicle ever developed, capable of carrying up to 150 metric tonnes fully reusable." |
|
|
258
|
-
| Vehicle specs | Pure data. Height / diameter / thrust / payload capacity in SI + imperial, no prose around the numbers. |
|
|
259
|
-
| Mission milestones | Past-tense, dated, factual. "On December 21, 2015, the Falcon 9 rocket delivered 11 communications satellites to orbit..." |
|
|
260
|
-
| CTAs / Buttons | Uppercase verb + noun. "LEARN MORE", "EXPLORE", "RESERVE YOUR RIDE", "JOIN A MISSION", "ORDER NOW". No emoji. No exclamation. |
|
|
261
|
-
| Founder / mission quotes | Verbatim, attributed, em-dash before speaker. Used once per surface, never recycled. |
|
|
262
|
-
| Error / empty (presumed, not on public surface) | Single declarative line. No apology theatre, no illustrations — consistent with the rest of the site's zero-decoration stance. |
|
|
263
|
-
| Legal / supplier / careers links | Single noun, uppercase footer item. "CAREERS · UPDATES · PRIVACY POLICY · SUPPLIERS". |
|
|
230
|
+
### Do
|
|
264
231
|
|
|
265
|
-
|
|
232
|
+
- Use concrete vehicle, destination, or capability language when it is supported by a first-party source.
|
|
233
|
+
- Keep public CTA labels brief and action-led.
|
|
234
|
+
- Attribute mission and product claims to SpaceX’s own public pages.
|
|
266
235
|
|
|
267
|
-
|
|
268
|
-
- *"MAKING HUMANITY MULTIPLANETARY"* (hero headline, Mission page) <!-- verified: https://www.spacex.com/mission/, 2026-04 -->
|
|
269
|
-
- *"SpaceX was founded under the belief that a future where humanity is out exploring the stars is fundamentally more exciting than one where we are not."* (Human Spaceflight page lede) <!-- verified: https://www.spacex.com/human-spaceflight/, 2026-04 -->
|
|
270
|
-
- *"LEARN MORE ABOUT STARSHIP"* (primary CTA on Mission page) <!-- verified: https://www.spacex.com/mission/, 2026-04 -->
|
|
271
|
-
- *"SpaceX's Starship spacecraft and Super Heavy rocket - collectively referred to as Starship - represent a fully reusable transportation system designed to carry both crew and cargo to Earth orbit, the Moon, Mars and beyond."* <!-- verified: https://www.spacex.com/vehicles/starship/, 2026-04 -->
|
|
272
|
-
- Empty / no-results (illustrative): *"NO RESULTS."* — one line, uppercase, Spectral White on Space Black, no illustration. <!-- illustrative: not verified as live SpaceX copy -->
|
|
236
|
+
### Don't
|
|
273
237
|
|
|
274
|
-
|
|
238
|
+
- Don't manufacture founder quotations, launch claims, or operational-status copy.
|
|
239
|
+
- Don't extend uppercase CTA observations into a universal casing rule for every content type.
|
|
275
240
|
|
|
276
241
|
## 11. Brand Narrative
|
|
277
242
|
|
|
278
|
-
SpaceX
|
|
243
|
+
SpaceX’s official About page frames the company around a future in which people explore the stars and describes Starship and Super Heavy as a fully reusable transportation system for crew and cargo to Earth orbit, the Moon, Mars, and beyond. The Mission overview connects that ambition to reusable launch vehicles and to the company’s history of Dragon, Falcon, and human-spaceflight milestones. These first-party statements supply the narrative context for the public pages; they are not visual-token evidence.
|
|
279
244
|
|
|
280
|
-
The
|
|
281
|
-
|
|
282
|
-
**Starlink (satellite broadband)** launched first batch May 2019; commercial rollout 2021; **as of 2025: ~7,000 working satellites = >50% of all active satellites globally + 5M+ subscribers**. **As of mid-2025**, SpaceX is **the world's most valuable private company at >$210B**. **January 2026**: 4 banks selected to lead **the largest IPO in history** with potential **>$1T valuation** ([Britannica — SpaceX](https://www.britannica.com/money/SpaceX), [SpaceX — Wikipedia](https://en.wikipedia.org/wiki/SpaceX)). The brand heritage is the launch manifest, not the founder. SpaceX communicates itself through a running ledger of firsts, attested with date and vehicle: Falcon 1 reaching orbit in 2008 (*"the first privately developed liquid fuel rocket to reach Earth orbit"*), Dragon delivering cargo to the ISS in 2012, first orbital-class first-stage landing on December 21, 2015, first reflight of an orbital-class rocket on March 30, 2017, [restoring human spaceflight to the United States on May 30, 2020](https://www.spacex.com/mission/). The RUD (rapid unscheduled disassembly) culture — treating each test failure as data toward the next iteration rather than as a setback to hide — is a downstream consequence: when the mission is "make humanity multiplanetary," a Starship test article disassembling mid-flight is a legitimate datapoint, not a PR event. The brand does not apologize for failed tests; it enumerates what was learned and what the next attempt will test. <!-- source: synthesized from base DESIGN.md §1 (design ethos) + mission page copy; RUD is a widely-used SpaceX engineering term, not a DESIGN.md token -->
|
|
245
|
+
The captured site’s current public expression pairs that mission language with large imagery, black overlays, D-DIN typography, and small action controls. It does not provide sufficient evidence for a brand-history timeline, employee culture claims, or a customer-product narrative beyond the official pages cited in the verification notes.
|
|
283
246
|
|
|
284
247
|
## 12. Principles
|
|
285
248
|
|
|
286
|
-
1. **
|
|
287
|
-
2. **
|
|
288
|
-
3. **
|
|
289
|
-
4. **Iteration culture: RUD is a design reality, not a bug.** SpaceX's engineering register treats test-flight failures as expected data collection. The brand never hides a failed flight; it publishes high-frame-rate footage and a written postmortem. *UI implication:* Status components must have a state for "test failed, data collected" that is neutral — not red-alarm, not green-celebration — styled identically to a nominal-mission state but with past-tense copy naming the specific flight and outcome.
|
|
290
|
-
5. **No ornament.** The design system has zero shadows, zero cards, zero borders (except one ghost button border), zero decorative icons, zero dividers, zero gradient buttons. *UI implication:* Adding any decorative element — a badge pill, a shadow, an illustration, an emoji — is a reviewable design decision, not a default. The default is always "text on photograph, or text on black."
|
|
291
|
-
6. **One button, one CTA per surface.** Every scene holds one ghost button (`rgba(240, 240, 250, 0.1)` background, 32px radius, spectral border). Multiple CTAs on one section is a red flag — the mission of each scene should be singular. *UI implication:* A layout that produces two visually coequal ghost buttons side-by-side must be refactored into two full-viewport sections, each with one CTA, or a single primary + a secondary text link.
|
|
292
|
-
7. **The mission, not the founder, is the subject.** Copy attributes achievements to the vehicle, the team, or the company — never to an individual. When founder quotes are used, they appear once, attributed, and do not carry the brand narrative alone. *UI implication:* Hero copy, press release headlines, and product descriptions must not make an individual person the grammatical subject. "SpaceX achieved...", "Falcon 9 delivered...", "Dragon docked..." are the canonical subjects.
|
|
293
|
-
8. **Reusability is the engineering thesis.** Every program page returns to the same claim: full, rapid reusability is what transforms space access. *UI implication:* Long-form program pages must surface a reusability data point (number of reflights, successful landings, turnaround time) in the first viewport — not buried in a spec table four scrolls down.
|
|
249
|
+
1. **Make the destination explicit.** The official pages connect vehicles to Earth orbit, the Moon, Mars, and beyond. *UI implication:* keep a public program page’s visual hierarchy tied to a named program or destination, not generic sci-fi decoration.
|
|
250
|
+
2. **Reuse is a first-party product thesis.** The Mission overview calls fully and rapidly reusable rockets pivotal to reducing space-access cost. *UI implication:* present a reuse claim only when the specific page supplies it; do not synthesize performance metrics.
|
|
251
|
+
3. **Separate source domains.** The evidence covers public marketing and program pages only. *UI implication:* do not transfer their tokens, components, or writing treatment to flight operations, accounts, checkout, or other unobserved systems.
|
|
294
252
|
|
|
295
253
|
## 13. Personas
|
|
296
254
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
**Alondra Vega, 31, Hawthorne, CA.** Propulsion engineer at a commercial aerospace supplier. Reads the Starship vehicles page to check the current Raptor thrust and payload-mass envelope before drafting a supplier proposal. Expects SI-first units and will lose trust in any aerospace-adjacent brand that leads with imperial or rounds metric thrust to one significant figure.
|
|
300
|
-
|
|
301
|
-
**Kenji Ikeda, 44, Yokohama.** Satellite program manager for a regional communications operator evaluating Falcon 9 and Starship as a rideshare vehicle. Reads the Mission page and the active launch manifest quarterly; treats every flight-record datapoint as a procurement input. Needs the launch cadence and landing success rate visible without clicking, because his decision timeline is measured in days.
|
|
302
|
-
|
|
303
|
-
**Dara Nwosu, 27, Lagos.** Aerospace master's student and longtime space enthusiast. Follows every Starship test flight and reads the SpaceX updates page within an hour of each launch window. Expects photography and video to load edge-to-edge on mobile and will read a three-paragraph program description in full — as long as it avoids marketing language.
|
|
304
|
-
|
|
305
|
-
**Marcus Reinhardt, 52, Munich.** Range-safety operator at a partner launch facility. Needs the vehicle specs (height, diameter, propellant mass) to cross-reference against the range's hazard envelope. Will never read the marketing copy; needs the numbers accessible within two clicks and in a format that reads cleanly when printed on A4.
|
|
255
|
+
[FILL IN: SpaceX has not supplied audience research, role definitions, or public product-persona material in the sources used for this reference. Do not invent named personas from launch interest or inferred job titles.]
|
|
306
256
|
|
|
307
257
|
## 14. States
|
|
308
258
|
|
|
309
|
-
|
|
310
|
-
|---|---|
|
|
311
|
-
| **Empty (no mission matches filter)** | A single D-DIN 16px line in Spectral White (`#f0f0fa`), uppercase, letter-spacing 1.17px, centered on Space Black: "NO MISSIONS MATCH." No illustration. No suggestion text. |
|
|
312
|
-
| **Empty (no launches this month)** | Full-viewport Space Black with one D-DIN-Bold 48px line: "NO LAUNCHES SCHEDULED." Below it, one D-DIN 12px uppercase link: "VIEW PAST MISSIONS". |
|
|
313
|
-
| **Loading (page shell / route transition)** | Space Black canvas. Photography fades in at `motion-slow` once the image decodes; no skeleton blocks, no spinner, no shimmer. A loading state that renders nothing is preferred to one that renders a placeholder. |
|
|
314
|
-
| **Loading (live launch countdown)** | The countdown clock continues to tick in D-DIN-Bold. Above it, a small D-DIN 10px uppercase label in Status Amber (`#f5a623`): "HOLD — UPDATING." No spinner. |
|
|
315
|
-
| **Live mission (active transmission)** | A 10px square solid Active Red (`#cc0000`) dot left of a D-DIN 12px uppercase label in Spectral White: "LIVE · [MISSION NAME]". The dot pulses at `motion-slow` opacity only — no scale animation. |
|
|
316
|
-
| **Error (content not found)** | Full-viewport Space Black. One D-DIN-Bold 48px uppercase line: "PAGE NOT FOUND." One D-DIN 16px line below: "RETURN TO MISSION." styled as a ghost button. No imagery. |
|
|
317
|
-
| **Error (form submission — supplier / careers)** | Inline below the input. D-DIN 13px uppercase in Status Amber (`#f5a623`). States the exact validation failure and the exact field. No apology. |
|
|
318
|
-
| **Error (test flight RUD — aerospace-specific)** | Neutral treatment: D-DIN-Bold headline names the flight and the date, body paragraph in plain-case D-DIN 16px states the objective, the outcome, and the data collected. No red alert, no apology copy, no emoji. Visually identical to a nominal-mission recap. |
|
|
319
|
-
| **Success (form submitted — supplier contact)** | Space Black with one D-DIN 16px uppercase line in Spectral White: "MESSAGE RECEIVED." Past tense, no exclamation, no checkmark icon. |
|
|
320
|
-
| **Success (launch outcome — nominal)** | Full-viewport post-launch photograph. Overlay: D-DIN-Bold uppercase mission name, D-DIN 16px body recap in past tense, date inline. One ghost button: "READ THE MISSION UPDATE". |
|
|
321
|
-
| **Skeleton** | Not used. SpaceX's aesthetic has no card structure to skeleton-ize; the load state is "black canvas, then photograph fades in." Skeletons with generic gray rectangles would contradict the zero-ornament principle. |
|
|
322
|
-
| **Disabled** | Opacity of text and ghost-button border reduced in proportion (typically 50%); Space Black background unchanged. No cursor change beyond `not-allowed`. Geometry remains stable if re-enabled. |
|
|
259
|
+
Only two public component states are evidenced by the supplied collector:
|
|
323
260
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
**Durations.**
|
|
327
|
-
|
|
328
|
-
| Token | Value | Use |
|
|
261
|
+
| Observed state | Surface and provenance | Treatment |
|
|
329
262
|
|---|---|---|
|
|
330
|
-
| `
|
|
331
|
-
|
|
|
332
|
-
| `motion-standard` | 320ms | Section reveals on scroll, overlay fades |
|
|
333
|
-
| `motion-slow` | 600ms | Full-viewport photography crossfades between scenes |
|
|
334
|
-
| `motion-live` | variable | Countdown tick (1Hz, driven by wall-clock, not animation frame) |
|
|
263
|
+
| Selected tab | Mission `surface-2::[data-omd-capture="26"]` | `#ffffff` text with `0px 0px 1px` border; `role="tab"`, `aria-selected="true"` |
|
|
264
|
+
| Disabled previous control | Starship `surface-3::[data-omd-capture="25"]` | transparent background; `rgba(16, 16, 16, 0.3)` text/border; `disabled=true` |
|
|
335
265
|
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
| Token | Curve | Use |
|
|
339
|
-
|---|---|---|
|
|
340
|
-
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions, opacity fades, nav color changes |
|
|
341
|
-
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Photograph fade-in, scene reveal on scroll |
|
|
342
|
-
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1.0, 1.0)` | Outgoing photograph fade, overlay dismissal |
|
|
343
|
-
|
|
344
|
-
**Spring / overshoot — explicitly forbidden.** No `cubic-bezier(0.34, 1.56, 0.64, 1)`, no `spring(...)`, no bounce, no overshoot anywhere in the system. SpaceX's visual register is aerospace engineering, and aerospace motion is deterministic — a Falcon 9 first stage does not "bounce" when it lands, and neither should a button. Overshoot reads as playful or sycophantic; the brand register is considered and mission-critical. A rocket landing is the most dramatic motion the brand ever shows, and that drama is carried by the photograph itself, not by an easing curve. If an interaction feels like it wants to bounce, the interaction is wrong, not the easing token.
|
|
345
|
-
|
|
346
|
-
**Signature motions.**
|
|
347
|
-
|
|
348
|
-
1. **Photograph crossfade between scenes.** On scroll or route change, the outgoing full-viewport photograph fades out over `motion-slow` using `ease-exit`, and the incoming photograph fades in over `motion-slow` using `ease-enter`. The two fades overlap by ~200ms, producing a continuous dark moment rather than a visible cut. No parallax, no Ken Burns zoom, no rotation.
|
|
349
|
-
2. **Ghost button hover.** Background `rgba(240, 240, 250, 0.1)` transitions to `rgba(240, 240, 250, 0.2)` over `motion-fast` using `ease-standard`. Text color holds. No scale, no lift, no shadow change.
|
|
350
|
-
3. **Live-indicator pulse.** The Active Red (`#cc0000`) dot on a live transmission indicator pulses opacity between 1.0 and 0.4 over a 1.2s cycle, `ease-standard` in both directions. Scale is fixed — only opacity animates.
|
|
351
|
-
4. **Countdown tick.** The launch countdown clock updates exactly once per second at the wall-clock boundary. No glyph animation, no flip-digit effect, no color transition between seconds. The rigidity is the point: countdowns are not entertainment, they are time.
|
|
352
|
-
|
|
353
|
-
**Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. Photograph crossfades become cuts. The live-indicator pulse becomes a static full-opacity dot. The countdown tick is unaffected (wall-clock, not animation). The app stays fully functional; no aerospace drama at the cost of accessibility.
|
|
354
|
-
|
|
355
|
-
<!--
|
|
356
|
-
OmD v0.1 Sources — Philosophy Layer (sections 10–15)
|
|
357
|
-
|
|
358
|
-
Direct verification via Playwright MCP (2026-04-20) — SpaceX is an Angular SPA,
|
|
359
|
-
so server-rendered HTML is empty; all copy below was captured from fully-rendered
|
|
360
|
-
DOM via `document.body.innerText` in a headless Chromium session:
|
|
361
|
-
|
|
362
|
-
- https://www.spacex.com/mission/ — confirms founding year (2002), mission
|
|
363
|
-
statement ("revolutionize space technology, with the ultimate goal of enabling
|
|
364
|
-
people to live on other planets"), the "MAKING HUMANITY MULTIPLANETARY"
|
|
365
|
-
hero, the Falcon 1 / Dragon / Falcon Heavy / Crew Dragon milestone ledger
|
|
366
|
-
(with dates: 2008, 2012, 2015-12-21, 2016-04-08, 2017-03-30, 2018-02-06,
|
|
367
|
-
2020-05-30), the reusability thesis, and all CTA button labels
|
|
368
|
-
("LEARN MORE ABOUT STARSHIP").
|
|
369
|
-
- https://www.spacex.com/human-spaceflight/ — confirms the founding thesis
|
|
370
|
-
sentence ("SpaceX was founded under the belief that a future where humanity
|
|
371
|
-
is out exploring the stars is fundamentally more exciting than one where
|
|
372
|
-
we are not"), the reusability framing ("transform humanity's ability to
|
|
373
|
-
access space into something as routine as air travel"), and CTA labels
|
|
374
|
-
("EXPLORE", "LEARN MORE", "RESERVE YOUR RIDE", "JOIN A MISSION", "ORDER NOW").
|
|
375
|
-
- https://www.spacex.com/vehicles/starship/ — confirms the vehicle spec
|
|
376
|
-
register (SI-first / imperial-second, e.g. "123m / 403 ft"), the
|
|
377
|
-
Starship / Super Heavy / Raptor engine descriptions, and the payload
|
|
378
|
-
capacity framing (fully reusable vs expendable).
|
|
379
|
-
|
|
380
|
-
Direct verification via curl (2026-04-20):
|
|
381
|
-
- https://www.spacex.com/mission/ — the HTML `<meta name="description">` tag
|
|
382
|
-
("SpaceX designs, manufactures and launches advanced rockets and spacecraft.
|
|
383
|
-
The company was founded in 2002 to revolutionize space technology, with the
|
|
384
|
-
ultimate goal of enabling people to live on other planets.") is served by
|
|
385
|
-
the server and is the authoritative corporate one-liner.
|
|
386
|
-
|
|
387
|
-
Base DESIGN.md (sections 1–9) is the source for all token-level claims
|
|
388
|
-
(Space Black #000000, Spectral White #f0f0fa, D-DIN / D-DIN-Bold, ghost button
|
|
389
|
-
rgba(240,240,250,0.1), zero shadows / zero cards stance).
|
|
390
|
-
|
|
391
|
-
Not independently verified, treated as widely documented aerospace-industry
|
|
392
|
-
terminology:
|
|
393
|
-
- RUD (rapid unscheduled disassembly) is a long-standing engineering term
|
|
394
|
-
used publicly by SpaceX in post-flight recaps; the cultural framing in §11
|
|
395
|
-
and §12-4 is editorial synthesis, not a direct quote from a single page.
|
|
396
|
-
|
|
397
|
-
Personas (§13) are fictional archetypes informed by publicly described SpaceX
|
|
398
|
-
audiences (aerospace engineers, commercial launch procurement, space
|
|
399
|
-
enthusiasts, range-safety operators). Names are illustrative and do not refer
|
|
400
|
-
to real people.
|
|
401
|
-
|
|
402
|
-
Interpretive claims (e.g., "the brand heritage is the launch manifest, not
|
|
403
|
-
the founder"; "overshoot reads as playful or sycophantic; the brand register
|
|
404
|
-
is considered and mission-critical") are editorial readings of the design
|
|
405
|
-
system and the verified public copy, not documented SpaceX statements.
|
|
406
|
-
-->
|
|
266
|
+
Loading, empty, error, success, validation, toast, form, and reduced-motion states were not captured. They are intentionally omitted rather than designed from the visual language.
|
|
407
267
|
|
|
408
|
-
|
|
268
|
+
## 15. Motion & Easing
|
|
409
269
|
|
|
410
|
-
|
|
411
|
-
**Tier 1 sources:** spacex.com home + /launches (live DOM via playwright — Primary translucent scrim `rgba(0,0,0,0.5)` 4px / 50px / 0×20 / **`#f0f0fa` Off-White** text + 1px Off-White stroke / 16px·400 ALL CAPS; Active selector `#f0f0fa` filled; Countdown tile `rgba(37,38,40,0.6)` Charcoal scrim 0px / 10px·400).
|
|
412
|
-
**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
|
|
413
|
-
**Tier 2 (Philosophy/founders/IPO):** SpaceX Wikipedia, Britannica (SpaceX + Musk), Space.com, History of Information.
|
|
414
|
-
**Style ref:** retained. **Conflicts unresolved:** none. **Earlier addition:** Off-White `#f0f0fa` canonical near-white (not pure `#fff`) + 1px stroke discipline + Active-filled selector pattern + Countdown tile chrome missed by prior pass.
|
|
270
|
+
The collector records two tab interactions but does not record transition durations, easing curves, scroll behavior, animation properties, or reduced-motion behavior. No motion token or animation rule is inferred from this evidence.
|
|
415
271
|
|
|
272
|
+
---
|
|
273
|
+
**Verified:** 2026-07-13
|
|
274
|
+
**Tier 1 sources:** https://www.spacex.com/ · https://www.spacex.com/mission · https://www.spacex.com/vehicles/starship
|
|
275
|
+
**Tier 2 sources:** https://getdesign.md/spacex (editorial cross-check) · https://styles.refero.design/?q=SpaceX (required search attempted; no indexed SpaceX result found)
|
|
276
|
+
**Conflicts unresolved:** none
|