Design System Preview

Ajinomoto

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。食とアミノ酸の科学で、世界の食と健康に貢献するブランドのデザインシステム。

* 実サイトは UD新ゴ R（body）と Noto Sans JP（見出し）を使用。このプレビューでは Google Fonts の Noto Sans JP で統一表示しています。
商品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Ajinomoto Red
#e60012
ブランドカラー・CTA・ナビ
Red Variant
#e60a12
見出しアクセント
Border Red
#cc0000
ボタンボーダー・エラー
Green
#008849
サステナビリティ
Text
Text Primary
#333333
本文テキスト
Text Secondary
#5f5f5f
補足テキスト
Text White
#ffffff
反転テキスト
Surface & Background
Background
#ffffff
ページ背景
Surface Pink
#ffefee
お知らせ・アナウンス
Section Gray
#f8f8f8
セクション背景
Light Gray
#f0f0f0
補助背景
Border
#cccccc
ボーダー・区切り線
Footer
Footer Dark
#333333
フッター背景
02 / Typography

タイポグラフィ階層

ページタイトル --- H1 (32px / 700)
32px / 700 / Noto Sans JP / line-height: 1.5 / color: #333333ページ見出し
ヒーロー見出し --- H2 (46px)
46px / 700 / Noto Sans JP / line-height: 1.3 / color: #e60a12ヒーロー
セクション見出し --- H3 (40px)
40px / 700 / Noto Sans JP / line-height: 1.3 / color: #333333セクション
小見出し --- H4 (20px / 700)
20px / 700 / Noto Sans JP / line-height: 1.5 / color: #333333
ナビゲーション --- Nav (15px / 700)
15px / 700 / color: #333333 on white / red bottom borderグローバルナビ
本文テキスト --- Body (16px)。UD新ゴ R を基本書体に据えた、ユニバーサルデザイン対応のフォントスタック。letter-spacing は normal、palt は適用されていません。ABCabc 123 味の素 Cook Do
16px / 400 / line-height: 1.5 (24px) / letter-spacing: normal / palt: なし
コンテンツ本文 --- Body Content (17px / 700)。記事やコンテンツエリアで使用される、やや大きめの太字テキスト。食とアミノ酸の科学に関する解説文などに用いられます。
17px / 700 / line-height: 1.6 (27.2px) / color: #333333コンテンツエリア
03 / Product

商品一覧サンプル

味
味の素
うま味調味料の定番
詳しく見る →
C
Cook Do
本格中華をご家庭で
詳しく見る →
ほ
ほんだし
かつおだしの風味
詳しく見る →
K
クノール
カップスープの定番
詳しく見る →
04 / Buttons

ボタンバリエーション

商品を見る
Primary CTA (Pill)
radius: 45px / border: #cc0000
詳しく見る
Secondary (Outlined Pill)
radius: 45px / border: #cc0000
サステナビリティ
Sustainability (Green Pill)
radius: 45px / border: #008849
レシピを探す
Nav Card
radius: 5px / shadow

Pill Button Spec

Primary: bg #e60012 / text #ffffff / border 1px solid #cc0000 / border-radius 45px / padding 8px 24px
Secondary: bg #ffffff / text #e60012 / border 1px solid #cc0000 / border-radius 45px
Nav Card: bg #ffffff / text #333333 / border-radius 5px / shadow 0 2px 8px rgba(0,0,0,0.1)

05 / Cards

カードコンポーネント

食

食とアミノ酸の未来

アミノ酸の研究から生まれた「おいしさ」と「健康」の知見を、世界の食文化の発展に役立てています。

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

サステナビリティへの取り組み

食資源の循環、環境負荷の低減、地域社会への貢献を通じて、持続可能な社会の実現を目指しています。

詳しく見る →
レシピ

レシピ検索

味の素パークで、毎日の献立に役立つレシピを検索。食材や調理時間から簡単に見つけられます。

詳しく見る →
06 / Forms

フォーム要素

デフォルト --- border: 1px solid #cccccc, radius: 4px
フォーカス --- border: 2px solid #e60012 (Ajinomoto Red)
正しいメールアドレスを入力してください
エラー --- border-color: #cc0000
セレクト --- border: 1px solid #cccccc, 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 #e60012
08 / Layout

レイアウト

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#ffffff
Background
#ffefee
Surface Pink
#f8f8f8
Section Gray
#333333
Footer

Border Radius

45px (Pill CTA)
45px (Outlined Pill)
5px (Nav Card)
8px (Card)