Design System Preview
猿田彦珈琲 — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。Shopify テーマの CSS Custom Properties と computed style 実測値に基づく。コーヒーブラウンとソフトブルーの温かなパレット。

商品を見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand / Accent
Soft Blue
#c8dce6
アクセント・フッター bg
Coffee Brown
#9d826e
バッジ・ラベル bg
Price Brown
#663300
価格表示
Tag Light Blue
#e9f1f5
キーワードタグ bg
Text
Text Primary
#000000
本文テキスト
Product Name
rgba(0,0,0,0.75)
商品名
Text Secondary
#290200
ブランドリンク
Price
#663300
価格テキスト
Semantic / Ranking
Wishlist
#ff4500
お気に入り
Gold (No.1)
#ffc107
ランキング1位
Silver (No.2)
#9e9e9e
ランキング2位
Bronze (No.3)
#b87333
ランキング3位
Surface / Border
Background
#ffffff
ページ背景
Surface Secondary
#c8dce6
フッター・カテゴリ bg
CTA Surface
#121212
CTA ボタン bg
Border
#dfdfdf
区切り線・入力欄枠
Placeholder
#e0e0e0
画像プレースホルダー
02 / Typography

タイポグラフィ階層

SARUTAHIKO COFFEE — Display
Zen Kaku Gothic New (brothers 代替) / 28px / 700 / letter-spacing: 0.06emディスプレイ
ナビゲーション — Nav Item (15px/700)
15px / 700 / letter-spacing: 0.06emナビゲーション
お知らせ — Announcement / H1 (14px/400)
14px / 400 / letter-spacing: 0.046em告知バー
セクション見出し — Heading 2 (13px/700)
13px / 700 / letter-spacing: 0.05emセクション
本文テキスト — 猿田彦珈琲は2011年に恵比寿で創業したスペシャルティコーヒー専門店です。「たった一杯で幸せになるコーヒー屋」を目指し、生産地から焙煎、抽出まで一貫したこだわりを持っています。
14px / 500 / line-height: 1.5 / letter-spacing: 0.043em本文
¥1,680（税込）
16px / 700 / color: #663300価格
キーワードタグ・補足テキスト — Tag / Caption (10–12px)
10–12px / 400タグ
03 / Product — 商品ページ組版

商品ページサンプル

恵比寿ブレンド — 猿田彦珈琲の定番

恵比寿の街に溶け込むような、穏やかで奥行きのある味わい。チョコレートのような甘みとナッツの香ばしさが特徴の、毎日飲みたくなるブレンドコーヒーです。

テイスティングノート

焙煎度はやや深め。口に含んだ瞬間にビターチョコレートの風味が広がり、後味にはアーモンドのような香ばしさが残ります。ミルクとの相性も抜群で、カフェラテにしても豆の個性がしっかりと感じられます。

¥1,680 税込 / 200g
NEW 送料無料
飲み比べ 父の日 ギフト ブレンド
カートに入れる
04 / Buttons

ボタンバリエーション

カートに入れる
Primary CTA (#121212)
詳細を見る
Outline (shadow あり)
Wishlist (#ff4500)

Badges

NEW 送料無料 No.1 No.2 No.3

Tags

父の日 飲み比べ ギフト ドリップバッグ アイスコーヒー カフェインレス

Variant Pill

豆のまま 中挽き 細挽き
05 / Cards

商品カードグリッド

No.1 240 x 240
恵比寿ブレンド 200g
¥1,680（税込）
NEW 240 x 240
エチオピア イルガチェフェ 200g
¥1,980（税込）
送料無料 240 x 240
ドリップバッグ 飲み比べセット 10個入
¥2,400（税込）
240 x 240
カフェインレス コロンビア 200g
¥1,780（税込）
06 / Forms

フォーム要素

デフォルト — border: #dfdfdf, radius: 5px
フォーカス — border: #121212, shadow ring
正しい電話番号を入力してください
エラー — border: #c0392b
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし（商品カード通常時）
Button Shadow
0 2px 2px rgba(0,0,0,0.25)
Card Hover
0 4px 12px rgba(0,0,0,0.1)
Dropdown / Menu
0 8px 24px rgba(0,0,0,0.12)
08 / Layout

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

Spacing Scale

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

Grid

商品グリッド（Desktop）4 col / gap 8px
商品グリッド（Mobile）2 col / gap 4px