Design System Preview
kewpie.co.jp

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

レシピを見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Kewpie Red
#e4002b
ブランドカラー。見出し・CTA・リンク
Kewpie Orange
#f18606
カテゴリ・商品アクセント
Text
Text Primary
#333333
本文テキスト
Text Secondary
#666666
補足テキスト
Text on Red
#ffffff
赤背景上のテキスト
Surface & Background
Background
#ffffff
ページ背景
Light Pink
#fff0f1
温かい面色。商品ページ
Neutral Gray
#f2f2f2
ニュートラル面色
Light Gray
#f9f9f9
より薄い面色
Warm Gray
#f2f1f1
ウォームグレー面色
Carousel Dot
#efefef
カルーセル非アクティブ

02 / Typography

タイポグラフィ階層

セクション見出し — Section Heading (h2)
30px / 400 / line-height: 1.33 / letter-spacing: 0.05em / color: #e4002bセクション見出し
更新情報の見出し — Update Heading (h3)
25px / 400 / line-height: 1.7 / color: #e4002b更新情報
おすすめアイテム見出し — Item Heading (h3)
16px / 400 / line-height: 1.6 / color: #e4002bおすすめ
小見出し — Subsection (h4)
15px / 400 / line-height: 1.7 / color: #e4002b小見出し
本文テキスト — マヨネーズやドレッシングを使った毎日のレシピ提案。食卓を彩る季節の食材と調味料の組み合わせで、簡単においしい一品が完成します。ABCabc 123
15px / 400 / line-height: 1.7 / letter-spacing: 0.05em / color: #333333本文 (p)
body デフォルト行間 — より広い行間で、ページ全体にゆったりとしたリズムを与えます。キユーピーのサイトでは body 要素に line-height: 2.0 が設定されています。
15px / 400 / line-height: 2.0 / letter-spacing: 0.05embody デフォルト
レシピカードテキスト — コンパクトな行間
15px / 400 / line-height: 1.125レシピカード
テキストリンク — Text Link (14px)
14px / 400 / line-height: 1.7 / color: #e4002bリンク
ナビゲーションリンク — Nav Link (13px / Bold)
13px / 700 / line-height: 2.0 / letter-spacing: 0.05em — 唯一のBold使用箇所ナビゲーション

レシピ・商品サンプル

🍳

ポテトサラダ

じゃがいもとキユーピーマヨネーズで作る定番レシピ。きゅうりとハムの食感がアクセント。

サラダ
🍲

たまごサンド

ふわふわたまごとマヨネーズの黄金コンビ。朝食やお弁当にぴったりの一品。

パン
🥗

シーザーサラダ

キユーピーシーザーサラダドレッシングで本格的な味わい。パルメザンチーズとクルトン添え。

ドレッシング

04 / Buttons

ボタンバリエーション

レシピを見る
Primary (pill)
bg: #e4002b / radius: 100px
取扱店舗を探す
Secondary (pill reverse)
bg: #fff / color: #e4002b
企業・IR
Outline (pill)
bg: transparent / border: #e4002b
商品カテゴリ
Orange Accent
bg: #f18606

検索コンポジット

フィルタータブ


カードコンポーネント

キユーピーマヨネーズの歴史

1925年に日本初のマヨネーズとして誕生。卵黄タイプのコクのある味わいは、世界中で愛されています。

詳しく見る →

ドレッシングの選び方

サラダの種類や食材に合わせて、最適なドレッシングを選ぶコツ。和風、イタリアン、シーザーの使い分け。

詳しく見る →

離乳食・ベビーフード

赤ちゃんの成長段階に合わせた安心・安全なベビーフード。素材の味を活かしたやさしい味わい。

詳しく見る →

06 / Forms

フォーム要素

デフォルト — border: #dddddd, radius: 8px
フォーカス — border: #e4002b (Kewpie Red)
正しい電話番号を入力してください
エラー — border: #cc0000

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。基本状態。キユーピーサイトはフラットデザインが基調
Level 1: Subtle
0 2px 8px rgba(0,0,0,0.08) — カードホバー
Level 2: Raised
0 4px 16px rgba(0,0,0,0.12) — モーダル・ポップアップ
Focus Ring
#e4002b + rgba(228,0,43,0.15) shadow

08 / Layout

レイアウト

コンテンツ幅

Main Content 960px
Article / Recipe 720px
Recipe Card Grid (3col) 960px

フォントスタック構造

1. Roboto → 英数字を描画
2. YakuHanJP → 約物(「」。、)を半角幅に置換
3. BaseFont-JP → 和文本文(サイト独自フォント)
4. Helvetica / Arial → 欧文フォールバック
5. ヒラギノ角ゴ Pro W3 → macOS フォールバック
6. メイリオ → Windows フォールバック
7. MS Pゴシック → レガシー Windows