Design System Preview
獺祭 DASSAI

DESIGN.md から抽出したデザイントークンのカタログ。酒造りの美学を反映した、明朝体を基調とする伝統と現代の融合。

酒造りを知る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
Brand Primary
#27174b
CTA・ブランド要素
Brand Secondary
#a5afd3
アクセント・装飾
Text
Text Primary
#000000
本文テキスト
Text Secondary
#222222
補足テキスト・見出し
Text Muted
#666666
キャプション・ラベル
Surface & Border
Background Primary
#ffffff
ページ背景
Background Secondary
#f5f5f0
セクション背景(暖色系オフホワイト)
Border Default
#e0e0e0
標準ボーダー
Border Focus
#27174b
フォーカスリング
Semantic
Danger
#b22323
エラー・削除

02 / Typography

タイポグラフィ階層

獺祭の酒造り — H1 Title
Noto Serif JP / 32px / 700 / line-height: 1.0ページタイトル
磨 き の 哲 学 — H2 Section
Noto Serif JP / 27px / 400 / line-height: 1.0 / letter-spacing: 0.2em — 広いトラッキングセクション見出し
純米大吟醸 磨き二割三分 — H2 Lineup
Noto Serif JP / 32px / 400 / line-height: 1.8 / letter-spacing: 0.03em商品ラインナップ
酒米「山田錦」のこだわり — H3 Subheading
Noto Sans JP / 16px / 700 / line-height: 1.6 / color: #222小見出し
本文テキスト — 明朝体を基調にした、ゆったりとした行間の組版。line-height: 2.4 と letter-spacing: 0.1em の組み合わせで、日本酒の世界観にふさわしい格調ある読書体験を提供します。ABCabc 123
Noto Serif JP / 16px / 400 / line-height: 2.4 / letter-spacing: 0.1em — palt: なし本文
UIテキスト — ゴシック体で表示するナビゲーションやラベル、フォーム要素のテキスト。
Noto Sans JP / 16px / 400 / line-height: 1.5UI要素
ナビゲーション・補足テキスト — Nav / Small (14px)
Noto Sans JP / 14px / 400 / line-height: 1.5ナビ・補足

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

日本酒の味わい方

日本酒は温度によって味わいが大きく変化する、世界でも類まれな酒です。冷酒、常温、燗酒と、それぞれの温度帯で異なる香りと味わいが現れます。獺祭の純米大吟醸は、特に冷酒での繊細な香りが際立ちます。

獺祭の酒造り

獺祭は「酔うため、売るための酒ではなく、味わう酒を求めて」という理念のもと、山口県岩国市で酒造りを続けています。すべての酒が純米大吟醸であり、酒米には最高品質の山田錦のみを使用しています。

精米歩合へのこだわり

獺祭の代名詞ともいえる「磨き二割三分」は、精米歩合二十三パーセントまで米を磨き上げた純米大吟醸です。米の中心にある心白のみを使うことで、雑味のない透明感のある味わいが生まれます。長い時間をかけて丁寧に磨かれた山田錦は、発酵の過程で華やかな吟醸香を放ちます。

温度管理された環境で、杜氏の経験と最新のデータ分析を融合させた酒造りは、伝統と革新の象徴です。一粒の米から一滴の酒が生まれるまでの過程に、獺祭の哲学が凝縮されています。


04 / Buttons

ボタンバリエーション

購入する
Primary CTA
売り切れ
Disabled

05 / Cards

カードコンポーネント

純米大吟醸 磨き二割三分

精米歩合23%。華やかな上立ち香と、蜂蜜のようなきれいな甘みが口の中に広がります。

詳細を見る

純米大吟醸 磨き三割九分

精米歩合39%。華やかで上品な香りが特徴。蜂蜜のようなきれいな甘みと、後口のきれいさが魅力です。

詳細を見る

純米大吟醸45

精米歩合45%。米由来のやさしい甘みと柔らかな飲み口。日本酒入門にも最適な一本です。

詳細を見る

06 / Forms

フォーム要素

デフォルト — border: #e0e0e0, radius: 0px
フォーカス — border: #27174b (brand-primary)
正しいメールアドレスを入力してください
エラー — border: #b22323 (danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし — ボーダーのみ
Level 1
0 1px 3px rgba(0,0,0,0.1) — カード・ヘッダー
Level 2
0 4px 12px rgba(0,0,0,0.1) — ドロップダウン・モーダル
Focus Ring
#27174b (brand-primary)

08 / Layout

コンテンツ幅

Max Content 940px
Article Body 620px
Form Container 400px