Rakuten Securities DESIGN.md

Design System Inspiration of Rakuten Securities

Overview

Visual Theme & Atmosphere

Rakuten Securities is a Japanese online securities service offering domestic stocks, investment trusts, FX and overseas investment products. Its company disclosure dates its establishment to March 24, 1999. The desktop homepage combines product navigation, market information, educational links, promotions and an account-access panel. White surfaces and dark grey text support this information density, while red marks account-opening actions and blue marks informational links. Company, company disclosure.

The red is an explicit part of the site's evolution: the February 14, 2022 design announcement says it unified the former blue base colour with the brand's red, alongside renewed headers and navigation. 2022 design renewal. In the measured homepage header, the account-opening link is #bf0000, brightens to #ec0606 on hover and darkens to #8c0000 on press or keyboard focus.

A July 2026 announcement describes a further renewal of U.S. stock screens: asset and market information move together at the top, order buttons become easier to distinguish, and order-screen spacing is reorganized while preserving the layout. It describes this as the first stage toward a full renewal planned for early 2027, with dates subject to change. These are documented product changes; the values below come from the public homepage. 2026 trading-screen renewal.

The measured homepage is the Japanese edition at www.rakuten-sec.co.jp/, with HTML lang="ja"; the capture did not redirect to another edition.

Brand Narrative

The company's history records the start of internet securities operations in June 1999 and the change to the name 楽天証券株式会社 in July 2004. The documented 2022 move toward red gives the present header a specific historical context. Its continuing product-renewal announcements concentrate on how investors locate information and identify actions. History, 2022 renewal, 2026 renewal.

Principles

Implementation guidance derived from this measurement: group account actions together; distinguish filled and outlined entry links; use red for their authored state feedback; preserve the measured separation between a link and its container. These are reference-building observations, not a claimed company manifesto.

Personas

No source-backed persona specification was verified in the opened pages.

Colors

These role labels describe live computed values from the homepage. The census captured no first-party CSS custom-property namespace; its five declared variables belong to Swiper.

The empty stock-search element has computed colour #9c9c9c. This is an empty-field observation; typed text and validation colours were not tested.

Typography

Official product use: no opened Securities-specific source identifies a prose typeface for this homepage.

Live-loaded faces: the census lists only swiper-icons 400 normal and sure-icon 400 normal. Both have embedded data:application/font-woff sources. They are retained as icon-face evidence, with no prose-family token or text specimen.

Official distributed assets: no downloadable font package or font licence was verified. No font files were downloaded.

Declared-only faces: the census records "Apple SD Gothic Neo" on body, and "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif on h1 and the sampled button. The measured header controls name Hiragino Sans; the stock-search field names Arial; the domestic-card link names Noto Sans JP. None of those prose faces appears in the loaded-face list. No specimen is assigned to them.

Official group context: Rakuten's 2020 announcement documents Rakuten Sans, Rakuten Serif, Rakuten Rounded and Rakuten Condensed, each with five weights. It says the set was developed for progressive application across group services and materials. This establishes a group font asset, without confirming which face this Securities homepage uses. Official font announcement. The group design portfolio also lists Rakuten Font Family and ReX: Rakuten Experience; its presence does not establish a homepage font or token mapping.

Unresolved: the rendered prose face and its availability/licence. Typography family tokens are absent. Substitute: none chosen.

Measured metrics remain usable: header action links 14px/400 with 21px line-height; the fees navigation link 14px/600 with 21px line-height; the product-card label 13px/400 with 22.36px line-height; the search field 13.3333px/400 with normal line-height. These are control metrics, not a verified global type scale.

Layout

At the measured 1440 × 1000 viewport, the header stacks a promotional strip, utility links, logo and account actions, main navigation, then product-category shortcuts. The hero pairs promotional artwork with a login panel on the right. Further down, information sections lead to tools, product tiles and service links.

The domestic-stock tile is 100px wide at x=125; the next 100px tile begins at x=241, giving a measured 16px gap. The action and fees links use 16px horizontal padding. These observations support the recorded 16px spacing values; no general grid or breakpoint scale was extracted.

Responsive Behavior

Only the desktop 1440 × 1000 viewport was measured; mobile layouts and breakpoints are unverified.

Elevation & Depth

The domestic-card link itself is flat. Its white parent li.s3-products__item carries this measured shadow:

rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 2px 0px

The header action links gain a 1px spread shadow during press and keyboard focus. This is state feedback, separate from the product tile's parent elevation.

Motion & Easing

The three measured header links record background-color, color, outline, each with duration 0.3s (300ms), easing cubic-bezier(0.25, 0, 0.45, 1) and zero delay. The raw probe strings are copied in the verification notes. The stock-search input and domestic-card link record all 0s ease 0s. No other motion values are specified.

Components

Each identity below was matched before measuring hover, held pointer press and real Tab focus. Width and height are CSS pixels.

The account-opening link has a 1px rgba(0, 0, 0, 0) rest border; the login link has a 1px solid #bf0000 border. Fees and domestic-card links have no own border. The search input has 1px solid #d1d1d1 borders on top, bottom and left, with no right border. All five controls have box-shadow: none at rest.

Four controls have authored measured state changes and enter the component tokens. The search field remains documented here: all three tested states were unchanged within the probe's comparison scope.

States

The fees-link pressed result occurred in both states calls and both crops show the label merging into the red fill. It is retained as a raw observed condition, not a treatment to prescribe. Pressed snapshots also have pointer focus; they do not isolate an active-only CSS rule. All measured keyboard-focus changes reverted after blur.

For the unchanged search field, the comparison covers self and its pseudo-elements, zero descendants, and three ancestor levels with their pseudo-elements, across the probe's computed style and DOM-attribute properties. It does not establish absence of changes in siblings, inaccessible frames or pixel-only rendering. Disabled, filled-field and validation states were not measured.

Do's and Don'ts

• Use the measured 4px radius and 44px height for the two header action links.
• Keep the primary action's bright hover and dark pressed/focus fills distinct.
• Keep the card link's own styles separate from its elevated parent.
• Preserve the declared-only status of prose font names; leave the unresolved family unset.
• Do not turn Swiper's blue theme variable into a Securities brand colour.
• Do not turn the domestic-card's browser auto outline into a brand focus token.

Voice & Tone

The observed labels name tasks directly: 口座開設 (open an account), ログイン (log in), 手数料 (fees), and 銘柄名 / コード / ファンド名 (security name / code / fund name). This is observed interface copy; no formal voice guide was verified.

Agent Prompt Guide

“Build the measured header account-opening link at 114 × 44px, radius 4px, padding 0px 16px, 14px/400 with 21px line-height. Use #bf0000 and white at rest, #ec0606 on hover, and #8c0000 with a white 1px border and matching 1px spread shadow for keyboard focus. Leave the unresolved font family unset.”

“Use a 100 × 124px product link with 16px top padding, 13px/400 label metrics and #333333 label colour. Place it on the measured white elevated parent; hover and held press lower the link's opacity to 0.7.”