Daiwa Securities DESIGN.md

Design System Inspiration of Daiwa Securities

Overview

Visual Theme & Atmosphere

Daiwa Securities is a Tokyo-based securities company whose stated business includes securities trading, brokerage and underwriting. Its company profile gives the present company's opening date as 26 April 1999. The group's history reaches back to Fujimoto Bill Broker in 1902 and records the creation of Daiwa Securities through a merger in 1943; these are group-history dates, distinct from the present company's opening. Company information, group history.

The captured homepage combines a white canvas, dark burgundy navigation, gold account-opening links and red login links. Compact product links sit beneath a larger navigation row; a wide promotional carousel is followed by help, search and cards for NISA, discretionary asset management and inheritance. This is the measured site's visual expression: several financial tasks remain visible together, with different treatments for account actions, product navigation and advisory content. Live homepage.

A notice dated 21 October 2025 scheduled a homepage redesign for 25 October 2025. It describes reorganising content for a more usable, universal top page, including easier access to procedures, questions and information beyond trading, such as NISA and inheritance. The current wealth-management page frames the relationship around accompanying the customer's future, using “伴走思考”. These first-party statements give the reference its practical direction: expose routes to help and advice alongside routes to trade. Homepage redesign notice, wealth management.

Primary tasks

• Open an account or reach online-trading login.
• Find products, market information and investment education.
• Search the site, stock prices or investment trusts; find help and procedures.
• Explore NISA, managed investment and inheritance support.

These tasks come from the captured homepage's labels and links; no signed-in workflow was inspected.

Brand Narrative

The group philosophy names trust-building as a principle and says customer trust is its foundation. The wealth-management page presents a continuing relationship with the customer; the homepage redesign notice explicitly includes people seeking information beyond trading. Together, these sources support a reference that gives help, procedures and advisory content visible routes alongside financial products. This is an interpretation of those statements and the captured hierarchy, not a claimed redesign rationale for any particular colour or component. Group philosophy, wealth management, redesign notice.

Principles

The company's group-philosophy page lists four principles: “信頼の構築” (building trust), “人材の重視” (valuing people), “社会への貢献” (contributing to society), and “健全な利益の確保” (securing sound profits). These are corporate principles; the opened page does not prescribe UI tokens. Group philosophy.

Personas

No user research or validated personas were available in the opened sources.

Colors

The following names are descriptive reference roles for measured values. They are not a published Daiwa token namespace. The census contains only two custom properties, both concerned with header dimensions.

