Design System Preview
Ganzo --- Craft Luxury

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Rokkitt lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem letter-spacing lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

Collection DESIGN.md
01 / Colors

Color Palette

Brand / Text
Text Primary
#5b5454
lorem / lorem. lorem ipsum dolor sit amet
Text Description
#746e6e
lorem ipsum / lorem ipsum dolor
Dark Chocolate
#433b3b
lorem ipsum dolor / lorem ipsum dolor
Button Dark
#282323
lorem ipsum. lorem ipsum dolor
Text Muted
#a19d9d
lorem ipsum dolor sit / lorem
Text Button
#7b6f6f
lorem ipsum dolor sit amet
Signature
Copyright Rose
#cdbec7
lorem ipsum dolor. lorem ipsum dolor
Surface / Border
Background
#ffffff
lorem ipsum
Surface Utility
#f6f5f5
lorem ipsum dolor sit amet
Surface Button
#ecebeb
lorem ipsum dolor sit amet
Surface Divider
#e7e6e6
lorem ipsum / lorem ipsum
Border Input
#dcdada
lorem ipsum dolor
Placeholder
#d0cece
lorem ipsum dolor
Surface Mid
#b8b5b5
lorem ipsum dolor sit amet
Border Checkbox
#959191
lorem ipsum dolor sit amet
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
lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.
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
02.5 / Letter Spacing

Spacing Scale --- Brand Signature

lorem letter-spacing lorem GANZO lorem ipsum dolor. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

Navigation --- 0.04em
lorem ipsum dolor. lorem ipsum dolor sit amet consectetur
Section Title --- 0.1em
lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur
Footer Caption --- 0.12em
lorem ipsum. lorem ipsum dolor sit amet consectetur
Copyright --- 0.2em
lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor
03 / Product

Product Page --- Cordovan

Shell Cordovan
Round Zip Long Wallet

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

Craftsmanship

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

lorem ipsum dolor sit amet GANZO lorem ipsum. lorem ipsum dolor sit amet, 5 lorem, 10 lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

Button Variations

Submit
Mail Submit
Search
Search Submit
View Details
Outline
Secondary
Secondary

GANZO lorem ipsum dolor sit amet consectetur. lorem border-radius: 0px. lorem ipsum dolor, UI lorem ipsum dolor.

05 / Cards

Product Cards

Cordovan

Cordovan Round Zip Long Wallet

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

¥110,000 (tax incl.)
Bridle Leather

Bridle Leather Bi-fold Wallet

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

¥44,000 (tax incl.)
Minerva Box

Minerva Box Compact Wallet

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

¥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
lorem. GANZO lorem ipsum dolor
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)

lorem rgba lorem #5b5454 lorem ipsum dolor sit amet. lorem rgba(0,0,0,...) lorem ipsum dolor. lorem ipsum dolor.

08 / Layout

Spacing Scale

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