Botanist Official

lorem ipsum dolor
lorem ipsum dolor.

BOTANIST(botanistofficial.com)lorem ipsum dolor sit amet consectetur adipiscing. Yu Gothic Pr6N + new-atten lorem ipsum dolor, font-feature-settings: normal(palt lorem), lorem ipsum dolor #e6e9ed lorem lorem ipsum dolor #1f2529 lorem ipsum dolor sit, rgba(255,255,255,0.2) lorem ipsum dolor CTA, radius 0px lorem ipsum dolor. computed style lorem ipsum dolor.

Shop Now Learn More
01 / Colors
Color Palette
lorem ipsum dolor
Brand
Gray Blue
#e6e9ed
lorem ipsum(94 lorem)
Dark Charcoal
#1f2529
lorem ipsum / lorem ipsum dolor
Text
Text Primary
#222222
lorem ipsum dolor
Text Secondary
#787b80
lorem / lorem ipsum dolor
Text Muted
#bcbfc3
lorem ipsum dolor sit
Text on Dark
#ffffff
lorem ipsum dolor sit amet
Surface
Surface Gray Blue
#e6e9ed
lorem ipsum
Surface Near White
#fcfcfc
lorem ipsum dolor
Surface Light Gray
#f0f0f0
lorem / lorem
Surface Dark
#1f2529
lorem ipsum / lorem ipsum dolor
Interactive
CTA Glass
rgba(255,255,255,0.2)
lorem CTA(lorem ipsum dolor)
Error
#c0392b
lorem ipsum dolor
02 / Typography
Typography
lorem ipsum dolor -- Yu Gothic Pr6N(lorem)+ new-atten(lorem ipsum dolor)lorem ipsum dolor / palt lorem
lorem ipsum dolor sit amet consectetur.
Yu Gothic Pr6N M / 52px / 400 / line-height: 1.35 / letter-spacing: 0.1emHero Display
lorem ipsum dolor.
Yu Gothic Pr6N M / 40px / 400 / line-height: 1.35 / letter-spacing: 0.15emFooter Tagline
Special
new-atten / 32px / 400 / line-height: 1.1 / letter-spacing: 0.03emSection Display EN
Haircare
new-atten / 21px / 400 / line-height: 1.6 / letter-spacing: 0Category Label EN
lorem ipsum dolor
Yu Gothic Pr6N B / 18px / 400 / line-height: 1.5 / letter-spacing: 0Section Title JP
lorem ipsum dolor sit lorem ipsum
Yu Gothic Pr6N B / 16px / 400 / line-height: 1.6 / letter-spacing: 0Product Name
Mission
new-atten / 15px / 400 / line-height: 1.6 / letter-spacing: 0Section Label EN
BOTANIST lorem, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
Yu Gothic Pr6N M / 16px / 400 / line-height: 2.0 / letter-spacing: 0.05emBody
Home
new-atten / 16px / 700 / line-height: 1.6 / letter-spacing: 0Nav Brand EN
lorem ipsum / lorem ipsum / lorem ipsum dolor
Yu Gothic Pr6N M / 12px / 400 / line-height: 1.6 / letter-spacing: 0Nav Label
*lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.
Yu Gothic Pr6N M / 10px / 400 / line-height: normal / letter-spacing: 0Caption
03 / Product
Product
lorem ipsum dolor sit amet
Haircare

lorem ipsum dolor.

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

Special
lorem ipsum dolor

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

Add to Cart Details
04 / Buttons
Buttons
lorem -- radius 0px lorem ipsum dolor / lorem ipsum dolor CTA
Light Background
lorem ipsum
Solid / #1f2529 / radius 0
lorem ipsum
Ghost / border / radius 0
lorem ipsum
Text Link / border-bottom
Dark Background
Shop Now
Glass / rgba(255,255,255,0.2) / radius 0
Learn More
Ghost on Dark / border / radius 0
05 / Cards
Product Cards
lorem ipsum -- shadow lorem / radius 0 / lorem ipsum
Product Image
Haircare

lorem ipsum dolor sit lorem ipsum

¥1,540
Product Image
Bodycare

lorem ipsum dolor sit amet lorem ipsum

¥1,100
Product Image
Skincare

lorem ipsum dolor sit amet consectetur

¥1,650
Product Image
Haircare

lorem ipsum dolor sit amet lorem ipsum

¥1,540
06 / Forms
Forms
lorem ipsum -- radius 0px / focus: border #1f2529
Default
lorem ipsum dolor sit amet consectetur
Focus
07 / Elevation
Depth & Elevation
lorem -- lorem ipsum dolor, lorem ipsum dolor sit
Level 0 -- Near White
lorem ipsum dolor sit. #fcfcfc
Level 1 -- Gray Blue
lorem ipsum dolor. #e6e9ed
Level 2 -- Light Gray
lorem / lorem ipsum dolor. #f0f0f0
Level 3 -- Dark Charcoal
lorem ipsum dolor. #1f2529
Level 4 -- Glass
lorem ipsum dolor sit. rgba(255,255,255,0.2)
08 / Layout
Layout
lorem ipsum -- spacing scale & grid
4px
8px
16px
32px
64px
120px
Near White #fcfcfc
Gray Blue #e6e9ed
Dark #1f2529