Design System
カゴメ デザインシステムプレビュー

自然を、おいしく、楽しく。

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

DESIGN.md を読む 商品カテゴリーはこちら

01 / Colors

カラーパレット

Brand
Kagome Red
#ee1d23
ブランドカラー・キッカー見出し・検索ボタン
Category Purple
#a768bd
カテゴリバッジ「商品」
Sustainability Gold
#e6b710
カテゴリバッジ「サステナビリティ」
Campaign Crimson
#cd2245
カテゴリバッジ「CM・キャンペーン」
Text
Text Primary
#333333
本文テキスト・コンテンツ見出し
Text Black
#000000
商品ページ見出し・ナビ項目
Text Secondary
#909090
補助テキスト・ENGLISH PAGE
Text Muted
#646464
サブラベル
Date Gray
#858584
ニュース日付
Semantic
Success
#388e3c
成功・完了
Danger
#d32f2f
エラー・削除
Warning
#f57c00
警告・注意
Surface & Background
White
#ffffff
ページ背景・カード背景
Section BG
#f6f6f6
セクション背景
Search Field BG
#e7e7e7
検索入力欄背景
Slider Inactive
#cccccc
スライダードット非アクティブ
Cookie BG
#666666
Cookie consent ボタン

02 / Typography

タイポグラフィ階層

Mission
Inter / 22px / 700 / letter-spacing: 0.12em / color: #ee1d23英語キッカー
私達の使命
Inter / 30px / 700 / line-height: 1.6 / color: #ee1d23H2 キッカー(赤)
自然を、おいしく、楽しく。
Inter / 40px / 700 / line-height: 2.0Display(ミッション文)
カゴメが目指すこれからの姿
Zen Maru Gothic / 30px / 700 / line-height: 1.4H2 MVV(丸ゴシック)
カゴメの取り組み
Inter / 30px / 700 / line-height: 1.6 / color: #333333H2 セクション
商品に関するリリース
Helvetica Neue 系 / 32px / 700 / line-height: 1.6 / color: #000000H2(商品ページ)
飲料
Helvetica Neue 系 / 24px / 700 / line-height: 1.6 / color: #000000H3(商品ページ)
商品・レシピを知りたい方へ
Inter / 18px / 700 / line-height: 1.6ナビ見出し
本文テキスト — 野菜をもっと身近に、もっと楽しく。カゴメは「自然を、おいしく、楽しく。」をテーマに、人と自然をつなぐ食の提案を続けています。トマトケチャップから始まった歩みは、いまや世界中の食卓へ。
Inter / 18px / 400 / line-height: 1.6 / letter-spacing: normalBody
キャプション — Caption (14px Bold)
Inter / 14px / 700 / line-height: 1.6
ENGLISH PAGE
Inter / 12px / 700 / color: #909090セカンダリリンク
を知りたい方へ
Inter / 10px / 700 / color: #646464サブラベル
フッター本文 — Helvetica Neue 系フォントスタック
Helvetica Neue 系 / 14px / 400 / line-height: 1.6フッター

記事ページの組版サンプル

Nutrition & Health
野菜と健康の科学

トマトに含まれるリコピンの力

リコピンは、トマトの赤い色素に含まれるカロテノイドの一種です。強い抗酸化作用を持ち、健康維持に役立つことが多くの研究で明らかになっています。カゴメは創業以来、トマトの研究に取り組み続けてきました。

毎日の食卓に野菜を

日本人の野菜摂取量は、目標とされる1日350gに対して平均約280gと、約70g不足しています。カゴメは「野菜をとろうキャンペーン」を通じて、野菜がとりやすい社会の実現を目指しています。

食を通じて社会課題を解決する

カゴメグループは、2025年のありたい姿として「食を通じて社会課題の解決に取り組み、持続的に成長できる強い企業」を掲げ、事業活動を通じたサステナビリティの実現に取り組んでいます。


04 / Buttons

ボタンバリエーション

Search Combo(左丸角 + 右丸角)
Cookie Consent
Slider Dots
ENGLISH PAGE
Language Pill Badge
商品
Category: 商品
サステナビリティ
Category: サステナビリティ
CM・キャンペーン
Category: CM・キャンペーン

05 / Cards

カードコンポーネント

Product / Recipe Card(shadow あり)
🍅
商品

トマトジュース 食塩無添加

完熟トマトのおいしさをそのままに。毎日の健康習慣に。

🥦
商品

野菜生活100

21種類の野菜と3種類の果実をブレンド。おいしく野菜を摂取。

🥕
サステナビリティ

野菜をとろうキャンペーン

日本の野菜不足を解消する取り組み。350gの野菜摂取を目指して。

Attempt Tile(shadow なし、フラット)
🌱

みんなと作るコミュニティ

カゴメファンと一緒に、野菜の楽しみ方を広げます。

🏭

カゴメの工場見学

トマトジュースができるまでを間近で体験できます。

🎁

お店では買えない特別なカゴメ

オンライン限定の商品やギフトセット。


06 / Forms

フォーム要素

デフォルト — border: #cccccc, radius: 8px
フォーカス — border: #ee1d23 (Kagome Red)
正しいメールアドレスを入力してください
エラー — border: #d32f2f (Danger)
Search Field(検索コンボ)
左丸角 #e7e7e7 + 右丸角 #ee1d23 の複合入力欄

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし(ピル CTA、取り組みカード)
Level 1: Card
2px 2px 5px #cccccc(商品・レシピ・企業カード)
Level 2: Hover
0 4px 12px rgba(0,0,0,0.10)(ホバー時)
Level 3: Modal
0 8px 24px rgba(0,0,0,0.15)(モーダル)
Overlay
rgba(0,0,0,0.6)(モーダル背景)

08 / Layout

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

Spacing Scale
5px
10px
15px
20px
32px
45px
64px
80px
Border Radius
0px
10px
24px
100px (pill)
50% (circle)
Content Widths(推奨)
Main Content 960px
Article 680px
Card Grid (3-col) 860px