Design System Preview
KASHIYAMA

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

ONLINE ORDER DESIGN.md
01 / Colors

Color Palette

lorem ipsum dolor
Brand
Brand Blue
#618aba
lorem ipsum dolor sit
Brand Rose
#d67984
lorem ipsum(Women)
Brand Gold
#997e5d
lorem ipsum(Premium)
Dark
Dark Primary
#222222
CTA lorem / lorem / lorem
Dark Deep
#111111
lorem ipsum / lorem ipsum dolor
Text
Text Primary
#222222
lorem ipsum dolor
Text Secondary
#999999
lorem / lorem ipsum dolor
Surface & Border
Surface
#ffffff
lorem ipsum
Surface Gray
#f0f0f0
lorem ipsum dolor
Surface Light
#efefef
lorem ipsum
Border
#dddddd
lorem ipsum dolor
Semantic
Error
#c0392b
lorem / lorem ipsum dolor
02 / Typography

Typography Rules

lorem ipsum dolor sit
Section Heading — H2 English
Inter / 30px / 500 / line-height: 1.3 / letter-spacing: 0.03emEN Section
lorem ipsum dolor — H2 lorem
Noto Sans JP / 26px / 700 / line-height: 1.3 / letter-spacing: 0.04emJA Section
lorem ipsum dolor sit — H2 JA (small)
Noto Sans JP / 18px / 700 / line-height: 1.3 / letter-spacing: 0.04emJA Sub-section
lorem ipsum — H3
Noto Sans JP / 20px / 700 / line-height: 1.3 / letter-spacing: 0.05emContent Heading
lorem ipsum — H3 (small)
Noto Sans JP / 16px / 700 / line-height: 1.3 / letter-spacing: 0.05emCard Title
lorem ipsum dolor — lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed. KASHIYAMA lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. 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: loremBody
lorem ipsum dolor(lorem) — KASHIYAMA lorem ipsum dolor sit amet consectetur adipiscing. 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 lorem(lorem)
Inter / lorem ipsum / font-weight: 500 / letter-spacing: 0.08emPrice
03 / Article

Article Sample

lorem ipsum dolor
The Art of Tailoring

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet, lorem ipsum dolor sit“lorem ipsum dolor sit”lorem ipsum. lorem, lorem, lorem ipsum, lorem——lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem, lorem ipsum, lorem——lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. KASHIYAMA lorem, 200 lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor

KASHIYAMA lorem ipsum dolor, 20 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

04 / Buttons

Button Variants

lorem ipsum dolor sit
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

lorem ipsum
SUIT IMAGE
Men's Suit

lorem ipsum dolor 2 lorem

33,000 lorem(lorem)–
SHIRT IMAGE
Men's Shirt

lorem ipsum dolor

6,600 lorem(lorem)–
COAT IMAGE
Women's

lorem ipsum dolor sit amet

33,000 lorem(lorem)–
06 / Forms

Form Elements

lorem ipsum dolor
Default: border 1px solid #dddddd / radius 0px
Focus: border 1px solid #222222
lorem ipsum dolor sit amet consectetur
Error: border 1px solid #c0392b
Select: appearance: none / custom arrow
Textarea: same styling as input
07 / Elevation

Depth & Elevation

lorem ipsum
Level 0: Flat
lorem(lorem ipsum)
lorem ipsum dolor
Level 1: Surface Shift
bg: #f0f0f0
lorem ipsum dolor
Level 2: Dark Surface
bg: #222222
lorem ipsum / CTA lorem
Level 3: Accent (Blue)
bg: #618aba
lorem ipsum dolor
Level 3: Accent (Rose)
bg: #d67984
lorem ipsum dolor
Level 3: Accent (Gold)
bg: #997e5d
lorem ipsum dolor
08 / Layout

Layout & Spacing

lorem ipsum dolor sit amet
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