Design System Preview
Kyash — フィンテック

DESIGN.md から抽出したデザイントークンのカタログ。Kyash Blue のブランドカラー、ヒラギノ角ゴ palt 組版、カード UI コンポーネントを可視化。computed style 実測値に基づく。

アプリをダウンロード DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Kyash Blue
--kyash-blue
#2ad1ff
ブランドカラー・ヒーロー背景
UI Blue
--ui-blue
#0d97ff
リンク・インタラクティブ
Deep Blue
--blue
#003ab8
強調・バッジ文字色
Text
Rich Black
--rich-black
#26262a
メインテキスト・見出し
Gray Secondary
--text-gray-secondary
#808084
補助テキスト・キャプション
Gray Tertiary
--text-gray-tertiary
#b8b8bc
ページネーション・ボーダー
Surface & Background
Almost White
#fdfdfd
ページ背景(body)
White
--white
#ffffff
カード・ヘッダー面
Bright BG
--fill--bright-bg
#f7f8f9
セクション背景面
Border
--fill--border-gray-tertiary
#eaeaef
薄いボーダー・区切り
Blue 100 BG
--fill--blue100-bg
#dbf0ff
薄いブルー面・バッジ背景
Blue 25 BG
--fill--blue25-bg
#f3f9ff
最も薄いブルー面・引用
Accent
Warm Red
--warm-red
#ff6a56
エラー・アクセント
Yellow
--yellow
#ffc700
バッジ・強調
Orange
--orange
#ff9a66
アクセント強調

02 / Typography — 実測値

タイポグラフィ階層

ネットショッピングや
スマホ決済が、もっと便利に
36px / W7 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: ありHero H2
Visaだから、いつものお店で使える。
32px / W7 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: ありConcept H2
スマホで利用上限や利用範囲を設定
28px / W7 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: ありSection H2
3ステップでKyashをはじめる
24px / W7 700 / line-height: 1.2 / letter-spacing: 0.5px / palt: ありSection H1
ネット決済、お店ですぐスマホで払える— W5 (500)
20px / W5 500 / line-height: 1.5 / letter-spacing: 0.5px / palt: ありSub H2 .font-secondary
審査・書類不要、カードを無料発行— W7 (700)
20px / W3 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: ありStep H3
Kyashは審査不要のVisaプリペイドカードです。スマホアプリで発行できます。入金して使えます。— W3 (300)
16px / W3 300 / line-height: 1.9 / letter-spacing: 0.5px / palt: ありH1 Description
本文テキスト — Kyashでは、日常のお買い物から公共料金の支払いまで、幅広いシーンでご利用いただけます。Visaのタッチ決済に対応しており、コンビニや飲食店でもスマートにお支払いいただけます。line-height: 1.9 の非常に広い行間で、フィンテックサービスの信頼感を演出します。
14px / W3 400 / line-height: 1.9 / letter-spacing: 0.5px / palt: ありBody
カード内見出し — 残高・明細・設定— W3 700
14px / W3 700 / line-height: 1.95 / letter-spacing: 0.5px / palt: ありH4 Card
ヘッダーナビ — ご利用ガイド サービス紹介 よくある質問
14px / W3 400 / line-height: 1.5 / color: --ui-blue #0d97ffNav Link
※ Kyash Card はVisaプリペイドカードです。ご利用の際は事前に入金が必要です。キャッシュバック等の特典内容は予告なく変更される場合があります。
12px / W3 400 / line-height: 1.9 / color: --text-gray-secondaryCaption
フッター見出し — W7 (700)
12px / W7 700 / line-height: 1.0 / letter-spacing: 0.5pxFooter Index

コンテンツ組版

Kyash Cardで決済をスマートに管理する

Kyash Card は、審査不要で発行できる Visa プリペイドカードです。スマホアプリから簡単に申し込みができ、最短数分でバーチャルカードが発行されます。コンビニエンスストア、スーパー、ネットショッピングなど、Visa 加盟店ならどこでもご利用いただけます。

ポイント: Kyash では利用明細がリアルタイムで通知されるため、家計の把握が一目でできます。利用金額・店舗名・決済日時がスマホに即時表示されます。

入金方法と残高管理

Kyash への入金方法は複数用意されています。銀行口座からの振込、コンビニ入金(セブン-イレブン・ローソン・ファミリーマート対応)、そして他の Kyash ユーザーからの送金に対応しています。入金上限は月間 120,000 円です。

※ 入金上限・利用可能額は Kyash の利用規約に基づき変更される場合があります。

Visa タッチ決済で快適なお買い物

Kyash Card は Visa のタッチ決済(Visa Contactless)に対応しています。対応端末にカードをかざすだけで決済が完了するため、暗証番号入力が不要です。スマホアプリの Kyash Pay 機能を使えば、モバイル Suica や Apple Pay との連携も可能です。

リアルタイム家計簿機能では、カテゴリごとの支出を自動で集計します。「食費」「交通費」「娯楽費」などに自動タグ付けされ、月次レポートで支出傾向を把握できます。


04 / Buttons

ボタン・機能ピル

いますぐ入金
Kyash Blue Pill
詳しく見る
Outline
ご利用ガイド →
Text Link (UI Blue)
イマすぐ入金
Feature Pill
友だちに送金
Feature Pill
Visaカードを発行
Feature Pill
利用明細を確認
Feature Pill

Feature Pill: transparent / border: 1px solid #b8b8bc / radius: 100000px / padding: 10px 15px / size: 14px / weight: 400


05 / Cards

カードコンポーネント

残高
¥ 24,580
Kyash Card Visa プリペイド
セブン-イレブン 渋谷店 2026-05-21 09:12
−¥ 748
Amazon.co.jp 2026-05-20 22:45
−¥ 3,200
入金 — 銀行口座 2026-05-19 10:00
+¥ 20,000
家計簿 — 5月
食費¥ 6,280
交通費¥ 3,140
娯楽¥ 2,200
合計支出 ¥ 15,420 / ¥ 120,000

フォーム要素 — 決済入力

デフォルト — border: #b8b8bc, radius: 8px, padding: 12px 16px
16桁の番号を入力してください
フォーカス — border: #0d97ff (--ui-blue) / box-shadow: rgba(13,151,255,0.15)
有効期限が過ぎています。カードをご確認ください。
エラー — border: #ff6a56 (--warm-red) / box-shadow: rgba(255,106,86,0.15)
カード裏面の3桁の番号をご入力ください
デフォルト

07 / Elevation — フラット基調

Depth & Elevation

Level 0: Flat
カード・ボタン
影なし、ボーダーのみ
border: 1px solid #eaeaef
--elevation-1
0 2px 4px rgba(0,0,0,0.08)
ホバー時カード
--elevation-2
0 4px 16px rgba(0,0,0,0.12)
モーダル・ポップオーバー
Focus Ring
border: --ui-blue #0d97ff
box-shadow: rgba(13,151,255,0.15)
Error Ring
border: --warm-red #ff6a56
box-shadow: rgba(255,106,86,0.15)

08 / Layout — スペーシング & コンテンツ幅

スペーシングスケール

XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
80px

コンテンツ幅

Max Container 1200px
Main Content 960px
Article / Form 640px
Card Column 440px

Border Radius

Input
8px
Card
16px
ボタン
Button / Pill
100000px