パナソニック DESIGN.md

Design System Inspiration of パナソニック

Overview

Visual Theme & Atmosphere

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.

Key Characteristics:

• Pale-gray #f2f2f2 canvas with #1a1a1a primary reading text.
• Quiet #666666 secondary text and #4d4d4d top-navigation treatment.
• A limited #0041c0 link color on the captured home surface; it is retained as a surface value, not promoted to a semantic product action.
• Loaded, visibly used Noto Sans across the three supplied Panasonic Holdings surfaces.
• Predominantly square 0px geometry, with only a 2px cookie-control radius observed as a separate exception.

Primary tasks

• Read what the group offers across consumer, business, and technology
• Follow the route from a public explanation to the relevant offer
• Understand the technology and operating-company context as a business partner
• Look up the company history back to its 1918 founding
• Check the group's current environmental direction

Brand Narrative

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

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

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

Principles

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.

1. Commit to integrity. Panasonic’s brand personality begins with integrity and its business philosophy names fairness and honesty. UI implication: Prefer precise labels and sourceable claims over embellished product language.
2. Seek the real need. Future Craft describes discovering real issues and guiding customers toward appropriate solutions. UI implication: Make primary information and the next action easy to find; do not hide essential context behind ornamental layers.
3. Transform thoughtfully. Panasonic frames future-making as a responsibility to people, society, and the environment. UI implication: Explain tradeoffs and impact claims concretely rather than treating a color or icon as proof of sustainability.
4. Work through collective wisdom. Panasonic’s business philosophy emphasizes cooperation and participative management. UI implication: Give customers, partners, and stakeholders clear routes to the information relevant to them.

Personas

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.

Household or individual customer

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.

Business customer or partner

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.

Society-facing stakeholder

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.

Colors

• Canvas (#f2f2f2): home body background on the supplied public Holdings surface.
• Foreground (#1a1a1a): dominant text and border color across all supplied surfaces.
• Muted (#666666): footer/social and secondary text treatment observed on all three supplied surfaces.
• Navigation (#4d4d4d): header navigation text and border treatment on the public Holding surfaces.
• Link (#0041c0): limited home-surface link treatment observed in the supplied packet.

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.

Typography

Visible public-web family

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.

Layout

Spacing System

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.

Grid & Container

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.

Shape

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.

Elevation & Depth

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.

Motion & Easing

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.

Components

Header Navigation Item

Default static baseline

• Text: #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

Search Toggle

Default static baseline

• Background: transparent
• Text: #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

---

Verified: 2026-07-13 (verification v2, supplied computed-style capture plus source-bound Noto font-license review) Tier 1 sources: https://holdings.panasonic/global/ https://holdings.panasonic/global/corporate/about.html https://holdings.panasonic/global/corporate/technology.html 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. Surface split: Holdings home, corporate about, and technology pages remain distinct public corporate-web evidence; no native product UI is inferred. Conflicts unresolved: none

States

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.

Do's and Don'ts

Do

• Use the measured pale-gray canvas with charcoal and muted-gray public-web typography.
• Keep the observed public header compact, regular-weight, and square-cornered.
• 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.

Don't

• Treat #0041c0 as a verified universal Panasonic primary action, success, focus, or hover token.
• Invent search-open, hover, focus, pressed, disabled, error, or motion values from the zero-interaction packet.
• Merge corporate marketing, product, and technology evidence into a fictional shared component library.

Voice & Tone

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.

• “A clearer way to understand the next step.” (Illustrative voice sample, not official Panasonic copy; aligned to the brand’s stated care and clarity.)
• “Technology shaped around the life it supports.” (Illustrative voice sample, not official Panasonic copy; aligned to Future Craft.)
• “Built with attention to what changes next.” (Illustrative voice sample, not official Panasonic copy; avoids an unsupported product claim.)

Agent Prompt Guide

AI Design Prompts

• “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.”
• “Design a restrained corporate header with 15px regular Noto Sans navigation in #4d4d4d, a 26px right-gap rhythm, and one 16px square search trigger.”
• “Make a quiet content page that uses a limited #0041c0 inline link treatment without presenting it as a verified product CTA or brand semantic.”

Governance

Reference Assets & Evidence Boundaries

• Catalog logo: favicon image at https://www.google.com/s2/favicons?domain=holdings.panasonic&sz=128.
• Public-web capture: Panasonic Holdings home, corporate about, and corporate technology surfaces from the supplied 2026-07-13 packet.
• Typography resource: Noto Sans is visibly loaded; swiper-icons remains a declared-only icon asset; unresolved Noto Sands stays excluded.
• Not included: consumer product sites, authenticated experiences, checkout, support flows, downloaded Panasonic design guidelines, product interaction recordings, and a public official component specification.

Known Gaps

• Contrast, search-toggle. Text #1a1a1a on #00000000 measures 1.21:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.