Design System Preview
伊藤園 — ITO EN

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

取り組みを知る 商品を探す

01 / Colors

カラーパレット

Brand
Brand Green
#00a040
ブランドカラー・リンク色
Copyright Gray
#c9c9ba
コピーライト文字色
Text
Black (Corporate)
#000000
企業サイトの見出し・本文
Near Black (Product)
#131314
商品サイトの見出し・本文
Muted Gray
#8e9294
スライダードット・補助
Breadcrumb Gray
#879297
パンくず・プレースホルダー
Inactive Nav
#97938e
ナビカテゴリトップリンク
Semantic
Success
#00a040
成功(Brand Green 兼用)
Danger
#c62828
エラー・削除(推奨)
Warning
#e6a700
警告・注意(推奨)
Surface & Background
White
#ffffff
カード面・コンテンツ背景
Product Surface
#fbfcfc
商品サイト背景
Corporate Surface
#f6f6f3
企業サイト背景
Nav Green BG
#f1f5f0
メガメニュー面(グリーン寄り)
Tab BG
#f6f6f6
リンクボタン・検索エリア
Tab Active
#efefef
アクティブタブ背景
Footer
#edede3
フッター背景
Input BG
#dbdbd7
検索入力背景
Dark Surface
#131314
ページトップボタン・検索BG

02 / Typography

タイポグラフィ階層

商品情報 — Page Title (H1, Product)
30.6px / 900 / line-height: 1.18 / letter-spacing: normal商品サイト
企業情報 — Section H2 (Corporate)
30.6px / 700 / line-height: 1.29 / letter-spacing: normal企業サイト
ピックアップ — Section H2 (Product)
23.4px / 900 / line-height: 1.54 / letter-spacing: normal商品サイト
お知らせ — Sub H2 (Corporate)
19.8px / 700 / line-height: 1.5 / letter-spacing: normal企業サイト
伊藤園グループのニュース — H3 / Card
16.2px / 700 / line-height: 1.5 / letter-spacing: normal企業サイト
本文テキスト(商品サイト)— 世界中のお客様の「健康」に貢献し、一人ひとりの豊かな生活を支える「世界のティーカンパニー」を目指します。line-height: 1.75 のゆったりとした行間。
14.4px / 400 / line-height: 1.75 / letter-spacing: normal商品サイト
本文テキスト(企業サイト)— 世界中のお客様の「健康」に貢献し、一人ひとりの豊かな生活を支える「世界のティーカンパニー」を目指します。line-height: 2.25 の非常にゆったりとした行間。
14.4px / 400 / line-height: 2.25 / letter-spacing: normal企業サイト
補足テキスト — Caption (12.6px)
12.6px / 400 / line-height: 1.5サブナビ・補足
フッターナビ — Caption Bold (12.6px)
12.6px / 900 / line-height: 1.5商品サイト
最小テキスト — Small (9px)
9px / 400 / line-height: 1.5
Copyright (C) All Rights Reserved. ITOEN, LTD.
Barlow / 9px / 600 / letter-spacing: 0.05em / color: #c9c9baコピーライト

記事組版サンプル

日本茶の歴史と文化

日本におけるお茶の歴史は、平安時代初期に遣唐使が中国から茶の種子を持ち帰ったことに始まります。鎌倉時代には栄西禅師が「喫茶養生記」を著し、茶の効能を広く伝えました。

緑茶の製法と品種

日本の緑茶は蒸し製法が主流です。摘採した茶葉をすぐに蒸気で加熱し、酸化酵素の働きを止めることで、鮮やかな緑色と旨みを保ちます。品種としては、やぶきた種が栽培面積の約75%を占めています。近年は「さえみどり」や「つゆひかり」といった新品種も注目されています。

お茶には、カテキン、テアニン、ビタミンCなどの健康成分が豊富に含まれており、日常的な健康維持に役立つ飲料として、世界中で親しまれています。


04 / Buttons

ボタンバリエーション

検索
Search Button
閉じる
Cookie / Green
ブランドから探す
Tab Active (Product)
取扱店舗検索
Link Button (Product)
商品情報トップ
Text Link (Green)

05 / Cards

カードコンポーネント

お〜いお茶

日本の緑茶飲料のパイオニア。自然のおいしさと健康を追求し、茶葉の旨みを最大限に引き出す独自の抽出技術で作られています。

商品一覧を見る →

健康ミネラルむぎ茶

カフェインゼロで家族みんなが安心して飲める麦茶。ミネラルを含む大麦を使用し、香ばしい味わいが特徴です。

商品一覧を見る →

1日分の野菜

厚生労働省が推奨する1日の野菜摂取量350gを使用した野菜飲料。30品目の野菜を独自のブレンド技術で組み合わせています。

商品一覧を見る →

06 / Forms

フォーム要素

デフォルト — bg: #dbdbd7, border: transparent, radius: 0px
フォーカス — border: #00a040 (Brand Green), bg: #ffffff
検索キーワードを入力してください
エラー — border: #c62828 (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。全要素の基本。面の色で階層を表現
Corporate Surface
#f6f6f3 — 企業サイト背景
Footer Surface
#edede3 — フッター(一段暗い面)
Dark Surface
#131314 — ページトップ・検索BG
Focus / Accent
#00a040 (Brand Green)