Frontend Guide
Colors
Scheme:
background-1
background
#ffffff
text
#212b36
button
#212b36
button_label
#ffffff
secondary_button_label
#ffffff
shadow
#212b36
primary
#212b36
dark_grey
#636e7b
green_accent
#02c102
green
#92d892
pale_green
#e7f5e7
light_green
#c1e9e7
light_borders
#d4dde7
background_grey
#f4f6f9
fill_grey
#fbfcfe
orange
#ffa41c
light_orange
#f6d199
fill_green
#f6faf6
light_pink
#ebc0d9
lilac
#cbc0ee
light_blue
#cbd9f2
red
#fd5f3d
light_red
#ffe7e2
Icons
arrival
arrow
carret-down
cart
menu
cart
check
checkmark-bold
checkmark
chevron-right
chevrons-right
close-button
close-button-inverted
cross
edit
facebook
hot-meal
info
instagram
leaf
location-dot
location-pin
minus-button
minus
play
plus-button
plus
rating-down
rating-up
rectangle
shipping
star
store
twitter
user
zoom-in
amex
mastercard
visa
discover
trash
dashboard
organic-food
order-history
money
logout
microwave
contract
baby-meal
delivery-truck
health
calendar
star-with-circle
chat-teardrop-dots
building
business
handshake
check-list
service
growth
bonus
health-2
piggy-bank
discounts
plate
crown
clock
decorative-circle
warning
health-bold
gift-card
Buttons
button.button--inner.button--xs
button.button--default.button--sm
a.button.button--primary.button--lg
button.button--primary.button--lg
button.button--invert button--xl
Grid
Horizontal desktop space:
indent-horizontal-lg
Vertical desktop space:
indent-vertical-lg
Horizontal mobile space:
indent-horizontal-xs
Vertical mobile space:
indent-vertical-xs
Containers:
sm (640px) max-width: 640px;
md (768px) max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1700px) max-width: 1700px;
Typography
Jost
64px/1
text-8xl
The quick brown fox jumps over the lazy dog.
Jost
40px/1.445
text-7xl
The quick brown fox jumps over the lazy dog.
Jost
36px/1.2
text-6xl
The quick brown fox jumps over the lazy dog.
Jost
32px/1.445
text-5xl
The quick brown fox jumps over the lazy dog.
Jost
30px/1.2
text-4xl
The quick brown fox jumps over the lazy dog.
Jost
24px/1.445
text-3xl
The quick brown fox jumps over the lazy dog.
Jost
22px/1.445
text-2xl
The quick brown fox jumps over the lazy dog.
Jost
20px/1.445
text-xl
The quick brown fox jumps over the lazy dog.
Jost
18px/1.445
text-lg
The quick brown fox jumps over the lazy dog.
Jost
16px/1.445
text-base
The quick brown fox jumps over the lazy dog.
Jost
14px/1.445
text-sm
The quick brown fox jumps over the lazy dog.
Jost
12px/1.445
text-xs
The quick brown fox jumps over the lazy dog.
Jost
10px/1.445
text-xxs
The quick brown fox jumps over the lazy dog.