Design System Preview: Tsuchiya Kaban

01 / Colors

COLOR PALETTE

Brand

Tsuchiya Blue

#004b87

CTA / lorem ipsum / lorem ipsum dolor

Blue Light

rgba(0,75,135,0.2)

lorem ipsum dolor UI lorem

Semantic

Danger

#990000

lorem / lorem ipsum dolor

On-sale

#e32c2b

lorem ipsum

Success

#307a07

lorem ipsum dolor

Warning

#ed8a00

lorem ipsum dolor

Neutral / Surface

Text Primary

#222222

lorem ipsum dolor

Text Header

#1c1c1c

lorem ipsum / lorem

Background

#ffffff

lorem ipsum

Surface Alt

#edebe8

lorem ipsum / lorem ipsum

Surface Light

#f5f5f5

lorem ipsum dolor

Surface Warm

#fef3e2

lorem ipsum dolor

Border

#cccccc

lorem ipsum / lorem ipsum

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

lorem ipsum dolor, lorem. 2way lorem ipsum dolor“lorem ipsum”

DM Sans + Gothic Gin / 18px / wt 300 / lh 1.42 / ls 1.6px / color: whiteHERO COPY

lorem ipsum dolor 1965 lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. lorem ipsum dolor, lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet, lorem ipsum dolor. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

DM Sans + Gothic Gin / 14px / wt 500 / lh 1.8 / ls 0.28px (0.02em)BODY

TSUCHIYA Class lorem ipsum lorem ipsum dolor sit amet consectetur ¥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

lorem ipsum dolor sit amet

DM Sans + Gothic Gin / 11px / wt 400 / ls normal / bg #004b87ALERT BAR

03 / Products

PRODUCT LINEUP

OTONA RANDOSERU

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

lorem ipsum dolor lorem ipsum

¥57,200

DETAIL

lorem ipsum lorem ipsum dolor

¥96,800

DETAIL

lorem ipsum lorem ipsum dolor sit

¥60,500

DETAIL

06 / Forms

FORMS

Name

DEFAULT -- border #cccccc / radius 0

Email

FOCUS -- border #004b87

Email

Valid email address required.

ERROR -- border #990000

Newsletter Registration

Accept privacy policy

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)

Tsuchiya Kaban

COLOR PALETTE

TYPOGRAPHY

PRODUCT LINEUP

OTONA RANDOSERU 001

lorem ipsum lorem ipsum L lorem ipsum

lorem ipsum lorem ipsum dolor

BUTTONS

CARDS

FORMS

ELEVATION

LAYOUT & SPACING