Design System

顧客体験を、
科学する。

DESIGN.md から抽出したデザイントークンの可視化カタログ。
computed style 実測値に基づく、CX プラットフォームのデザイン言語。

VIEW MORE →

01 / Colors
カラーパレット
Brand
Brand Red
#bf0023
VIEW MORE リンク・CTA
Dark Nav / Footer
#181d22
ナビ・フッター背景
Text
Text Primary
#222222
本文・見出し(白背景)
Text on Dark
#ffffff
ダーク背景上のテキスト
Text Secondary
#666666
補足テキスト(推奨)
Surface & Border
Background
#ffffff
ページ背景・カード面
Background Alt
#f7f7f7
セクション背景(推奨)
Border Default
#dddddd
標準ボーダー(推奨)
Card Shadow
左右対称ダブルシャドウ
rgba(47,60,72,0.03) ±4px 24px 40px

02 / Typography
タイポグラフィ階層
CX Platform
90px / weight 400 / line-height 1.0 / letter-spacing -0.02em / font-feature-settings: normal欧文大型ディスプレイ(ダーク背景)
ビジョンを、
実装に変える。
58px / weight 700 / line-height 1.45 / letter-spacing 0.11emHero H1(日本語)
Our Services
21px / weight 700 / line-height 1.0 / letter-spacing 0.067emセクション英語ラベル
サービス一覧
20px / weight 700 / line-height 1.0 / letter-spacing 0.07emセクション日本語ラベル
顧客との関係を深め、事業を成長させるためのデータと、チームが動けるインサイトを提供します。
21px / weight 400 / line-height 1.8 / letter-spacing 0.12emBody Lead(リードコピー)
CX プラットフォーム KARTE は、顧客1人ひとりのデータをリアルタイムに収集・分析し、パーソナライズされた体験を提供するための基盤です。EC サイト、アプリ、実店舗にわたるすべての接点を横断的に把握できます。
14px / weight 400 / line-height 1.9 / letter-spacing 0.1em / font-feature-settings: "tnum"本文(標準)
KARTE  |  ソリューション  |  導入事例
14px / weight 400〜700 / line-height 1.65 / letter-spacing 0.06em / color #ffffffNav Link(ダーク背景)
プロダクト   会社情報   プライバシーポリシー
12px / weight 400 / line-height 1.65 / letter-spacing 0.07em / font-feature-settings: "palt"Footer Nav

CX プラットフォームが変える、顧客との関係

データに基づいた顧客体験の設計は、もはや先進企業の専有物ではありません。KARTE はすべての企業が「顧客を理解する力」を持てる世界を目指します。

なぜ CX が競争優位になるのか

現代の消費者は、購買体験そのものを評価します。価格や機能が同等であれば、「どれだけ自分を理解してくれているか」が選ばれる理由になります。KARTE はリアルタイムデータを活用し、1人ひとりに合ったメッセージとタイミングで接点を作ります。

蓄積されたデータは、A/B テストやパーソナライゼーションルールへと自動的に反映されます。マーケターはコーディングなしに施策を実装し、結果を即日確認できます。

データドリブンな意思決定を支える基盤

KARTE が提供するのは、ツールではなくインフラです。ページビューからアプリ内行動、コールセンターのログまで、あらゆる接点のデータを統合し、チームが共通の顧客像を持てる状態を作ります。

詳しい事例は こちらをご覧ください →


04 / Buttons & CTA
CTA・リンクバリエーション
VIEW MORE →
Primary CTA(Text Link Red)
詳しく見る
Text Link(Plain)
VIEW MORE →
CTA Link Red(on Dark)
ソリューションを見る
Text Link White(on Dark)
※ Plaid コーポレートサイトにはピルボタン CTA はなく、テキストリンクが主要アクション。

PRODUCT

KARTE for App

アプリのユーザー行動をリアルタイムで解析。プッシュ通知・アプリ内メッセージを最適なタイミングで届けます。

VIEW MORE →
PRODUCT

KARTE Datahub

BIツールや外部データと統合し、マーケティングデータを一元管理。SQL で自由に分析できるデータ基盤を構築します。

VIEW MORE →
CASE STUDY

導入事例:大手 EC プラットフォーム

KARTE 導入後、パーソナライゼーションにより CVR が 132% 向上。顧客単価の改善にも寄与しました。

VIEW MORE →

06 / Forms
フォーム要素(3状態)
デフォルト — border: #dddddd, radius: 4px, height: 44px
フォーカス — border: #222222, box-shadow: rgba(34,34,34,0.12)
正しいメールアドレスを入力してください
エラー — border: #bf0023 (Brand Red), box-shadow: rgba(191,0,35,0.12)

Level 0 — Flat
border: 1px solid #dddddd
影なし
Level 1 — Card Shadow
rgba(47,60,72,0.03) -4px 24px 40px 0px,
rgba(47,60,72,0.03) 4px 24px 40px 0px
(左右対称ダブルシャドウ)
Level 2 — Dropdown
0 8px 24px rgba(47,60,72,0.08)
ドロップダウン・ポップオーバー
Level 3 — Modal
0 16px 48px rgba(47,60,72,0.12)
モーダル・ダイアログ

08 / Layout
レイアウト原則
Container Max Width 1200px
Card Padding 52px 50px 55px(上 / 左右 / 下)
Spacing Scale(推奨 8px グリッド)
XS 8px
S 16px
M 24px
L 48px
XL 80px
XXL 120px
Card Grid(3-Column)
Card 1
Card 2
Card 3