00 — Logo
SVG for logo
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
C. State Popups
Select State Notification
Success State
Fail State
Tip Bubble
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%