差し色はグラデーション 3 本だけ。角度もトークンの一部なので変えない(コーラル 68.49deg / ミント 59.54deg / スカイ 90deg)。
スケール層は 10 色 × 11 段(10 / 20 / 30 / 40 / 50 / 60 / 70 / 80 / 90 / 95 / 99)。実装では直接参照せず、必ずセマンティック層を経由する。
セマンティック色は base / base-variant / container / on-container の 4 点セットで使う。
文字サイズは 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: normal、font-feature-settings: "palt" は全域。
ワンバンクは、がんばらなくても自然とお金が整う、次世代型の AI 家計管理アプリです。銀行口座とカードをつなぐと、支出が自動で分類され、「今月あといくら使えるか」だけが画面に残ります。家計簿を「つける」作業をなくすことが設計の出発点でした。
カードは 3 種類。自分用のマイカード、パートナーと共有するペアカード、子ども向けのジュニアカード。それぞれに色とグラデーションが割り当てられていて、アプリを開いた瞬間にどのカードの話かが分かるようになっています。
プロダクト固有の概念がトークン層にそのまま入っている(--color-prepaid-card-my-card-* / --gradient-prepaid-card-pair-card-base ほか)。
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 でブランド色を使わない。
求人リスト(面 #f5f5f5 / radius 8px / 影なし)。トップページで最も出現回数の多い面色。
Default
Focus
Error
入力欄は 16px(iOS の自動ズーム回避)。エラーメッセージは negative-container の面に negative-on-container の文字。
影のトークンは存在しない。奥行きは面色(#ffffff / #f5f5f5 / #141816)で作る。実サイトで使われている影は下の 2 つだけで、値も寸法トークンから組む。
4px グリッド。--dimension-scale-* が原資、--dimension-spacing-* が意味づけ。最大値 312 はピルの radius にも使われる。
角丸はトークンに 2 / 4 / 8 / 12 / 16 / 32px があるが、実際に見えるのは 8px(カード)と 312px(ピル)だけ。
8px(カード) / 16px・32px(画像ブロック) / 312px(ピル)
コンテナは 1200px(既定)/ 960px(読み物)。ブレークポイントはモバイルファーストの min-width: 640 / 768 / 1024 / 1400px。