The two header gradients are linear-gradient(360deg, #c6911f 0%, #d1a74c 100%) and linear-gradient(360deg, #c22112 0%, #cb4235 100%). Their background-color is transparent. Preserve the background image when recreating them.

Typography

• Official product use: no font family was confirmed by a company-authored font statement in the opened sources.
• Live-loaded: the census's fonts.loaded is []; no webfont face can be promoted from this capture.
• Official distributed assets: no distributed font package or licence was verified in the opened sources.
• Declared-only: body, h1 and button share the computed CSS stack "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif. These are declarations, not proof of the face that rendered each glyph. No specimen is supplied for them.
• Unresolved: the actual installed face selected for Latin, Kana and Han, and its licensing. @font-face entries in the census are also empty. Substitute: none chosen.

Preserve the verified metrics independently of the unresolved family:

The control identities report letter-spacing: normal. The typography group retains size and weight roles and omits a font-family role.

Layout

At the measured viewport, the logo link begins at x=40px; the two 186px header actions begin at x=1003px and x=1199px, leaving a measured 10px gap. The product subnavigation's NISA link begins at y=203px. Main carousel link boxes measure 1200×430px in the survey; their lateral position changes with the carousel.

The three advisory cards are each 285px wide, at x=265px, 570px and 875px, producing 20px gaps. The main search field and its neighbouring search button are separated by 16px. These are local desktop relationships, not a verified universal spacing scale.

Responsive Behavior

Mobile layouts, breakpoints and touch states were not measured; the reference covers the 1440×1000 desktop capture.

Elevation & Depth

The two header action links and wealth details link have box-shadow: none in their rest snapshots. The NISA product link adds rgba(0, 0, 0, 0.2) 0px 2px 3px -1px on hover, pressed and focus.

The NISA card's parent <li> has a resting shadow of rgba(0, 0, 0, 0.07) 0px 2px 20px 5px; hover and pressed strengthen only its alpha to 0.25. The anchor itself has no shadow. Keep that ownership distinction when implementing the card.

Motion & Easing

The wealth details link's raw computed transition is all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s, accompanying its text and border colour changes. The NISA card anchor has that same transition string; the descendant thumbnail's individual transition declaration was not recorded, so no duration is assigned to its zoom.

The two header actions declare background 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s. Their measured state difference is opacity, so that declaration does not establish the duration of the opacity change. The NISA subnavigation and search input report all 0s ease 0s. Reduced-motion behaviour was not measured.

Components

All measurements below refer to the logged-out homepage at 1440×1000. These action controls are links; none of their destinations was activated during the state probe.

The NISA card's anchor has inherited color: #152666, but its visible title is #333333 at rest and #d9340a on hover/pressed. Use the title's colour and 24px size for the label. The outer card shell's radius was not sampled, so the component omits that field.

The main search input (#top_search_input, “キーワードを入力”) is 397×48px, radius 3px, padding 13.5px 16px, 16px/400, white with black computed text and a 1px search border. Hover was measured with :hover true and showed no compared style change. Pressed and Tab focus showed only the browser's auto outline. It remains a measured prose reference and is omitted from the interactive component group.

States

Five components have measured authored interaction changes. Pressed was sampled with both :active and :hover true; the five retained links added no compared change beyond their hover snapshots. The search input added a native outline on press. These observations do not establish a separate active-only treatment.

All six controls received real Tab focus. The NISA navigation link changed border and shadow, reverting after blur; these authored changes are retained. Its additional outline-style: auto ring is the browser's. The other controls' focus-only change was also the browser ring. The NISA card's parent opacity changed from 0 to 1 and remained 1 after blur: that persistent reveal is excluded from focus styling.

For the search input, “no change on hover” means no change across the element, its ::before/::after and three ancestor levels with their pseudo-elements, across the probe's compared style/attribute set. It does not describe pixels inside images, video or inaccessible documents. No disabled or error state was measured.

Do's and Don'ts

• Keep the measured gold account-opening and red login gradients distinct.
• Use the observed 3px and 4px action-link corners where their identities specify them.
• Give NISA navigation feedback through its border and small shadow; keep its fill and label colour at their measured values.
• Apply the card's zoom and opacity change to the thumbnail layer, and its stronger shadow to the parent shell.
• Preserve a visible keyboard indication. The captured native auto outline supplies no brand ring token.
• Leave font-family and outer card-shell radius unresolved until supported by further evidence.

These are implementation directions derived from the measured controls, not an official company design-principles document.

Voice & Tone

The captured interface uses direct Japanese task labels: “口座開設”, “ログイン” and “キーワードを入力”. The wealth-management page's “あなたの未来を支える” frames advice around the customer's future. Use the task labels for actions and the advisory wording as context; no general editorial style guide was verified. Homepage, wealth management.

Agent Prompt Guide

“Build the measured Daiwa header action pair: two 186×57px links, 3px corners, padding 16px 8px 14px, white 18px/700 labels. Use the exact gold and red 360-degree gradients in §2. On hover and pressed, set the whole link's opacity to 0.7. Keep the font family unspecified.”

“Build the measured NISA subnavigation link: 66.6×26px, 4px corners, white background, burgundy 15px/500 label and 1px navigation border. Hover, pressed and keyboard focus change the border and add the small shadow in §4. Retain the browser keyboard outline without treating it as a brand colour.”