01 — Typography + Colors

A. Typography

Fonts

Aa Zz

Rubik

Styles

Style 1: Rubik

Style 2: Rubik

Style 3: Rubik

Style 4: Rubik

P1: Used for most text paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis dolor in risus condimentum euismod.Integer dictum consectetur feugiat. Nullam mauris lacus, tincidunt id ligula sit amet, imperdiet congue dolor.

P2 looks like this and is used for small taglines
6 Sep / 02:00 AM - 03:00 AM CEST

B. Colors

Fills

Black
#000000

White
#ffffff

Wine Red
RGB: #8C1533

Light Grey
RGB: #FAFAFA

On Hover Red
RGB: #6E1028

On Hover Grey
RGB: #F5F5F5

Text Black
RGB: #101010

Grey
RGB: #808080

Error/Notification Red
Used for Error states (forms, dropdowns, etc). AA compliant Red for these states
#F43434

Success State Green
Used for success states (like the “select state” success state
#227322

02 — UI Elements

A. Primary Button

Idle/Hover/Focus

Disabled

Using Vue

View membership

B. Secondary Button

Idle/Hover/Focus

Disabled

Over white background

Using Vue

View membership

C. State Popups

Select State Notification

Some wines can’t be shipped to ever state. Select a state so we can filter your options. Select state

Success State

We can ship to your state

Fail State

We cannot ship to your state

Tip Bubble

Some wines cannot be shipped to some states

03 — Lines and strokes

Lines

Grey Line
#000000 / 20% opacity / 1px
Used for light section breaks

Red Line
#8C1533 / stroke: .75px
Used for hard breaks and in dropdowns

Highlight

Maroon Line
#8C1533 / 1px
(Used to highlight a name in the nav or in a carousel)

Strokes around boxes

Stroke: 1px
Color: #8C1533
Opacity: 100%

Stroke: 1px
Color: #000000
Opacity: 20%

Product List Card