Rakuten Bank DESIGN.md

Design System Inspiration of Rakuten Bank

Overview

Visual Theme & Atmosphere

Rakuten Bank is a Japanese bank whose company profile describes its activity as banking through electronic media. It was established on 14 January 2000 and began banking operations in July 2001. Its 2010 renaming notice announced changes to service names, the domain and the corporate logo alongside the change from eBANK to Rakuten Bank; the bank explicitly linked the move to its place in the Rakuten group and cooperation between group services. Company, history, 2010 notice.

The measured homepage pairs a white information surface with Rakuten red #bf0000, blue service links and colourful campaign artwork. The desktop survey screenshot shows several navigation layers, a campaign carousel, a six-card benefits row, service directories and support links. Small rectangular header actions coexist with a pill-shaped account-opening link in the hero. This is an observation of the public homepage, not an official design principle.

Its current expression also carries a 25-year anniversary mark beside the bank logo. The official anniversary page records a logo update in 2018; the separate logo notice dates the rollout from 2 July 2018. In 2026, the anniversary site frames the next stage around safety, security and convenience, while its timeline records such practical additions as smartphone ATM access in 2025. Logo change, 25th anniversary.

The measured homepage is the Japanese edition at www.rakuten-bank.co.jp/ (lang="ja"); the capture did not redirect to a regional path. Measurements describe its public desktop surface, without extending them to signed-in banking or the app.

Brand Narrative

The bank's history connects its 2010 identity to the Rakuten group. The 2018 notice describes a logo change spanning the website, cards, apps and partner ATMs; the anniversary timeline identifies that change as the current logo. The 2026 anniversary presentation combines this history with concrete service development. It is not evidence of a new 2026 visual-system redesign. 2010 notice, 2018 notice, anniversary.

An official logo-use guideline governs use by eligible corporate service users; it is not a public UI token specification. Logo guideline.

Principles

The bank's management philosophy explicitly commits to putting customers first and describes banking's public role, sound operations and depositor protection. Those are documented company principles; the interface observations above do not establish a separate set of official design principles. Management philosophy.

Personas

No research-backed personas were verified.

Colors

These are aliases for measured CSS values, not names from a published bank token library. No first-party custom-property palette was verified.

The paragraph census contains white ×4, link blue ×3 and #424242 ×2. Retain that context when choosing text on a light surface; the most frequent paragraph colour comes from mixed page roles. Transparent backgrounds and borders are recorded as rgba(0, 0, 0, 0) in the evidence, without assigning a solid background token.

Typography

Loaded icon faces are bankicon, rex-icon, swiper-icons and rex-icon-font. They are icon resources, excluded from the text-family token. The census records bank-hosted WOFF/TTF declarations for the first two and data URLs for the latter two.

These metrics remain useful where a family is unresolved. Do not render a different face as the header's verified font.

Layout

In the 1440 × 1000 desktop survey, the top navigation is layered: customer type and corporate links, a logo/action row, five broad menu triggers, then a compact row of product links. The five menu triggers each measure 238.4 × 52px; the header opening link begins at x=1074, y=113. The hero campaign links measure 1344 × 280px in the survey. Below the introduction, six benefit-card links each measure 160 × 232.5px.

Use the captured hierarchy as the reference: dense navigation, a large campaign area, then grouped benefits and service information. No shared grid or spacing scale was verified.

Responsive Behavior

Not measured; the evidence covers a 1440 × 1000 desktop viewport only.

Elevation & Depth

The measured controls are flat at rest. The header opening link's pressed and keyboard-focus treatment combines a 1px white border with box-shadow: rgb(140, 0, 0) 0px 0px 0px 1px. The login link uses the same geometry with rgb(191, 0, 0) as the outer shadow. These are interaction indicators, not a general panel-elevation scale.

Motion & Easing

The header actions and search trigger report a 300ms transition for background colour, colour and outline. Nav, hero and card report a 200ms transition for colour only. Both computed strings use cubic-bezier(0.25, 0, 0.45, 1). The raw strings are preserved verbatim in verification.md. In particular, the hero's observed background-colour change is not listed as a transitioned property in its own computed string; do not infer a background animation from the colour duration. No carousel timing or broader motion scale was measured.

---

Live evidence: homepage survey and states, captured 2026-11-03; full paths, raw samples, source excerpts and exclusions are recorded in verification.md and report.md. The nonsense-path curl control was blocked with HTTP 403, so catch-all behaviour remains unresolved.

Components

Five components are published from a single state capture. Each has an authored, measured hover or pressed change. Account opening, login and the deposit destination are links. No destination was activated.

All five have box-shadow: none at rest. Their state changes appear in §14.

The measured debit-card promotional link is 250 × 250px, radius 10px, padding 8px, white with black text, no border or shadow. Its title is 18px/400 inside a 14px/400 control. The probe records a change to text-decoration: underline solid rgb(0, 0, 0) on hover, but the crop does not clearly show an underline on the nested copy. Press and focus also expose a browser auto ring. This card remains a documented raw observation, with no machine component published.

States

All hover samples matched :hover; pressed samples matched :active. Focus used real Tab landings with :focus-visible true and the pointer away. Changes did not persist after blur.

The browser outline reads rgb(0, 95, 204) auto 5px off -2px on the nav and card; it is not a brand ring. All measured controls were enabled. Disabled, error, loading and validation states were not measured.

The probe compares each control, its pseudo-elements, descendants and their pseudo-elements, plus three ancestor levels. Descendant counts are 3 for each header action, 0 for nav and hero, 9 for the card and 5 for search. It compares styles and DOM attributes, including image/SVG fields; it does not establish pixel equality or cover canvas/video changes, closed shadow roots or cross-origin iframe contents.

Do's and Don'ts

Use red for the measured account actions, blue for service links at rest, and the observed neutral surfaces. Preserve the 4px header corners, 5px product-link corners and 100px hero radius in their respective contexts. Keep the measured content typography separate from the unresolved header family.

Avoid applying one action's hover red to every action: header and hero fills differ. Do not turn the browser's blue auto outline into a bank colour token. No substitute font is chosen.

Voice & Tone

The captured labels use short task names such as account opening and login, then explicit guidance such as “利用開始までの流れ” (the flow until starting use). The official anniversary writing thanks customers and describes making finance familiar and convenient. These are observed examples, not a published tone-of-voice specification. Anniversary writing.

Agent Prompt Guide

“Build a Rakuten Bank public-homepage style action row: a 44px-high account-opening link with 4px corners, red #bf0000 fill and white text; its white login companion has red text and a 1px red border. Apply the separate hover, pressed and focus values from §14. Preserve the documented type metrics and leave the header family unresolved.”

“For the measured content hero action, use loaded Noto Sans JP 16px/700, padding 8px 24px, a 100px radius and a 37.2px measured height. Use its own bright hover red and darker pressed red.”