Design System Preview
SAPPORO BEER

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

商品情報を見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Star Gold
#f3be00
ブランドアクセント・星のシンボル
Star Gold Dark
#d4a600
ホバー時(推奨値)
Interactive
Link Blue
#186cc2
テキストリンク
Nav Dark
#222222
ナビリンク・検索ボタン
Semantic
Notice Red
#e51b33
重要なお知らせ・アラート
Success
#1e8e3e
成功・完了(推奨値)
Warning
#d97706
警告(推奨値)
Text
Dark
#222222
見出し・ナビ
Text Primary
#333333
本文テキスト
Text Secondary
#777777
補足テキスト・キャプション
Text Muted
#aaaaaa
ユーティリティナビ
Surface & Border
Background
#ffffff
ページ背景
Surface
#f1f2f6
セクション背景
Footer Surface
#f5f6f9
フッター背景
Input Border
#dddddd
入力欄の枠線
Dropdown Border
#e4e5ec
ドロップダウン枠線
Select Border
#cccccc
セレクトボックス枠線

02 / Typography

タイポグラフィ階層

商品カテゴリ一覧 — Page Title (h1)
40px / 400 / line-height: 1.3 / letter-spacing: normalページタイトル
おすすめブランド — Section Heading (h2)
30px / 400 / line-height: 1.3 / letter-spacing: normalセクション見出し
ビール・発泡酒 — Nav Link Primary
15px / 700 / line-height: 1.3 / color: #222222グローバルナビ
カテゴリラベル — Category Label
14px / 500 / line-height: 1.0 / color: #333333カテゴリ名
本文テキスト — サッポロビールは、日本で最も歴史あるビールブランドのひとつです。1876年の創業以来、北海道の大地で育まれた麦とホップを使い、品質にこだわり続けています。「乾杯をもっとおいしく。」
14px / 400 / line-height: 1.71 / letter-spacing: normal本文
重要なお知らせ — Notice Title
14px / 400 / line-height: 1.5 / color: #e51b33重要なお知らせ
補足テキスト — キャプション・注釈(12px / line-height: 1.9)
12px / 400 / line-height: 1.9 / color: #777777注釈
ユーティリティナビ — Utility Nav
12px / 700 / line-height: 1.3 / color: #aaaaaaIR・CSR・言語切替

YakuHanJP 約物半角化デモ

YakuHanJP OFF(Noto Sans JP のみ)
「サッポロ生ビール黒ラベル」は、完璧な生ビールを目指して醸造しています。(1876年創業)
YakuHanJP ON(実サイトと同じ)
「サッポロ生ビール黒ラベル」は、完璧な生ビールを目指して醸造しています。(1876年創業)
YakuHanJP は括弧・句読点のみ半角幅で描画。それ以外の文字は Noto Sans JP にフォールバック。

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

ビール醸造と日本の四季

サッポロビールの歴史は、1876年に北海道で始まりました。厳しい冬の寒さと豊かな大地が、良質な麦とホップを育て、日本のビール文化の礎を築きました。

重要なお知らせ: 20歳未満の方の飲酒は法律で禁止されています。お酒は適量を。

素材へのこだわり

良いビールは良い素材から生まれます。大麦、ホップ、水、酵母 — この4つの原料にサッポロビールは創業以来こだわり続けています。北海道の契約農場で育てた大麦麦芽は、深いコクと豊かな風味を生み出します。

醸造工程では、仕込み・発酵・熟成の各段階で職人の経験と最新の技術を融合させています。温度管理、発酵時間、フィルタリング — すべてが「完璧な一杯」のために最適化されています。ABCabc 123


04 / Buttons

ボタンバリエーション

商品一覧
Brand Accent
検索
Dark

サッポロビールのサイトはテキストリンク中心のナビゲーション設計。filled ボタンや pill CTA は使わず、border-radius 3px の控えめなボタンを使用。


05 / Cards

カードコンポーネント

Beer

サッポロ生ビール黒ラベル

完璧な生ビールを目指して、麦のうまみと爽やかな後味が絶妙に調和した一杯。1977年の発売以来、多くのビール愛好家に支持されています。

商品詳細
Premium

ヱビスビール

ドイツ・バイエルン産アロマホップと長期熟成が生み出す、ふくよかなコクと豊かな香り。1890年から続くプレミアムビールの金字塔。

商品詳細
Craft

サッポロ SORACHI 1984

伝説のホップ「ソラチエース」を100%使用。レモングラスやヒノキを思わせる香りと深いコク。北海道生まれのクラフトビール。

商品詳細

06 / Forms

フォーム要素

デフォルト — border: #dddddd, radius: 3px
フォーカス — border: #186cc2 (Link Blue)
生年月日を入力してください
エラー — border: #e51b33 (Notice Red)
セレクト — border: #cccccc

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ(基本)
Level 1
0 2px 4px rgba(0,0,0,0.08)
Level 2
0 4px 12px rgba(0,0,0,0.10)
Level 3
0 8px 24px rgba(0,0,0,0.12)
Focus Ring
#186cc2 (Link Blue)
Surface
#f1f2f6 面で階層を表現

08 / Layout

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

Spacing Scale

4px
8px
10px
20px
40px
45px

Content Widths

Main Content 1100px (推奨)
Article Body 620px
Side Padding 40px

Border Radius

0px (基本)
3px (フォーム)
50% (星マーク)