Typography
Fonts
-
Aa Zz
Beatrice Bold -
Aa Zz
Beatrice Medium -
Aa Zz
Beatrice Regular
Desktop (>1024PX)
H1 Beatrice Bold
Simple ingredients, unbeatable taste
Font Size: 30pxLine-Height: 40px
Letter-Spacing: 0.5px
Color: #1B1B1B
H2 Beatrice Bold
Subtotal | $109.40
Font Size: 20pxLine-Height: 30px
Letter-Spacing: 0.5px
Color: #1B1B1B
H3 Beatrice Medium
Apply a Promo Code
Font Size: 12pxLine-Height: 22px
Letter-Spacing: 0px
Color: #1B1B1B
Body
Beatrice Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut magna urna. Vivamus vel magna dignissim ligula eleifend condimentum nec eget mauris. Suspendisse ac quam eleifend urna viverra posuere sodales in ligula. This is a link Nulla placerat sagittis tempor. Nunc finibus, sem vel accumsan lobortis, augue libero molestie leo, eu sagittis quam dolor quis dolor. Praesent volutpat neque sed rhoncus pharetra. Maecenas ac nisi fringilla, viverra elit quis, sodales arcu.
- This is
- an “unordered”
- bulleted
- list
- This is
- an “unordered”
- bulleted
- list
For ol, ul, space between list items is 175%
Line-Height: 20px
Color: #1B1B1B
Small Body
Beatrice Regular
Get monthly deliveries to save 10%
Font Size: 10pxLine-Height: 12px
Color: #000
Callout
Beatrice Bold
back to human
Font Size: 60pxLine-Height: 70px
Color: #1B1B1B
02-Colors
Primary Colors
-
BLACK
#000000 -
WHITE
#FFFFFF -
BACKGROUND GREY
#F6F5F3 -
Hu YELLOW
#FDBD4C
Product Colors
-
Mint
#54CE82 -
Almond butter
#FE8E3E -
vanilla crunch
#F6F5F3 -
raspberry
#F4BC49 -
Hazelnut butter
#B3D460
Fucntional Colors
-
SUCCESS
#007A30 -
FAILURE
#E40000
DIVIDERS / LINES
Typography
Black is the main text color for the majority of typography.
BLACK TEXT#1B1B1B
Gray is used when text should not be as prominent and is mostly disclaimer info.
GRAY TEXT#4D4D4D
Error Red is used for error messages on forms and fields
ERROR RED#E00000
