人々が本当に欲しかったものをつくる。

Make things people truly wanted.

App Store Google Play
Colorsカラーパレット
Ink(CTA)
rgba(0,0,0,.87)
文字・黒ピルの面。面積で見た実質のブランド色
Interactive Base
#1dd0b0
--color-interactive-base(mint 60)アプリのプライマリ
Background
#ffffff
ページ地色(原典は未指定。実装では明示する)
Surface(list)
#f5f5f5
stone 99。求人・記事カードの面
Background Accent
#f9f6f2
wood 99。温かみのある生成りの面
Background Inverse
#141816
stone 10。反転セクションの地
Inverse Accent
#424645
stone 30。反転面の中の面
Border Mid
rgba(0,0,0,.2)
入力欄の罫。High は rgba(0,0,0,.4) でフォーカスリング

差し色はグラデーション 3 本だけ。角度もトークンの一部なので変えない(コーラル 68.49deg / ミント 59.54deg / スカイ 90deg)。

coral 100
68.49deg #ff5c4d 25% → #ffbe18
ヒーロー見出しのグラデーション文字/マイカード
mint 100
59.54deg #1dd0b0 30% → #89dc65
ペアカード
sky 100
90deg #54c8e8 30% → #afe2e3
ジュニアカード

スケール層は 10 色 × 11 段(10 / 20 / 30 / 40 / 50 / 60 / 70 / 80 / 90 / 95 / 99)。実装では直接参照せず、必ずセマンティック層を経由する。

mint
coral
sun
wood(温かみのある面)
stone(無彩色)
grape(AI)

セマンティック色は base / base-variant / container / on-container の 4 点セットで使う。

口座を連携しました 今月の予算を超えそうです カードの有効期限切れ キャンペーン中 AI が支出を分類しました 選択中
Typographyタイポグラフィ

文字サイズは 128 ÷ n(n = 1〜12)の調和数列。隣の段との比が 2/1, 3/2, 4/3, 5/4, 6/5, 7/6, 8/7, 9/8, 10/9, 11/10, 12/11 で並ぶ。line-height は px 指定・4 の倍数(comfort を既定に使う)。letter-spacing: normalfont-feature-settings: "palt" は全域。

five-extra-large
64px = 128/2
w700 / lh 112px
お金が整う。
four-extra-large
42.6672px ≒ 128/3
w700 / lh 72px
がんばらなくても
three-extra-large
32px = 128/4
w700 / lh 64px
ワンバンク
two-extra-large(Poppins)
25.6px = 128/5
w600 / lh 48px
Product
extra-small(和文サブ)
12.8px = 128/10
w700 / lh 24px / mid
プロダクト情報
extra-large
21.332px ≒ 128/6
w400 / lh 40px
次世代型の AI 家計管理アプリ。
large
18.2864px ≒ 128/7
w400 / lh 32px
収支を自動で分類し、使っていい金額だけを見せます。
medium(本文)
16px = 128/8
w400 / lh 28px
ワンバンクは、がんばらなくても自然とお金が整う、次世代型の AI 家計管理アプリです。銀行口座やカードをつなぐだけで、日々の支出が自動で整理されていきます。
small(body 既定)
14.2224px ≒ 128/9
w400 / lh 28px
「スマートバンクのことを全体的に知りたい」という方に、事業・組織・カルチャーをまとめた資料をご用意しています。
extra-small
12.8px = 128/10
w400 / lh 24px
※ 一部の金融機関は連携に対応していません。
two-extra-small
11.6368px ≒ 128/11
w700 / lh 20px
小ピルボタンのラベル
three-extra-small
10.6672px ≒ 128/12
w400 / lh 20px
最小テキスト(注記・単位)
Productプロダクト情報

ワンバンク

ワンバンクは、がんばらなくても自然とお金が整う、次世代型の AI 家計管理アプリです。銀行口座とカードをつなぐと、支出が自動で分類され、「今月あといくら使えるか」だけが画面に残ります。家計簿を「つける」作業をなくすことが設計の出発点でした。

カードは 3 種類。自分用のマイカード、パートナーと共有するペアカード、子ども向けのジュニアカード。それぞれに色とグラデーションが割り当てられていて、アプリを開いた瞬間にどのカードの話かが分かるようになっています。

マイカード
•••• 4321
ペアカード
•••• 8765
ジュニアカード
•••• 2109

プロダクト固有の概念がトークン層にそのまま入っている(--color-prepaid-card-my-card-* / --gradient-prepaid-card-pair-card-base ほか)。

Buttonsボタン

radius は 312px(--dimension-scale-312)の完全なピル。面色は原典どおり background-image: linear-gradient(#000, #000) で塗っている(matte / gradient を 1 プロパティで切り替えるため)。

matte / neutral — Small 8px 24px / Medium 12px 32px / Large 16px 48px

matte / inverse ・ gradient(mint / coral)・ disabled(opacity: .38)。フォーカスは outline: 2px solid rgba(0,0,0,.4); outline-offset: 2px でブランド色を使わない。

Cardsカード

求人リスト(面 #f5f5f5 / radius 8px / 影なし)。トップページで最も出現回数の多い面色。

Formsフォーム

Default

全角で入力してください

Focus

outline 2px / offset 2px

Error

正しい電話番号を入力してください

入力欄は 16px(iOS の自動ズーム回避)。エラーメッセージは negative-container の面に negative-on-container の文字。

Elevation奥行き

影のトークンは存在しない。奥行きは面色(#ffffff / #f5f5f5 / #141816)で作る。実サイトで使われている影は下の 2 つだけで、値も寸法トークンから組む。

Level 0 — none
既定。カード・ボタンはすべてこれ
Level 1
2px 2px 8px 2px rgba(0,0,0,.1)
Sticky
0 -4px 24px rgba(0,0,0,.12)
Layoutスペーシング

4px グリッド。--dimension-scale-* が原資、--dimension-spacing-* が意味づけ。最大値 312 はピルの radius にも使われる。

2px — three-extra-small
4px — two-extra-small
8px — extra-small
12px — small
16px — medium
24px — large
32px — extra-large
48px — two-extra-large
56px — three-extra-large
72px — four-extra-large
96px — five-extra-large
128px — six-extra-large

角丸はトークンに 2 / 4 / 8 / 12 / 16 / 32px があるが、実際に見えるのは 8px(カード)と 312px(ピル)だけ

8px(カード) / 16px・32px(画像ブロック) / 312px(ピル)

コンテナは 1200px(既定)/ 960px(読み物)。ブレークポイントはモバイルファーストの min-width: 640 / 768 / 1024 / 1400px