Fujitsu DESIGN.md

Design System Inspiration of Fujitsu

Overview

Visual Theme & Atmosphere

Fujitsu began in 1935 as a communications-equipment manufacturer. Its current corporate profile lists service solutions, hardware solutions and ubiquitous solutions. The Japanese corporate site connects this engineering history to technology that supports society and to Uvance, its business model for addressing customer and social challenges. History, company facts, corporate overview.

The brand's distinctive device is its flowing infinity form. Fujitsu announced a visual-identity renewal alongside the October 2021 launch of Fujitsu Uvance, bringing the Infinity Mark forward as an expression of continuing transformation and sustainability. Its 2022 description of the Corporate Brand Identity System specifies 15 gradient variations, eight primary colors, six functional colors and a readability-focused corporate font. The current Uvance page extends the transformation story through collaboration between people and AI. These are dated brand statements, rather than a claim of a new 2026 rebrand. 2021 launch, 2022 brand-system announcement, Uvance today.

On the measured homepage, a white header and red wordmark lead into a blue-purple photographic hero with a large curved graphic. Below it, white sections, black copy, saturated action links and customer stories form a long editorial page. A rounded white report link coexists with large square red and blue actions. The measured homepage is the Japanese edition (global.fujitsu/ja-JP, HTML lang="ja-JP"), captured at 1440×1000 on 2026-11-10.

Brand Narrative

Fujitsu's official history connects its origins to communications equipment. The 2021 Uvance launch links its newer transformation business to a more sustainable world, and explains the name through Universal and Advance. The 2023 corporate design interview discusses broader color choice and accessibility as part of the visual identity. On the captured homepage, that breadth appears in colorful imagery and gradient panels alongside the red wordmark and actions. History, Uvance launch, design interview.

Principles

The current corporate overview names challenge, trust and empathy as company values. For this implementation reference, the measured surface suggests three practical choices: broad color expression, explicit destination links, and visible keyboard focus. The latter are observations for rebuilding this page, not a quoted company design manifesto. Corporate overview.

Personas

No user personas were verified.

Colors

The live census contains 148 computed root custom properties and 161 unique names when first declarations are included. The colors below come from that readable CSS, with the focus and shadow colors additionally measured on controls. Names describe this reference's observed roles; they do not imply a separately published token API.

The readable CSS exposes 13 named start/end gradient pairs: h1b–h5b, plus e1b, e2b, e3b, e5b, e6b, e8b, e9b and e10b. For example, h1b is red → magenta, h3b blue → light blue, and e1b cyan → yellow. This homepage inventory does not establish the full set of variations described in 2022.

The survey's rendered counts include the still-open consent layer and a UserWay widget. Their colors are not assigned product roles. The full unadjusted census and all custom properties are retained in the measurement report.

Typography

The Regular WOFF2 path is /assets/hq/font/FujitsuInfinityPro-Regular-202301-2.woff2; Bold uses /assets/hq/font/FujitsuInfinityPro-Bold-202301-2.woff2. CSS also declares corresponding -202301.woff resources. Their URLs are evidence of the site's serving configuration, not a grant of font rights. Substitute: none chosen.

Measured type: report and red action links 18px/700, line height 21.6px; navigation and story-title links 18px/700, line height 30.6px; search 14px/700, line height 23.8px; enterprise AI action 21px/700, line height 25.2px. Letter spacing is normal on these six controls. The root also declares heading-panel sizes 2.8rem and 3.6rem; their responsive use was not tested.

Layout

At the captured desktop width, the header has two navigation rows. The hero places its copy and report action to the left of a city photograph and curved graphic. Customer stories appear in three columns; their title anchors begin at x=73, 513 and 953px in the survey. Later sections combine a left label column with stacked service descriptions, followed by insights, topics and press links.

Readable layout variables specify --size-content-width-max: 1280px and --size-content-margin-wide: 3.7%. These are CSS declarations, not measurements of every section's content box. CTA padding supplies concrete reusable spacing: 30px 25px on the square actions and asymmetric 15px 20px 15px 30px on the hero pill.

Responsive Behavior

Only 1440×1000 desktop behavior was measured; CSS names breakpoint values of 360px, 768px and 1280px, but no mobile layout or breakpoint transition was verified.

Elevation & Depth

For the report, red and blue action links, hover changes the resting none shadow to rgb(85, 85, 85) 0px 0px 8px 0px. Their backgrounds remain unchanged, and an underline appears. Pointer press retains these two effects. This provides a measured elevation treatment for these actions; no general card-shadow scale was established.

Motion & Easing

The three CTA links compute box-shadow 0.3s ease-in-out 0s. Search computes width 0.3s ease-in-out 0s; its expanded state persists after blur. The navigation and story-title anchors compute all 0s ease 0s. These are element-specific transitions, not a global motion rule.

Root variables separately read --transition-duration: 0.5s, --transition-duration-short: 0.25s and --transition-timing-function: ease-in. No measured reduced-motion behavior or page-wide animation choreography is claimed.

Components

These are homepage links and an input, measured with real pointer states and a Tab walk. The consent banner was closed using its labelled close button before these measurements. Geometry below belongs to the selected element. All six controls had box-shadow: none at rest.

The hero action's pill is a local 30px radius. The root's separate --border-radius: 100px and --border-radius-round: 50% declarations do not replace the measured component radii.

States

The authored keyboard outline is 2px solid #0018ff with outline-offset: -2px on all six controls. Pointer press also exposes outline-style: auto on the three CTA links and story title; these browser outlines are excluded from brand state tokens. Search width stayed at 276px after blur, so its expansion is recorded as a persistent observation and omitted from focus and pressed tokens. Its blue outline was a distinct, nonpersistent focus indication.

The story link's SVG circle additionally changed from transform: none to matrix(1, 0, 0, 1, 0, 0) on hover, press and focus; the identity matrix does not establish visible movement. Search's hover “no change” covers self and pseudo-elements, no descendants, and three ancestor levels, for the properties listed in the verification notes. Disabled, validation and loading states were not measured.

Do's and Don'ts

• Reproduce the square red content action and rounded white hero action with their respective geometry.
• Keep the measured underline and shadow feedback when rebuilding the CTA links.
• Preserve the solid blue keyboard outline, including its negative offset.
• Use the broader verified palette when reproducing the observed gradient treatments.
• Keep the title-link dimensions attached to the title anchor when rebuilding a story card.
• Do not turn the search field's persistent expanded width into a focus-only rule.
• Do not promote consent controls, UserWay styling or unverified fallback faces into brand tokens.

Voice & Tone

The current corporate overview emphasizes technology, customer transformation and contribution to society. The Uvance page discusses people and AI working together. Homepage actions are direct destination verbs such as レポートを見る and 内容を見る. These observations support informative, task-oriented copy; no separate published voice manual was verified. Corporate overview, Uvance.

Agent Prompt Guide

“Build a Fujitsu-style editorial technology homepage with a white header, black foreground, loaded FujitsuInfinityPro and saturated red actions. Use a 350×81.6px red content link with square corners, white 18px/700 type and 30px 25px padding. Hover adds an 8px neutral shadow and white underline. Keyboard focus draws a 2px solid blue outline at −2px offset.”

“For the illustrated hero, use the measured white report link: 194.7×53.6px, 30px radius, 1px black border, black 18px/700 type and asymmetric padding. Keep the page's story titles as blue links on white cards.”