Bean to Bar Chocolate

lorem ipsum dolor, lorem ipsum.

Minimal(mini-mal.tokyo)lorem ipsum dolor sit amet consectetur adipiscing. Poppins + lorem ipsum dolor sit amet consectetur, body weight 600, palt lorem, #333333 lorem CTA + radius 2px, #fcfcfc lorem ipsum dolor. computed style lorem ipsum dolor.

Shop Chocolate Our Story

01 / Colors

Colors

Color Palette

Dark

Dark Primary

#262626

lorem ipsum / CTA lorem

Dark Secondary

#333333

CTA lorem / lorem ipsum

Brand Accent

Blue-Green

#366b93

Products lorem ipsum dolor

Teal

#6eaab4

lorem ipsum dolor / lorem ipsum

Green

#578a3d

lorem ipsum dolor sit

Text

Text Primary

#000000

lorem ipsum dolor

Text Secondary

#707070

lorem ipsum dolor / lorem

Text Disabled

#d8d8d8

lorem ipsum dolor

Text on Dark

#ffffff

lorem ipsum dolor sit amet

Surface

#fcfcfc

lorem ipsum(lorem ipsum dolor)

Surface Light

#eeeeee

lorem / lorem ipsum dolor

Surface Gray

#eaeaea

lorem ipsum / lorem ipsum

02 / Typography

Typography

Typography -- Poppins + YuGothic / body weight 600 / palt off

lorem ipsum dolor, lorem ipsum.

Poppins + YuGothic / 36px / 600 / line-height: 1.4 / letter-spacing: normalHero Title

Products

Poppins / 36px / 600 / line-height: 1.4 / letter-spacing: 3.24px (0.09em)Section Header EN

lorem ipsum dolor sit amet

Poppins + YuGothic / 24px / 600 / line-height: 1.4 / letter-spacing: normalHeading 2

lorem ipsum dolor sit

Poppins + YuGothic / 20px / 600 / line-height: 1.4 / letter-spacing: normalHeading 3

lorem ipsum dolor sit

Poppins + YuGothic / 16px / 700 / line-height: 1.4 / letter-spacing: normalHeading 4

Chocolate Bar

Poppins / 12.8px / 700 / line-height: 1.4 / letter-spacing: 1px (0.078em)Heading 5 / Label

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

Poppins + YuGothic / 14px / 400 / line-height: 1.6 / letter-spacing: normalBody

Minimal Works Nutty

Poppins + YuGothic / 16px / 700 / line-height: 1.4 / letter-spacing: normalProduct Name

¥1,350 (tax incl.)

Poppins + YuGothic / 13px / 400 / line-height: 1.6 / color: #707070Price / Caption

03 / Product

Product

Product Page Sample -- accent surface #366b93

Chocolate Bar

Minimal Works Nutty

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

lorem ipsum dolor

Ingredients

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

lorem ipsum dolor lorem ipsum

04 / Buttons

Buttons

Buttons -- 5 variants / radius 2px micro-rounded or 0px flat or 100px pill

lorem ipsum dolor

Primary / filled #333 / radius 2px

lorem ipsum

Outline Dark / border #333 / radius 0

Shop All

Pill / border #000 / radius 100px

lorem ipsum

Tag / bg #eee / radius 0

Dark Surface

Shop Chocolate

Outline White / border #fff / radius 0

lorem ipsum

Inverted / bg #fcfcfc / radius 2px

05 / Cards

Cards

Product Cards -- shadow none / radius 0 / dark image

Product Image

Chocolate Bar

Minimal Works Nutty

¥1,350

Product Image

Chocolate Bar

Minimal Works Fruity

¥1,350

Product Image

Chocolate Spread

lorem ipsum dolor sit amet

¥1,620

Product Image

Gift Set

lorem ipsum dolor 3 lorem ipsum

¥4,050

06 / Forms

Forms

Forms -- radius 2px / focus: border #333333

Default

lorem

lorem ipsum dolor

lorem ipsum(lorem ipsum)

lorem ipsum dolor sit amet consectetur

Focus

lorem

lorem ipsum dolor

07 / Elevation

Elevation

Depth & Elevation -- shadow none / color surface contrast

Level 0 -- Surface

lorem ipsum #fcfcfc. lorem

Level 1 -- Dark

lorem ipsum / CTA / lorem ipsum #262626

Level 2 -- Accent

lorem ipsum dolor sit amet #366b93

Level 3 -- Light

lorem / lorem ipsum dolor #eeeeee