Design System Preview — 八海山

DESIGN.md から抽出したデザイントークンのカタログ。書体の役割分担、0.2em の字間、角丸ゼロの造形まで、computed style の実測値に基づく。


01 / Colors
Base — 面色を持つのは札だけ
Background
#ffffff
CSSで指定されず UA 既定のキャンバスに依存
Text Primary
#000000
本文・見出し。純黒
Text Secondary
#7f7f7f
フッター・注記
Accent — 差し色は3色だけ
Mizu Blue-Gray
#9cb7be
酒類カテゴリの札。最頻出
Fuji Purple
#7c82a3
製品情報の種別
Fuji Purple 2
#7e85a6
季節限定。近似値が併存する
Kin Gold
#e4ba61
イベント・数量限定
Border
Border
#000000
ボタンの枠。本文と同じ純黒
Border Light
#979797
非選択のインジケータ

組版
02 / Typography — 実測値

見出し・リード・ボタン・ナビは明朝、本文・注記・札はゴシック Light
字間は原則 0 で、空けるときは一気に 0.2em。font-feature-settings は normal(palt を使わない)。

八海山の日本酒 — Page Heading
明朝 R / 42px / 400 / line-height: 1.26 / letter-spacing: 0大見出し
浩和蔵仕込 — Sub Heading
明朝 R / 28px / 400 / line-height: 1.26 / letter-spacing: 0サブ見出し
製品情報 — Section Label
明朝 M / 30px / 500 / line-height: 1.0 / letter-spacing: 0.2em字間を空け、行は詰める
南魚沼の豊かな自然と雪国の文化が育んできた、淡麗な酒。 — Lead (top)
明朝 M / 20px / 400 / line-height: 1.6 / letter-spacing: 0トップのリード
八海山のお酒は料理の味をひきたてるような淡麗な酒質を目標としております。 — Lead (sub)
明朝 R / 18px / 400 / line-height: 1.94 / letter-spacing: 0下層のリードだけ行間が広い
お知らせ一覧ページへ — Button Label
明朝 M / 16px / 400 / line-height: 1.6ボタンの文字
八海山のこだわり — Navigation
明朝 M / 14px / 400 / line-height: 1.0ナビも明朝
本文 — 「いい酒をより多くの人に」をかたちにした、八海醸造の真髄の酒です。雪深い南魚沼の風土が、淡麗な酒質を育てています。
ゴシック L / 14px / 400 / line-height: 1.6 / letter-spacing: 0本文の基準
純米大吟醸酒 — Category Chip
ゴシック B / 14px札の文字
飲酒は20歳になってから。飲酒運転は法律で禁止されています。 — Caption
ゴシック L / 13px / line-height: 1.62 / color: #7f7f7f注記・フッター
MORE
明朝 M / 10px / line-height: 1.6 / letter-spacing: 0.2emテキストリンク

製品情報
03 / Product — 組版サンプル

八海山のお酒は料理の味をひきたてるような淡麗な酒質を目標としております。

普通酒
清酒 八海山

「いい酒をより多くの人に」をかたちにした、八海醸造の真髄の酒です。

特別本醸造酒
特別本醸造 八海山

やわらかな口当たりと淡麗な味わい。

数量
限定
大吟醸酒
大吟醸 八海山

細かくまろやかで綺麗な味わいと、ほのかに感じる上品な甘やかさ。

季節
限定
純米大吟醸酒
純米大吟醸 八海山

透明感のある綺麗な味わいと、ふわっと広がる上品な甘やかさ。

MORE

部品
04 / Buttons & Labels
Buttons — 塗りボタンは存在しない。枠線1本だけ
お知らせ一覧ページへ 八海山ストーリー MORE
Category Chip — 角丸ゼロの矩形
普通酒 特別本醸造酒 大吟醸酒 純米大吟醸酒 雪室貯蔵酒
News Category
製品情報 八海山情報 イベント
Round Label — 唯一の円形(border-radius: 50%)
数量
限定
季節
限定

お知らせ
05 / News
2026.07.28 八海山情報 「魚沼の里」だけで出会える限定大吟醸を新発売します 2026.07.14 製品情報 純米大吟醸 八海山 のラベルをリニューアルいたしました 2026.06.30 イベント 酒蔵見学の夏季受付を開始しました

入力
06 / Forms — 3状態
Default — 枠 1px solid #979797 / 角丸 0
Focus — 枠を #000000 に締める(リングは使わない)
Error — 枠 #b23a2e

07 / Elevation — 原則として使わない
Level 0
none — 既定。ほぼすべての要素
Level 1
0 0 5px #808080 — 例外的な浮きもの

配置
08 / Layout
Spacing Scale — セクション間は 80〜120px
8
16
24
40
80
120
Container
Content
max-width: 1280px
Border Radius — 実質 0。円形の札だけが例外
0px — すべての面と枠 50%