Design System Preview
Asahi Beer

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

商品一覧を見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Brand Blue
#074194
--logo-color / ナビ・フッター・見出し
Attention Gold
#ffd742
--attention-color / バッジ・プロモ
Semantic
Important / Danger
#cc111a
--important-color / エラー・重要
Cookie Blue
#0033ff
Cookie同意CTA
Text
Text Primary
#333333
--text-color / 本文テキスト
Text Secondary
#666666
補足テキスト
Text White
#ffffff
ナビ・フッター上テキスト
Surface & Border
Page Background
#ffffff
ページ背景
Background
#f9f9f9
--bg-color / カード・セクション背景
Button BG
#f2f2f2
--btn-color / ボタン背景
Light Blue BG
#edf4fc
お知らせ・SNSセクション
Lighter Blue BG
#cddcf2
補助的な青背景
Border
#dfdfdf
--border-color / 区切り線
Close Btn Border
#cfcfcf
ピルボタン枠

02 / Typography -- 実測値

タイポグラフィ階層

セクション見出し -- Heading 1 (h1/h2)
36px / 700 / line-height: 1.4 / color: #074194 / palt: なしセクション見出し
サブ見出し -- Heading 2 (sub)
28px / 500 / line-height: 1.75 / palt: なしサブ見出し
小見出し -- Heading 3
28px / 400 / line-height: 1.18 / palt: なし小見出し
商品名テキスト -- Product Name (p)
16px / 700 / line-height: 1.75 / palt: なし商品カード
本文テキスト -- Body Default (16px)。日本語の基準サイズ。line-height: 1.75 でサイト全体を統一している。letter-spacing と palt は使用されていない。Noto Sans JP のデフォルトメトリクスで和欧統一。
16px / 400 / line-height: 1.75 / letter-spacing: normal / palt: なし本文
詳細テキスト -- Small Body (13px)。商品説明等の本文に使われる小さめサイズ。
13px / 400 / line-height: 1.75商品説明
フッターリンク -- Footer Link (14px)
14px / 400 / line-height: 1.75フッター
ナビリンク -- Nav Link (16px)
16px / 700 / 白文字 on #074194ヘッダーナビ

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

日本のビール文化とその進化

日本のビール産業は130年以上の歴史を持ち、常に革新を続けてきました。近年ではクラフトビールの台頭や、糖質ゼロ・プリン体ゼロといった健康志向の商品が注目を集めています。

素材へのこだわり

大麦麦芽、ホップ、水、酵母。ビールの基本となる4つの素材はそれぞれが味わいに大きく影響します。産地や品種の選定から、醸造工程の温度管理まで、あらゆる工程に最新の技術と伝統の知見が活かされています。ABCabc 123

2024年の調査によると、日本国内のビール系飲料の市場規模は約2.5兆円。新ジャンル・第三のビールを含むカテゴリ全体で見ると、多様化が加速しています。

醸造所では、伝統的な製法を守りながらも、AIやIoTを活用した品質管理が導入されつつあります。温度、湿度、発酵具合をリアルタイムで監視し、最適な条件を自動で維持する仕組みが普及しています。


04 / Buttons

ボタンバリエーション

商品を探す
Primary (Brand Blue)
キャンペーン
Attention (Gold)
もっと見る
Secondary (Gray)
重要なお知らせ
Danger / Important
閉じる
Pill (Close)
同意する
Cookie Consent
5/12 発売
Badge (Gold)
数量限定
Badge (Important)

カードコンポーネント

5/12 発売

スーパードライ 生ジョッキ缶

開けた瞬間に泡が発生するフルオープン設計。まるでお店のジョッキで飲むような爽快な泡立ち。

詳しく見る →
新商品

マルエフ 芳醇ブレンド

深いコクと華やかな香りを両立した、こだわりの醸造。麦芽の旨味を最大限に引き出しています。

詳しく見る →
糖質ゼロ

スタイルフリー パーフェクト

糖質ゼロでありながら、ビールらしい飲みごたえとキレ。健康を気にする方にもおすすめ。

詳しく見る →

06 / Forms

フォーム要素

デフォルト -- border: #dfdfdf, radius: 4px
フォーカス -- border: #074194 (Brand Blue)
20歳未満の方はご利用いただけません
エラー -- border: #cc111a (Important Red)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
--elevation-1
カード・ドロップダウン
--elevation-2
ホバー時カード
--elevation-3
モーダル・オーバーレイ
Focus Ring
#074194 (Brand Blue)

08 / Layout

スペーシング & コンテンツ幅

Spacing Scale

4px
8px
16px
24px
32px
48px

Content Widths

Main Content 1080px
Article 620px
Product Grid (3col) 940px