Design System Preview

UCC上島珈琲
デザインシステム

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

コーヒーを探す DESIGN.md を読む

01 / Colors

カラーパレット

Brand
UCC Red
#e60012
ブランドカラー・CTA
UCC Red Dark
#cc0010
ホバー・プレス時
Text
Text Primary
#333333
本文テキスト
Text Secondary
#666666
補足テキスト
Text Muted
#786f5a
ヘッダーリンク・カード
Surface
Background
#ffffff
ページ背景
Beige
#f2ecde
コーヒー知識セクション
Light Pink
#fef3f4
サステナビリティ
Light Gray
#f7f7f7
ニュースセクション
Border
Border Light
#eeeeee
カード・サブナビ
Border Medium
#cccccc
入力欄・強めの区切り
Divider
#d2d2d2
セクション区切り線
Semantic
Success
#27ae60
成功・完了
Danger
#c0392b
エラー・削除
Warning
#f39c12
警告・注意

02 / Typography

タイポグラフィ階層

Display — UCC上島珈琲のこだわり
Noto Sans JP / 38px / 300 / line-height: 1.25 / pkna: ありページタイトル
Section Heading — コーヒーを知る
Noto Sans JP / 30px / 300 / line-height: 1.25 / pkna: ありセクション見出し
English Label — Coffee Knowledge
Raleway / 16px / 400 / line-height: 1.75 / letter-spacing: 0.2em / UCC Red英語ラベル
Sub Heading — 産地から届くコーヒーの旅
Noto Sans JP / 20px / 400 / line-height: 1.75 / pkna: あり中見出し
Action Heading — おいしいコーヒーの淹れ方
Noto Sans JP / 22px / 500 / line-height: 1.6 / pkna: ありアクションカード
CM Heading — 新TV-CM公開中
Noto Sans JP / 18px / 600 / line-height: 1.6 / pkna: ありCM・プロモ
Body — UCC上島珈琲は1933年の創業以来、コーヒーの可能性を追求し続けています。農園から一杯のカップまで、すべてのプロセスに携わることで、最高品質のコーヒー体験をお届けします。ABCabc 0123456789
Noto Sans JP / 15px / 400 / line-height: 1.75 / pkna: あり本文・ナビ
Caption — 画像はイメージです。実際の商品とは異なる場合があります。
Noto Sans JP / 13px / 400 / line-height: 1.75 / Text Secondaryキャプション
Footer Nav — プライバシーポリシー | 利用規約 | お問い合わせ
Noto Sans JP / 12px / 400 / line-height: 1.75 (実測 4.17 は padding 含む)フッター

03 / Article

記事組版サンプル

Coffee Knowledge

コーヒー豆の焙煎度合いと味わいの関係

コーヒーの味わいは、豆の産地や品種だけでなく、焙煎の度合いによって大きく変わります。浅煎りから深煎りまで、それぞれの特徴を理解することで、自分好みの一杯に出会えるはずです。

浅煎り — ライトロースト

酸味が際立ち、フルーティーな香りが特徴です。豆本来の個性を感じたい方におすすめ。エチオピアやケニアの豆は浅煎りで飲むと、柑橘系の爽やかな風味が楽しめます。抽出温度は90〜93度が適温です。

UCCのこだわり — 焙煎技術

UCC上島珈琲では、各産地の豆に最適な焙煎プロファイルを設計。熟練の焙煎士が温度と時間を精密にコントロールし、豆の持つポテンシャルを最大限に引き出します。

中煎り — ミディアムロースト

酸味と苦味のバランスが取れた、日本で最もポピュラーな焙煎度。コクのある味わいで、ドリップコーヒーやプレスに適しています。ブラジルやコロンビアの豆との相性が良いのが特徴です。

※ 焙煎度合いの名称は業界共通の呼称に基づいています。各メーカーによって多少の違いがある場合があります。


04 / Buttons

ボタンバリエーション

コーヒーを探す
Primary CTA
radius: 0px
詳しく見る
Secondary
radius: 0px
Pill Button
radius: 18px
Page Top
Raleway
Button States
無効
Disabled

05 / Cards

カードコンポーネント

Action Cards — radius: 20px

コーヒーの淹れ方

ドリップ、プレス、エスプレッソ。各抽出方法のコツと適切な器具の選び方をご紹介します。

🌱

産地を知る

ブラジル、エチオピア、コロンビア。世界各地のコーヒー産地の特徴と風土をお伝えします。

🏠

カフェを探す

お近くのUCCカフェ・直営店をお探しいただけます。各店舗のオリジナルメニューもチェック。

News Cards — radius: 4px
2026.06.10
新商品

UCC BLACK 無糖 リニューアル発売のお知らせ

2026.05.28
イベント

UCC コーヒー博物館 夏季特別展のご案内

2026.05.15
サステナビリティ

コーヒー農園支援プロジェクト 活動報告 2026

Footer Link Cards

06 / Forms

フォーム要素

デフォルト — border: #cccccc, radius: 4px
フォーカス — border: #e60012 (UCC Red), shadow: rgba(230,0,18,0.15)
正しいメールアドレスを入力してください。
エラー — border: #c0392b (Danger)
テキストエリア — 同一スタイル

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし — CTA、フラット要素
Level 1
0 2px 8px rgba(0,0,0,0.08) — カード
Level 2
0 4px 16px rgba(0,0,0,0.10) — ドロップダウン
Level 3
0 8px 24px rgba(0,0,0,0.12) — モーダル
Focus Ring
#e60012 + rgba(230,0,18,0.15)

08 / Layout

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

Spacing Scale
4px
8px
16px
24px
40px
64px
Content Widths
Page Container 1200px
Content Area 960px
Article Body 640px
Form Max Width 400px