ONLINE STORE LIMITED --- 5,500 YEN (TAX INCL.) OR MORE FOR FREE SHIPPING

DAILY PRODUCTS

lorem ipsum dolor sit

MARKS&WEB(marksandweb.com)lorem ipsum dolor sit amet consectetur adipiscing. Noto Sans JP lorem ipsum dolor sit, letter-spacing 0.6px lorem ipsum dolor, border-radius 0 lorem ipsum CTA, Charcoal #303030 lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

VIEW MORE VIEW MORE
01 / COLORS

COLOR PALETTE

lorem ipsum dolor
PRIMARY
Charcoal
#303030
lorem ipsum / CTA / lorem ipsum dolor
Light Gray
#eeeeee
lorem ipsum / lorem / lorem ipsum
Tab Active
#c1c1c1
lorem ipsum dolor
Tab Inactive
#f3f3f3
lorem ipsum dolor sit
ACCENT
Deep Red
#831616
lorem / lorem(lorem ipsum dolor)
Newsletter Button
#cccccc
lorem ipsum dolor sit
SURFACE
White
#ffffff
lorem ipsum
Surface Light
#f3f3f3
lorem / lorem ipsum dolor
Surface Gray
#eeeeee
lorem ipsum / lorem
Border Gray
#707070
lorem ipsum dolor sit
02 / TYPOGRAPHY

TYPOGRAPHY HIERARCHY

lorem ipsum dolor sit
NEW ITEMS
lorem
26px + 14px / 400 / line-height: 1.3 / letter-spacing: normalh2 bilingual
ABOUT US
18px / 400 / line-height: 1.3 (23.4px) / letter-spacing: normalh2 about
lorem ipsum dolor sit 250mL — Collection Title
14px / 400 / line-height: 1.3 (18.2px) / letter-spacing: normalh1 collection
lorem ipsum dolor sit lorem ipsum/lorem ipsum dolor 480mL — Card Title
14px / 400 / line-height: 1.5 (21px) / letter-spacing: normalh3
MARKS&WEB lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 1.8 (28.8px) / letter-spacing: 0.6px (0.0375em)Body
ONLINE STORE LIMITED --- 5,500 YEN (TAX INCL.) OR MORE FOR FREE SHIPPING
13px / 400 / line-height: 1.3 (16.9px) / letter-spacing: 1px (0.077em)Announcement
NEW / SALE / GIFT
12px / 400 / line-height: 1.5 (18px) / letter-spacing: 1px (0.083em)Label / Badge
HOME > BODY CARE > lorem ipsum dolor — Breadcrumb
12px / 400 / line-height: 1.8 (21.6px) / letter-spacing: normalBreadcrumb
BODY CARE / HAIR CARE / FACE CARE — Nav
10px / 400 / line-height: 1.3 (13px) / letter-spacing: normalNav
03 / ARTICLE

ABOUT BOTANICAL CARE

lorem ipsum dolor sit amet

DAILY PRODUCTS

lorem ipsum dolor sit amet consectetur

lorem, lorem ipsum, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum, lorem ipsum, lorem ipsum dolor. MARKS&WEB lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

BOTANICAL INGREDIENTS

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

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

04 / BUTTONS

BUTTON VARIATIONS

lorem ipsum dolor sit
VIEW MORE
Primary / #303030 / radius 0px
VIEW MORE
Secondary / Outline / radius 0px
WISHLIST
Wishlist / #000 / radius 0px
lorem
Newsletter / #ccc / border #707070
ALL
Tab Active / #c1c1c1 / 500
BODY CARE
Tab Inactive / #f3f3f3 / 500
HAIR CARE
Tab Inactive
05 / PRODUCTS

NEW ITEMS

lorem
BODY CARE

lorem ipsum dolor sit lorem ipsum/lorem ipsum dolor 480mL

¥1,690
NEW
HAND CARE

lorem ipsum dolor sit lorem ipsum dolor 250mL

¥1,290
SALE
FACE CARE

lorem ipsum dolor sit amet consectetur 150mL

¥1,490
HAIR CARE

lorem ipsum dolor sit lorem ipsum/lorem ipsum dolor 500mL

¥1,890
06 / FORMS

FORM ELEMENTS

lorem ipsum dolor
DEFAULT
ERROR
lorem ipsum dolor sit amet consectetur adipiscing
NEWSLETTER
07 / ELEVATION

DEPTH & ELEVATION

lorem ipsum
Level 0 — Flat
lorem ipsum dolor. box-shadow lorem ipsum dolor. lorem ipsum dolor sit amet(#fff / #eee / #303030)lorem. MARKS&WEB lorem ipsum dolor sit amet consectetur
Border — 1px solid #eeeeee
lorem ipsum dolor / lorem ipsum dolor. lorem ipsum dolor sit amet consectetur
08 / LAYOUT

SPACING & GRID

lorem ipsum dolor sit amet
5px
8px
15px
20px
30px
GRID GAP: 8px
grid-template-columns: repeat(4, 1fr) / gap: 8px — lorem ipsum dolor sit amet consectetur