Design System Preview
KASHIYAMA

DESIGN.md から抽出したデザイントークンのカタログ。プレミアムオーダースーツブランドのミニマルで上質なデザインシステムを可視化。

ONLINE ORDER DESIGN.md

01 / Colors

Color Palette

カラーパレット
Brand
Brand Blue
#618aba
ブランドアクセント
Brand Rose
#d67984
アクセント(Women)
Brand Gold
#997e5d
アクセント(Premium)
Dark
Dark Primary
#222222
CTA背景・見出し・本文
Dark Deep
#111111
フッター・オーバーレイ
Text
Text Primary
#222222
本文テキスト
Text Secondary
#999999
補足・キャプション
Surface & Border
Surface
#ffffff
ページ背景
Surface Gray
#f0f0f0
セクション背景
Surface Light
#efefef
カード背景
Border
#dddddd
標準ボーダー
Semantic
Error
#c0392b
エラー・バリデーション

02 / Typography

Typography Rules

タイポグラフィ階層
Section Heading — H2 English
Inter / 30px / 500 / line-height: 1.3 / letter-spacing: 0.03emEN Section
セクション見出し — H2 日本語
Noto Sans JP / 26px / 700 / line-height: 1.3 / letter-spacing: 0.04emJA Section
小セクション見出し — H2 JA (small)
Noto Sans JP / 18px / 700 / line-height: 1.3 / letter-spacing: 0.04emJA Sub-section
中見出し — H3
Noto Sans JP / 20px / 700 / line-height: 1.3 / letter-spacing: 0.05emContent Heading
小見出し — H3 (small)
Noto Sans JP / 16px / 700 / line-height: 1.3 / letter-spacing: 0.05emCard Title
本文テキスト — 上質なスーツづくりには、生地の選定から縫製までの一貫した品質管理が欠かせません。KASHIYAMAのオーダースーツは、一人ひとりの体型に合わせた精密な採寸と、熟練の職人技による仕立てで、最高の着心地をお届けします。Body text at 15px with 0.04em letter-spacing and palt.
Noto Sans JP / 15px / 400 / line-height: 1.53 / letter-spacing: 0.04em / palt: ありBody
ベーステキスト(小) — KASHIYAMA のキャプションや注釈に使用されるサイズ。Body base small text at 12px.
Noto Sans JP / 12px / 400 / line-height: 1.6 / letter-spacing: 0.04emSmall / Caption
NAVIGATION LINK — Inter 14px
Inter / 14px / 500 / letter-spacing: 0.04emNav
CTA BUTTON TEXT
Noto Sans JP / 13px / 700 / letter-spacing: 0.054emCTA
33,000 円(税込)
Inter / 数値表示 / font-weight: 500 / letter-spacing: 0.08emPrice

Article Sample

記事組版サンプル
The Art of Tailoring

一着のスーツが人生を変える

オーダースーツの魅力は、既製品では得られない「自分だけのフィット感」にあります。肩幅、胸囲、ウエスト、袖丈——すべての寸法が自分の体型に合わせて仕立てられることで、スーツを着る人の佇まいそのものが変わります。

生地が語る品格

イタリアの名門ミルから取り寄せるウール生地は、手に取った瞬間にその品質がわかります。光沢、ドレープ、肌触り——上質な素材は着る人の動きに自然に寄り添い、一日を通して快適さを保ちます。KASHIYAMAでは、200種類以上の生地をご用意しています。

採寸という対話

KASHIYAMAのスタイリストは、20箇所以上のポイントを丁寧に採寸します。体型だけでなく、お客様の姿勢や動きの癖、着用シーンまでを考慮した採寸は、単なる数値の記録ではなく、理想の一着に向けた対話です。


04 / Buttons

Button Variants

ボタンバリエーション
ONLINE ORDER
Primary CTA
SHOP LIST
Outline
VIEW MORE
Text / Underline
VIEW DETAIL
Arrow Link
BLUE CTA
Brand Blue Variant
ROSE CTA
Brand Rose Variant
GOLD CTA
Brand Gold Variant

05 / Cards

Product Cards

商品カード
SUIT IMAGE
Men's Suit

オーダースーツ 2ピース

33,000 円(税込)〜
SHIRT IMAGE
Men's Shirt

オーダーシャツ

6,600 円(税込)〜
COAT IMAGE
Women's

レディースオーダースーツ

33,000 円(税込)〜

06 / Forms

Form Elements

フォーム要素
Default: border 1px solid #dddddd / radius 0px
Focus: border 1px solid #222222
正しい電話番号を入力してください
Error: border 1px solid #c0392b
Select: appearance: none / custom arrow
Textarea: same styling as input

07 / Elevation

Depth & Elevation

深度レベル
Level 0: Flat
影なし(デフォルト)
フラットデザイン
Level 1: Surface Shift
bg: #f0f0f0
セクション分離
Level 2: Dark Surface
bg: #222222
フッター・CTA帯
Level 3: Accent (Blue)
bg: #618aba
アクセントバナー
Level 3: Accent (Rose)
bg: #d67984
アクセントバナー
Level 3: Accent (Gold)
bg: #997e5d
プレミアムライン

08 / Layout

Layout & Spacing

レイアウトとスペーシング
Content Widths
Full Width 1440px
Main Content 1080px
Article 640px
Form 420px
Spacing Scale
8px
12px
16px
20px
24px
32px
48px
64px
80px
120px
Grid Demo (3-column product grid)
COL 1
COL 2
COL 3
grid-template-columns: repeat(3, 1fr) / gap: 24px / aspect-ratio: 3 / 4