Design System Preview
GLICO

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

* 実サイトは游ゴシック（システムフォント）を使用。このプレビューでは Google Fonts の Noto Sans JP で代替表示しています。
商品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Glico Red
#f44336
ブランドカラー・CTA・ナビ
Glico Red Deep
#dd3326
ホバー・プレス時
Pink Tint
#f38077
ライトアクセント・タグ
Text
Text Primary
#000000
本文テキスト
Text Secondary
#696969
見出し・補足テキスト
Text Content
#212121
コンテンツリンク
Text White
#ffffff
反転テキスト
Surface & Background
Warm Cream
#faf3f0
ページ背景
Surface White
#ffffff
カード・商品ブロック
Section Gray
#eeeee8
セクション背景
Light Gray
#f0f0f0
補助背景
Border
#d0d0d0
ボーダー・区切り線
Footer
Footer Navy
#27455c
フッター背景
02 / Typography

タイポグラフィ階層

ロゴテキスト --- H1 (15px / 700)
15px / 700 / color: #212121ヘッダー
セクション見出し --- H2 (16px)
16px / 700 / line-height: 1.5 (24px) / color: #696969セクション
小見出し --- H3 (16px / 1.3)
16px / 700 / line-height: 1.3 (20.8px) / color: #696969
補助見出し --- H4 (14px)
14px / 700 / line-height: 1.5 (21px) / color: #696969
ナビゲーション --- Nav (15px / 700)
15px / 700 / color: #ffffff on #f44336グローバルナビ
本文テキスト --- Body (15px)。游ゴシックを先頭に配したシステムフォントスタックで、Web フォント不要の軽量設計。letter-spacing は normal、palt は適用されていません。ABCabc 123 ポッキー PRETZ
15px / 400 / line-height: 1.7 (25.5px) / letter-spacing: normal / palt: なし
コンテンツリンク --- A (15px / 400)
15px / 400 / color: #212121コンテンツエリア
03 / Product

商品一覧サンプル

P
ポッキー チョコレート
みんなで楽しめるスティック菓子
詳しく見る →
Pr
プリッツ 旨サラダ
サクッと香ばしいスティック
詳しく見る →
B
ビスコ
おなかにやさしい乳酸菌入り
詳しく見る →
A
アーモンドピーク
香ばしいアーモンドチョコ
詳しく見る →
04 / Buttons

ボタンバリエーション

商品を見る
Primary CTA
radius: 17.5px (pill)
詳しく見る
Secondary
radius: 20px (pill)
チョコレート
Category Tab
radius: 4px
お問い合わせ
Nav CTA
radius: 20px / white bg

Pill Button Spec

Primary: bg #f44336 / text #ffffff / border-radius 17.5px / padding 8px 24px
Secondary: bg #ffffff / text #212121 / border-radius 20px / shadow 0 2px 8px rgba(0,0,0,0.1)

05 / Cards

カードコンポーネント

お菓子

ポッキーの楽しみ方

シェアハピの定番。友だちや家族と分け合える個包装タイプから、自分へのご褒美フレーバーまで。

詳しく見る →
健康

栄養と健康への取り組み

グリコは創業以来、栄養菓子の理念を大切にしています。おいしさと健康の両立を目指した商品開発を続けています。

詳しく見る →
ブランド

ゴールインマーク

両手を上げてゴールテープを切る姿。1922年から100年以上続くグリコのシンボルマークです。

詳しく見る →
06 / Forms

フォーム要素

デフォルト --- border: 1px solid #d0d0d0, radius: 4px
フォーカス --- border: 2px solid #f44336 (Glico Red)
正しいメールアドレスを入力してください
エラー --- border-color: #cc0000
セレクト --- border: 1px solid #d0d0d0, radius: 4px
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)
Elevation 3
0px 8px 24px rgba(0,0,0,0.15)
Focus Ring
2px solid #f44336
08 / Layout

レイアウト

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#faf3f0
Warm Cream
#ffffff
Surface
#eeeee8
Section Gray
#27455c
Footer

Border Radius

17.5px (Primary CTA)
20px (Secondary)
4px (Category Tab)
8px (Card)