Design System Preview

Thoughtful Leather Products for a Modern Era

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor #707070 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem ipsum dolor.

Check Products View All

01 / Colors

Color Palette

Brand

Brand Gray

#707070

--colorBtnPrimary / lorem ipsum dolor

Brand Gray Dim

#636363

--colorBtnPrimaryDim / lorem

Cart Accent

#ff4f33

--colorCartDot / lorem ipsum dolor

Text

Body Text

#707070

lorem ipsum dolor

Emphasis

#000000

lorem / lorem ipsum

Near Black

#111111

lorem ipsum dolor

Mid Gray

#505050

lorem ipsum dolor

Surface & Border

Body

#ffffff

--colorBody

Surface Light

#fafafa

--colorBodyLightDim

Surface Medium

#f5f5f5

--colorBodyMediumDim

Surface Dim

#f2f2f2

--colorBodyDim

Border

#e8e8e1

--colorBorder / lorem

Announcement

#1c1d1d

lorem ipsum dolor

02 / Typography

Typography Hierarchy

lorem ipsum dolor sit — Hero H2 (32px)

Inter / 32px / 400 / line-height: 1.2 / system fontlorem ipsum

lorem — Heading 1 (22px)

Inter / 22px / 400 / line-height: 1.2 / system fontlorem ipsum

lorem ipsum dolor — Heading 2 (20px)

Inter / 20px / 400 / line-height: 1.2 / letter-spacing: 0.1emlorem ipsum dolor

lorem ipsum — Heading 3 (18px)

Inter / 18px / 400 / line-height: 1.2lorem ipsum dolor

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

Lato + Noto Sans JP / 15px / 400 / line-height: 1.6 / letter-spacing: 0.025emlorem

Thoughtful Leather Products for a Modern Era

Lato / 15px / 400 / letter-spacing: 0.2em — lorem ipsum dolor sit amet consecteturlorem ipsum

lorem ipsum dolor — 12px lorem ipsum dolor sit amet consectetur. lorem / lorem / lorem ipsum dolor sit. objcts.io lorem ipsum dolor sit amet consectetur.

Lato + Noto Sans JP / 12px / 400 / line-height: 1.5 / letter-spacing: 0.025emlorem ipsum dolor

lorem ipsum dolor — Button (14px / 500)

Lato / 14px / 500 / letter-spacing: 0.025emCTA

03 / Products

Product Grid

Gallery Backpack

¥77,000

Slim Brief

¥66,000

Weekender

¥88,000

Zip Card Case

¥16,500

Long Wallet

¥33,000

Tote Bag

¥55,000

View All Products

04 / Buttons

Button Variations

Primary / r:5px

Checkout / r:0px

View All / r:0px

Outline / r:4px

Email / r:3px

1 2 3

Pagination / r:50%

Mixed Radius Strategy

0px = lorem CTA(Checkout, View All)— lorem ipsum dolor sit amet consectetur
3–5px = lorem ipsum(Add to Cart, Subscribe)— lorem ipsum dolor
50% = lorem ipsum dolor — lorem ipsum dolor

05 / Cards

Card Components

Gallery Backpack

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

View Details

Craftsmanship

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

Sustainability

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

Our Approach

06 / Forms

Form Elements

Newsletter Signup

Default

border: #e8e8e1 (warm) / radius: 0px

Focus

border: #707070 (brand gray)

Error

lorem ipsum dolor sit amet consectetur adipiscing

border: var(--danger)

07 / Elevation

Depth & Elevation

Level 0: Flat

lorem ipsum dolor / lorem ipsum dolor

Elevation 1

0 1px 4px rgba(0,0,0,0.06)

Elevation 2

0 4px 16px rgba(0,0,0,0.08)

Elevation 3

0 12px 32px rgba(0,0,0,0.10)

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

08 / Layout

Spacing & Radius

Spacing Scale (8px base)

Border Radius

0px

lorem CTA

3px

Email btn

4px

Outline btn

5px

Add to Cart

50%

Pagination

Content Widths

Max Content 1200px

Product Grid 940px

Article Body 680px