Design System Preview
WHILL

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

試乗体験する DESIGN.md を読む
01 / Colors

カラーパレット

Brand
WHILL Blue
#0075b8
CTA・リンク・ブランド
Text
Dark Text
#353537
本文テキスト
Muted Blue-Gray
#b7c2cd
装飾・無効状態
Semantic
Success
#16a34a
成功・完了
Danger
#dc2626
エラー・削除
Warning
#d97706
警告・注意
Surface & Background
White
#ffffff
ページ背景
Light Surface
#fafafa
カード・セクション面
Near Black
#252525
フッター背景
Border
#d0d5da
入力欄ボーダー
02 / Typography

タイポグラフィ階層

ヒーロータイトル — Hero H1
48px / 600 / line-height: 1.1 / letter-spacing: 0.02emトップページ
Model C2
48px / 700 / line-height: 1.0 / letter-spacing: 0.02em製品名
カテゴリラベル — Label H2
20px / 700 / line-height: 1.0 / letter-spacing: 0.02emセクション
サブタイトル — Subtitle H2
20px / 400 / line-height: 1.3 / letter-spacing: 0.02emセクション
CTA見出しテキスト — P Large
24px / 700 / line-height: 1.17 / letter-spacing: 0.016em
本文テキスト — すべての人の移動を楽しくスマートにする。WHILLは、歩行領域のラストワンマイルを、パーソナルモビリティで革新します。
20px / 400 / line-height: 1.4 / letter-spacing: 0.016em本文
ベース本文 — Base Body (16px)。ナビゲーションやベーステキストに使用。
16px / 400 / line-height: 1.5 / letter-spacing: 0.02em
お問い合わせ・注釈 — Small (13px)
13px / 700 / line-height: 1.4 / letter-spacing: 0.02em
03 / Product

プロダクトページの組版サンプル

パーソナルモビリティの未来

WHILLは、すべての人の移動を楽しくスマートにするパーソナルモビリティです。直感的な操作性と洗練されたデザインで、歩行領域での移動を革新します。

製品ラインナップ

Model C2は、コンパクトなボディに先進的な機能を凝縮。前輪オムニホイールによる小回り性能と、最大18kmの航続距離を実現しています。

屋内でも屋外でも、段差や坂道もスムーズに走行。免許不要で、どなたでもすぐにご利用いただけます。ABCabc 123

04 / Buttons

ボタンバリエーション

試乗体験する
Primary CTA
詳しく見る
Secondary CTA
削除する
Danger
お問い合わせ
Small CTA
05 / Cards

カードコンポーネント

Model C2

コンパクトで高性能。前輪オムニホイールによる優れた小回り性能と、洗練されたデザインを両立。

製品詳細を見る

Model S

折りたたみ可能で持ち運びに便利。旅行先や外出先でも、自由な移動を実現するモデル。

製品詳細を見る

Model F2

軽量コンパクトな折りたたみモデル。トランクに積んで、旅先でもスマートに移動できます。

製品詳細を見る
06 / Forms

フォーム要素

デフォルト —border: #d0d5da, radius: 8px, height: 48px
フォーカス —border: #0075b8 (WHILL Blue)
エラー —border: #dc2626 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Card Shadow
3層マルチレイヤー
Dropdown
ポップオーバー
Modal
ダイアログ
Focus Ring
#0075b8 (WHILL Blue)
08 / Layout

スペーシング & レイアウト

Spacing Scale

4px
8px
16px
24px
48px
80px

Border Radius

4px
8px
40px
900px (pill)

Content Width

Container Max 1280px
Content Area 960px
Article Body 640px