Design System Preview
mont-bell — 日本語版

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

オンラインショップ DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Navy Dark
#082754
ブランド基調色・リンク
Teal
#004c6e
検索 CTA
Navy Medium
#003451
アラートリンク
Beige
#ece9d8
ヒーロー背景・温かみ
Text
Text Default
#333333
本文テキスト
Text Secondary
#666666
補足テキスト
Text Disabled
#999999
無効・プレースホルダー
Semantic
Success
#2a7d4f
在庫あり・注文完了
Danger
#c41e1e
エラー・在庫切れ
Warning
#b07a00
注意喚起
Surface & Border
White
#ffffff
ページ背景
Header White
rgba(255,255,255,0.98)
ヘッダー半透明
Light Gray
#f2f2f2
入力欄・カテゴリ背景
Border Default
#e0e0e0
区切り線・カード枠
02 / Typography

タイポグラフィ階層

お知らせ: 夏山フェア開催中 - 対象商品が最大30%OFF
14px / 400 / line-height: 1.19 / letter-spacing: 0.011emAlert Text
標準本文テキスト。mont-bellの全商品は厳しい品質基準をクリアしています。素材の選定から縫製、検品に至るまで一貫した品質管理体制のもと製造されています。
12.8px / 400 / line-height: 1.3 / letter-spacing: 0.012emBody
テキストリンク — 商品詳細ページへ移動します
12.8px / 400 / line-height: 1.6 / letter-spacing: 0.012em / color: #082754Link
商品カードタイトル — ストームクルーザー ジャケット
11.52px / 700 / line-height: 1.6 / letter-spacing: 0.013em / color: #082754Card Title
カード説明文テキスト。GORE-TEX Fabric採用の防水透湿ジャケット。
11.52px / 400 / line-height: 1.6 / letter-spacing: 0.013emCard Body
ナビゲーションリンク — ワイドトラッキング
11.2px / 700 / line-height: 1.4 / letter-spacing: 0.12emNav Link
キャプション — ※表示価格は税込です。送料は別途かかります。
10.24px / 400 / line-height: 1.6 / letter-spacing: 0.015emCaption
キャプション（強調） — 数量限定・在庫わずか
10.24px / 700 / line-height: 1.6 / letter-spacing: 0.015emCaption Bold
03 / Article

アウトドアギア記事サンプル

レイヤリングの基本 ― 山の天候変化に備える

山岳環境では天候が急変するため、衣服の重ね着（レイヤリング）が重要です。ベースレイヤー、ミドルレイヤー、アウターシェルの3層構造で体温調節と防風・防水を両立します。

ベースレイヤーの選び方

肌に直接触れるベースレイヤーは、吸湿速乾性に優れた素材を選びます。ジオラインやメリノウールは汗を素早く吸収・拡散し、汗冷えを防ぎます。綿素材は乾きが遅いため、山での使用は避けてください。

GORE-TEX の特性

GORE-TEX Fabricは1平方センチメートルあたり約14億個の微細な孔を持つメンブレンを使用しています。水滴より小さく水蒸気より大きいこの孔により、外部からの雨を防ぎながら内部の汗蒸気を外に逃がします。耐水圧 50,000mm 以上、透湿性 13,500g/m²/24h の性能を実現。ABC123

04 / Buttons

ボタンバリエーション

オンラインショップ
Primary (Teal CTA)
カートに入れる
Navy CTA
カテゴリから探す
Category Button
詳細を見る
Outline
在庫切れ
Danger
Category Tags
ジャケット パンツ フットウェア バックパック テント・タープ スリーピングバッグ
05 / Cards

商品カード

960 x 720
RAIN WEAR

ストームクルーザー ジャケット Men's

GORE-TEX Fabric採用。軽量コンパクトで携行性に優れたレインウェアの定番。登山からトレッキングまで幅広く対応。

¥22,880
960 x 720
SLEEPING BAG

ダウンハガー800 #3

800FPの高品質ダウンとスーパースパイラルストレッチシステムを採用。快適な寝心地と軽量性を両立した3シーズンモデル。

¥33,000
960 x 720
BACKPACK

バーサライト パック 30

超軽量素材バリスティック エアライトを使用。わずか530gの軽さで30Lの容量を実現。日帰り登山やファストハイクに最適。

¥12,100
06 / Forms

フォーム要素

デフォルト — background: #f2f2f2, border: none, radius: 0
フォーカス — box-shadow: 0 0 0 2px #004c6e (teal)
数字のみ入力してください
エラー — box-shadow: 0 0 0 2px #c41e1e (danger)
検索フォーム — input + teal CTA の組み合わせ。radius: 0
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。基本状態
Level 1
0 1px 4px rgba(0,0,0,0.08)
ヘッダー固定時
Level 2
0 4px 12px rgba(0,0,0,0.10)
ドロップダウン・メガメニュー
Focus Ring
#004c6e (teal)
フォーカス状態
08 / Layout

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

Spacing Scale
4px
8px
16px
24px
32px
48px
Content Widths
Main Container 960px
Article Content 640px
Form Max Width 400px
Border Radius
0 (Sharp)
全 CTA・入力・カード
0 0 5px 5px
ヒーロースライダー