Nomura Securities DESIGN.md

Design System Inspiration of Nomura Securities

Overview

Visual Theme & Atmosphere

Nomura Securities is a Japanese securities company whose current public offer puts wealth management at the centre: investment, inheritance, real estate and business succession are presented as connected parts of a customer's future. Its wealth-management strengths page traces the brand's history to 1925; the company profile separately dates the present legal entity to 7 May 2001. Today the service describes solutions that cross specialist disciplines and extend beyond financial assets. Company profile, wealth management, strengths.

The homepage gives that proposition an expansive setting: a star-filled mountain landscape, large white Japanese lettering, an outlined wealth-management panel and a companion “Solutions” panel. Below, the page shifts to white and pale grey surfaces for service cards, products and dated news. Small red icons and square actions connect these two settings. This is an observation of the live homepage, rather than an attributed corporate design principle.

The measured surface is the Japanese homepage at www.nomura.co.jp/, with HTML lang="ja"; the capture did not redirect to another regional edition. Its main routes are consultation, account opening, existing-customer login, product information and support.

Brand Narrative

The brand connects its 1925 heritage with a present service spanning investments, succession and real estate. Its strengths page describes a professional that responds to change and a partner that stays beside the customer. The homepage's current promise, “変化を読み、あなたの未来を共に創る。”, places a future-facing message over the landscape. The wealth-management page gives this direction concrete substance through cross-discipline asset-management solutions. Strengths, wealth management.

Principles

The opened strengths page states three service commitments: interpret social change, use Nomura's capabilities to realise individual hopes, and accompany the customer's life. For implementation, the observed homepage pairs these ideas with spacious explanatory panels, detailed service routes and persistent access to support. The layout connection is an interpretation of the captured page. Strengths.

Personas

No research-backed personas were verified.

Colors

These names label measured website values; the site did not expose a first-party custom-property palette in this capture.

The paragraph census is #42425a ×7, #ffffff ×4 and #ca2420 ×1. It supports the foreground role more directly than the general text census, which also includes navigation and nested elements. The blue --swiper-theme-color is excluded from this palette because it belongs to the carousel library.

Typography

Official product-use documentation: no opened narrative or typography guide explicitly names a corporate/product typeface. The following evidence describes this live website.

Live-loaded: the census lists Noto Sans JP with weight descriptor 400 600, Noto Serif JP with 400 500, and Marcellus at 400, all normal. The first-party stylesheet requests these three families together through a Google Fonts CSS import. The survey identifies Noto Sans JP on interface links, Noto Serif JP on the consultation action, and Marcellus on the Latin “View more” link. Live stylesheet.

Official distributed assets: the stylesheet declares the first-party ns-icon-font through WOFF2, WOFF and TTF URLs. It was loaded as an icon face. The other loaded icon face, swiper-icons, is a library asset. Neither is a text family or a text specimen.

Declared-only: CompatilLetterLTCERegular, Arial, メイリオ, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, ＭＳ Ｐゴシック, Helvetica, Verdana and sans-serif occur in the computed fallback stack but are absent from the loaded-face list. They receive no specimen and no typography-family token.

Unresolved: exact text-font WOFF URLs, font licensing and any typography standard for the signed-in service were not verified. Substitute: none chosen.

Layout

The desktop capture is 1440 × 1000px. The hero's four quick actions are each 270px wide, with observed x positions 143, 433, 723 and 1013px: a 20px gap between adjacent controls. The footer action row starts at x 103px, with two sampled actions each 396.7px wide; their x positions are 103 and 514px.

Use the homepage's observed progression: landscape hero, two outlined explanatory panels, related reading, image-led service cards, product/news lists and utility/footer actions. The sweep card measures 485px wide; its title and description are inset 24px, as derived from the 437px text width inside the 485px card and confirmed by the stylesheet's summary padding. These are local measurements, not a verified global spacing scale.

Responsive Behavior

Mobile layouts and breakpoint behaviour were not measured; this reference records the desktop capture only.

Elevation & Depth

Four sampled actions — account opening, FAQ, wealth-management View more and footer login — have rest shadow rgba(0, 0, 0, 0.1) 0px 2px 8px 0px. Keyboard focus changes it to rgba(0, 0, 0, 0.1) 0px 0px 2px 1px; the original shadow returns after blur. The pressed observations carry that same compact shadow.

The sweep-card anchor and company-nav anchor have no rest shadow. The card's hover emphasis comes from its pseudo-element border and reversed inner affordance.

Motion & Easing

For account-open, faq, view-more and login-action, the probe's raw computed identity string is all, width, height 0.34s, 0s, 0s ease-out, ease, ease 0s, 0s, 0s. This records a duration of 0.34s with ease-out for the first transition entry and zero-duration width/height entries. The company-nav and sweep-card anchors report all 0s ease 0s; their observed changes are on pseudo-elements.

These are captured transition strings, not a global motion scale. Pseudo-element transition strings and a reduced-motion response were not collected. The probe's settling budget is not published as a brand duration.

Components

All six sampled controls are links. Measurements below describe the anchor; the sweep-card title is a separate child. All have 0px radius.

The white account-opening action fills red on hover; the filled red login darkens. The FAQ action reverses to the foreground colour. The wealth-management action uses Marcellus, a white outline and a dot icon; its hover becomes white with dark text at opacity 0.8.

The carousel card has an image and summary rather than a separately clickable inner button. Its “View more” affordance is a summary pseudo-element measuring 144 × 52px. Hover reveals a 1px #42425a border around the card and reverses that affordance to dark fill/white type.

States

The company-nav pointer observations required hideOverlays: true in the second capture because a fixed header covered the original control. Its focus outline was rgb(0, 95, 204) auto 1px off 1px, a browser indication. The carousel link had tabIndex=-1 and was not reached in the 116-Tab walk. No disabled-state claim is made.

“No additional change” here covers the tool's computed styles and attributes for the control, its pseudo-elements, descendants and three ancestor levels. It does not establish the absence of pixel-only or out-of-scope changes. Pressed button observations also had focus, so the compact shadow is recorded without claiming an independent active-only rule.

Do's and Don'ts

• Pair white or dark surfaces with red action details and the measured #42425a foreground.
• Keep the sampled controls square; preserve the distinction between white/red account opening and filled red login.
• Use the loaded text families in their observed roles: Japanese interface links, serif consultation and Latin display actions.
• Reproduce the card's pseudo-element states as well as the anchor styles.
• Do not promote Swiper defaults into the brand palette or treat the browser's auto outline as a Nomura focus colour.

Voice & Tone

The first-party wealth-management copy addresses the customer's desired future and presents specialist help as an ongoing relationship. The strengths page organises that promise around reading social change, finding individual solutions and accompanying the customer's life. Functional labels such as “口座開設” remain concise. This describes the opened copy, not a separate official writing guide. Strengths.

Agent Prompt Guide

“Build a Nomura-style account-opening link: 396.7px wide and 60px tall, square corners, 10px padding, 18px/400 Noto Sans JP with 28.8px line height. Use a white surface, #ca2420 text and a 1px red border. Hover fills #ca2420 and reverses the text, icon and arrow to white.”

“For the dark wealth-management section, use a 270 × 66px transparent link with a 1px white border and 17px/400 Marcellus. Hover sets a white background and #42425a text at opacity 0.8.”