DOCOMO SMTB Net Bank DESIGN.md

Design System Inspiration of SBI Sumishin Net Bank (DOCOMO SMTB Net Bank)

Overview

Visual Theme & Atmosphere

SBI Sumishin Net Bank now operates as DOCOMO SMTB Net Bank. Its individual banking service became ドコモの銀行 on 3 August 2026; the bank's own announcement describes a more familiar service that makes its connection to the Docomo group easier to understand. App names, icons and web marks form part of the announced transition. BaaS partner services and corporate services retain NEOBANK. Official brand announcement

The live consumer homepage expresses this through a red wordmark, broad red announcement panels, pale blue-grey sections, white benefit cards and small explanatory illustrations. Red #cc0033 carries the account-opening action; blue #196097 carries utility links and the product-catalog action. The combination is distinctive: the new consumer identity and the blue banking interface coexist on the same page. This is a reading of the captured page, not a published design principle.

The page leads from an app illustration and everyday banking benefits into security, account-opening instructions, questions and product discovery. A fixed bottom bar repeats the red account-opening link. The measured homepage is the Japanese surface at netbk.co.jp/contents/, with HTML language ja.

Brand Narrative

The company's profile dates its establishment to June 1986, while its history records a banking licence and the start of banking operations in September 2007. Keep these two milestones distinct. Company profile, history

The current brand change gives individual banking the name ドコモの銀行 and changes the legal bank name to 株式会社ドコモSMTBネット銀行. The bank's change notice also states that existing accounts and banking identifiers continue. Its corporate slogan connects technology with fairness and a society in which prosperity circulates. Change notice, corporate slogan

Principles

The July 2026 announcement names reassurance and convenience through the Docomo group, finance integrated into everyday life, and service design that combines convenience with safety. These are the company's stated aims. Official brand announcement

The measured page suggests practical implementation choices: distinguish account opening from utility navigation through colour, pair benefit explanations with illustrations, and place explanatory notes beside promotional claims. These are observations of this page rather than additional corporate principles.

Personas

No research-backed personas were verified.

Colors

The live census found 174 root custom properties and 175 declared properties. After excluding Swiper's two root properties and one additional declared property, 172 computed properties remain associated with the site's own styles. These include module, shared colour, content and loading-skeleton groups; a value's presence in that list does not establish use by every component.

The root module token --m-color-text-body resolves to #1b1b1b; it differs from the dominant paragraph ink on this consumer page. Use the observed foreground for this reference. Likewise, the existing variable named --primary_color is blue #196097, while the measured account-opening CTA is red. The role names above describe the captured controls rather than renaming the site's variables.

Typography

Official product-use evidence: the company pages opened for this reference do not name an official product typeface.

Live-loaded evidence: document.fonts reports Noto Sans JP Medium, gf-Oswald, gf-Roboto-bold, Char, Char-Medium, Num-Regular, Num-Medium and Num-Bold, plus the icon glyph font. The measured navigation and search input declare Noto Sans JP Medium. Its @font-face registration uses weight normal, and the campaign label computes to 14px/400. The word “Medium” in the family name is not evidence for a computed 500 weight.

Official distributed-asset evidence: this is limited to source references in the site's own CSS; no standalone font distribution or licence page was verified. Linked homepage stylesheets reference Noto Sans JP Medium at /contents/assets/fonts/NotoSansJP/NotoSansJP-Medium.woff2 with a TTF alternative. The other loaded aliases reference Oswald/Oswald-Light.ttf, Roboto/Roboto-Bold.ttf and files under /contents/assets/fonts/Shikumi/. No independent brand role or redistribution licence is assigned to those other faces. Font files were not downloaded.

Declared-only evidence: the body and ordinary button stack begins with hiragino sans, followed by Japanese platform faces and Noto Sans JP. The census does not list those stack faces as loaded. Other unloaded @font-face aliases include gf-Oswald-light, gf-Oswald-regular, the regular/bold Noto Sans JP registrations and several gf-Roboto variants. They receive no specimen or machine family token.

Unresolved: the exact platform face providing the body and action-link glyphs is not established by the loaded-face census. The navigation family token is limited to the verified navigation use. Substitute: none chosen.

Layout

Use broad horizontal sections to separate everyday benefits, security, rewards, onboarding and product discovery. White cards hold the explanations; compact pill actions sit inside them. A two-row desktop header separates the brand and utility links from the full-width product navigation. The fixed account-opening bar supplies a repeated conversion action.

