Design System Preview
nissan.co.jp

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

WEBカタログ オンライン見積り
01 / Colors

カラーパレット

Brand
NISSAN Red
#c3002f
主要CTA・ブランド色
Dark
#1a1a1a
ヘッダー・ダークカード
Near Black
#070707
ヘッダーボタン
Text
Text Primary
#343434
見出し・主要テキスト
Text Secondary
#666666
本文テキスト
Text Muted
#8a8a8a
ミュートリンク・補助
Text Black
#000000
ナビリンク・一部本文
Surface
Background
#ffffff
ページ背景
Surface Light
#f6f6f6
タブ非活性
Surface Gray
#eeeeee
セカンダリCTA・お知らせ
Surface Notice
#f2f2f2
お知らせ背景
Semantic
Danger
#d32f2f
エラー・削除
Success
#2e7d32
成功・完了
Warning
#f57c00
警告・注意
02 / Typography

タイポグラフィ階層

人気モデルランキング --- Section H2
28px / 700 / line-height: 1.0 / letter-spacing: 0.1pxトップページ
セレナ e-POWER --- H3 Card Title
18px / 700 / line-height: 1.11 / letter-spacing: 0.1px車両カード
ボディタイプ --- Tab Label
18px / 400 / line-height: 1.0 / letter-spacing: 0.1pxタブナビゲーション
本文テキスト --- 新世代 e-POWER を搭載し、力強い加速と優れた静粛性を両立。家族みんなが快適に過ごせる広々とした室内空間と先進の安全技術を備えています。
14px / 400 / line-height: 1.57 / letter-spacing: normal本文
段落テキスト（黒） --- Body P variant
14px / 400 / line-height: 1.5 / color: #000000一部の段落
補足テキスト --- Caption (13px)
13px / 400 / line-height: 1.0 / color: #666666キャプション
小注釈 --- Small (12px) / 掲載の車両写真は実際の色味と異なる場合があります。
12px / 400 / line-height: 1.4 / color: #666666注釈・免責事項
ナビゲーションリンク --- Nav Link
14px / 400 / line-height: 1.71 / letter-spacing: 0.9px / liga: offグローバルナビ
ヘッダーボタン --- Header Button
12px / 700 / letter-spacing: 0.9px / bg: #070707ヘッダー内
03 / Product --- 車両情報サンプル

車両詳細ページの組版サンプル

セレナ e-POWER

新世代 e-POWER を搭載し、力強い加速と優れた静粛性を両立。家族みんなが快適に過ごせる広々とした室内空間と、先進の安全技術「プロパイロット」を備えた、日産のミニバンのフラッグシップモデルです。

主要スペック

パワートレインe-POWER（シリーズハイブリッド）
全長 x 全幅 x 全高4,690mm x 1,695mm x 1,870mm
乗車定員7 / 8人
駆動方式2WD / 4WD
燃費（WLTCモード）18.4km/L

プロパイロットは高速道路でのドライバーの負担を軽減する先進運転支援技術です。渋滞走行や長距離走行において、アクセル・ブレーキ・ステアリングを車両が支援します。

WEBカタログ 試乗予約
04 / Buttons

ボタンバリエーション

WEBカタログ
Primary CTA (角型)
オンライン見積り
Secondary CTA (角型)
販売店検索
Header Button
ご購入ガイド →
Guide CTA (角丸 8px)

注: NISSAN のCTAは 角型（border-radius: 0px）が基本。pill や大角丸は使用しない。ガイドCTAのみ例外的に 8px の角丸を使用。

05 / Cards

車両ラインナップカード

車両画像

セレナ

家族みんなが快適に過ごせるミニバン。e-POWER搭載で優れた燃費性能。

2,798,400円(税込)〜
WEBカタログ 見積り
車両画像

ノート

第2世代e-POWERが進化。力強い走りと静粛性を実現したコンパクトカー。

2,299,000円(税込)〜
WEBカタログ 見積り
車両画像

アリア

日産の電気自動車フラッグシップ。先進技術と上質な走りが融合。

6,591,200円(税込)〜
WEBカタログ
06 / Forms --- 試乗予約フォーム

フォーム要素

デフォルト --- border: #cccccc, radius: 0px（角型）
フォーカス --- border: #c3002f (NISSAN Red)
電話番号の形式が正しくありません
エラー --- border: #d32f2f (danger)
試乗予約する
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし（基本）
Level 1
ホバー時のカード
Level 2
ドロップダウン・メガメニュー
Level 3
モーダル・ダイアログ

基本はフラットデザイン（box-shadow: none）。立体感はダークサーフェス #1a1a1a とホワイト #ffffff のコントラストで表現。

08 / Layout

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

Spacing Scale

4px
8px
16px
25px
48px
80px

Container Width

Max Container 1200px
Content Area 940px

Border Radius Scale

0px (基本)
8px (例外)

NISSAN は角型（0px）が基本。pill や大角丸は使用しない。8px はガイドCTAの例外的使用のみ。