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
|
@@ -8,492 +8,384 @@ primary_color: "#1a73e8"
|
|
|
8
8
|
logo:
|
|
9
9
|
type: simpleicons
|
|
10
10
|
slug: google
|
|
11
|
-
verified: "2026-
|
|
11
|
+
verified: "2026-07-13"
|
|
12
12
|
added: "2026-06-11"
|
|
13
13
|
omd: "0.1"
|
|
14
14
|
ds:
|
|
15
15
|
name: Material Design 3
|
|
16
16
|
url: "https://m3.material.io"
|
|
17
17
|
type: system
|
|
18
|
-
description: "Google's
|
|
18
|
+
description: "Google's public design system. Its documentation and baseline guidance are context, not a substitute for observed Google product tokens."
|
|
19
|
+
verification_v2:
|
|
20
|
+
schema: 2
|
|
21
|
+
checked: "2026-07-13"
|
|
22
|
+
surfaces:
|
|
23
|
+
- { id: home, kind: public-search-product-dark, url: "https://www.google.com/", inspected: "2026-07-13" }
|
|
24
|
+
- { id: advanced-search, kind: public-search-product-form, url: "https://www.google.com/advanced_search?hl=ko", inspected: "2026-07-13" }
|
|
25
|
+
- { id: business-profile, kind: public-business-product-marketing, url: "https://business.google.com/kr/business-profile/", inspected: "2026-07-13" }
|
|
26
|
+
sources:
|
|
27
|
+
- { id: home-live, kind: product-surface, url: "https://www.google.com/", captured: "2026-07-13" }
|
|
28
|
+
- { id: advanced-search-live, kind: product-surface, url: "https://www.google.com/advanced_search?hl=ko", captured: "2026-07-13" }
|
|
29
|
+
- { id: business-profile-live, kind: product-surface, url: "https://business.google.com/kr/business-profile/", captured: "2026-07-13" }
|
|
30
|
+
- { id: google-story, kind: official-doc, url: "https://about.google/company-info/our-story/", captured: "2026-07-13" }
|
|
31
|
+
- { id: google-philosophy, kind: official-doc, url: "https://about.google/company-info/philosophy/", captured: "2026-07-13" }
|
|
32
|
+
- { id: google-sans-context, kind: official-doc, url: "https://design.google/library/google-sans-flex-font", captured: "2026-07-13" }
|
|
33
|
+
- { id: google-brand-guidance, kind: brand-asset, url: "https://about.google/brand-resource-center/guidance/", captured: "2026-07-13" }
|
|
34
|
+
- { id: material-typography, kind: official-doc, url: "https://m3.material.io/styles/typography/overview", captured: "2026-07-13" }
|
|
35
|
+
- { id: google-sans-code-license, kind: license, url: "https://github.com/googlefonts/googlesans-code", captured: "2026-07-13" }
|
|
36
|
+
conflicts: []
|
|
37
|
+
claims:
|
|
38
|
+
"tokens.colors.primary": &business_live { surface_id: business-profile, source_id: business-profile-live, method: live-inspect, captured: "2026-07-13" }
|
|
39
|
+
"tokens.colors.canvas": &advanced_live { surface_id: advanced-search, source_id: advanced-search-live, method: live-inspect, captured: "2026-07-13" }
|
|
40
|
+
"tokens.colors.canvas-dark": &home_live { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
41
|
+
"tokens.colors.foreground": *business_live
|
|
42
|
+
"tokens.colors.foreground-inverse": *home_live
|
|
43
|
+
"tokens.colors.muted": *business_live
|
|
44
|
+
"tokens.colors.outline": *business_live
|
|
45
|
+
"tokens.typography.family.ui": *business_live
|
|
46
|
+
"tokens.typography.family.text": *business_live
|
|
47
|
+
"tokens.typography.family.display": *business_live
|
|
48
|
+
"tokens.typography.family.search-system": *home_live
|
|
49
|
+
"tokens.typography.display.size": *business_live
|
|
50
|
+
"tokens.typography.display.weight": *business_live
|
|
51
|
+
"tokens.typography.display.lineHeight": *business_live
|
|
52
|
+
"tokens.typography.display.tracking": *business_live
|
|
53
|
+
"tokens.typography.display.use": *business_live
|
|
54
|
+
"tokens.typography.body.size": *business_live
|
|
55
|
+
"tokens.typography.body.weight": *business_live
|
|
56
|
+
"tokens.typography.body.lineHeight": *business_live
|
|
57
|
+
"tokens.typography.body.use": *business_live
|
|
58
|
+
"tokens.typography.action.size": *business_live
|
|
59
|
+
"tokens.typography.action.weight": *business_live
|
|
60
|
+
"tokens.typography.action.lineHeight": *business_live
|
|
61
|
+
"tokens.typography.action.tracking": *business_live
|
|
62
|
+
"tokens.typography.action.use": *business_live
|
|
63
|
+
"tokens.typography.search-field.size": *advanced_live
|
|
64
|
+
"tokens.typography.search-field.weight": *advanced_live
|
|
65
|
+
"tokens.typography.search-field.lineHeight": *advanced_live
|
|
66
|
+
"tokens.typography.search-field.use": *advanced_live
|
|
67
|
+
"tokens.spacing.xs": *home_live
|
|
68
|
+
"tokens.spacing.sm": *home_live
|
|
69
|
+
"tokens.spacing.md": *business_live
|
|
70
|
+
"tokens.spacing.lg": *business_live
|
|
71
|
+
"tokens.spacing.xl": *business_live
|
|
72
|
+
"tokens.rounded.nav": *business_live
|
|
73
|
+
"tokens.rounded.search-key": *home_live
|
|
74
|
+
"tokens.rounded.card": *business_live
|
|
75
|
+
"tokens.rounded.full": *business_live
|
|
76
|
+
"tokens.shadow.flat": *business_live
|
|
77
|
+
"tokens.shadow.search-key-hover": *home_live
|
|
78
|
+
"tokens.components.business-primary.type": *business_live
|
|
79
|
+
"tokens.components.business-primary.bg": *business_live
|
|
80
|
+
"tokens.components.business-primary.fg": *business_live
|
|
81
|
+
"tokens.components.business-primary.radius": *business_live
|
|
82
|
+
"tokens.components.business-primary.padding": *business_live
|
|
83
|
+
"tokens.components.business-primary.height": *business_live
|
|
84
|
+
"tokens.components.business-primary.font": *business_live
|
|
85
|
+
"tokens.components.business-primary.states": *business_live
|
|
86
|
+
"tokens.components.business-primary.use": *business_live
|
|
87
|
+
"tokens.components.business-secondary.type": *business_live
|
|
88
|
+
"tokens.components.business-secondary.bg": *business_live
|
|
89
|
+
"tokens.components.business-secondary.fg": *business_live
|
|
90
|
+
"tokens.components.business-secondary.border": *business_live
|
|
91
|
+
"tokens.components.business-secondary.radius": *business_live
|
|
92
|
+
"tokens.components.business-secondary.padding": *business_live
|
|
93
|
+
"tokens.components.business-secondary.height": *business_live
|
|
94
|
+
"tokens.components.business-secondary.font": *business_live
|
|
95
|
+
"tokens.components.business-secondary.states": *business_live
|
|
96
|
+
"tokens.components.business-secondary.use": *business_live
|
|
97
|
+
"tokens.components.business-nav.type": *business_live
|
|
98
|
+
"tokens.components.business-nav.fg": *business_live
|
|
99
|
+
"tokens.components.business-nav.radius": *business_live
|
|
100
|
+
"tokens.components.business-nav.padding": *business_live
|
|
101
|
+
"tokens.components.business-nav.height": *business_live
|
|
102
|
+
"tokens.components.business-nav.font": *business_live
|
|
103
|
+
"tokens.components.business-nav.states": *business_live
|
|
104
|
+
"tokens.components.business-nav.use": *business_live
|
|
105
|
+
"tokens.components.business-card.type": *business_live
|
|
106
|
+
"tokens.components.business-card.bg": *business_live
|
|
107
|
+
"tokens.components.business-card.fg": *business_live
|
|
108
|
+
"tokens.components.business-card.radius": *business_live
|
|
109
|
+
"tokens.components.business-card.padding": *business_live
|
|
110
|
+
"tokens.components.business-card.font": *business_live
|
|
111
|
+
"tokens.components.business-card.states": *business_live
|
|
112
|
+
"tokens.components.business-card.use": *business_live
|
|
113
|
+
"tokens.components.search-key.type": *home_live
|
|
114
|
+
"tokens.components.search-key.bg": *home_live
|
|
115
|
+
"tokens.components.search-key.fg": *home_live
|
|
116
|
+
"tokens.components.search-key.border": *home_live
|
|
117
|
+
"tokens.components.search-key.radius": *home_live
|
|
118
|
+
"tokens.components.search-key.padding": *home_live
|
|
119
|
+
"tokens.components.search-key.height": *home_live
|
|
120
|
+
"tokens.components.search-key.font": *home_live
|
|
121
|
+
"tokens.components.search-key.states": *home_live
|
|
122
|
+
"tokens.components.search-key.use": *home_live
|
|
19
123
|
tokens:
|
|
20
124
|
source: reconciled
|
|
21
|
-
extracted: "2026-
|
|
22
|
-
note: "
|
|
125
|
+
extracted: "2026-07-13"
|
|
126
|
+
note: "Only values in the supplied three-surface capture are machine tokens. Search is a captured dark public product surface; Advanced Search and Business Profile are separate light product domains. Material documentation, logo guidance, and declared-only font faces remain context rather than product-token substitutes."
|
|
23
127
|
colors:
|
|
24
128
|
primary: "#1a73e8"
|
|
25
|
-
primary-hover: "#1967d2"
|
|
26
|
-
primary-gm3: "#0b57d0"
|
|
27
|
-
primary-tint: "#e8f0fe"
|
|
28
|
-
ink: "#202124"
|
|
29
|
-
ink-search: "#1f1f1f"
|
|
30
|
-
graphite: "#3c4043"
|
|
31
|
-
muted: "#5f6368"
|
|
32
|
-
muted-alt: "#70757a"
|
|
33
|
-
faint: "#9aa0a6"
|
|
34
129
|
canvas: "#ffffff"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
m3-primary: "#6750a4"
|
|
41
|
-
m3-primary-container: "#eaddff"
|
|
42
|
-
m3-on-surface: "#1c1b1f"
|
|
43
|
-
m3-surface: "#fffbfe"
|
|
44
|
-
m3-outline: "#79747e"
|
|
45
|
-
m3-error: "#b3261e"
|
|
46
|
-
m3-site-primary: "#6442d6"
|
|
47
|
-
m3-site-surface: "#f8f1f6"
|
|
130
|
+
canvas-dark: "#22242a"
|
|
131
|
+
foreground: "#3c4043"
|
|
132
|
+
foreground-inverse: "#e8e8e8"
|
|
133
|
+
muted: "#5f6368"
|
|
134
|
+
outline: "#dadce0"
|
|
48
135
|
typography:
|
|
49
|
-
family: {
|
|
50
|
-
display
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
button-compact: { size: 14, weight: 500, use: "google.com sign-in pill / search key buttons" }
|
|
57
|
-
label-m3: { size: 14, weight: 500, lineHeight: 1.43, tracking: 0.1, use: "M3 label-large — buttons, tabs (Roboto baseline)" }
|
|
58
|
-
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
|
|
59
|
-
rounded: { xs: 4, sm: 8, md: 12, lg: 16, xl: 28, full: 9999 }
|
|
136
|
+
family: { ui: "Google Sans", text: "Google Sans Text", display: "Google Sans Display", search-system: "Arial" }
|
|
137
|
+
display: { size: 48, weight: 400, lineHeight: "56px", tracking: "-0.5px", use: "Business Profile section heading only." }
|
|
138
|
+
body: { size: 16, weight: 400, lineHeight: "24px", use: "Business Profile cards, lists, and body copy." }
|
|
139
|
+
action: { size: 16, weight: 500, lineHeight: "24px", tracking: "0.5px", use: "Business Profile CTA and action labels." }
|
|
140
|
+
search-field: { size: 16, weight: 400, lineHeight: "22px", use: "Advanced Search text input; Arial system face." }
|
|
141
|
+
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 }
|
|
142
|
+
rounded: { nav: 4, search-key: 8, card: 24, full: 1000 }
|
|
60
143
|
shadow:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
button-primary: { type: button, bg: "#1a73e8", fg: "#ffffff", radius: "48px", padding: "12px 24px", height: "50px", font: "16px / 500 Google Sans", hover: "#1967d2", use: "Marketing primary CTA pill (about.google)" }
|
|
64
|
-
button-gm3-signin: { type: button, bg: "#0b57d0", fg: "#ffffff", radius: "100px", padding: "10px 12px", height: "40px", font: "14px / 500 Google Sans Text", use: "google.com sign-in pill — newer GM3 blue" }
|
|
65
|
-
button-tonal: { type: button, bg: "#e8f0fe", fg: "#1967d2", radius: "48px", padding: "12px 24px", height: "50px", font: "16px / 500 Google Sans", use: "Tonal secondary pill (Subscribe)" }
|
|
66
|
-
button-search-key: { type: button, bg: "#f8f9fa", fg: "#3c4043", radius: "8px", height: "36px", padding: "0 16px", border: "1px solid #f8f9fa", font: "14px / 500 Arial", use: "Google Search / I'm Feeling Lucky keys" }
|
|
67
|
-
card-feature: { type: card, bg: "#ffffff", fg: "#202124", radius: "8px", use: "about.google feature/story card, flat on #f8f9fa band" }
|
|
68
|
-
card-m3-doc: { type: card, bg: "#f8f1f6", fg: "#1c1b1f", radius: "24px", use: "m3.material.io tonal doc card — M3 expressive shape" }
|
|
69
|
-
nav-link: { type: tab, fg: "#5f6368", active: "text #202124", font: "16px / 500 Google Sans", use: "about.google top nav item, 48px row" }
|
|
70
|
-
footer-link: { type: listItem, bg: "#f8f9fa", fg: "#5f6368", font: "16px / 500 Google Sans", use: "Footer resource link on tonal surface" }
|
|
144
|
+
flat: "none"
|
|
145
|
+
search-key-hover: "rgba(23,23,23,0.24) 0px 1px 3px 0px"
|
|
71
146
|
components_harvested: true
|
|
147
|
+
components:
|
|
148
|
+
business-primary: { type: button, bg: "#1a73e8", fg: "#ffffff", radius: "1000px", padding: "8px 16px", height: "42px", font: "16px / 500 / Google Sans", states: "default, hover, pressed, and focus observed on Business Profile high-emphasis action", use: "Business Profile high-emphasis action only." }
|
|
149
|
+
business-secondary: { type: button, bg: "#ffffff", fg: "#1a73e8", border: "1px solid #dadce0", radius: "1000px", padding: "8px 16px", height: "42px", font: "16px / 500 / Google Sans", states: "default, hover, pressed, and focus observed on Business Profile medium-emphasis action", use: "Business Profile medium-emphasis action only." }
|
|
150
|
+
business-nav: { type: button, fg: "#202124", radius: "4px", padding: "0px 10px", height: "48px", font: "14px / 500 / Google Sans", states: "default, hover, pressed, and focus observed on Business Profile menu item", use: "Business Profile global navigation menu item." }
|
|
151
|
+
business-card: { type: card, bg: "#ffffff", fg: "#3c4043", radius: "24px", padding: "18px 18px 32px", font: "16px / 400 / Google Sans Text", states: "disabled observed on the captured inactive image card", use: "Business Profile scrolling image card only." }
|
|
152
|
+
search-key: { type: button, bg: "#303134", fg: "#e8eaed", border: "1px solid #303134", radius: "8px", padding: "0px 16px", height: "36px", font: "14px / 500 / Arial", states: "default, hover, pressed, and focus observed on dark Search submit controls", use: "Captured dark Search homepage submit key only." }
|
|
72
153
|
---
|
|
73
154
|
|
|
74
155
|
# Design System Inspiration of Google
|
|
75
156
|
|
|
76
157
|
## 1. Visual Theme & Atmosphere
|
|
77
158
|
|
|
78
|
-
Google
|
|
79
|
-
|
|
80
|
-
The typographic system is a three-font hierarchy with clear jobs: **Google Sans** (a geometric sans derived from the Product Sans logo lineage) owns display headlines and buttons, rendered at an unusually calm weight 400 even at 60px; **Google Sans Text** carries body copy at 16px/24px; and on the Search homepage, plain **Arial** persists as a deliberate utilitarian fossil — the fastest-rendering font for the fastest page on the web. Material 3's baseline type scale (Roboto) underpins product UI. Headlines never shout with weight; hierarchy comes from size and space, which gives Google's marketing pages a friendly, almost academic calm.
|
|
81
|
-
|
|
82
|
-
Geometry is where the personality lives. Interactive elements are pills — the about.google CTA runs a 48px radius, the google.com sign-in button a full 100px pill in the newer GM3 blue (`#0b57d0`) — while containers stay gently rounded (8px cards on marketing, 24px tonal cards on the M3 docs site, following the M3 shape scale of 4/8/12/16/28px). Depth is nearly absent: marketing surfaces use flat tonal shifts (white against `#f8f9fa`) and `#dadce0` hairlines instead of shadows, reserving M3's tinted elevation for product UI. The result is a system that feels effortless, optimistic, and engineered — color used sparingly, geometry friendly, and whitespace doing the work of luxury.
|
|
159
|
+
Google began as a search engine and now describes a product family used by billions; its stated mission is to organize the world's information and make it universally accessible and useful. That scope is expressed through an unusually disciplined split between task surfaces and brand-bearing product pages. The supplied July capture shows a dark public Search homepage that uses Arial and tight utility controls, alongside light Advanced Search and Business Profile surfaces that use Google Sans families, generous 24px cards, and rounded blue actions. The identity stays recognizable through a restrained blue action color, soft charcoal text, rounded controls, and the familiar multicolor mark rather than through one universal page theme. Google Design describes the same evolution in type: Product Sans served product lockups, Google Sans became the broader display/UI face, and Google Sans Text was developed for smaller, more legible reading sizes.
|
|
83
160
|
|
|
84
161
|
**Key Characteristics:**
|
|
85
|
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
- Google Sans
|
|
89
|
-
-
|
|
90
|
-
-
|
|
91
|
-
- Material Design 3 as the public, open-source token vocabulary (color roles, type scale, shape, motion)
|
|
92
|
-
- The four-color logotype (blue, red, yellow, green) as the only place the brand is loud
|
|
162
|
+
|
|
163
|
+
- Search, Advanced Search, and Business Profile are separate observed product domains, not one interchangeable template.
|
|
164
|
+
- The captured Search homepage is dark (#22242a), while the two other captured surfaces are light.
|
|
165
|
+
- Google Sans, Google Sans Text, and Google Sans Display are live loaded faces on the Business Profile surface; Arial is live system typography on Search and Advanced Search.
|
|
166
|
+
- Business Profile actions use Google Blue (#1a73e8), full pills, and 42px or 50px heights.
|
|
167
|
+
- The captured inactive Business Profile card is white, 24px-rounded, and shadowless.
|
|
93
168
|
|
|
94
169
|
## 2. Color Palette & Roles
|
|
95
170
|
|
|
96
|
-
###
|
|
97
|
-
|
|
98
|
-
- **
|
|
99
|
-
- **
|
|
100
|
-
- **
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
- **
|
|
104
|
-
- **
|
|
105
|
-
|
|
106
|
-
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
- **Muted** (`#5f6368`): Secondary body text, nav links, footer links.
|
|
110
|
-
- **Muted Alt** (`#70757a`): Quieter metadata text on Search surfaces.
|
|
111
|
-
- **Faint** (`#9aa0a6`): Lowest-emphasis labels, placeholder-grade grey.
|
|
112
|
-
|
|
113
|
-
### Semantic & Heritage
|
|
114
|
-
- **Success Green** (`#188038`): Green 700 — success states and the Classroom brand mark (Tier 2 verified).
|
|
115
|
-
- **SERP Link Blue** (`#1a0dab`): The classic search-results link blue, still live on google.com — a 25-year-old fossil token and one of the most recognizable colors on the web.
|
|
116
|
-
|
|
117
|
-
### Material 3 Baseline (official DS tokens)
|
|
118
|
-
- **M3 Primary** (`#6750a4`): The baseline seed purple of Material 3 — `md.sys.color.primary` in the public token set. The default theme of the system Google ships to the world, distinct from Google's own deployed blue.
|
|
119
|
-
- **M3 Primary Container** (`#eaddff`): Tonal container for the baseline primary.
|
|
120
|
-
- **M3 On-Surface** (`#1c1b1f`): Baseline text color (neutral10).
|
|
121
|
-
- **M3 Surface** (`#fffbfe`): Baseline surface (neutral99) — warm-tinted white.
|
|
122
|
-
- **M3 Outline** (`#79747e`): Baseline outline (neutral-variant50).
|
|
123
|
-
- **M3 Error** (`#b3261e`): Baseline error red (error40).
|
|
124
|
-
- **M3 Site Purple** (`#6442d6`): The expressive primary used by m3.material.io itself — hero CTA and link color on the DS docs site.
|
|
125
|
-
- **M3 Site Surface** (`#f8f1f6`): The tonal card background on m3.material.io, at 24px radius.
|
|
171
|
+
### Observed product colors
|
|
172
|
+
|
|
173
|
+
- **Primary action blue** (#1a73e8): Business Profile high-emphasis actions and focus-ring source color.
|
|
174
|
+
- **Light canvas** (#ffffff): Advanced Search and Business Profile white surfaces.
|
|
175
|
+
- **Dark Search canvas** (#22242a): Captured Google Search homepage body background.
|
|
176
|
+
- **Business foreground** (#3c4043): Repeated Business Profile body and card text.
|
|
177
|
+
- **Search inverse foreground** (#e8e8e8): Repeated dark Search text and menu foreground.
|
|
178
|
+
- **Muted** (#5f6368): Search utility treatment and Business Profile secondary text.
|
|
179
|
+
- **Outline** (#dadce0): Observed Business Profile medium-emphasis action border.
|
|
180
|
+
|
|
181
|
+
### Source-domain boundary
|
|
182
|
+
|
|
183
|
+
Material Design 3 publishes its own typography guidance, but no Material documentation chrome or baseline palette is promoted here as a Google Search or Business Profile product token. Google logo and brand-resource guidance are identity context, not evidence for application component values.
|
|
126
184
|
|
|
127
185
|
## 3. Typography Rules
|
|
128
186
|
|
|
129
|
-
###
|
|
130
|
-
|
|
131
|
-
- **
|
|
132
|
-
- **
|
|
133
|
-
- **
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
|
140
|
-
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
148
|
-
### M3 Baseline Type Scale (official tokens, Roboto)
|
|
149
|
-
Display-large 57/64/400 (-0.25 tracking), display-medium 45/52/400, display-small 36/44/400; headline 32/28/24px at 400; title-large 22/28/400, title-medium 16/24/500; body-large 16/24/400 (0.5 tracking), body-medium 14/20/400; label-large 14/20/500 (0.1 tracking), label-medium 12/16/500, label-small 11/16/500.
|
|
150
|
-
|
|
151
|
-
### Principles
|
|
152
|
-
- **Weight 400 at display sizes**: Google headlines are big, not bold. Hierarchy comes from size and whitespace, giving marketing pages a calm, unhurried register.
|
|
153
|
-
- **Three fonts, three jobs**: Google Sans persuades, Google Sans Text informs, Arial (on Search) performs. Roboto remains the M3 product baseline.
|
|
154
|
-
- **Positive tracking at small sizes**: M3's body and label tokens add tracking (0.25-0.5px) for legibility — the opposite of fashion-brand tightness.
|
|
155
|
-
- **Type as token**: every size/weight/line-height pair is a named `md.sys.typescale` token, not an ad-hoc choice.
|
|
187
|
+
### Evidence classes
|
|
188
|
+
|
|
189
|
+
- **Official product-use context:** Google Design says Google Sans was built for product and marketing display use and Google Sans Text was developed for smaller, longer reading contexts.
|
|
190
|
+
- **Live computed surface-use:** The supplied capture records Google Sans (107 uses), Google Sans Text (145 uses), and Google Sans Display (4 uses) with matching loaded FontFaceSet entries and fonts.gstatic.com sources. Google Sans and Google Sans Text are therefore usable live UI families for the captured Business Profile surface; Google Sans Display is retained only for the captured 48px heading role.
|
|
191
|
+
- **Live system use:** Arial is the observed system family for the captured dark Search homepage and Advanced Search. It is not replaced with a branded fallback.
|
|
192
|
+
- **Declared-only or non-text assets:** Product Sans, Google Symbols, and Material Icons have declared faces but zero visible usage in this capture. Material Symbols Outlined was loaded once as an icon font, not promoted to a text family.
|
|
193
|
+
- **Official distributed asset and license boundary:** Google Sans Code is an official Google Fonts repository asset under the SIL Open Font License 1.1 and is described there as a code face for contexts including Gemini and Android Studio. It was not observed on the three supplied surfaces, so it is not a UI token. The supplied evidence does not establish a license URL for the loaded Google Sans, Google Sans Text, or Google Sans Display webfont files.
|
|
194
|
+
|
|
195
|
+
### Observed hierarchy
|
|
196
|
+
|
|
197
|
+
| Role | Family | Size | Weight | Line Height | Surface |
|
|
198
|
+
|---|---|---:|---:|---:|---|
|
|
199
|
+
| Business heading | Google Sans Display | 48px | 400 | 56px | Business Profile |
|
|
200
|
+
| Business action | Google Sans | 16px | 500 | 24px | Business Profile |
|
|
201
|
+
| Business body | Google Sans Text | 16px | 400 | 24px | Business Profile |
|
|
202
|
+
| Business navigation | Google Sans | 14px | 500 | 20px | Business Profile |
|
|
203
|
+
| Search field | Arial | 16px | 400 | 22px | Advanced Search |
|
|
204
|
+
| Search compact control | Arial | 14px | 500 | normal | dark Search homepage |
|
|
156
205
|
|
|
157
206
|
## 4. Component Stylings
|
|
158
207
|
|
|
159
|
-
###
|
|
208
|
+
### Business Profile high-emphasis action
|
|
160
209
|
|
|
161
|
-
**
|
|
162
|
-
|
|
163
|
-
-
|
|
164
|
-
-
|
|
165
|
-
-
|
|
166
|
-
-
|
|
167
|
-
-
|
|
168
|
-
-
|
|
169
|
-
- Use: Marketing primary CTA on about.google ("See what's new", "Explore", "Check it out")
|
|
170
|
-
|
|
171
|
-
**GM3 Sign-in Pill**
|
|
172
|
-
- Background: `#0b57d0`
|
|
173
|
-
- Text: `#ffffff`
|
|
174
|
-
- Radius: 100px
|
|
175
|
-
- Padding: 10px 12px
|
|
176
|
-
- Height: 40px
|
|
177
|
-
- Font: 14px / 500 / Google Sans Text
|
|
178
|
-
- Use: google.com header sign-in — the newer Material 3 era Google Blue
|
|
179
|
-
|
|
180
|
-
**Tonal Pill (Secondary)**
|
|
181
|
-
- Background: `#e8f0fe`
|
|
182
|
-
- Text: `#1967d2`
|
|
183
|
-
- Radius: 48px
|
|
184
|
-
- Padding: 12px 24px
|
|
185
|
-
- Height: 50px
|
|
210
|
+
**Default**
|
|
211
|
+
|
|
212
|
+
- Background: #1a73e8
|
|
213
|
+
- Text: #ffffff
|
|
214
|
+
- Border: 1px solid transparent
|
|
215
|
+
- Radius: 1000px
|
|
216
|
+
- Padding: 8px 16px
|
|
217
|
+
- Height: 42px
|
|
186
218
|
- Font: 16px / 500 / Google Sans
|
|
187
|
-
-
|
|
219
|
+
- Hover: #1a72e7 background observed
|
|
220
|
+
- Pressed: #185abc background observed
|
|
221
|
+
- Focus: #185abc background with 2px same-color outer ring observed
|
|
222
|
+
- Use: Business Profile high-emphasis action at surface-3 selector [data-omd-capture="11"]; hover, pressed, and focus were captured.
|
|
188
223
|
|
|
189
|
-
|
|
190
|
-
- Background: `#f8f9fa`
|
|
191
|
-
- Text: `#3c4043`
|
|
192
|
-
- Border: 1px solid `#f8f9fa`
|
|
193
|
-
- Radius: 8px
|
|
194
|
-
- Padding: 0px 16px
|
|
195
|
-
- Height: 36px
|
|
196
|
-
- Font: 14px / 500 / Arial
|
|
197
|
-
- Use: "Google Search" / "I'm Feeling Lucky" keys on the homepage
|
|
224
|
+
### Business Profile medium-emphasis action
|
|
198
225
|
|
|
199
|
-
|
|
226
|
+
**Default**
|
|
200
227
|
|
|
201
|
-
|
|
202
|
-
-
|
|
203
|
-
-
|
|
204
|
-
- Radius:
|
|
205
|
-
-
|
|
228
|
+
- Background: #ffffff
|
|
229
|
+
- Text: #1a73e8
|
|
230
|
+
- Border: 1px solid #dadce0
|
|
231
|
+
- Radius: 1000px
|
|
232
|
+
- Padding: 8px 16px
|
|
233
|
+
- Height: 42px
|
|
234
|
+
- Font: 16px / 500 / Google Sans
|
|
235
|
+
- Hover: #ffffff background and #1a73e8 border observed
|
|
236
|
+
- Pressed: #e8f1fd background observed
|
|
237
|
+
- Focus: #e4eefc background with 2px #1a73e8 outer ring observed
|
|
238
|
+
- Use: Business Profile medium-emphasis action at surface-3 selector [data-omd-capture="10"]; hover, pressed, and focus were captured.
|
|
206
239
|
|
|
207
|
-
|
|
208
|
-
- Background: `#f8f1f6`
|
|
209
|
-
- Text: `#1c1b1f`
|
|
210
|
-
- Radius: 24px
|
|
211
|
-
- Use: m3.material.io content cards — the expressive M3 shape scale in practice
|
|
240
|
+
### Business Profile navigation menu item
|
|
212
241
|
|
|
213
|
-
|
|
242
|
+
**Default**
|
|
214
243
|
|
|
215
|
-
|
|
216
|
-
- Text: `#5f6368`
|
|
217
|
-
- Active: `#202124` text on `#ffffff`
|
|
244
|
+
- Text: #202124
|
|
218
245
|
- Radius: 4px
|
|
219
|
-
- Padding: 0px
|
|
246
|
+
- Padding: 0px 10px
|
|
220
247
|
- Height: 48px
|
|
221
|
-
- Font:
|
|
222
|
-
- Use:
|
|
248
|
+
- Font: 14px / 500 / Google Sans
|
|
249
|
+
- Use: Business Profile global navigation menu item at surface-3 selector [data-omd-capture="2"]; hover, pressed, and focus were captured without a retained changed token value.
|
|
223
250
|
|
|
224
|
-
###
|
|
251
|
+
### Business Profile inactive image card
|
|
225
252
|
|
|
226
|
-
**
|
|
227
|
-
- Text: 16px / 400 / Arial
|
|
228
|
-
- Padding: 14px 0px 0px
|
|
229
|
-
- Use: The google.com search textarea — the single most-used input on the web; container draws the pill chrome
|
|
253
|
+
**Disabled**
|
|
230
254
|
|
|
231
|
-
|
|
255
|
+
- Background: #ffffff
|
|
256
|
+
- Text: #3c4043
|
|
257
|
+
- Radius: 24px
|
|
258
|
+
- Padding: 18px 18px 32px
|
|
259
|
+
- Font: 16px / 400 / Google Sans Text
|
|
260
|
+
- Use: Inactive Business Profile scrolling image card at surface-3 div. The disabled state was observed; no enabled-card substitution is asserted.
|
|
232
261
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
-
|
|
238
|
-
-
|
|
262
|
+
### Dark Search submit key
|
|
263
|
+
|
|
264
|
+
**Default**
|
|
265
|
+
|
|
266
|
+
- Background: #303134
|
|
267
|
+
- Text: #e8eaed
|
|
268
|
+
- Border: 1px solid #303134
|
|
269
|
+
- Radius: 8px
|
|
270
|
+
- Padding: 0px 16px
|
|
271
|
+
- Height: 36px
|
|
272
|
+
- Font: 14px / 500 / Arial
|
|
273
|
+
- Hover: 1px #5f6368 border and rgba(23,23,23,0.24) 0px 1px 3px 0px shadow observed
|
|
274
|
+
- Use: Dark Search submit control at home selector [data-omd-capture="12"]; focus, hover, and pressed were captured.
|
|
275
|
+
|
|
276
|
+
### Advanced Search text field
|
|
277
|
+
|
|
278
|
+
**Default**
|
|
279
|
+
|
|
280
|
+
- Text: #474747
|
|
281
|
+
- Padding: 12px 16px
|
|
282
|
+
- Height: 48px
|
|
283
|
+
- Font: 16px / 400 / Arial
|
|
284
|
+
- Use: Advanced Search input at surface-2 selector [data-omd-capture="2"]. The visible input itself was transparent; no container background or radius is asserted.
|
|
239
285
|
|
|
240
286
|
---
|
|
241
|
-
**Verified:** 2026-
|
|
242
|
-
**Tier 1 sources:** https://
|
|
243
|
-
**Tier 2 sources:** getdesign.md/google
|
|
287
|
+
**Verified:** 2026-07-13
|
|
288
|
+
**Tier 1 sources:** https://www.google.com/ (captured dark Search product), https://www.google.com/advanced_search?hl=ko (captured Advanced Search product), https://business.google.com/kr/business-profile/ (captured Business Profile product), https://about.google/company-info/our-story/, https://about.google/company-info/philosophy/, https://design.google/library/google-sans-flex-font, https://about.google/brand-resource-center/guidance/, https://m3.material.io/styles/typography/overview, https://github.com/googlefonts/googlesans-code
|
|
289
|
+
**Tier 2 sources:** https://getdesign.md/google (direct fetch unavailable; no value adopted), https://styles.refero.design/?q=google (query fetch unavailable; no value adopted)
|
|
244
290
|
**Conflicts unresolved:** none
|
|
245
291
|
|
|
246
292
|
## 5. Layout Principles
|
|
247
293
|
|
|
248
|
-
|
|
249
|
-
-
|
|
250
|
-
-
|
|
251
|
-
-
|
|
252
|
-
|
|
253
|
-
### Grid & Container
|
|
254
|
-
- google.com: a single centered column — logo, search bar, two keys. The grid is the absence of a grid.
|
|
255
|
-
- about.google: full-width hero media, then alternating white and `#f8f9fa` bands with 2-3 column card grids
|
|
256
|
-
- m3.material.io: generous tonal cards in a 2-3 column masonry, 24px radii
|
|
257
|
-
- Footer: multi-column link lists on the `#f8f9fa` tonal surface
|
|
258
|
-
|
|
259
|
-
### Whitespace Philosophy
|
|
260
|
-
- **Emptiness as trust**: the homepage's restraint signals speed and focus; whitespace is the product's promise that it will not waste your time.
|
|
261
|
-
- **Tonal banding over borders**: sections alternate white/`#f8f9fa` instead of drawing lines.
|
|
262
|
-
- **Air around actions**: pill CTAs always float in generous space — never stacked tightly, rarely more than one filled pill per viewport.
|
|
263
|
-
|
|
264
|
-
### Border Radius Scale (M3 shape tokens)
|
|
265
|
-
- Extra-small (4px): links, inline focus targets
|
|
266
|
-
- Small (8px): cards, search key buttons, nav containers
|
|
267
|
-
- Medium (12px): larger containers
|
|
268
|
-
- Large (16px): prominent containers
|
|
269
|
-
- Extra-large (28px): hero sheets, large M3 surfaces (docs cards run 24px)
|
|
270
|
-
- Full (9999px / 48-200px computed): every button pill, chips, avatar circles
|
|
294
|
+
- **Search homepage:** Captured as a dark, centered utility surface with compact 36px submit keys and a 50px text area.
|
|
295
|
+
- **Advanced Search:** Captured as a light form surface with 48px text inputs and 12px vertical / 16px horizontal field padding.
|
|
296
|
+
- **Business Profile:** Captured as a light public business-product page with 42px and 50px pill actions, 48px navigation rows, and 24px image cards.
|
|
297
|
+
- **Observed spacing values:** 4, 8, 12, 16, 24, 32, and 48px recur in the capture. These are observations, not a universal Google grid declaration.
|
|
271
298
|
|
|
272
299
|
## 6. Depth & Elevation
|
|
273
300
|
|
|
274
|
-
|
|
|
275
|
-
|
|
276
|
-
| Flat
|
|
277
|
-
|
|
|
278
|
-
|
|
|
279
|
-
| M3 Elevation 1 | `rgba(0,0,0,0.3) 0px 1px 2px 0px, rgba(0,0,0,0.15) 0px 1px 3px 1px` | Floating controls in product UI (measured on m3.material.io media button) |
|
|
301
|
+
| Treatment | Observed use |
|
|
302
|
+
|---|---|
|
|
303
|
+
| Flat | Business Profile high-emphasis and medium-emphasis actions, navigation, and inactive card default styles are shadowless. |
|
|
304
|
+
| State shadow | Dark Search submit-key hover uses rgba(23,23,23,0.24) 0px 1px 3px 0px. |
|
|
305
|
+
| Focus ring | Business Profile medium-emphasis and low-emphasis focus examples use a 2px blue outer ring. |
|
|
280
306
|
|
|
281
|
-
|
|
307
|
+
The capture does not support a claim that all Google product surfaces are shadowless or that Material documentation elevation is a Google product token.
|
|
282
308
|
|
|
283
309
|
## 7. Do's and Don'ts
|
|
284
310
|
|
|
285
311
|
### Do
|
|
286
|
-
- Use Google Blue (`#1a73e8`) as the single interactive hue; shift to `#0b57d0` for GM3-era surfaces
|
|
287
|
-
- Make every action a pill — 48px+ radius on buttons, full-round chips
|
|
288
|
-
- Set display headlines in Google Sans at weight 400 — big, never bold
|
|
289
|
-
- Separate sections with tonal bands (`#ffffff` / `#f8f9fa`) and `#dadce0` hairlines, not shadows
|
|
290
|
-
- Use soft near-black (`#202124`) for text
|
|
291
|
-
- Use the tonal blue pair (`#e8f0fe` bg + `#1967d2` text) for secondary actions
|
|
292
|
-
- Follow the M3 shape scale: 4 / 8 / 12 / 16 / 28px, full for pills
|
|
293
|
-
- Treat whitespace as the primary luxury — one filled CTA per viewport
|
|
294
312
|
|
|
295
|
-
|
|
296
|
-
- Use
|
|
297
|
-
-
|
|
298
|
-
-
|
|
299
|
-
-
|
|
300
|
-
- Square off buttons — sharp-cornered actions read as foreign to the system
|
|
301
|
-
- Invent ad-hoc type sizes — every step should map to a typescale token
|
|
302
|
-
- Crowd the canvas — density is for product UI (Gmail, Drive), never for marketing or Search
|
|
303
|
-
- Replace Arial on the Search homepage with a brand font — utility surfaces optimize for speed, not flair
|
|
313
|
+
- Keep the product surface boundary explicit: dark Search, light Advanced Search, and Business Profile use different observed treatments.
|
|
314
|
+
- Use Google Blue #1a73e8 only where the captured Business Profile action context supports it.
|
|
315
|
+
- Preserve Google Sans family roles where loaded usage and a matching FontFaceSet entry were captured.
|
|
316
|
+
- Keep Advanced Search in its observed Arial system typography.
|
|
317
|
+
- Reuse the measured full-pill, 4px navigation, 8px search-key, and 24px card geometry only in their observed contexts.
|
|
304
318
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
### Breakpoints
|
|
308
|
-
| Name | Width | Key Changes |
|
|
309
|
-
|------|-------|-------------|
|
|
310
|
-
| Compact | <600px | Single column, nav collapses to drawer/hamburger, display drops to ~36-40px |
|
|
311
|
-
| Medium | 600-905px | 2-column card grids, moderate margins |
|
|
312
|
-
| Expanded | 905-1240px | Full layout, 3-column grids |
|
|
313
|
-
| Large | >1240px | Centered content, max-width containers, generous margins |
|
|
314
|
-
|
|
315
|
-
M3 defines canonical window size classes (compact/medium/expanded) that Google's web surfaces follow loosely.
|
|
319
|
+
### Don't
|
|
316
320
|
|
|
317
|
-
|
|
318
|
-
-
|
|
319
|
-
-
|
|
320
|
-
-
|
|
321
|
+
- Replace Arial on Search or Advanced Search with a brand face.
|
|
322
|
+
- Treat Product Sans, Google Symbols, Material Icons, or Google Sans Code as a live UI family for the captured surfaces.
|
|
323
|
+
- Promote Material documentation chrome or baseline palette values to Search or Business Profile tokens.
|
|
324
|
+
- Reuse the captured disabled Business Profile card as an enabled-card specification.
|
|
325
|
+
- Generalize the dark Search submit-key shadow to all Google actions.
|
|
321
326
|
|
|
322
|
-
|
|
323
|
-
- about.google: 60px displays compress, weight 400 maintained; card grids stack to single column
|
|
324
|
-
- google.com: already minimal — the layout barely changes, the search bar simply narrows
|
|
325
|
-
- Footer link columns stack vertically on compact widths
|
|
326
|
-
- Tonal bands stay full-width at every size
|
|
327
|
+
## 8. Responsive Behavior
|
|
327
328
|
|
|
328
|
-
|
|
329
|
-
- Marketing media uses large rounded containers (8-28px radius) without shadows
|
|
330
|
-
- Product screenshots sit flat on tonal bands
|
|
331
|
-
- The four-color logo never distorts; it scales or swaps to the "G" mark
|
|
329
|
+
The supplied collector evidence is desktop-only (1440x900). It confirms 48px Business Profile navigation rows, 42px and 50px Business Profile actions, 36px dark Search keys, and 48px Advanced Search inputs at that viewport. No mobile breakpoint, layout-collapse rule, or touch-target baseline is asserted from this packet.
|
|
332
330
|
|
|
333
331
|
## 9. Agent Prompt Guide
|
|
334
332
|
|
|
335
|
-
### Quick
|
|
336
|
-
- Primary CTA: Google Blue (`#1a73e8`), hover Blue 700 (`#1967d2`)
|
|
337
|
-
- GM3-era CTA: `#0b57d0`
|
|
338
|
-
- Tonal secondary: `#e8f0fe` bg + `#1967d2` text
|
|
339
|
-
- Background: Pure White (`#ffffff`)
|
|
340
|
-
- Tonal surface: `#f8f9fa`
|
|
341
|
-
- Text: Ink (`#202124`); secondary `#5f6368`; faint `#9aa0a6`
|
|
342
|
-
- Hairline: `#dadce0`
|
|
343
|
-
- Success: `#188038`; Error (M3): `#b3261e`
|
|
344
|
-
- M3 baseline seed: `#6750a4` with container `#eaddff`
|
|
345
|
-
|
|
346
|
-
### Example Component Prompts
|
|
347
|
-
- "Create a hero on white background. Headline at 60px Google Sans weight 400, line-height 1.2, color #202124. Sub-copy 16px Google Sans Text, #5f6368, line-height 1.5. One filled pill CTA: #1a73e8 background, white text, 48px radius, 12px 24px padding, 16px Google Sans weight 500; hover #1967d2."
|
|
348
|
-
- "Design a feature card row on a #f8f9fa band: white #ffffff cards, 8px radius, no shadow. Card title 16px Google Sans Text weight 500 #202124, body 16px weight 400 #5f6368, link 'Learn more' in #1a73e8."
|
|
349
|
-
- "Build the google.com search page: white canvas, centered logo, pill search bar with #dadce0 hairline, two grey keys (#f8f9fa bg, #3c4043 text, 8px radius, 36px height, 14px Arial weight 500), sign-in pill top-right (#0b57d0, white text, 100px radius, 40px height)."
|
|
350
|
-
- "Create a tonal secondary button: #e8f0fe background, #1967d2 text, 48px radius pill, 12px 24px padding, 16px Google Sans weight 500."
|
|
351
|
-
- "Design an M3 doc card: #f8f1f6 background, 24px radius, #1c1b1f text, 16px Google Sans Text; headline in Google Sans weight 475 if variable, else 500."
|
|
352
|
-
|
|
353
|
-
### Iteration Guide
|
|
354
|
-
1. Blue (`#1a73e8`) is the only interactive color — semantic colors stay in states, the rainbow stays in the logo
|
|
355
|
-
2. Every button is a pill; every card is gently rounded (8-28px)
|
|
356
|
-
3. Display type is large and weight 400 — increase size, never weight
|
|
357
|
-
4. Separate with tonal bands and hairlines, never shadows, on marketing surfaces
|
|
358
|
-
5. Map all radii to the M3 shape scale (4/8/12/16/28/full)
|
|
359
|
-
6. Body text is `#202124` on white, `#5f6368` for secondary — never pure black
|
|
360
|
-
7. Keep one filled CTA per viewport; secondary actions go tonal (`#e8f0fe`)
|
|
361
|
-
8. For product-UI density, switch to the M3 baseline tokens (Roboto typescale, `#6750a4` seed or brand-blue theme)
|
|
333
|
+
### Quick reference
|
|
362
334
|
|
|
363
|
-
|
|
335
|
+
- For a Business Profile action: #1a73e8 on white, 42px full pill, 8px 16px padding, Google Sans 16px/500.
|
|
336
|
+
- For a Business Profile secondary action: white, #1a73e8 text, #dadce0 border, 42px full pill.
|
|
337
|
+
- For dark Search submit keys: #303134, #e8eaed, 8px radius, 36px height, Arial 14px/500.
|
|
338
|
+
- For Advanced Search fields: transparent input, #474747 text, 12px 16px padding, 48px height, Arial 16px/400.
|
|
339
|
+
- For Business Profile body/cards: Google Sans Text 16px/400/24px; use the observed 24px card only where an inactive image card is intended.
|
|
364
340
|
|
|
365
341
|
## 10. Voice & Tone
|
|
366
342
|
|
|
367
|
-
Google's
|
|
343
|
+
Google's official philosophy leads with usefulness, focus, and speed. The current source language is concise and user-directed: Google says to focus on the user, to do one thing well, and that fast is better than slow. The product implication is a short, plain register that names the task and next action without inventing urgency or decorative brand voice.
|
|
368
344
|
|
|
369
345
|
| Context | Tone |
|
|
370
346
|
|---|---|
|
|
371
|
-
| Search
|
|
372
|
-
|
|
|
373
|
-
|
|
|
374
|
-
| Product UI | Functional, terse, sentence case. Helpful defaults over explanations. |
|
|
375
|
-
| Mission/company copy | Earnest and global: organize, access, useful — economist nouns, no hype. |
|
|
376
|
-
| Error/help text | Plain-language cause + next step; apologetic only when Google is at fault. |
|
|
377
|
-
|
|
378
|
-
**Voice samples (verbatim, verified 2026-06-11):**
|
|
379
|
-
- "Our mission is to organize the world's information and make it universally accessible and useful" — about.google company info.
|
|
380
|
-
- "Focus on the user and all else will follow." — Ten things we know to be true, #1.
|
|
381
|
-
- "Fast is better than slow." — Ten things we know to be true, #3.
|
|
382
|
-
- "I'm Feeling Lucky" — google.com homepage button, live.
|
|
383
|
-
- "Explore our products and features across Search, Google Workspace and more" — about.google homepage card.
|
|
384
|
-
|
|
385
|
-
**Forbidden register**: hype superlatives ("revolutionary", "game-changing"), exclamation-heavy enthusiasm, jargon without explanation, fear-based urgency, and any copy that makes the user feel stupid.
|
|
347
|
+
| Search and forms | Brief, functional, task-first |
|
|
348
|
+
| Product marketing | Helpful and direct |
|
|
349
|
+
| Help or error content | Plain-language cause and next step |
|
|
386
350
|
|
|
387
|
-
|
|
351
|
+
**Source-grounded voice samples:**
|
|
388
352
|
|
|
389
|
-
|
|
353
|
+
- "Focus on the user and all else will follow." — Google, Ten things we know to be true.
|
|
354
|
+
- "It is best to do one thing really, really well." — Google, Ten things we know to be true.
|
|
355
|
+
- "Fast is better than slow." — Google, Ten things we know to be true.
|
|
390
356
|
|
|
391
|
-
|
|
357
|
+
## 11. Brand Narrative
|
|
358
|
+
|
|
359
|
+
Google's official company history traces the company from Larry Page and Sergey Brin's Stanford work through the 1998 founding of Google, whose name reflected the mission to organize the world's information and make it universally accessible and useful. The same history identifies Search, YouTube, Android, Gmail, and other products as a broad global product ecosystem.
|
|
392
360
|
|
|
393
|
-
|
|
361
|
+
Google Design's account of Google Sans explains the visual bridge between that scale and a coherent interface language: Product Sans addressed product lockups after the 2015 identity update, Google Sans expanded the display/UI role, and Google Sans Text addressed smaller, longer reading. The supplied live evidence confirms that these roles remain separated rather than collapsed into a generic system-font fallback on the Business Profile surface.
|
|
394
362
|
|
|
395
363
|
## 12. Principles
|
|
396
364
|
|
|
397
|
-
1. **Focus on the user
|
|
398
|
-
2. **
|
|
399
|
-
3. **
|
|
400
|
-
4. **
|
|
401
|
-
5. **Calm scale, friendly shape.** Hierarchy by size at weight 400; warmth by pill and rounded-corner geometry. *UI implication:* when something needs more emphasis, make it bigger or rounder — not bolder or louder.
|
|
402
|
-
6. **You can be serious without a suit.** (Stated philosophy, #9.) *UI implication:* room for play — a doodle on the logo, "I'm Feeling Lucky" — inside an otherwise rigorous system.
|
|
365
|
+
1. **Focus on the user.** Google states this directly. *UI implication:* lead with the task and use compact, comprehensible actions.
|
|
366
|
+
2. **Do one thing well.** Google states this directly. *UI implication:* do not add decorative controls where a Search or form task needs only input and a submit action.
|
|
367
|
+
3. **Fast is better than slow.** Google states this directly. *UI implication:* preserve the observed system-font treatment on Search-domain surfaces instead of forcing a visual substitution.
|
|
368
|
+
4. **Keep type role-specific.** Google Design documents distinct display and small-text design problems behind Google Sans and Google Sans Text. *UI implication:* use the captured family only in its observed role and surface.
|
|
403
369
|
|
|
404
370
|
## 13. Personas
|
|
405
371
|
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
**Maya Chen, 34, Seattle.** Android developer at a mid-size startup. Builds her app's UI entirely from M3 tokens because dynamic color and dark theme come free. Reads m3.material.io the way she reads API docs and trusts a component more when its spec page shows the exact dp values.
|
|
409
|
-
|
|
410
|
-
**Tunde Adeyemi, 22, Lagos.** Student on a low-end Android phone and patchy data. Google's emptiness is not an aesthetic to him — it is the only search page that loads instantly on 3G. Judges every product by how fast it answers.
|
|
411
|
-
|
|
412
|
-
**Hannah Park, 41, Toronto.** Workspace admin for a 900-person company. Lives in dense product UI (Admin console, Gmail, Drive) all day; values that the same blue, the same typescale, and the same patterns repeat across every Google product so her training docs stay short.
|
|
413
|
-
|
|
414
|
-
**Diego Ramírez, 58, Madrid.** Searches in Spanish, navigates by voice, needs large tap targets. The 48dp touch minimums and plain-language UI mean he never feels the product was built for someone younger.
|
|
372
|
+
No first-party user-research or stakeholder-segment source was supplied for this packet. Do not infer named personas from Search, Advanced Search, or Business Profile traffic. [FILL IN: user-provided or first-party-researched audience segment.]
|
|
415
373
|
|
|
416
374
|
## 14. States
|
|
417
375
|
|
|
418
|
-
| State |
|
|
376
|
+
| State | Evidence boundary |
|
|
419
377
|
|---|---|
|
|
420
|
-
|
|
|
421
|
-
|
|
|
422
|
-
|
|
|
423
|
-
|
|
|
424
|
-
|
|
|
425
|
-
|
|
|
426
|
-
|
|
|
427
|
-
|
|
|
428
|
-
|
|
|
429
|
-
|
|
|
378
|
+
| Default action | Business Profile high- and medium-emphasis actions were captured. |
|
|
379
|
+
| Hover | Captured for Business Profile actions and dark Search submit keys; component-specific values are in §4 and .verification.md. |
|
|
380
|
+
| Pressed | Captured for Business Profile actions and dark Search submit keys; do not extrapolate to unobserved components. |
|
|
381
|
+
| Focus | Captured for Business Profile actions and dark Search submit keys; blue focus rings are recorded only where observed. |
|
|
382
|
+
| Disabled | Captured only for the Business Profile inactive image card. |
|
|
383
|
+
| Expanded menu | Captured on the dark Search homepage language/menu interaction. |
|
|
384
|
+
| Empty | [FILL IN: no empty-state surface was observed.] |
|
|
385
|
+
| Loading | [FILL IN: no loading-state surface was observed.] |
|
|
386
|
+
| Error | [FILL IN: no error-state surface was observed.] |
|
|
387
|
+
| Success | [FILL IN: no success-state surface was observed.] |
|
|
430
388
|
|
|
431
389
|
## 15. Motion & Easing
|
|
432
390
|
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
| Token | Value | Use |
|
|
436
|
-
|---|---|---|
|
|
437
|
-
| `short1-short4` | 50 / 100 / 150 / 200ms | Hover, focus, selection ticks, small component changes |
|
|
438
|
-
| `medium1-medium4` | 250 / 300 / 350 / 400ms | Dialogs, sheets, card expansion |
|
|
439
|
-
| `long1-long4` | 450 / 500 / 550 / 600ms | Large surface transitions, container transforms |
|
|
440
|
-
| `extra-long1-4` | 700 / 800 / 900 / 1000ms | Full-screen and choreographed transitions |
|
|
441
|
-
|
|
442
|
-
**Easings (official `md.sys.motion.easing` tokens):**
|
|
443
|
-
|
|
444
|
-
| Token | Curve | Use |
|
|
445
|
-
|---|---|---|
|
|
446
|
-
| `emphasized` | cubic-bezier(0.2, 0, 0, 1) | Default for most transitions — expressive deceleration |
|
|
447
|
-
| `emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) | Elements entering the screen |
|
|
448
|
-
| `emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) | Elements leaving the screen |
|
|
449
|
-
| `standard` | cubic-bezier(0.2, 0, 0, 1) | Utility transitions, simple state changes |
|
|
450
|
-
| `standard-decelerate` | cubic-bezier(0, 0, 0, 1) | Simple entries |
|
|
451
|
-
| `standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) | Simple exits |
|
|
452
|
-
| `legacy` | cubic-bezier(0.4, 0, 0.2, 1) | Material 2 compatibility |
|
|
453
|
-
|
|
454
|
-
**Motion rules**: M3 motion is physical and asymmetric — entries decelerate longer than exits accelerate, so arriving content feels placed rather than thrown. Container-transform is the signature pattern: a card morphs into the page it opens, preserving spatial continuity. The 2026 "Expressive" wave adds spring-based motion physics for product UI, but marketing surfaces stay almost motionless — a fade and a scroll. Under `prefers-reduced-motion: reduce`, transitions collapse to simple fades; nothing essential is conveyed by motion alone.
|
|
455
|
-
|
|
456
|
-
<!--
|
|
457
|
-
OmD v0.1 Sources — Philosophy Layer (sections 10–15)
|
|
458
|
-
|
|
459
|
-
Tier 1 live inspect (2026-06-11) via playwright getComputedStyle on
|
|
460
|
-
https://www.google.com, https://about.google, https://store.google.com,
|
|
461
|
-
https://m3.material.io — see web/references/google/.verification.md for raw samples.
|
|
462
|
-
|
|
463
|
-
Official token sources fetched 2026-06-11:
|
|
464
|
-
- material-foundation/material-tokens (GitHub): md-ref-palette values — primary40
|
|
465
|
-
#6750a4, primary90 #eaddff, neutral10 #1c1b1f, neutral99 #fffbfe,
|
|
466
|
-
neutral-variant50 #79747e, error40 #b3261e; sys-color mapping (light).
|
|
467
|
-
- material-components/material-web (GitHub) tokens/versions/v0_192:
|
|
468
|
-
md-sys-shape corner tokens (4/8/12/16/28/9999px) and md-sys-motion durations
|
|
469
|
-
(50-1000ms) + easings (emphasized cubic-bezier(0.2,0,0,1) etc) — quoted verbatim in §15.
|
|
470
|
-
- material-tokens css/typography.css: full Roboto baseline typescale in §3.
|
|
471
|
-
|
|
472
|
-
Verified verbatim via WebFetch (2026-06-11):
|
|
473
|
-
- https://about.google/company-info/ — mission statement: "Our mission is to
|
|
474
|
-
organize the world's information and make it universally accessible and useful".
|
|
475
|
-
- https://about.google/company-info/philosophy/ — "Ten things we know to be true"
|
|
476
|
-
headlines, quoted in §10/§12 ("Focus on the user and all else will follow",
|
|
477
|
-
"Fast is better than slow", "You can be serious without a suit",
|
|
478
|
-
"Great just isn't good enough").
|
|
479
|
-
- https://about.google/ — marketing copy samples in §10.
|
|
480
|
-
|
|
481
|
-
Not independently verified this turn — widely documented public facts:
|
|
482
|
-
- Founding (1998, Larry Page and Sergey Brin, Stanford, PageRank).
|
|
483
|
-
- Material Design launch 2014; Material 3 announced 2021; "Expressive" wave 2025-26
|
|
484
|
-
(the m3.material.io homepage live this turn shows "M3 Expressive: Design with
|
|
485
|
-
emotion" and Google I/O 2026 content, supporting the latter).
|
|
486
|
-
- Google Sans' lineage from Product Sans.
|
|
487
|
-
- M3 disabled-state opacity spec (38%/12%) and container-transform pattern are
|
|
488
|
-
cited from Material guidelines as general knowledge, not fetched this turn.
|
|
489
|
-
|
|
490
|
-
Personas (§13) are fictional archetypes informed by publicly observable Google
|
|
491
|
-
user segments (Android developers, low-bandwidth mobile users, Workspace admins,
|
|
492
|
-
accessibility-dependent users). Names are illustrative; they do not refer to
|
|
493
|
-
real people.
|
|
494
|
-
|
|
495
|
-
Interpretive claims (e.g., "emptiness as trust", "one hue acts, the rainbow
|
|
496
|
-
identifies", Arial as a deliberate speed fossil) are editorial readings
|
|
497
|
-
connecting Google's stated philosophy to its observed design, not directly
|
|
498
|
-
sourced Google statements.
|
|
499
|
-
-->
|
|
391
|
+
The supplied capture records interaction states but no duration or easing measurement. Material Design 3 typography guidance is official design-system context, not evidence for a motion token on the captured Search or Business Profile pages. [FILL IN: first-party product motion source or measured product motion values.]
|