The catalog link's measured white panel sits on #e7eef3; the main onboarding CTA sits in a #e4ecf2 section. Preserve those contextual surfaces when reproducing the controls. The measured action paddings are 18px for the red CTA, 12px 24px for the outline action and 11px 35px for the catalog action; they do not establish a global spacing scale.

Responsive Behavior

Only 1440 × 1000 desktop was rendered. The opened homepage CSS declares outline-action padding of 12px 16px at max-width:559px and 12px 24px at min-width:560px. This is stylesheet evidence, not a mobile rendering measurement. Homepage action styles

Elevation & Depth

The catalog's white panel has the computed shadow rgba(0, 0, 0, 0.05) 0px 0px 10px 2px. Its blue action has no shadow. The main CTA, outline action, navigation link and search input also compute to box-shadow: none.

The root header/menu shadow declaration is 0px 6px 10px -6px #00000040. This is a declared module value; the measured resting navigation ancestor itself had no shadow.

Motion & Easing

The main account-opening link and Smart Program outline link both compute to background-color 0.15s ease-out 0s (150ms). Their colour changes were sampled after 900ms. The campaign navigation, search input, image link and catalog action each compute to all 0s ease 0s on the control itself. No broader motion scale is inferred.

---

Tier 1 sources: Live homepage (capture resolves to /contents/; survey, loaded fonts, colour census, six controls and screenshots, 2026-11-03); nonsense-path control (curl catch-all redirect to the same 825-byte navigation gate as the root homepage); homepage module styles, homepage styles, content styles, consumer homepage styles. Narrative sources are linked beside the claims they support. This reference covers the public consumer homepage, not an authenticated banking application.

Components

These are links styled as actions or navigation, measured with real pointer hover, pointer press and keyboard Tab focus.

The search input is 250 × 30px, with 5px corners, 0px 10px padding, a #f5f5f5 fill, #3b3939 text and a 1px #d4d4d4 border. Hover produced no change within the recorded comparison scope. Pointer press and keyboard focus added only the browser's auto outline, so it remains a prose observation rather than a harvested interactive component.

The はじめてのネット銀行 image link was initially 350 × 19.6px before its lazy image loaded, then 350 × 182.8px in the parked rest and pointer snapshots. It has 0px padding/radius, a transparent background over white and a declared 14px/400 link style in #196097. Hover and press add computed blue underlining to the outer anchor. A visible image-pixel change was not established, so this banner is not generalized into a card token.

States

Hover and pointer press were both confirmed on all six selected controls. The four harvested controls have the authored changes listed in §4. Pressed values matched hover values in this pointer interaction; a separate active-only treatment was not established.

Keyboard Tab reached every control. The five links gained rgb(0, 95, 204) auto 1px off 1px; the search input gained rgb(0, 95, 204) auto 1px off 0px. These are browser outlines and produce no focus token. The image link's extra height persisted after blur and is excluded from focus styling. Disabled, validation, success and error treatments were not measured.

Do's and Don'ts

• Use red for the measured account-opening action and blue for the measured utility actions.
• Keep the primary link's actual dark-red hover and the outline link's pale-blue hover.
• Preserve the white label and pill geometry of the primary action.
• Keep the campaign navigation's state on its bottom border.
• Keep the loaded navigation family separate from the unresolved body stack.
• Avoid turning a loading-image size change into a focus animation or a browser auto ring into a brand token.

Voice & Tone

The consumer page uses direct action labels such as “詳しくみる” and “一覧からさがす”, and presents account opening as a short guided sequence. Its headline qualifies its banking benefits with adjacent notes. The official brand announcement emphasizes familiarity and easier understanding; these observed labels are useful examples of that direction. Official announcement

Agent Prompt Guide

“Build a Japanese consumer-banking landing page with white benefit cards, pale blue-grey sections, dark #303c48 paragraph ink, a red #cc0033 account-opening pill and blue #196097 utility actions. Make the measured 350 × 53.7px primary link use 28px corners, 18px padding and 16px/600 text. Its hover and pressed fill is #9c0c0c. Give the 120 × 43.5px secondary link a 1px blue border, 21px corners and a #f3f8ff hover fill. Use verified Noto Sans JP Medium only for the navigation role; leave unresolved typography unassigned.”