TSUCHIYA KABAN / Design System Preview
Design System Preview

Tsuchiya Kaban

土屋鞄製造所(tsuchiya-kaban.jp)から抽出したデザイントークンのカタログ。DM Sans + DNP秀英ゴシック銀の欧文優先スタック、weight 300 の極細ウェイト、letter-spacing 1.6px の広い字間、Tsuchiya Blue #004b87 のアクセントで構成された、革職人の静かな誇りを感じさせるプロダクトサイト。実サイトの computed style 実測値に基づく。

ONLINE STORE CRAFTSMANSHIP

01 / Colors

COLOR PALETTE

Brand
Tsuchiya Blue
#004b87
CTA / レビュー / アラートバー
Blue Light
rgba(0,75,135,0.2)
ウィッシュリスト UI 面
Semantic
Danger
#990000
エラー / バリデーション
On-sale
#e32c2b
セール価格
Success
#307a07
成功メッセージ
Warning
#ed8a00
警告メッセージ
Neutral / Surface
Text Primary
#222222
本文テキスト
Text Header
#1c1c1c
ヘッダー / ナビ
Background
#ffffff
ページ背景
Surface Alt
#edebe8
フッター / インフォ面
Surface Light
#f5f5f5
軽いグレー面
Surface Warm
#fef3e2
通知クリーム面
Border
#cccccc
フォーム / 区切り線

02 / Typography (measured)

TYPOGRAPHY

Spring / Summer 2026
Adobe Caslon Pro (-> Libre Caslon Text) / 38px / wt 500 / lh 1.8 / ls 1.4pxHERO H2
MAIL MAGAZINE
DM Sans + Gothic Gin / 28px / wt 700 / lh 1.8 / ls 1.6pxSECTION H2
CONTENTS
DM Sans + Gothic Gin / 28px / wt 500 / lh 1.29 / ls 1.4pxH3 SECTION
BAGS
DM Sans + Gothic Gin / 18px / wt 500 / lh 1.8 / ls 1.4pxH4 CATEGORY
Spring / Summer 2026
DM Sans / 26px / wt 300 / lh 0.98 / ls 1.6pxHERO SUBTITLE
エレガンスを、背負う。2wayバックパック「エルノー」
DM Sans + Gothic Gin / 18px / wt 300 / lh 1.42 / ls 1.6px / color: whiteHERO COPY
土屋鞄製造所は1965年、東京都足立区の小さな工房でランドセルづくりから始まりました。革の鞄を中心に、財布、名刺入れなど上質な革小物を職人の手仕事で仕立てています。素材選びから仕上げまで、一つ一つ丁寧に。時を超えて愛される、正直なものづくりを続けています。
DM Sans + Gothic Gin / 14px / wt 500 / lh 1.8 / ls 0.28px (0.02em)BODY
TSUCHIYA Class レベーヌ フォールディングウォレット ¥60,500
DM Sans + Gothic Gin / 14px / wt 300 / lh 1.8 / ls 1.6pxCAPTION / PRICE
MENS   LADIES   CONTENTS   STORE   ABOUT
DM Sans + Gothic Gin / 12px / wt 300 / lh 2.5 / ls 1.6pxNAV
偽サイトにご注意ください
DM Sans + Gothic Gin / 11px / wt 400 / ls normal / bg #004b87ALERT BAR

ABOUT TSUCHIYA KABAN
時を超えて愛される、正直なものづくり。1965年、ランドセルづくりから始まった革鞄ブランド。
CRAFTSMANSHIP

03 / Products

PRODUCT LINEUP

OTONA RANDOSERU

OTONA RANDOSERU 001

大人ランドセル
¥110,000

ディアリオ ハンディLファスナー

長財布
¥30,800
URBANO

ウルバーノ ジャケットパース

二つ折り財布
¥28,600

04 / Buttons

BUTTONS

ONLINE STORE
PRIMARY CTA
bg #004b87 / radius 0 / wt 600
CRAFTSMANSHIP
SECONDARY
border #222 / radius 0 / wt 300
SAVE TO WISHLIST
PILL BADGE
radius 12px / wt 600
ADD TO CART +
CART ACTION
border #004b87 / radius 0
SOLD OUT
DISABLED
opacity 0.6
COMING SOON
MUTED
border #ccc / text muted

05 / Cards

CARDS

トーンオイルヌメ ショルダー
¥57,200
DETAIL
クラルテ ハンドバッグ
¥96,800
DETAIL
ディアリオ ギャザーショルダー
¥60,500
DETAIL

06 / Forms

FORMS

DEFAULT -- border #cccccc / radius 0
FOCUS -- border #004b87
Valid email address required.
ERROR -- border #990000
Newsletter Registration
SUBSCRIBE

07 / Elevation & Radius

ELEVATION

Sharp corners are the default. border-radius 0 on buttons, forms, and cards echoes the precision of leather cutting. Shadows are minimal. Depth is expressed through surface color changes.

RADIUS 0
Buttons / Forms / Cards
RADIUS 12
Pill badge (wishlist)
SURFACE ALT
#edebe8 warm gray section
BRAND SURFACE
#004b87 accent section
LEVEL 0
none (flat)
LEVEL 1
--shadow-sm
LEVEL 2
--shadow
LEVEL 3
--shadow-md

08 / Layout

LAYOUT & SPACING

8px
16px
20px
32px
48px
64px
96px
CONTAINER BREAKPOINTS
XXS: 440px (27.5rem)
XS: 680px (42.5rem)
SM: 980px (61.25rem)
MD: 1150px (71.875rem)
LG: 1260px (78.75rem)
XL: 1360px (85rem)
Gutter: 48px (3rem)