Design System Preview
Ganzo --- Craft Luxury

DESIGN.md から抽出したデザイントークンのカタログ。Rokkitt スラブセリフ、ウォームブラウングレーパレット、広い letter-spacing による静かなラグジュアリー。computed style 実測値に基づく。

Collection DESIGN.md

01 / Colors

Color Palette

Brand / Text
Text Primary
#5b5454
本文・ナビ。ウォームブラウングレー
Text Description
#746e6e
商品説明・ボディコピー
Dark Chocolate
#433b3b
フォームラベル・チェックボックス
Button Dark
#282323
検索ボタン。最も暗いトーン
Text Muted
#a19d9d
フッターキャプション・注釈
Text Button
#7b6f6f
メルマガ送信ボタン文字色
Signature
Copyright Rose
#cdbec7
コピーライト年号。パティナの色
Surface / Border
Background
#ffffff
ページ背景
Surface Utility
#f6f5f5
ユーティリティバー背景
Surface Button
#ecebeb
メルマガ送信ボタン背景
Surface Divider
#e7e6e6
ボーダー・区切り線
Border Input
#dcdada
入力欄ボーダー
Placeholder
#d0cece
プレースホルダー
Surface Mid
#b8b5b5
スクロールインジケーター
Border Checkbox
#959191
チェックボックスボーダー

02 / Typography

Type Hierarchy

Search Input --- 20px Rokkitt
Rokkitt / 20px / 400 / line-height: 2.5 / letter-spacing: 0.1emSearch
Mail Magazine --- Section Title
Rokkitt / 16px / 400 / line-height: 1.0 / letter-spacing: 0.1emSection
日本が世界に誇る最高級のコードバンをはじめ、ブライドルレザー、シェルコードバン、ミネルバボックスなど厳選された素材を、熟練の職人が一つひとつ丁寧に仕立てます。革という素材の持つ美しさと、使い込むほどに深まる味わいを大切にしています。
Noto Sans JP / 12px / 400 / line-height: 2.17 / letter-spacing: normalDescription
Navigation Item --- Cordovan / Bridle Leather / Shell Cordovan
Rokkitt / 11px / 400 / line-height: 1.45 / letter-spacing: 0.04emNav
Submit Button Text
Rokkitt / 12px / 400 / line-height: 1.0 / letter-spacing: 0.1emButton
Footer Caption --- Crafted with Pride in Japan
Rokkitt / 10px / 400 / line-height: 1.75 / letter-spacing: 0.12emFooter
Copyright 2024 GANZO
Rokkitt / 10px / 400 / letter-spacing: 0.2em / color: #cdbec7Copyright

Spacing Scale --- Brand Signature

広い letter-spacing は GANZO のデザインの核心。段階的に字間を拡げ、静かなラグジュアリー感を演出する。

Navigation --- 0.04em
ナビゲーション。控えめだが確実に拡げている
Section Title --- 0.1em
セクションタイトル。欧文に広い字間でラグジュアリー感
Footer Caption --- 0.12em
フッター。小さなテキストに広い字間で開放感
Copyright --- 0.2em
コピーライト。最も広い字間。印章のような格式

03 / Product

Product Page --- Cordovan

Shell Cordovan
Round Zip Long Wallet

世界でも限られたタンナーのみが生産できるシェルコードバン。馬の臀部から採れるこの希少な革は、透明感のある艶と滑らかな手触りが特徴です。使い込むほどに深みを増す色の変化は、持つ人だけが知る悦びです。

Craftsmanship

一つの財布を仕上げるのに、ベテランの職人でも数日を要します。コバの処理、ステッチの均一さ、革の漉き加減。すべての工程に妥協はありません。手にした瞬間に伝わる確かな品質は、日本のものづくりの矜持です。

経年変化を見越した設計も GANZO の特徴です。新品の美しさだけでなく、5年後、10年後の姿まで考え抜かれた素材選びと仕立てが、長く寄り添える道具としての価値を生みます。


04 / Buttons

Button Variations

Submit
Mail Submit
Search
Search Submit
View Details
Outline
Secondary
Secondary

GANZO のボタンにブライトカラーは存在しない。すべて border-radius: 0px。製品が主役であり、UI は脇役に徹する。


Product Cards

Cordovan

Cordovan Round Zip Long Wallet

最高級のコードバンを贅沢に使用した長財布。職人の手仕事による美しいコバ処理。

¥110,000 (tax incl.)
Bridle Leather

Bridle Leather Bi-fold Wallet

英国伝統のブライドルレザーを使用。使い込むほどに味わいが増す二つ折り財布。

¥44,000 (tax incl.)
Minerva Box

Minerva Box Compact Wallet

イタリアの植物タンニン鞣し革。柔らかな手触りとエイジングの美しさが魅力。

¥33,000 (tax incl.)

06 / Forms

Form Elements

Search
20px / letter-spacing: 0.1em / border-bottom only
Mail Magazine
Default --- border: 1px solid #dcdada, radius: 0px
Focus --- border-color: #5b5454
Error --- border-color: #b22323

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。GANZO のデフォルト
Elevation 1
0 1px 4px rgba(91,84,84,0.08)
Elevation 2
0 4px 12px rgba(91,84,84,0.10)
Elevation 3
0 8px 24px rgba(91,84,84,0.12)

影の rgba は #5b5454 ベースのウォームトーン。純黒 rgba(0,0,0,...) は使用しない。角丸は一切なし。


08 / Layout

Spacing Scale

8px
10px
16px
32px
64px
96px