lorem ipsum dolor
lorem ipsumshop list lorem ipsuminformation lorem ipsumranking lorem ipsum dolorshopping guide
01 / Colors

Color Palette

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

Yurindo Green
#007d48
CTA / lorem ipsum dolor / lorem ipsum. 43 lorem
Deep Green
#274633
lorem ipsum dolor sit
Sage
#a8c5b8
lorem / lorem
Background
#f8f5ee
lorem ipsum.lorem ipsum
Mint Tint
#f3faf7
lorem ipsum(88 lorem). lorem / lorem ipsum
Mint Border
#c2d9c8
lorem ipsum. lorem ipsum dolor sit amet
Cream Surface
#f5f0e4
lorem ipsum / lorem ipsum dolor
Ivory
#fbfaf2
lorem ipsum
White
#ffffff
lorem ipsum. lorem ipsum dolor“lorem”lorem
Stock Available
#2b6295
“lorem ipsum”lorem
Stock None
#a35c1b
“lorem ipsum”lorem
Text Primary
#2e2a2a
lorem. lorem ipsum dolor sit amet
WordPress lorem ipsum dolor sit amet consectetur. --wp--preset--color--*(vivid-red / luminous-vivid-orange lorem)lorem--wp--preset--shadow--* lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor 1 lorem ipsum dolor sit. lorem ipsum dolor--radius: 8px lorem ipsum.
02 / Typography

Typography

lorem ipsumlorem ipsum dolor(lorem ipsum dolor sit amet consectetur), lorem Noto Sans JP loremlorem ipsum 500。palt lorem ipsum dolor sit amet consecteturletter-spacing: .08em lorem ipsum, lorem ipsum dolor sit.

Hero Heading
lorem ipsum dolor / 40px / 600
lh 1.4 / ls .06em
lorem ipsum dolor
Article H2
lorem ipsum dolor / 38px / 600
lh 1.21 / ls .08em
lorem ipsum dolor sit amet
Section H2
lorem ipsum dolor / 29px / 600
lh 1.45 / ls .04em
lorem / lorem / lorem ipsum
H3 (card)
lorem ipsum dolor / 23px / 600
lh 1.52 / ls .03em
BASEGATE lorem ipsum
H4 (label)
Noto Sans JP / 19px / 500
lh 1.26 / ls .045em / #007d48
lorem ipsum
Lead
Noto Sans JP / 27px / 500
lh 1.19 / ls .06em
6 lorem ipsum dolor sit amet consectetur
Body(lorem)
Noto Sans JP / 18px / 500
lh 1.9 / ls .08em / palt
1909 lorem, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem 1.9, lorem 0.08em. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
Nav Label
lorem ipsum dolor / 16px / 600
lh 1.0 / ls .06em
lorem ipsum dolor　lorem　lorem ipsum
Nav Link
Noto Sans JP / 15px / 500
lh 1.6 / ls .035em / #007d48
lorem ipsum dolor sit amet
Small
Noto Sans JP / 14px / 500
lh 1.9 / ls .1em
※ lorem ipsum dolor sit amet consectetur adipiscing
Eyebrow (EN)
Work Sans / 16px / 500
lh 1.0 / ls .04em
shopping guide

font-weight: 400 lorem ipsum dolor. lorem500, lorem ipsum600, lorem ipsum dolor 700.

03 / Article

lorem ipsum

lorem ipsum dolor sit32px loremloremrepeating-linear-gradient. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

lorem / lorem / loremloremlorem ipsum dolor sit ametlorem ipsum

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

lorem ipsum dolor sit

lorem 18px / lorem 1.9 / lorem 0.08em. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet.

04 / Buttons

Buttons & Chips

lorem 4px(lorem)/ 8px(lorem)/ 16px(lorem)/ 999px(lorem)lorem ipsum. lorem ipsum“lorem ipsum＋lorem ipsum＋lorem”lorem 3 lorem ipsum.

lorem ipsum lorem ipsum dolor → lorem ipsum lorem ipsum

Primary Pill lorempadding: 8px 52px 8px 24px. lorem 52px lorem ipsum dolor sit.

loremlorem / lorem / loremlorem ipsum dolorlorem ipsumlorem

loremborder-radius: 8px. lorem ipsum dolor sit, lorem ipsum dolor sit＋lorem＋lorem.

lorem ipsum — lorem ipsum dolor sit lorem ipsum — lorem ipsum dolor

lorem ipsum dolorrgba(0,125,72,.9) / rgba(41,68,84,.9), lorem8px 0 0 8px(lorem ipsum dolor).

05 / Cards

Cards

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

lorem ipsum dolor

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

lorem ipsum
BASEGATE lorem ipsum

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

lorem ipsum
BACON Books & cafe

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit 1909 lorem.

lorem ipsum
lorem lorem ipsum

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

lorem ipsum
06 / Forms

Forms

lorem ipsum dolor＋lorem ipsum＋border-radius: 4px. lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet

lorem ipsum dolor sit #007d48

lorem ipsum dolor sit amet consectetur adipiscing

lorem ipsum dolor / lorem ipsum

07 / Elevation

Depth & Elevation

lorem ipsum dolor sit. lorem ipsum dolor sit amet. WordPress lorem--wp--preset--shadow--* lorem ipsum dolor sit.

Level 0 — lorembackground: #f8f5ee
Level 1 — lorembackground: #fff; border-radius: 8px
Level 2 — lorembackground: #f3faf7; border: 1px solid #c2d9c8
Level 3 — lorem ipsum dolorbackground: rgba(46,42,42,.9)
08 / Layout

Layout

lorem ipsum 1360px(lorem ipsum dolor sit 1440px). lorem ipsum dolor 260px lorem auto-fill lorem ipsum.

max-width: 1360px
260px min
260px min
260px min
260px min
TokenValuelorem
XS8pxlorem ipsum dolor padding, lorem ipsum padding
S12pxlorem ipsum dolor sit padding
M16pxlorem ipsum dolor padding
L24pxlorem ipsum gutter, lorem ipsum
XL32pxlorem ipsum dolor
XXL48pxlorem ipsum dolor padding
RadiusValuelorem ipsum
XS4px213 lorem(lorem)
SM8px56 lorem(--radius）
Pill999px30 lorem
Round50%28 lorem
LG16px14 lorem
BreakpointWidthlorem
Mobile≤ 767px1 lorem. lorem ipsum dolor
Tablet768–1179px2 lorem
Desktop1180–1439px3–4 lorem / max-width 1360px
Wide≥ 1440px4 lorem / max-width 1440px