SmartBank DESIGN.md

Design System Inspiration of SmartBank (株式会社スマートバンク)

Overview

Visual Theme & Atmosphere

SmartBank is a Tokyo fintech — founded April 2019, headquartered in Shinagawa, capitalised at ¥3.1bn including reserve, and licensed by the Kanto Financial Bureau as a fund-transfer and prepaid-payment operator. Its product is ワンバンク (OneBank), an AI household-budget app built around prepaid cards.

The corporate page itself is plain: black text at alpha on white, Noto Sans JP with Poppins for Latin, and almost no colour. The system underneath it is not plain at all.

371 custom properties resolve on that page, and they describe a cross-platform design system — not a website's stylesheet. Nine named colour hues with twelve steps each. A semantic layer shaped like Material 3, with base / container / on-container for every role. Font families split three ways for web, iOS and Android. A line-height matrix of three densities by twelve sizes. Seventeen durations and four easings.

It also contains two families this catalog has not seen anywhere else: one for emoji, and one per prepaid card product.

Primary tasks

• Read what the company does and reach the product or the recruitment pages.
• (The product's own surface, onebank.jp, is where these tokens are actually painted.)

Brand Narrative

SmartBank states on its own company page that it was founded in April 2019, sits in Nishi-Gotanda, Shinagawa, is led by 堀井翔太, carries ¥3.1bn of capital including reserve, and holds Kanto Financial Bureau registration as both a fund-transfer service and a prepaid-payment instrument operator. The product it names is ワンバンク — an AI household-budget app with pair cards for couples and deferred charging.

The token sheet reads like the company: a small team shipping one financial product across web, iOS and Android, who wrote down the colour of every card they issue and every emoji they draw before writing the marketing page it is served from.

Principles

• Name the hue, not the number. Nine named colour families, grey among them.
• Ship one sheet for three platforms. Font families split web / iOS / Android.
• Tokenise the product, not just the interface. Each prepaid card has its own colour family and its own three-stop gradient.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured 2026-09-22 with getComputedStyle on smartbank.co.jp. 214 of the 371 properties are colours.

There is no brand token. The system declares no --color-brand-*, so primary_color here is a reading rather than a citation: mint #1dd0b0 is what --color-state-default-selected is built from (at 8% alpha), what --color-impression-positive resolves to, what the Pair Card gradient starts on, and what the product surface paints. It is recorded as the identity on that evidence and on nothing stronger.

The scale — nine named hues, not a numbered grey

marine · mint · coral · sky · wood · grape · peach · carrot · stone, each running roughly 10 · 20 · 30 · 40 · 50 · 60 · 70 · 80 · 90 · 95 · 99. 110 tokens.

• Mint (#1dd0b0 at 60, #0fbea0 at 50) · Marine (#4e79ef) · Sky (#64b6df)
• Coral (#ff7f74) · Peach (#f48ebc) · Grape (#a97ee1)
• Wood (#c6b99d) — a warm neutral hue, which most systems do not name
• Stone (#f5f5f5 at 99) — the grey ramp, and it is a hue here like the others

The low steps are dark and desaturated (--color-scale-coral-10 is #422926, a near-black brown), so each hue spans a full light-to-dark range rather than tinting one value.

The semantic layer — role, variant, emphasis

76 tokens in a Material-3 shape:

• Impression: positive · negative · attention, each with base, container and on-container. Negative Base (#ff5c4d) with Negative Container (#ffe6e3); Attention Base (#eb923c) with Attention Container (#f9e1d1); Positive On-Container (#176256).
• Text and Border, each default / inverse × high / mid / low, all black or white at alpha — #000000de, #0006, #0003, #ffffffb3, #ffffff1a. The rendered page confirms it: the two dominant text colours are rgba(0,0,0,0.87) and rgba(0,0,0,0.6).
• State: default / inverse × hover / focused / activated / selected, again at alpha — #0000001f for hover and focus, #1dd0b014 for selected.
• --opacity-state-disabled is .38.

The two families nothing else here publishes

Emoji. --color-emoji-<hue>-{base, base-variant, container, on-container} for sun, sky, mint, marine, coral and carrot. Emoji Sun Base is #ffc919; Emoji Coral Base Variant is #ee3b1c; Emoji Marine On-Container is #34466e. A colour family for pictograms, tokenised at the same depth as the text roles.

Prepaid card. --color-prepaid-card-{my, pair, junior}-card-{base, container, on-container} — one family per card the product issues. Card Junior Base (#80cbef) with its container (#d9f1fd); Card My On-Container (#763831). Each also has a three-stop gradient set:

--gradient-prepaid-card-my-card-base      linear-gradient(68.49deg, #ff5c4d 25%, #ffbe18 100%)
--gradient-prepaid-card-pair-card-base    linear-gradient(59.54deg, #1dd0b0 30%, #89dc65 100%)
--gradient-prepaid-card-junior-card-base  linear-gradient(90deg,    #54c8e8 30%, #afe2e3 100%)

…and each gradient exists three times over, at full, 99 and 33 alpha — base, scrim, container. 18 gradient tokens for three cards.

Typography

Font Family — split by platform

--font-family-web-japanese       "Noto Sans JP"     --font-family-web-latin      "Open Sans"
--font-family-ios-japanese       "SF Pro Text"      --font-family-ios-latin      "SF Pro Text"
--font-family-android-japanese   "SF Pro Text"      --font-family-android-latin  Roboto
--font-family-web-accent         Montserrat
--font-family-web-corporate-accent  Poppins

Three platforms × two scripts, plus two accent faces. This is a token sheet for an app, not for a page — the web values are one column of it. (The Android Japanese value reads SF Pro Text, which is Apple's face; recorded as measured.)

Rendered on the corporate page: Noto Sans JP on 94 elements, Poppins on 52.

Scale — a modular ratio, computed not rounded

10.6672 · 11.6368 · 12.8 · 14.2224 · 16 · 18.2864 · 21.332 · 25.6 · 32 · 42.6672 · 64 · 128

Each step is roughly 1.14× the last, computed from a 16px base and left unrounded. The fractional values are the giveaway that this is generated from a ratio rather than picked.

Weights: normal 400 · semi-bold 600 · bold 700. The page uses 700 on 83 elements and 600 on 52 — a heavy page from a three-weight set.

Line height — a matrix, not a list

36 tokens: --line-height-{dense, normal, comfort}-<size> across all twelve sizes. At medium, dense is 20px, normal 24px and comfort 28px. Density is a first-class axis, which is how a system that has to fit both a phone screen and a marketing page handles leading.

--letter-spacing-normal is 0px and -comfort is 2px.

Layout

• One dimension scale serves everything. --dimension-scale-* runs 0, 1, 2, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 112 … 312 — 34 steps — and both the spacing and radius scales are named subsets of it.
• Alpha carries the neutrals. Text, border and state are black or white at opacity, never grey hex, so the same tokens work on either ground.
• Every role has three parts. base, container, on-container — you get the fill, the surface it sits on and the ink that goes over it, together.

Responsive Behavior

Not measured. Desktop 1440×1000 only. The line-height density axis and the platform-split font families both imply a responsive and multi-surface system; neither was observed in action.

Elevation & Depth

No shadow token exists among the 371, and none was observed on a measured control. Depth is done with container surfaces and the gradient sets.

Motion & Easing

Seventeen durations on a numeric scale — --duration-scale-0 through -1000, at 50ms · .1 · .15 · .2 · .25 · .3 · .35 · .4 · .45 · .5 · .55 · .6 · .7 · .8 · .9 · 1s — and four easings named for the kind of motion:

Enter, exit and move as separate curves is the Material convention; a fourth curve reserved for feedback, and set to linear, is not. No transition using them was observed on the measured controls.

---

Tier 1 sources: https://smartbank.co.jp/ (live corporate surface — 371 custom properties read via getComputedStyle, three controls measured at rest, hover, pressed and focus, 2026-09-22); https://onebank.jp/ (ワンバンク, SmartBank's own product surface — every one of the eight colours its census renders resolves to a named token on the corporate sheet, 2026-09-22); https://smartbank.co.jp/company (SmartBank's own company profile — founding date, headquarters, capital and regulatory registration; not cited for tokens)

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• motion.duration-50: 50ms
• motion.duration-100: .1s
• motion.duration-150: .15s
• motion.duration-200: .2s
• motion.duration-250: .25s
• motion.duration-300: .3s
• motion.duration-500: .5s
• motion.duration-1000: 1s
• motion.ease-enter: cubic-bezier(.24, 1, .32, 1)
• motion.ease-exit: cubic-bezier(.64, 0, .78, 0)
• motion.ease-move: cubic-bezier(.83, 0, .17, 1)
• motion.ease-feedback: cubic-bezier(0, 0, 1, 1)

Components

No component is declared, and that is the honest result.

The controls on smartbank.co.jp are CSS-module wrappers — _rounded-button_gtcz6_1, _circle-button_t4zv0_1 — and every one measures background: rgba(0,0,0,0) with border-width: 0. The fill and the label are painted by children. Measured across rest, hover, pressed and focus, no property changes on any of them, and focus renders outline: rgb(0, 95, 204) auto 1px — Chrome's default ring, not SmartBank's.

The same is true on the product surface: onebank.jp's two calls to action are the same _rounded-button_ class at 312px radius, transparent, unchanged on hover and pressed.

A system this complete almost certainly has components; this capture did not see them. The tokens stand on their own, and nothing is declared that was not observed.

What can be said about shape: the rendered radii are 8px on 29 elements, 32px on 27 and 312px on 17 — which are --dimension-radius-medium, --dimension-radius-two-extra-large and --dimension-scale-312, a pill built from the dimension scale rather than a radius token.

States

The system publishes them and this capture did not see them rendered. --color-state-{default,inverse}-{hover,focused,activated,selected} exist — #0000001f for hover and focus, #1dd0b014 for selected, #ffffff3d on the inverse side — and --opacity-state-disabled is .38.

Every control measured on both surfaces is a transparent wrapper that changes no property on hover, pressed or focus. So the state tokens are recorded in prose above and no component declares them, because nothing was observed using them.

Do's and Don'ts

Do

• Take a role as a set — base with its container and on-container — rather than picking one value out.
• Reach into --color-scale-<hue>-<step> when the semantic layer has no name for what you need; the hues are named, so wood-60 reads as a decision.
• Use the density axis. dense, normal and comfort line heights exist for different surfaces.

Don't

• Don't flatten the text and border tokens to grey hex. They are black and white at alpha and they are meant to composite.
• Don't invent components from the tokens. The buttons on both measured surfaces are transparent wrappers and nothing in this capture shows what a filled SmartBank button does.
• Don't copy the focus ring — it is Chrome's.

Voice & Tone

Not assessed as copy. 1,605 characters on the corporate surface.

Agent Prompt Guide

Quick Color Reference

#1dd0b0 mint · #0fbea0 mint deep · #4e79ef marine · #64b6df sky · #ff7f74 coral · #f48ebc peach · #a97ee1 grape · #c6b99d wood · #f5f5f5 stone · #ff5c4d/#ffe6e3 negative · #eb923c/#f9e1d1 attention · #176256 positive on-container · #80cbef/#d9f1fd junior card · #763831 my-card on-container · #ffc919 emoji sun · #ee3b1c emoji coral · #34466e emoji marine · text #000000 at .87/.6/.38

Example Component Prompts

• "A card tile using the Pair Card set: linear-gradient(59.54deg, #1dd0b0 30%, #89dc65 100%) fill, #176256 ink, 32px radius, 16px padding."
• "An attention banner: #f9e1d1 container, #eb923c accent, text black at 87%, 8px radius, comfort line height."