Design System Preview
BANDAI NAMCO Entertainment

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

* 実サイトは -apple-system / system-ui（システムフォント）と Arial（タブ）を使用。このプレビューでは Google Fonts の Noto Sans JP で代替表示しています。
タイトル一覧を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
BANDAI NAMCO Red
#d60000
ブランドカラー・アクティブタブ
Link Blue
#024baf
リンク・テキストリンク
Highlight Yellow
#ffbf00
アクセント・ハイライト
Pink Accent
#ffeeee
ピンクアクセント背景
Text
Text Primary
#333333
本文テキスト
Text Secondary
#555555
補足テキスト
Text White
#ffffff
反転テキスト・ダーク背景上
Surface & Background
Hero Black
#000000
ヒーロー・ゲームカード背景
Corporate Gray
#f2f2f2
ページ背景
Surface White
#ffffff
カード・ナビ背景
Dark Section
#444444
フッター背景
Border
#6e6e6e
ボタンボーダー
Platform Badges
PlayStation
#003791
PS5 / PS4 バッジ
Nintendo
#e60012
Switch バッジ
Steam
#1b2838
Steam バッジ
iOS
#7d3c98
iOS / App Store バッジ
Xbox
#107c10
Xbox バッジ
02 / Typography

タイポグラフィ階層

セクション見出し --- H2 (28px / 700)
28px / 700 / line-height: 1.25 (35px) / color: #333333セクション
カテゴリ見出し --- H2 Category (16px / 700)
16px / 700 / line-height: 1.25 / color: #d60000カテゴリラベル
小見出し --- H3 (16px / 700)
16px / 700 / line-height: 1.4 (22.4px) / color: #333333
Tab Label (Arial) --- Tab (16px / 700)
Arial, 16px / 700 / color: #333333 (active: #d60000)タブナビ
ナビゲーション --- Nav (13px / 700)
13px / 700 / color: #333333グローバルナビ
本文テキスト --- Body (14px)。システムフォントスタックで Web フォント不要の軽量設計。letter-spacing は normal、palt は適用されていません。ABCabc 123 PAC-MAN
14px / 400 / line-height: 1.6 (22.4px) / letter-spacing: normal / palt: なし
テキストリンク --- A (14px / 400)
14px / 400 / color: #024baf / text-decoration: underlineコンテンツエリア
03 / Product

ゲームタイトル一覧サンプル

DB
ドラゴンボール Sparking! ZERO
PS5 Xbox Steam
OP
ONE PIECE ODYSSEY
PS5 PS4 Steam
GD
GUNDAM BREAKER 4
PS5 Switch Steam
PM
PAC-MAN MEGA TUNNEL BATTLE
iOS PC
04 / Buttons

ボタンバリエーション

タイトル一覧
Arrow CTA (Red)
radius: 2px / arrow
詳細を見る
Arrow Button
radius: 2px / border #6e6e6e
アクション
Tab Active
radius: 0px / Arial / #d60000
RPG
Tab Inactive
radius: 0px / Arial
テキストリンク
Link
color: #024baf

Arrow Button Spec

Arrow CTA: bg #d60000 / text #ffffff / border-radius 2px / padding 7px 21px 7px 14px / arrow icon
Default: bg #ffffff / text #333333 / border 1px solid #6e6e6e / border-radius 2px
Tab: font-family Arial / radius 0px / padding 12px / active color #d60000

05 / Cards

カードコンポーネント

NEWS
ニュース

新作タイトル発表

最新のゲームタイトル情報をお届けします。発売日・対応プラットフォーム・予約特典をチェック。

詳しく見る →
EVENT
イベント

オンラインイベント開催

人気IPの最新情報が満載。開発者トークやゲームプレイ映像を生配信でお届けします。

詳しく見る →
UPDATE
アップデート

大型アップデート配信

追加コンテンツ・バランス調整・新機能の詳細。プレイヤーのフィードバックを反映しました。

詳しく見る →
06 / Forms

フォーム要素

デフォルト --- border: 1px solid #6e6e6e, radius: 2px
フォーカス --- border: 2px solid #d60000 (BANDAI NAMCO Red)
正しいメールアドレスを入力してください
エラー --- border-color: #cc0000
セレクト --- border: 1px solid #6e6e6e, radius: 2px
07 / Elevation

Depth & Elevation

Level 0: Flat
背景色のみ・影なし
Elevation 1
0px 2px 8px rgba(0,0,0,0.10)
Elevation 2
0px 4px 16px rgba(0,0,0,0.12)
Dark Overlay
rgba(0,0,0,0.7)
Focus Ring
2px solid #d60000
08 / Layout

レイアウト

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#000000
Hero Black
#f2f2f2
Corporate Gray
#ffffff
Surface
#444444
Footer Dark

Border Radius

2px (Arrow CTA)
0px (Tab)
2px (Input)
4px (Game Card)

Platform Badge System

PS5 PS4 Switch Xbox Steam PC iOS

font-size: 10px / font-weight: 700 / padding: 2px 8px / border-radius: 2px / プラットフォームごとに固有色