Confectionery Design System

lorem ipsum dolor

YOKU MOKU(yokumoku.co.jp)lorem ipsum dolor sit amet consectetur adipiscing. Yu Mincho lorem + YuGothic lorem ipsum dolor sit, lorem ipsum dolor #002063 lorem ipsum #f9f8f2 lorem ipsum dolor, h1 lorem letter-spacing 0.36em, radius 5px lorem CTA lorem 10px lorem ipsum. computed style lorem ipsum dolor.

lorem ipsum dolor sit lorem ipsum dolor

01 / COLORS

lorem ipsum dolor

Color Palette

BRAND

Brand Navy

#002063

CTA / lorem / lorem ipsum / lorem

Brand Cream

#f9f8f2

lorem ipsum / lorem ipsum

Brand Burgundy

#a00a0a

NEW lorem / lorem ipsum

Brand Crimson

#b00020

lorem CTA / lorem

ACCENT

Accent Gold

#b69469

lorem / lorem ipsum dolor

Sale Pink

#e6004f

lorem ipsum / lorem ipsum dolor

Light Navy

#ecf4ff

lorem ipsum dolor / lorem

TEXT

Text Primary

#121212

lorem ipsum dolor

Text Secondary

#767676

lorem ipsum dolor / lorem ipsum

Text Muted

#404040

lorem ipsum dolor / lorem ipsum dolor

Text on Dark

#ffffff

lorem ipsum dolor sit amet consectetur

SURFACE

Surface White

#ffffff

lorem ipsum / lorem

Surface Cream

#f9f8f2

lorem ipsum

Surface Light Navy

#ecf4ff

lorem ipsum dolor / lorem ipsum

Surface Navy

#002063

lorem ipsum / lorem ipsum dolor

Surface Light

#f2f2f2

lorem ipsum dolor

02 / TYPOGRAPHY

lorem ipsum dolor

Typography -- Yu Mincho + YuGothic dual-font system

1926

YuGothic / 48px / 600 / line-height: 1.45 / letter-spacing: 0.04emDisplay Large

lorem ipsum dolor

YuGothic / 36px / 700 / line-height: 1.45 / letter-spacing: 0.04emDisplay Medium

lorem ipsum dolor

Yu Mincho / 32px / 600 / line-height: 1.45 / letter-spacing: 0.36emH1 (page heading)

lorem ipsum dolor

Yu Mincho / 24px / 600 / line-height: 1.45 / letter-spacing: normalH2 (section heading)

Gift Collection

Assistant / 16px / 700 / line-height: 1.6 / letter-spacing: normalH2 Sub (sub-section)

lorem ipsum dolor sit

Yu Mincho / 22px / 600 / line-height: 1.59 / letter-spacing: normalH3 (collection heading)

About Us

Assistant / 18px / 700 / line-height: 1.45 / letter-spacing: normalH4 (footer heading)

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

YuGothic / 16px / 600 / line-height: 1.8 / letter-spacing: 0.04emBody Strong (description)

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

YuGothic / 14px / 500 / line-height: 1.6 / letter-spacing: 0.04emBody

lorem ipsum

YuGothic / 16px / 400 / line-height: 1.6 / letter-spacing: normalNav Link

lorem ipsum

Yu Mincho / 16px / 400 / line-height: 1.6 / letter-spacing: normalNav Mincho (mega menu)

¥1,296(lorem)

YuGothic / 14.5px / 700 / line-height: 1.3 / letter-spacing: normalPrice

NEW SALE GIFT

EB Garamond / 12px / 700 / line-height: 1.0 (NEW, GIFT) / YuGothic 12px 700 (SALE)Badge

YuGothic / 14px / 500 / line-height: 1.6 / color: #404040Footer Body

03 / PRODUCT

lorem ipsum

Product Page Sample

Gift Collection

lorem ipsum

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

lorem ipsum dolor

Ingredients

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

lorem ipsum dolor lorem ipsum dolor sit

04 / BUTTONS

lorem

Buttons -- radius 5px / weight 500

lorem ipsum dolor

Primary / filled #002063 / radius 5px

lorem ipsum

Ghost / outline #002063 / radius 5px

lorem ipsum

Light / #ecf4ff bg / radius 5px

lorem ipsum dolor

Sale CTA / #b00020 / radius 5px

NEW

Badge / #a00a0a / EB Garamond

SALE

Sale Tag / #e6004f

GIFT

Gold Badge / #b69469 / EB Garamond

ON DARK BACKGROUND

lorem ipsum dolor sit

Inverted / white bg + navy text

lorem ipsum dolor

Ghost on Dark / white outline

05 / CARDS

lorem ipsum

Product Cards -- shadow-free / radius 10px / white on cream

Product Image

NEW

CIGARE

lorem ipsum

¥1,296(lorem)

lorem ipsum dolor sit amet consectetur

Product Image

GIFT

ASSORTED

lorem lorem ipsum

¥2,160(lorem)

lorem ipsum dolor sit amet

Product Image

SANDWICH COOKIE

lorem lorem ipsum

¥1,620(lorem)

lorem ipsum dolor sit amet consectetur

Product Image

SALE

SEASONAL

lorem ipsum dolor

¥3,240(lorem)

lorem ipsum dolor sit amet consectetur