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
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: panasonic
|
|
3
|
+
name: パナソニック
|
|
4
|
+
country: JP
|
|
5
|
+
category: consumer-tech
|
|
6
|
+
homepage: "https://holdings.panasonic/global/"
|
|
7
|
+
primary_color: "#0041c0"
|
|
8
|
+
logo:
|
|
9
|
+
type: favicon
|
|
10
|
+
slug: "https://www.google.com/s2/favicons?domain=holdings.panasonic&sz=128"
|
|
11
|
+
verified: "2026-07-13"
|
|
12
|
+
omd: "0.1"
|
|
13
|
+
verification_v2:
|
|
14
|
+
schema: 2
|
|
15
|
+
checked: "2026-07-13"
|
|
16
|
+
surfaces:
|
|
17
|
+
- { id: home, kind: product-surface, url: "https://holdings.panasonic/global/", inspected: "2026-07-13" }
|
|
18
|
+
- { id: about, kind: product-surface, url: "https://holdings.panasonic/global/corporate/about.html", inspected: "2026-07-13" }
|
|
19
|
+
- { id: technology, kind: product-surface, url: "https://holdings.panasonic/global/corporate/technology.html", inspected: "2026-07-13" }
|
|
20
|
+
sources:
|
|
21
|
+
- { id: home-capture, kind: product-surface, url: "https://holdings.panasonic/global/", captured: "2026-07-13" }
|
|
22
|
+
- { id: about-capture, kind: product-surface, url: "https://holdings.panasonic/global/corporate/about.html", captured: "2026-07-13" }
|
|
23
|
+
- { id: technology-capture, kind: product-surface, url: "https://holdings.panasonic/global/corporate/technology.html", captured: "2026-07-13" }
|
|
24
|
+
- { id: noto-license, kind: license, url: "https://github.com/googlefonts/noto-cjk/blob/main/Sans/LICENSE", captured: "2026-07-13" }
|
|
25
|
+
claims:
|
|
26
|
+
"tokens.colors.canvas": &body_capture { surface_id: home, source_id: home-capture, method: "computed-style; home::#page-29286b2519", captured: "2026-07-13" }
|
|
27
|
+
"tokens.colors.foreground": *body_capture
|
|
28
|
+
"tokens.colors.muted": &footer_capture { surface_id: home, source_id: home-capture, method: "computed-style; home::li (class: holdings-footer__sns__list__item)", captured: "2026-07-13" }
|
|
29
|
+
"tokens.colors.navigation": &nav_capture { surface_id: home, source_id: home-capture, method: "computed-style; home::li (class: holdings-header__nav__list__item l2)", captured: "2026-07-13" }
|
|
30
|
+
"tokens.colors.link": &link_capture { surface_id: home, source_id: home-capture, method: "computed-style; home::[data-omd-capture=115]", captured: "2026-07-13" }
|
|
31
|
+
"tokens.typography.family.ui": { surface_id: home, source_id: noto-license, method: "visible computed family backed by loaded FontFace; Noto Sans SIL Open Font License", captured: "2026-07-13" }
|
|
32
|
+
"tokens.typography.body.size": *body_capture
|
|
33
|
+
"tokens.typography.body.weight": *body_capture
|
|
34
|
+
"tokens.typography.body.lineHeight": *body_capture
|
|
35
|
+
"tokens.typography.body.use": *body_capture
|
|
36
|
+
"tokens.typography.navigation.size": *nav_capture
|
|
37
|
+
"tokens.typography.navigation.weight": *nav_capture
|
|
38
|
+
"tokens.typography.navigation.lineHeight": *nav_capture
|
|
39
|
+
"tokens.typography.navigation.use": *nav_capture
|
|
40
|
+
"tokens.spacing.xs": *footer_capture
|
|
41
|
+
"tokens.spacing.sm": *link_capture
|
|
42
|
+
"tokens.spacing.md": *body_capture
|
|
43
|
+
"tokens.spacing.nav-gap": *nav_capture
|
|
44
|
+
"tokens.rounded.square": *body_capture
|
|
45
|
+
"tokens.rounded.cookie-control": &cookie_capture { surface_id: home, source_id: home-capture, method: "computed-style; home::[data-omd-capture=118]", captured: "2026-07-13" }
|
|
46
|
+
"tokens.components.header-navigation-item.type": *nav_capture
|
|
47
|
+
"tokens.components.header-navigation-item.fg": *nav_capture
|
|
48
|
+
"tokens.components.header-navigation-item.radius": *nav_capture
|
|
49
|
+
"tokens.components.header-navigation-item.margin": *nav_capture
|
|
50
|
+
"tokens.components.header-navigation-item.size": *nav_capture
|
|
51
|
+
"tokens.components.header-navigation-item.font": *nav_capture
|
|
52
|
+
"tokens.components.header-navigation-item.use": *nav_capture
|
|
53
|
+
"tokens.components.search-toggle.type": &search_capture { surface_id: home, source_id: home-capture, method: "computed-style; home::[data-omd-capture=10] (class: holdings-header__search__tglbtn)", captured: "2026-07-13" }
|
|
54
|
+
"tokens.components.search-toggle.bg": *search_capture
|
|
55
|
+
"tokens.components.search-toggle.fg": *search_capture
|
|
56
|
+
"tokens.components.search-toggle.border": *search_capture
|
|
57
|
+
"tokens.components.search-toggle.radius": *search_capture
|
|
58
|
+
"tokens.components.search-toggle.padding": *search_capture
|
|
59
|
+
"tokens.components.search-toggle.size": *search_capture
|
|
60
|
+
"tokens.components.search-toggle.font": *search_capture
|
|
61
|
+
"tokens.components.search-toggle.states": *search_capture
|
|
62
|
+
"tokens.components.search-toggle.use": *search_capture
|
|
63
|
+
conflicts: []
|
|
64
|
+
tokens:
|
|
65
|
+
source: live-extract
|
|
66
|
+
extracted: "2026-07-13"
|
|
67
|
+
note: "Only the three supplied Panasonic Holdings public-web surfaces ground these tokens. Corporate narrative, official design philosophy, and declared-only font observations remain separate where the evidence does not connect them."
|
|
68
|
+
colors:
|
|
69
|
+
canvas: "#f2f2f2"
|
|
70
|
+
foreground: "#1a1a1a"
|
|
71
|
+
muted: "#666666"
|
|
72
|
+
navigation: "#4d4d4d"
|
|
73
|
+
link: "#0041c0"
|
|
74
|
+
typography:
|
|
75
|
+
family: { ui: "Noto Sans" }
|
|
76
|
+
body: { size: 16, weight: 400, lineHeight: "24px", use: "Observed default body treatment on the captured Panasonic Holdings home surface" }
|
|
77
|
+
navigation: { size: 15, weight: 400, lineHeight: "22.5px", use: "Observed top-level header navigation treatment across the supplied public surfaces" }
|
|
78
|
+
spacing: { xs: 4, sm: 12, md: 20, nav-gap: 26 }
|
|
79
|
+
rounded: { square: 0, cookie-control: 2 }
|
|
80
|
+
components_harvested: true
|
|
81
|
+
components:
|
|
82
|
+
header-navigation-item: { type: listItem, fg: "#4d4d4d", radius: "0px", margin: "0px 26px 0px 0px", size: "167px x 23px", font: "15px / 400 / Noto Sans", use: "Public Holdings header .holdings-header__nav__list__item.l2 row" }
|
|
83
|
+
search-toggle: { type: button, bg: "transparent", fg: "#1a1a1a", border: "0px", radius: "0px", padding: "0px", size: "16px x 16px", font: "16px / 400 / Noto Sans", states: "Default static baseline observed; no interactive state was captured.", use: "Public Holdings header .holdings-header__search__tglbtn button" }
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
# Design System Inspiration of パナソニック
|
|
87
|
+
|
|
88
|
+
## 1. Visual Theme & Atmosphere
|
|
89
|
+
|
|
90
|
+
Panasonic is a Japan-founded technology group whose public offer spans consumer products, business solutions, technology, and corporate initiatives. Its Holdings site communicates that breadth with a quiet, document-like public-web language: pale-gray canvas, charcoal reading text, small regular-weight Noto Sans, square geometry, and a restrained blue link treatment. That reserve fits a brand that began in 1918 under founder Konosuke Matsushita and now presents both a long manufacturing legacy and a forward-looking design practice. Panasonic Design calls its philosophy “Future Craft,” while the Group’s current environmental direction is Panasonic GREEN IMPACT. Those are verified corporate and design narratives, not evidence that the supplied corporate pages expose one shared product UI system or that a color in the capture carries an environmental meaning.
|
|
91
|
+
|
|
92
|
+
**Key Characteristics:**
|
|
93
|
+
- Pale-gray `#f2f2f2` canvas with `#1a1a1a` primary reading text.
|
|
94
|
+
- Quiet `#666666` secondary text and `#4d4d4d` top-navigation treatment.
|
|
95
|
+
- A limited `#0041c0` link color on the captured home surface; it is retained as a surface value, not promoted to a semantic product action.
|
|
96
|
+
- Loaded, visibly used `Noto Sans` across the three supplied Panasonic Holdings surfaces.
|
|
97
|
+
- Predominantly square `0px` geometry, with only a `2px` cookie-control radius observed as a separate exception.
|
|
98
|
+
|
|
99
|
+
## 2. Color Palette & Roles
|
|
100
|
+
|
|
101
|
+
- **Canvas** (`#f2f2f2`): home body background on the supplied public Holdings surface.
|
|
102
|
+
- **Foreground** (`#1a1a1a`): dominant text and border color across all supplied surfaces.
|
|
103
|
+
- **Muted** (`#666666`): footer/social and secondary text treatment observed on all three supplied surfaces.
|
|
104
|
+
- **Navigation** (`#4d4d4d`): header navigation text and border treatment on the public Holding surfaces.
|
|
105
|
+
- **Link** (`#0041c0`): limited home-surface link treatment observed in the supplied packet.
|
|
106
|
+
|
|
107
|
+
These roles describe measured public corporate-web values only. They do not establish a native-product palette, success/error meanings, hover/focus colors, or a universal Panasonic brand token set.
|
|
108
|
+
|
|
109
|
+
## 3. Typography Rules
|
|
110
|
+
|
|
111
|
+
### Visible public-web family
|
|
112
|
+
|
|
113
|
+
`Noto Sans` is the canonical visible UI family for this reference. The supplied packet records 509 loaded/high-confidence first-family uses across body, headings, lists, buttons, dialog content, and text, backed by loaded FontFace resources. It is a live public-web-use fact, not evidence of a proprietary Panasonic text typeface.
|
|
114
|
+
|
|
115
|
+
| Role | Size | Weight | Line Height | Evidence boundary |
|
|
116
|
+
|---|---:|---:|---|---|
|
|
117
|
+
| Body | 16px | 400 | 24px | observed default body treatment on the public home surface |
|
|
118
|
+
| Header navigation | 15px | 400 | 22.5px | observed top-level header navigation across the supplied surfaces |
|
|
119
|
+
|
|
120
|
+
| Evidence class | Panasonic status |
|
|
121
|
+
|---|---|
|
|
122
|
+
| **Official product-use** | No first-party statement found in this pass names a text family for Panasonic native products; none is promoted. |
|
|
123
|
+
| **Live computed surface-use** | `Noto Sans` is loaded and visibly used on the supplied Holdings home, about, and technology surfaces. |
|
|
124
|
+
| **Official distributed brand asset** | No official Panasonic text-font asset was established in this pass. |
|
|
125
|
+
| **Declared-only** | `swiper-icons` is declared in the packet but has zero visible use; it is an icon asset, not a text-family token. |
|
|
126
|
+
| **License** | Noto CJK publishes the SIL Open Font License 1.1. This is a font-license boundary, not a Panasonic brand-font claim. |
|
|
127
|
+
| **Unresolved** | `Noto Sands` has low-confidence computed appearances without a matching loaded FontFace; it is excluded. Native-product typography and any Panasonic-owned text typeface are absent. |
|
|
128
|
+
|
|
129
|
+
## 4. Component Stylings
|
|
130
|
+
|
|
131
|
+
### Header Navigation Item
|
|
132
|
+
|
|
133
|
+
**Default static baseline**
|
|
134
|
+
- Text: `#4d4d4d`
|
|
135
|
+
- Radius: 0px
|
|
136
|
+
- Margin: 0px 26px 0px 0px
|
|
137
|
+
- Size: 167px x 23px
|
|
138
|
+
- Font: 15px / 400 / Noto Sans
|
|
139
|
+
- Use: Public Holdings header `.holdings-header__nav__list__item.l2` row
|
|
140
|
+
|
|
141
|
+
### Search Toggle
|
|
142
|
+
|
|
143
|
+
**Default static baseline**
|
|
144
|
+
- Background: transparent
|
|
145
|
+
- Text: `#1a1a1a`
|
|
146
|
+
- Border: 0px
|
|
147
|
+
- Radius: 0px
|
|
148
|
+
- Padding: 0px
|
|
149
|
+
- Size: 16px x 16px
|
|
150
|
+
- Font: 16px / 400 / Noto Sans
|
|
151
|
+
- States: Default static baseline observed; no interactive state was captured.
|
|
152
|
+
- Use: Public Holdings header `.holdings-header__search__tglbtn` button
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
**Verified:** 2026-07-13 (verification v2, supplied computed-style capture plus source-bound Noto font-license review)
|
|
156
|
+
**Tier 1 sources:** https://holdings.panasonic/global/ https://holdings.panasonic/global/corporate/about.html https://holdings.panasonic/global/corporate/technology.html
|
|
157
|
+
**Tier 2 sources:** https://getdesign.md/panasonic direct detail attempt returned an internal retrieval error; https://styles.refero.design/?q=Panasonic direct search attempt returned an internal retrieval error.
|
|
158
|
+
**Surface split:** Holdings home, corporate about, and technology pages remain distinct public corporate-web evidence; no native product UI is inferred.
|
|
159
|
+
**Conflicts unresolved:** none
|
|
160
|
+
|
|
161
|
+
## 5. Layout Principles
|
|
162
|
+
|
|
163
|
+
### Spacing System
|
|
164
|
+
|
|
165
|
+
The supplied surfaces repeatedly expose 4px, 12px, 20px, and 26px values. They are retained as measured public-web spacing values, not as proof of a private or native-product token system. The 26px value is specifically the observed right margin of a top-level header navigation item.
|
|
166
|
+
|
|
167
|
+
### Grid & Container
|
|
168
|
+
|
|
169
|
+
The home page is a broad corporate-information surface with compact global chrome and long editorial regions. The about and technology pages preserve this public-information rhythm. Keep navigation density and editorial content distinct rather than recasting these measurements as checkout, account, or device-control patterns.
|
|
170
|
+
|
|
171
|
+
### Shape
|
|
172
|
+
|
|
173
|
+
The dominant captured shape is square (`0px` radius). A `2px` radius appears on a cookie-control button and is retained only as that observed exception. The evidence does not support a general rounded-control or pill scale.
|
|
174
|
+
|
|
175
|
+
## 6. Depth & Elevation
|
|
176
|
+
|
|
177
|
+
No canonical shadow token is promoted. The body, navigation item, and search-toggle samples each report `box-shadow: none`; separation comes from text color, pale canvas, spacing, and document hierarchy.
|
|
178
|
+
|
|
179
|
+
## 7. Do's and Don'ts
|
|
180
|
+
|
|
181
|
+
### Do
|
|
182
|
+
|
|
183
|
+
- Use the measured pale-gray canvas with charcoal and muted-gray public-web typography.
|
|
184
|
+
- Keep the observed public header compact, regular-weight, and square-cornered.
|
|
185
|
+
- Use `Noto Sans` only where it can actually load; retain the unavailable-family boundary rather than substituting a system font as if it were the observed face.
|
|
186
|
+
|
|
187
|
+
### Don't
|
|
188
|
+
|
|
189
|
+
- Treat `#0041c0` as a verified universal Panasonic primary action, success, focus, or hover token.
|
|
190
|
+
- Invent search-open, hover, focus, pressed, disabled, error, or motion values from the zero-interaction packet.
|
|
191
|
+
- Merge corporate marketing, product, and technology evidence into a fictional shared component library.
|
|
192
|
+
|
|
193
|
+
## 8. AI Design Prompts
|
|
194
|
+
|
|
195
|
+
- “Create a Panasonic Holdings-inspired public-information page with a `#f2f2f2` canvas, `#1a1a1a` body text, 16px Noto Sans, and compact square navigation. Do not invent state styling.”
|
|
196
|
+
- “Design a restrained corporate header with 15px regular Noto Sans navigation in `#4d4d4d`, a 26px right-gap rhythm, and one 16px square search trigger.”
|
|
197
|
+
- “Make a quiet content page that uses a limited `#0041c0` inline link treatment without presenting it as a verified product CTA or brand semantic.”
|
|
198
|
+
|
|
199
|
+
## 9. Reference Assets & Evidence Boundaries
|
|
200
|
+
|
|
201
|
+
- **Catalog logo:** favicon image at `https://www.google.com/s2/favicons?domain=holdings.panasonic&sz=128`.
|
|
202
|
+
- **Public-web capture:** Panasonic Holdings home, corporate about, and corporate technology surfaces from the supplied 2026-07-13 packet.
|
|
203
|
+
- **Typography resource:** `Noto Sans` is visibly loaded; `swiper-icons` remains a declared-only icon asset; unresolved `Noto Sands` stays excluded.
|
|
204
|
+
- **Not included:** consumer product sites, authenticated experiences, checkout, support flows, downloaded Panasonic design guidelines, product interaction recordings, and a public official component specification.
|
|
205
|
+
|
|
206
|
+
## 10. Voice & Tone
|
|
207
|
+
|
|
208
|
+
Use a **considerate, clear, and future-facing** voice. Panasonic’s public brand statement emphasizes integrity, seeking truth, and transforming the future; its design philosophy emphasizes careful anticipation of people’s needs. These are narrative principles, not a captured UI-copy specification.
|
|
209
|
+
|
|
210
|
+
| Do | Don't |
|
|
211
|
+
|---|---|
|
|
212
|
+
| Lead with a concrete human or societal benefit. | Use technology claims as empty spectacle. |
|
|
213
|
+
| State commitments with care and clear scope. | Turn an unmeasured color or component into a sustainability claim. |
|
|
214
|
+
| Make a next step understandable in plain language. | Make unsupported promises about product performance or outcomes. |
|
|
215
|
+
|
|
216
|
+
- “A clearer way to understand the next step.” *(Illustrative voice sample, not official Panasonic copy; aligned to the brand’s stated care and clarity.)*
|
|
217
|
+
- “Technology shaped around the life it supports.” *(Illustrative voice sample, not official Panasonic copy; aligned to Future Craft.)*
|
|
218
|
+
- “Built with attention to what changes next.” *(Illustrative voice sample, not official Panasonic copy; avoids an unsupported product claim.)*
|
|
219
|
+
|
|
220
|
+
## 11. Brand Narrative
|
|
221
|
+
|
|
222
|
+
Panasonic began in 1918 when Konosuke Matsushita founded Matsushita Electric Housewares Manufacturing Works. The Group’s official history frames its purpose as contributing to social progress and people’s well-being through business, enhancing quality of life worldwide. That origin provides the context for a brand whose name has travelled from household electrical goods to a wide group of products, services, and business activities. Source: https://holdings.panasonic/global/corporate/about/history.html
|
|
223
|
+
|
|
224
|
+
The Panasonic brand was first used in 1955 for a speaker intended for export markets; today it is used for both corporate identity and products and services. Panasonic’s brand material describes its aim as building lasting customer connections with consistency, transparency, and a long-term view. Source: https://holdings.panasonic/global/corporate/brand.html
|
|
225
|
+
|
|
226
|
+
Today, Panasonic Design describes its philosophy as “Future Craft,” while Panasonic GREEN IMPACT, formulated in 2022, gives the Group a current environmental direction. The Group CCO describes Future Craft as creating with care, consideration, and attention to future generations. These are verified design and corporate narratives; they do not make the measured corporate-web colors or controls environmental semantics. Sources: https://holdings.panasonic/global/corporate/design.html and https://holdings.panasonic/global/corporate/panasonic-green-impact/mission.html
|
|
227
|
+
|
|
228
|
+
## 12. Principles
|
|
229
|
+
|
|
230
|
+
The following are application principles derived from Panasonic’s official brand, design, and business-philosophy material. They are not a published Panasonic UI component specification.
|
|
231
|
+
|
|
232
|
+
1. **Commit to integrity.** Panasonic’s brand personality begins with integrity and its business philosophy names fairness and honesty.
|
|
233
|
+
*UI implication:* Prefer precise labels and sourceable claims over embellished product language.
|
|
234
|
+
2. **Seek the real need.** Future Craft describes discovering real issues and guiding customers toward appropriate solutions.
|
|
235
|
+
*UI implication:* Make primary information and the next action easy to find; do not hide essential context behind ornamental layers.
|
|
236
|
+
3. **Transform thoughtfully.** Panasonic frames future-making as a responsibility to people, society, and the environment.
|
|
237
|
+
*UI implication:* Explain tradeoffs and impact claims concretely rather than treating a color or icon as proof of sustainability.
|
|
238
|
+
4. **Work through collective wisdom.** Panasonic’s business philosophy emphasizes cooperation and participative management.
|
|
239
|
+
*UI implication:* Give customers, partners, and stakeholders clear routes to the information relevant to them.
|
|
240
|
+
|
|
241
|
+
## 13. Personas
|
|
242
|
+
|
|
243
|
+
*These are evidence-bounded stakeholder archetypes drawn from Panasonic’s public group, brand, design, and sustainability material; they are not synthetic research personas or performance scores.*
|
|
244
|
+
|
|
245
|
+
### Household or individual customer
|
|
246
|
+
|
|
247
|
+
People looking for products and services need an intelligible route from a public explanation to the relevant offer. The supplied capture supports corporate navigation and public information hierarchy only, not a purchase or account flow.
|
|
248
|
+
|
|
249
|
+
### Business customer or partner
|
|
250
|
+
|
|
251
|
+
Organizations need to understand Panasonic’s technology, solution, and operating-company context. Keep business information distinct from consumer-product transactions unless a specific surface supplies direct evidence.
|
|
252
|
+
|
|
253
|
+
### Society-facing stakeholder
|
|
254
|
+
|
|
255
|
+
Employees, customers, business partners, shareholders, and wider society are repeatedly named in Panasonic’s philosophy and sustainability material. Communicate commitments with clear scope and measurable sources, not generic green styling.
|
|
256
|
+
|
|
257
|
+
## 14. States
|
|
258
|
+
|
|
259
|
+
The supplied interaction count is zero. The following are implementation guidance categories for a future Panasonic-adjacent surface, not observed Panasonic state styling; do not add their values to tokens without new evidence.
|
|
260
|
+
|
|
261
|
+
| Category | Guidance |
|
|
262
|
+
|---|---|
|
|
263
|
+
| Empty | Explain why content or results are unavailable and offer a safe next route. |
|
|
264
|
+
| Loading | Preserve information hierarchy without pretending an observed Panasonic skeleton exists. |
|
|
265
|
+
| Loading | Keep a task label stable while the requested information is being prepared. |
|
|
266
|
+
| Error | State the failed task plainly and provide a retry or support route. |
|
|
267
|
+
| Error | Separate unavailable information from a failed submission. |
|
|
268
|
+
| Error | Never use the limited home-surface blue as an unverified error or recovery semantic. |
|
|
269
|
+
| Success | Confirm the completed task with a concrete next step. |
|
|
270
|
+
| Skeleton | Reserve the measured header and content hierarchy without claiming a captured loading pattern. |
|
|
271
|
+
| Skeleton | Avoid layout shifts when public-information content is delayed. |
|
|
272
|
+
| Disabled | Do not infer opacity, cursor, or disabled color values from this packet. |
|
|
273
|
+
|
|
274
|
+
## 15. Motion & Easing
|
|
275
|
+
|
|
276
|
+
No duration scale, easing curve, transition, or interactive motion state was captured in the supplied evidence. Accordingly, no Panasonic motion token is published here. Future work should respect reduced-motion preferences and keep motion subordinate to the task, but must measure any timing or easing value before treating it as Panasonic-specific.
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: patternfly
|
|
3
|
+
name: PatternFly
|
|
4
|
+
country: US
|
|
5
|
+
category: developer-tools
|
|
6
|
+
homepage: https://www.patternfly.org/
|
|
7
|
+
primary_color: "#0066cc"
|
|
8
|
+
logo:
|
|
9
|
+
type: favicon
|
|
10
|
+
slug: "https://www.google.com/s2/favicons?domain=patternfly.org&sz=128"
|
|
11
|
+
verified: "2026-07-14"
|
|
12
|
+
omd: 0.1
|
|
13
|
+
ds:
|
|
14
|
+
name: PatternFly
|
|
15
|
+
url: https://www.patternfly.org/
|
|
16
|
+
type: system
|
|
17
|
+
description: "Red Hat-sponsored open-source design system for consistent, accessible enterprise products."
|
|
18
|
+
verification_v2:
|
|
19
|
+
schema: 2
|
|
20
|
+
checked: "2026-07-14"
|
|
21
|
+
surfaces:
|
|
22
|
+
- { id: home, kind: marketing, url: "https://www.patternfly.org/", inspected: "2026-07-13" }
|
|
23
|
+
- { id: button-docs, kind: documentation, url: "https://www.patternfly.org/components/button/", inspected: "2026-07-13" }
|
|
24
|
+
- { id: color-docs, kind: documentation, url: "https://www.patternfly.org/design-foundations/colors/", inspected: "2026-07-13" }
|
|
25
|
+
- { id: typography-docs, kind: documentation, url: "https://www.patternfly.org/foundations-and-styles/typography/", inspected: "2026-07-14" }
|
|
26
|
+
- { id: about-docs, kind: documentation, url: "https://www.patternfly.org/get-started/about-patternfly/", inspected: "2026-07-14" }
|
|
27
|
+
sources:
|
|
28
|
+
- { id: home-live, kind: product-surface, url: "https://www.patternfly.org/", captured: "2026-07-13" }
|
|
29
|
+
- { id: button-live, kind: product-surface, url: "https://www.patternfly.org/components/button/", captured: "2026-07-13" }
|
|
30
|
+
- { id: color-live, kind: product-surface, url: "https://www.patternfly.org/design-foundations/colors/", captured: "2026-07-13" }
|
|
31
|
+
- { id: about-official, kind: official-doc, url: "https://www.patternfly.org/get-started/about-patternfly/", captured: "2026-07-14" }
|
|
32
|
+
- { id: typography-official, kind: official-doc, url: "https://www.patternfly.org/foundations-and-styles/typography/", captured: "2026-07-14" }
|
|
33
|
+
- { id: theming-official, kind: official-doc, url: "https://staging.patternfly.org/foundations-and-styles/theming/", captured: "2026-07-14" }
|
|
34
|
+
- { id: releases-official, kind: official-doc, url: "https://www.patternfly.org/get-started/release-highlights", captured: "2026-07-14" }
|
|
35
|
+
conflicts: []
|
|
36
|
+
claims:
|
|
37
|
+
"tokens.colors.primary": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
38
|
+
"tokens.colors.foreground": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
39
|
+
"tokens.colors.body": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
40
|
+
"tokens.colors.canvas": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
41
|
+
"tokens.typography.family.ui": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
42
|
+
"tokens.typography.family.display": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
43
|
+
"tokens.typography.body.size": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
44
|
+
"tokens.typography.body.weight": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
45
|
+
"tokens.typography.body.lineHeight": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
46
|
+
"tokens.typography.body.use": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
47
|
+
"tokens.typography.display-title.size": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
48
|
+
"tokens.typography.display-title.weight": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
49
|
+
"tokens.typography.display-title.lineHeight": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
50
|
+
"tokens.typography.display-title.use": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
51
|
+
"tokens.spacing.xs": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
52
|
+
"tokens.spacing.sm": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
53
|
+
"tokens.spacing.md": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
54
|
+
"tokens.spacing.lg": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
55
|
+
"tokens.rounded.none": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
56
|
+
"tokens.rounded.control": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
57
|
+
"tokens.rounded.card": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
58
|
+
"tokens.components.primary-action.type": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
59
|
+
"tokens.components.primary-action.bg": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
60
|
+
"tokens.components.primary-action.fg": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
61
|
+
"tokens.components.primary-action.radius": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
62
|
+
"tokens.components.primary-action.padding": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
63
|
+
"tokens.components.primary-action.font": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
64
|
+
"tokens.components.primary-action.states": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
65
|
+
"tokens.components.primary-action.use": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
66
|
+
"tokens.components.featured-card.type": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
67
|
+
"tokens.components.featured-card.bg": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
68
|
+
"tokens.components.featured-card.fg": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
69
|
+
"tokens.components.featured-card.radius": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
70
|
+
"tokens.components.featured-card.font": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
71
|
+
"tokens.components.featured-card.use": { surface_id: home, source_id: home-live, method: live-inspect, captured: "2026-07-13" }
|
|
72
|
+
tokens:
|
|
73
|
+
source: reconciled
|
|
74
|
+
extracted: "2026-07-13"
|
|
75
|
+
colors:
|
|
76
|
+
primary: "#0066cc"
|
|
77
|
+
foreground: "#151515"
|
|
78
|
+
body: "#4d4d4d"
|
|
79
|
+
canvas: "#ffffff"
|
|
80
|
+
typography:
|
|
81
|
+
family: { ui: "Red Hat Text", display: "Red Hat Display" }
|
|
82
|
+
body: { size: 14, weight: 400, lineHeight: 1.5, use: "Repeated body, list-item, and default control text on all three supplied PatternFly.org surfaces." }
|
|
83
|
+
display-title: { size: 36, weight: 600, lineHeight: 1.3, use: "Observed H1 on the supplied public PatternFly.org surfaces." }
|
|
84
|
+
spacing: { xs: 4, sm: 8, md: 16, lg: 24 }
|
|
85
|
+
rounded: { none: 0, control: 6, card: 16 }
|
|
86
|
+
components_harvested: true
|
|
87
|
+
components:
|
|
88
|
+
primary-action: { type: button, bg: "#0066cc", fg: "#ffffff", radius: 999, padding: "8px 24px", font: "14/400 Red Hat Text", states: "Observed default only; the supplied artifact has interactionCount: 0, so no hover, focus, pressed, disabled, or error value is specified.", use: "home::[data-omd-capture=\"2\"] — selector-backed pf-v6-c-button pf-m-primary action on the public home." }
|
|
89
|
+
featured-card: { type: card, bg: "#ffffff", fg: "#151515", radius: 16, font: "14/400 Red Hat Text", use: "home::#featured-blog-post-1 — selector-backed pf-v6-c-card pf-m-clickable default geometry on the public home." }
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
# Design System Inspiration of PatternFly
|
|
93
|
+
|
|
94
|
+
## 1. Visual Theme & Atmosphere
|
|
95
|
+
|
|
96
|
+
PatternFly is Red Hat’s sponsored, open-source design system for teams building consistent, usable enterprise software. Its recognizable expression is less a campaign aesthetic than a deliberately practical interface language: legible Red Hat typefaces, dark text on white surfaces, restrained blue actions, compact spacing, and controls that make dense software easier to scan. The official project frames its purpose as helping designers and developers share standards, guidance, and working code for accessible enterprise products, while remaining open to users and contributors beyond Red Hat. [About PatternFly](https://www.patternfly.org/get-started/about-patternfly/)
|
|
97
|
+
|
|
98
|
+
The supplied capture is limited to the PatternFly public home, button documentation, and color-foundation documentation. Those are design-system/documentation surfaces, not evidence for an individual Red Hat product or an authenticated operational console. Current evolution also matters: PatternFly 6 has expanded its theming architecture, including a Default theme, high-contrast options, and the Red Hat-aligned Project Felt theme. The values below describe the observed Default-style public documentation surface only; Project Felt’s red accents, pill treatment, glass layer, and unobserved themes are not silently merged into these tokens. [Theming](https://staging.patternfly.org/foundations-and-styles/theming/) · [Release highlights](https://www.patternfly.org/get-started/release-highlights)
|
|
99
|
+
|
|
100
|
+
**Key Characteristics:**
|
|
101
|
+
|
|
102
|
+
- A documentation-first enterprise system with open-source and accessibility commitments
|
|
103
|
+
- Blue `#0066cc` for observed primary actions and links, with dark `#151515` content ink
|
|
104
|
+
- Red Hat Text for repeated interface/body text and Red Hat Display for observed display headings
|
|
105
|
+
- Compact 4/8/16/24px spacing clusters, 6px controls, and 16px featured cards
|
|
106
|
+
- Public documentation components only; no product-console workflow, form, toast, or state system inferred
|
|
107
|
+
|
|
108
|
+
## 2. Color Palette & Roles
|
|
109
|
+
|
|
110
|
+
### Observed public documentation surfaces
|
|
111
|
+
|
|
112
|
+
- **Primary blue** (`#0066cc`): observed as the filled primary-action background and as repeated public link/control ink.
|
|
113
|
+
- **Foreground** (`#151515`): repeated main text and border value across the supplied home, button, and color documentation surfaces.
|
|
114
|
+
- **Body text** (`#4d4d4d`): repeated secondary/navigation control text and border value across all supplied surfaces.
|
|
115
|
+
- **Canvas** (`#ffffff`): repeated public-surface and component background.
|
|
116
|
+
|
|
117
|
+
### Boundary
|
|
118
|
+
|
|
119
|
+
The supplied button page also contains measured danger, warning, plain, link, and secondary examples. Those values are documentation examples, but only the selector-backed primary default is promoted as a reusable component token here. No capture establishes global semantic success, warning, error, dark-mode, high-contrast, Project Felt, or glass-mode tokens; those unresolved groups are omitted rather than filled with plausible values.
|
|
120
|
+
|
|
121
|
+
## 3. Typography Rules
|
|
122
|
+
|
|
123
|
+
### Evidence classes
|
|
124
|
+
|
|
125
|
+
- **Live computed surface-use:** **Red Hat Text** is loaded with high confidence on 349 captured elements and is the repeated body, list-item, button, and card family. **Red Hat Display** is loaded with high confidence on 12 captured heading/text elements. Both have matching PatternFly-hosted WOFF2 source URLs in the supplied artifact.
|
|
126
|
+
- **Official product-use:** PatternFly’s typography documentation names Red Hat Display for larger headings and Red Hat Text for smaller text, subheadings, and body copy; it documents Red Hat Mono for tabular/code use. [Typography](https://www.patternfly.org/foundations-and-styles/typography/)
|
|
127
|
+
- **Declared-only:** **Red Hat Mono**, **Font Awesome 5 Free**, and **pf-v6-pficon** have `@font-face` declarations in the supplied packet but no visible-use match. They are useful context, not UI-family tokens.
|
|
128
|
+
- **License boundary:** the official typography page links to a font download but the direct link returned a Red Hat contact form in this research pass. No license statement is asserted or promoted from that failed retrieval.
|
|
129
|
+
|
|
130
|
+
### Observed hierarchy
|
|
131
|
+
|
|
132
|
+
| Role | Size | Weight | Line height | Surface boundary |
|
|
133
|
+
|------|------|--------|-------------|------------------|
|
|
134
|
+
| Display title | 36px | 600 | 46.8px | Observed public-site H1 |
|
|
135
|
+
| Standard body/control | 14px | 400 | 21px | Repeated across all three supplied surfaces |
|
|
136
|
+
| Official body reference | 14px | 400 | 1.5 | Official default-body guidance; consistent with the live measurement |
|
|
137
|
+
|
|
138
|
+
Do not substitute a system font and label it Red Hat Text or Red Hat Display. Likewise, do not promote declared-only Red Hat Mono or icon fonts to the documented UI family without visible-use evidence.
|
|
139
|
+
|
|
140
|
+
## 4. Component Stylings
|
|
141
|
+
|
|
142
|
+
### Public-home action
|
|
143
|
+
|
|
144
|
+
**Primary action — observed default**
|
|
145
|
+
|
|
146
|
+
- Background: #0066cc
|
|
147
|
+
- Text: #ffffff
|
|
148
|
+
- Radius: 999px
|
|
149
|
+
- Padding: 8px 24px
|
|
150
|
+
- Font: 14px / 400 / Red Hat Text
|
|
151
|
+
- Use: `home::[data-omd-capture="2"]`, an anchor with `pf-v6-c-button pf-m-primary` on the supplied public home; 37px rendered height.
|
|
152
|
+
|
|
153
|
+
### Public-home featured content
|
|
154
|
+
|
|
155
|
+
**Featured card — observed default**
|
|
156
|
+
|
|
157
|
+
- Background: #ffffff
|
|
158
|
+
- Text: #151515
|
|
159
|
+
- Radius: 16px
|
|
160
|
+
- Font: 14px / 400 / Red Hat Text
|
|
161
|
+
- Use: `home::#featured-blog-post-1`, a selector-backed `pf-v6-c-card pf-m-clickable` on the supplied public home.
|
|
162
|
+
|
|
163
|
+
The artifact records 27 component variants but zero interaction snapshots and zero interaction kinds. Therefore this reference preserves only default measured geometry; it does not claim hover, focus, pressed, disabled, error, selected, or animated values. Links and rows that were not captured as button semantics are not reclassified as button components.
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
**Verified:** 2026-07-14
|
|
167
|
+
**Tier 1 sources:** https://www.patternfly.org/; https://www.patternfly.org/components/button/; https://www.patternfly.org/design-foundations/colors/; https://www.patternfly.org/get-started/about-patternfly/; https://www.patternfly.org/foundations-and-styles/typography/; https://staging.patternfly.org/foundations-and-styles/theming/; https://www.patternfly.org/get-started/release-highlights
|
|
168
|
+
**Tier 2 sources:** https://getdesign.md/patternfly (attempted; no usable record returned); https://styles.refero.design/?q=PatternFly (attempted; no usable record returned)
|
|
169
|
+
**Conflicts unresolved:** none
|
|
170
|
+
|
|
171
|
+
## 5. Layout Principles
|
|
172
|
+
|
|
173
|
+
The 1440×900 supplied capture shows documentation and promotional content rather than an enterprise application grid. Measured spacing clusters at 4, 8, 16, and 24px recur in captured styles. Use those only as the observed public-surface rhythm; no application-column count, responsive grid, sidebar width, data-table density, or form layout was captured.
|
|
174
|
+
|
|
175
|
+
## 6. Depth & Elevation
|
|
176
|
+
|
|
177
|
+
The primary action and featured card representatives use no box shadow. A separate public-home feedback button has a measured shadow, but it is a different selector and is not generalized into an elevation scale. No modal, popover, drawer, toast, or layered application surface is tokenized.
|
|
178
|
+
|
|
179
|
+
## 7. Do's and Don'ts
|
|
180
|
+
|
|
181
|
+
### Do
|
|
182
|
+
|
|
183
|
+
- Keep observed Default-theme documentation values separate from Project Felt, high-contrast, dark, and glass themes.
|
|
184
|
+
- Load Red Hat Text and Red Hat Display when applying the measured typography.
|
|
185
|
+
- Use the primary-action geometry only in a source domain where the selector-backed public default is relevant.
|
|
186
|
+
- Preserve the distinction between public PatternFly documentation and downstream product interfaces.
|
|
187
|
+
|
|
188
|
+
### Don't
|
|
189
|
+
|
|
190
|
+
- Do not treat `#0066cc` as proof of a universal Red Hat product CTA.
|
|
191
|
+
- Do not invent control states from a packet with `interactionCount: 0`.
|
|
192
|
+
- Do not call Red Hat Mono, Font Awesome, or pficon a loaded UI font in this capture.
|
|
193
|
+
- Do not convert the featured public-home card into a dashboard/card system without a product-surface observation.
|
|
194
|
+
|
|
195
|
+
## 8. Responsive Behavior
|
|
196
|
+
|
|
197
|
+
Only a 1440×900 viewport is present in the supplied packet. No breakpoint, mobile navigation, touch-target policy, responsive reflow, or safe-area behavior was observed, so each is omitted.
|
|
198
|
+
|
|
199
|
+
## 9. Agent Prompt Guide
|
|
200
|
+
|
|
201
|
+
Use PatternFly as an enterprise-documentation reference, not as authority for an uncaptured Red Hat product. Start with white canvas, `#151515` content ink, `#4d4d4d` secondary text, and source-backed `#0066cc` actions. Load Red Hat Text and Red Hat Display rather than substituting a system face. Keep the 4/8/16/24px rhythm and use the measured pill primary action or 16px featured card only where their public-home provenance is appropriate. Do not invent semantic states, responsive behavior, elevation scales, or Project Felt styling.
|
|
202
|
+
|
|
203
|
+
## 10. Voice & Tone
|
|
204
|
+
|
|
205
|
+
PatternFly’s official voice is practical, inclusive, and collaborative: it explains standards for enterprise work, names the consequence for a product team, and points to a usable next action. This is a documentation voice, not evidence of every Red Hat product’s microcopy.
|
|
206
|
+
|
|
207
|
+
| Do | Don't |
|
|
208
|
+
|----|-------|
|
|
209
|
+
| State the object, constraint, and outcome plainly. | Use generic innovation or transformation claims. |
|
|
210
|
+
| Explain how a component supports an accessible workflow. | Promise behavior that has not been documented. |
|
|
211
|
+
| Invite contribution through a concrete route. | Pretend that community review is an automatic approval. |
|
|
212
|
+
|
|
213
|
+
- **Official stance, paraphrased:** Build consistent and usable enterprise software with shared standards and tools. [About](https://www.patternfly.org/get-started/about-patternfly/)
|
|
214
|
+
- **Official stance, paraphrased:** Components connect foundations, patterns, and extensions. [Components overview](https://www.patternfly.org/components/overview/)
|
|
215
|
+
- **Official stance, paraphrased:** Major releases provide upgrade guidance and codemods for breaking changes. [About](https://www.patternfly.org/get-started/about-patternfly/)
|
|
216
|
+
|
|
217
|
+
## 11. Brand Narrative
|
|
218
|
+
|
|
219
|
+
PatternFly is presented by its maintainers as an open-source design system for consistent, usable enterprise software. It is sponsored and maintained by Red Hat, yet its documentation explicitly invites wider use and contribution. That relationship explains why the system reads as shared infrastructure: guidance, component examples, code, and accessibility resources are organized to reduce repeated work across cross-functional product teams. [About PatternFly](https://www.patternfly.org/get-started/about-patternfly/)
|
|
220
|
+
|
|
221
|
+
The current story is one of controlled evolution rather than a replacement of the system’s enterprise purpose. PatternFly 6 adds a token-based theming architecture and optional visual modes; Project Felt brings a Red Hat-aligned option while the Default theme remains available. The source material does not provide a named executive quotation for this reference, so none is fabricated. [Theming](https://staging.patternfly.org/foundations-and-styles/theming/) · [Release highlights](https://www.patternfly.org/get-started/release-highlights)
|
|
222
|
+
|
|
223
|
+
## 12. Principles
|
|
224
|
+
|
|
225
|
+
1. **Make enterprise work consistent.**
|
|
226
|
+
*UI implication:* Reuse documented components and foundations before creating a competing local pattern.
|
|
227
|
+
2. **Keep design and code connected.**
|
|
228
|
+
*UI implication:* Pair visual guidance with implementation examples and accessibility information where the source provides them.
|
|
229
|
+
3. **Make contribution legible.**
|
|
230
|
+
*UI implication:* Name the review or request path instead of implying that a change is automatically accepted.
|
|
231
|
+
4. **Evolve through explicit versions and themes.**
|
|
232
|
+
*UI implication:* Treat Default, Project Felt, high contrast, and glass as named modes; do not blend their values without an explicit theme decision.
|
|
233
|
+
|
|
234
|
+
## 13. Personas
|
|
235
|
+
|
|
236
|
+
*These are workflow archetypes derived from the official audience description, not research-validated people or synthetic satisfaction evidence.*
|
|
237
|
+
|
|
238
|
+
- **Enterprise front-end developer:** Looks for production-ready React or HTML guidance and needs a clear path from a component example to implementation.
|
|
239
|
+
- **Product designer:** Uses foundations, components, and patterns to maintain consistency while making an enterprise workflow understandable.
|
|
240
|
+
- **Open-source contributor:** Brings a feature request, design issue, code change, or documentation update through the project’s public contribution channels.
|
|
241
|
+
|
|
242
|
+
## 14. States
|
|
243
|
+
|
|
244
|
+
| Category | Documented handling boundary |
|
|
245
|
+
|----------|------------------------------|
|
|
246
|
+
| Empty | Use the component/pattern guidance for the specific product context; no empty-state geometry was captured. |
|
|
247
|
+
| Empty — filtered | Describe the filter condition and recovery action; do not borrow a state style from an uncaptured component. |
|
|
248
|
+
| Loading | Use the relevant official component guidance; no loading visual was observed in this packet. |
|
|
249
|
+
| Loading — long task | Explain ongoing work and preserve user control where the product pattern documents it. |
|
|
250
|
+
| Error | Identify the failed task and next recovery step; no error color or layout is tokenized here. |
|
|
251
|
+
| Error — permission | Explain the access boundary without presenting it as a system fault. |
|
|
252
|
+
| Error — unavailable service | State that the service is unavailable and provide a retry or support path only when the product supports one. |
|
|
253
|
+
| Success | Confirm the completed task in the relevant product context; no success token was observed. |
|
|
254
|
+
| Skeleton | Do not imply a particular skeleton geometry from this desktop documentation capture. |
|
|
255
|
+
| Disabled | Do not infer disabled colors, opacity, or cursor treatment from the default-only component observations. |
|
|
256
|
+
|
|
257
|
+
## 15. Motion & Easing
|
|
258
|
+
|
|
259
|
+
No motion duration, easing curve, transition, or reduced-motion behavior was measured in the supplied packet. PatternFly documentation and release notes discuss component animation and accessibility work, but those references do not license an unmeasured timing token in this canonical record. Preserve user motion preferences in any implementation and source exact values from the relevant official component or motion guidance before adding them.
|