Design System Preview

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Akzidenz-Grotesk lorem ipsum dolor Inter lorem. weight 400 lorem, border-radius 0, lorem ipsum dolor sit, lorem. computed style lorem ipsum dolor.

All Products Design.md

01 / Colors

Color Palette

Brand

Brand Accent

#dfda64

lorem ipsum dolor / lorem

Text

Text Primary

#333333

lorem ipsum dolor

Text Secondary

#595757

lorem / lorem ipsum dolor

Text on Dark

#ffffff

lorem ipsum dolor sit

Surface & Border

Background

#ffffff

lorem ipsum

Surface Tag

#f2f2f2

lorem ipsum

Tag Hover

#ededed

lorem ipsum

Border CTA

#595757

lorem ipsum CTA lorem

Border Secondary

#bfbfbf

lorem ipsum dolor

Border Light

#b9b9b9

lorem ipsum dolor sit

Banner Muted

#999999

lorem ipsum dolor sit

02 / Typography

Typography Hierarchy

Category Section Heading (h3)

18px / 400 / line-height: 1.0 / letter-spacing: 0.5px

Section Title (h2)

17px / 400 / line-height: 1.0 / letter-spacing: 0.5px

Section Title Large (h2)

16px / 400 / line-height: 1.0 / letter-spacing: 0.5px

lorem ipsum dolor — lorem ipsum, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, THREE lorem ipsum dolor sit amet consectetur adipiscing. Body / Nav (14px)

14px / 400 / line-height: 1.86 / letter-spacing: 0.5px

lorem ipsum dolor lorem ipsum dolor lorem R — Product Title (14px)

14px / 400 / line-height: 1.57 / letter-spacing: 0.5px

¥4,400 (tax included)

12px / 400 / line-height: 1.0 / letter-spacing: 0.5px — Price

lorem ipsum dolor sit amet — Footer (12px)

12px / 400 / line-height: 1.83 / letter-spacing: 0.5px

TICKER BANNER TEXT

12px / 400 / line-height: 1.2 / letter-spacing: 0.5px — Ticker on #dfda64

03 / Product

Product Showcase

Skincare

lorem ipsum dolor lorem ipsum dolor lorem R

BALANCING CLEANSING OIL R

¥4,400

Base Makeup

lorem ipsum dolor sit amet consectetur adipiscing

ANGELIC COMPLEXION PRIMER

¥4,950

Fragrance

lorem ipsum dolor 04 SAKURA

EAU DE TOILETTE 04 SAKURA

¥7,700

All Products

Holistic Beauty

THREE lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit.

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

04 / Buttons

Button Variations

Product Detail

Primary Ghost / #595757

More Detail

Secondary Ghost / #bfbfbf

skincare base makeup fragrance body care hair care

Aroma & Fragrance

Ghost on Dark / #ffffff border

05 / Cards

Card Components

Balancing Skincare

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

View Collection

Aoyama Flagship

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

Store Detail

Journal

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

06 / Forms

Form Elements

Email Address

default — border: #bfbfbf, radius: 0

Full Name

focus — border: #333333

Phone Number

error — border: #cc3333

lorem ipsum dolor sit amet consectetur

Product Category

07 / Elevation

Depth & Elevation

Level 0: Flat

shadow: none / border lorem

Hover State

border-color: #595757 lorem

Tag Surface

background: #f2f2f2 / no border

THREE lorem ipsum dolor sit amet. box-shadow lorem ipsum dolor. lorem ipsum dolor sit amet, lorem ipsum dolor, lorem ipsum dolor.

Dark Surface Demo

On Dark Background

lorem ipsum dolor sit. lorem ipsum dolor (#ffffff) lorem ipsum dolor. lorem ipsum dolor. THREE lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

Aroma & Fragrance

Design System Preview

Color Palette

Typography Hierarchy

Product Showcase

Button Variations

Card Components

Balancing Skincare

Aoyama Flagship

Journal

Form Elements

Depth & Elevation

On Dark Background

Spacing & Content Widths