Design System Preview

TULLY'S COFFEE -- Taste The Difference

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

Taste The Difference DESIGN.md lorem
01 / Colors

Color Palette
lorem ipsum dolor

Brand
Coffee Brown
#301d0f
CTA lorem ipsum
Company Brown
#2d1e11
lorem ipsum CTA
Orange Accent
#eca776
New! lorem
Surface
Warm Beige
#e2dad5
lorem ipsum
Light Beige
#eae8e1
lorem ipsum dolor
Cream
#f7f6f2
lorem ipsum dolor sit
Text & Neutral
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#535353
lorem ipsum dolor
Text Light
#888888
lorem / lorem ipsum dolor
Border
#d5d2ce
lorem ipsum / lorem
Background
#ffffff
lorem ipsum
Dark Section
#211c1c
lorem ipsum
Semantic
Danger
#c0392b
lorem / lorem
Success
#27ae60
lorem / lorem ipsum
02 / Typography

Typography Hierarchy
lorem ipsum dolor sit

English Section Heading -- Raleway
Raleway / 24px / 400 / line-height: 1.5lorem ipsum
English Sub Heading -- Raleway Light
Raleway / 18px / 400 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor -- lorem ipsum dolor sit Body (16px)
Hiragino Kaku Gothic Pro / 16px / 400 / line-height: 1.5lorem
lorem ipsum dolor -- lorem ipsum dolor sit Bold (16px)
Hiragino Kaku Gothic Pro / 16px / 700 / line-height: 1.5lorem
lorem ipsum dolor -- Body (14px). lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
Hiragino Kaku Gothic Pro / 14px / 400 / line-height: 1.5lorem
lorem ipsum dolor -- Small (12px). lorem ipsum dolor sit amet consectetur.
Hiragino Kaku Gothic Pro / 12px / 400 / line-height: 1.5lorem
Pill Button Label
Raleway / 18px (lorem ipsum dolor) or 16px / 400 / pill ghost buttonCTA lorem
03 / Article

Article Sample
lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur "Taste The Difference" lorem ipsum. lorem, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit.

Single Origin

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

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed. SCA (Specialty Coffee Association) lorem ipsum dolor sit, lorem, lorem, lorem, lorem, lorem, lorem ipsum dolor sit amet 100 lorem ipsum dolor sit amet. 80 lorem ipsum dolor sit amet consectetur adipiscing.

Farm to Cup

lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit / lorem ipsum / lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor, lorem ipsum dolor sit amet consectetur.

04 / Buttons

Button Variations
lorem ipsum dolor sit

Taste The Difference
Ghost Pill (Top)
lorem ipsum dolor
Filled Rectangle (Menu)
lorem ipsum dolor sit
Full-Width CTA (Company)
New!
Badge
lorem ipsum
Full-Width CTA
05 / Cards

Card Components
lorem ipsum dolor sit

☕
New!

lorem ipsum lorem ipsum lorem

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

¥590
☕

lorem ipsum dolor

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

¥370
☕

lorem ipsum

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

¥530
06 / Forms

Form Elements
lorem ipsum dolor

lorem ipsum -- border: #d5d2ce, radius: 8px
lorem ipsum -- border: #301d0f (Coffee Brown), 2px
lorem ipsum dolor sit amet consectetur adipiscing
lorem -- border: #c0392b (Danger), 2px
07 / Elevation

Depth & Elevation
lorem ipsum

Level 0: Flat
lorem
Level 1: Button
1px 2px 2px rgba(0,0,0,0.3)
Level 2: Card
5px 5px 10px rgba(0,0,0,0.25)
Level 3: Modal
0 8px 24px rgba(0,0,0,0.15)
08 / Layout

Layout & Spacing
lorem ipsum dolor sit amet

Spacing Scale
4px
8px
16px
24px
40px
80px
Content Widths
Container Max 1100px
Content Area 940px
Article Body 620px
Grid
1 / 3
2 / 3
3 / 3
Desktop: 3 columns / gap: 24px -- Tablet: 2 columns -- Mobile: 1 column