15:00 lorem ipsum dolor sit amet! lorem ipsum dolor. 4 lorem ipsum dolor sit amet.

lorem ipsum dolor sit
lorem ipsum dolorlorem

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor sit lorem ipsum dolor
01 / Colors

Color Palette

Brand & Accent
Brand Green
#4cc764
New lorem / lorem / lorem
Green Dark
#3fae55
lorem / lorem
Rating Yellow
#ffc93f
lorem ipsum
Subscribe Orange
#ffa500
lorem ipsum CTA
Announce Blue
#306fdc
lorem ipsum dolor
Semantic / Minor Accent
Sale Red
#e10112
lorem / lorem ipsum
Pop Pink
#ff3399
lorem / lorem ipsum dolor
Text
Text Primary
#000000
lorem / lorem
Text Dark / Panel
#1d1d1f
lorem ipsum dolor
Text Muted
#777777
lorem / lorem ipsum dolor
Text Disabled
#dfdfdf
NO REVIEWS
Surface & Background
Page Background
#ffffff
lorem ipsum(lorem)
Surface Alt
#fafafa
lorem ipsum dolor
Surface Alt 2
#f5f5f7
lorem ipsum dolor sit
Border
#efefef
lorem / lorem ipsum
02 / Typography

Typography Hierarchy

lorem ipsum dolor sit
Hero Heading / 58px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem
Section Heading / 40px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
Sub Heading / 26px / 700 / line-height: 1.5lorem ipsum
lorem ipsum dolor sit amet
Lead / Modal Title / 20px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor sit amet consectetur | lorem    ¥864
Product Name / Price / 14px / 700 / line-height: 1.5lorem / lorem
lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum line-height 2.0 lorem ipsum dolor.
Description / 14px / 400 / line-height: 2.0lorem
lorem ipsum dolor sit. lorem ipsum Helvetica Neue + lorem ipsum dolor sit amet consectetur adipiscing, Web lorem ipsum dolor sit amet consectetur. body lorem 13px / line-height 1.5.
Body / 13px / 400 / line-height: 1.5lorem
15:00 lorem ipsum dolor sit amet!
Announce Text / 12px / 500 / line-height: 1.5 / letter-spacing: 0.1emlorem ipsum
lorem ipsum dolor sit
Badge / CTA Label / 11px / 700 / letter-spacing: 0.145emlorem CTA / lorem
BREWED COFFEE TONIC | BITTER
Roaster Name / 10px / 400 / line-height: 1.2 / color: Text Mutedlorem ipsum dolor
03 / Product

Coffee Content Sample

lorem ipsum dolorlorem ipsum dolor

3 lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur.

PostCoffee lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit, lorem / lorem / lorem ipsum dolor sit, 10 lorem ipsum dolor sit amet consectetur adipiscing elit sed.

Fresh Roasted

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

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

04 / Buttons

Button Variations

lorem ipsum dolor sit
Brand CTA (green)
lorem ipsum dolor
Subscribe (orange pill)
lorem ipsum dolor sit
Dark CTA (radius 16px)
lorem ipsum dolor sit amet
Round Outline (pill)
Keyword Chips
lorem ipsum dolor lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum dolor lorem ipsum dolor sit
05 / Cards

Coffee Cards

☕New
★ 4.5
FRIEDHATS

lorem ipsum lorem ipsum lorem ipsum

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

¥1,620 / 100g
☕New
★ 4.8
CFFBNS

lorem ipsum lorem ipsum dolor

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

¥1,380 / 100g
☕lorem ipsum dolor
★ 4.2
NEMESIS

lorem AA lorem ipsum dolor

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

¥1,780 / 100g
☕New
★ 4.6
DAK

lorem ipsum dolor sit amet consectetur

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

¥864 / 1 lorem
06 / Forms

Form Elements

lorem ipsum --- border: #efefef, radius: 8px
lorem ipsum --- border: #4cc764 (Brand Green)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border: #e10112 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor / lorem / lorem
Level 1
0 0 5px rgba(0,0,0,0.1) --- CTA / lorem / lorem
Level 2
0 4px 12px rgba(0,0,0,0.12) --- lorem ipsum dolor
Level 3
0 8px 24px rgba(0,0,0,0.16) --- lorem ipsum
Focus Ring
#4cc764 + shadow rgba(76,199,100,0.18)
08 / Layout

Spacing & Container

Spacing Scale
4px
8px
16px
24px
40px
80px
Content Widths
Max Container 1200px
Content Area 1040px
Article / Text 680px
Form / Input 400px