Design System Preview
MORINAGA

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

Font Note: 実サイトは 游ゴシック, "Yu Gothic", YuGothic を使用。このプレビューでは Google Fonts の Noto Sans JP（weight 500 / 700）で代替表示しています。デフォルト font-weight は 500（Medium） です。
商品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Morinaga Red
#b6002a
ブランドカラー・CTA・フッター
Allergy Blue
#003f9a
アレルギー情報ボタン
Green
#468254
サステナビリティ・アクセント
Text
Text Primary
#000000
本文テキスト
Text Secondary
#666666
補足テキスト・ラベル
Text Tertiary
#707070
本文バリアント
Text Sub Heading
#696969
H3・小見出し
Text White
#ffffff
反転テキスト
Link
Link Blue
#3860be
テキストリンク
Surface & Background
Background
#ffffff
ページ背景
Background Section
#f7f7f7
セクション背景
Border
#e5e5e5
カード・区切り線
Border Input
#cccccc
入力欄ボーダー
Navy
#27455c
クッキーバナー背景
Footer Background
#b6002a
フッター背景
02 / Typography

タイポグラフィ階層

セクションタイトル --- H2 Main (42px / 500)
42px / 500 / line-height: 1.4 / weight 500 で上品な印象メインセクション
サブセクション見出し --- H2 Sub (32px / 700)
32px / 700 / line-height: 1.8サブセクション
サブタイトル --- P Subtitle (20px / 700)
20px / 700 / line-height: 1.4フッター CTA スタイル
小見出し --- H3 (18px / 700)
18px / 700 / line-height: 1.2 / color: #696969小見出し
ナビゲーション --- Nav (16px / 700)
16px / 700 / line-height: 1.2 / color: #000グローバルナビ
本文テキスト --- Body (16px / 500)。游ゴシック Medium（weight 500）がデフォルト。通常の 400 より一段太い文字で、1.8 の行間と組み合わせた可読性重視の組版。letter-spacing は normal、palt は非適用。ABCabc 123
16px / 500 / line-height: 1.8 / letter-spacing: normal / palt: なし / デフォルト weight
グレーテキスト --- Body Gray (16px / 500)
16px / 500 / line-height: 1.8 / color: #707070
カテゴリラベル --- H4 (14.08px / 600)
14.08px / 600 / line-height: 1.5 / color: #696969クッキーカテゴリ
メタ情報 --- Caption (14px / 500)。タイムスタンプやラベル等の補足テキスト。
14px / 500 / color: #666666
03 / Product

商品一覧サンプル

C
チョコボール
おもちゃのカンヅメでおなじみ
商品詳細 →
H
ハイチュウ
果汁たっぷりソフトキャンディ
商品詳細 →
D
ダース
12粒の本格チョコレート
商品詳細 →
K
森永ミルクキャラメル
1913年発売のロングセラー
商品詳細 →
キャンペーン一覧 アレルギー情報
04 / Buttons

ボタンバリエーション

商品を見る
Primary CTA
radius: 100px (pill)
詳しく見る
Secondary
radius: 100px (pill)
アレルギー情報
Allergy
bg: #003f9a / pill
OK
Cookie OK
radius: 2px
設定
Cookie Settings
radius: 2px / outline

Button Spec

Primary: bg #b6002a / text #ffffff / border-radius 100px / weight 500
Secondary: bg #ffffff / text #b6002a / border 1px solid #b6002a
Allergy: bg #003f9a / text #ffffff / radius 100px

05 / Cards

カードコンポーネント

チョコレート

カカオの品質へのこだわり

世界各地のカカオ産地から厳選した豆を使用。独自のロースト技術で、チョコレート本来の深い味わいを引き出しています。

詳しく見る →
サステナビリティ

カカオ農家支援プログラム

持続可能なカカオ生産を目指し、産地の農家と協力。品質向上と生活改善の両立に取り組んでいます。

詳しく見る →
キャンペーン

おもちゃのカンヅメ

チョコボールのエンゼルマークを集めて応募。金のエンゼルなら1枚、銀のエンゼルなら5枚で届きます。

詳しく見る →
06 / Forms

フォーム要素

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

Depth & Elevation

Level 0: Flat
影なし・ボーダーのみ
Elevation 1
0px 1px 3px rgba(0,0,0,0.10)
Elevation 2
0px 2px 8px rgba(0,0,0,0.12)
Elevation 3
0px 4px 16px rgba(0,0,0,0.14)
Focus Ring
2px solid #b6002a
08 / Layout

レイアウト

Content Width

Max Width 1200px
Section Padding 48px

Section Backgrounds

#ffffff
Default
#f7f7f7
Section
#b6002a
Footer

Border Radius

100px (Primary CTA)
100px (Allergy)
2px (Cookie)
8px (Cards)
4px (Inputs)

Font Weight Scale

Aa あいう 500
Medium --- デフォルト
Aa あいう 600
SemiBold --- H4 カテゴリ
Aa あいう 700
Bold --- 見出し・ナビ