Colors:

Text Colors

Text Primary 1

#000000

.bg-black

For Primary Text

Text Primary 2

#FFFFFF

.bg-white

For Primary Text (on dark backgrounds)

Text Secondary 1

#484848

.bg-text-1

For Disabled text

Text Secondary 2

#747474

.bg-text-2

Text Red

#D90606

.bg-text-red

Text error

#AB1026

.bg-text-error

Background Colors

Primary BG Color 1

#000000

.bg-black

Primary BG Color 2

#f5f2ef

.bg-tan-100

Primary BG Color 3

#ece7e2

.bg-tan-200

Primary BG Color 4

#dcd4cc

.bg-tan-300

Primary BG Color 5

#484848

.bg-text-1

Accent Colors

Accent 1

#badae9

.bg-blue-base

Accent 2

#e8f0f4

.bg-blue-light

UI Greyscale

Black

#000000

.bg-black

Grey 900

#111111

.bg-grey-900

Grey 800

#333333

.bg-grey-800

Grey 700

#555555

.bg-grey-700

Grey 600

#757676

.bg-grey-600

Grey 500

#b1b1b1

.bg-grey-500

Grey 400

#d9d9d9

.bg-grey-400

Grey 300

#e9e9e9

.bg-grey-300

Grey 200

#f5f5f5

.bg-grey-200

Grey 100

#fafafa

.bg-grey-100

White

#ffffff

.bg-white

Type:

Use 
.text-h$
or 
.text-s$
to automatically swap between desktop/mobile sizes at large viewports. You can use 
.text-h$-d
or 
.text-h$-m
to target desktop and mobile specifically.

Desktop

Heading 1
48px 
.text-h1-d
Heading 2
40px 
.text-h2-d
Heading 3
34px 
.text-h3-d
Heading 4
30px 
.text-h4-d
Heading 5
24px 
.text-h5-d
Heading 6
14px 
.text-h6-d
Heading 7
12px 
.text-h7-d
Subheading 1
20px 
.text-s1-d
Subheading 2
16px 
.text-s2-d
Subheading 3
12px 
.text-s3-d

Mobile

Heading 1
32px 
.text-h1-m
Heading 2
28px 
.text-h2-m
Heading 3
24px 
.text-h3-m
Heading 4
22px 
.text-h4-m
Heading 5
20px 
.text-h5-m
Heading 6
14px 
.text-h6-m
Heading 7
12px 
.text-h7-m
Subheading 1
18px 
.text-s1-m
Subheading 2
14px 
.text-s2-m
Subheading 3
12px 
.text-s3-m

Copy

Aliquam mollis viverra urna quis mattis. Nullam a bibendum lacus. Fusce venenatis elementum lobortis. Suspendisse sed tincidunt elit. Integer at bibendum massa, laoreet consectetur sem. Quisque nec rutrum mi, eget fringilla nunc. Duis sagittis ullamcorper lectus, id ullamcorper urna fringilla eu. Quisque fringilla pulvinar risus. Mauris sodales mattis finibus. Nam sollicitudin, tellus in iaculis congue, quam lorem consectetur enim, quis consequat nisi massa a nisi.

Sullam nec neque non diam facilisis lacinia. Nam ultricies est nibh, vitae semper felis lacinia sit amet. Donec orci metus, tempor ac cursus nec, convallis in odio. Maecenas quis rhoncus orci, vel commodo enim. Nam tempus orci ac ipsum tristique, vitae semper odio pulvinar. Fusce lobortis augue vel dui vulputate consequat. Ut sollicitudin consectetur est, ac aliquam massa semper et. Aenean sit amet purus dui. Donec vestibulum id nisi at commodo. Vivamus nec maximus elit. Maecenas tempus quam eu justo ultrices consectetur ut at orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Icons:

Use 
the 'icon' snippet with 'id',
to render the icons.

Facebook: 

render 'icon', id: 'facebook'

Twitter: 

render 'icon', id: 'twitter'

Instagram: 

render 'icon', id: 'instagram'

Pinterest: 

render 'icon', id: 'pinterest'

Youtube: 

render 'icon', id: 'youtube'

Chevron-down: 

render 'icon', id: 'chevron-down'

Arrow-right: 

render 'icon', id: 'arrow-right'

Search: 

render 'icon', id: 'search'

Location: 

render 'icon', id: 'location'

Account: 

render 'icon', id: 'account'

Bag: 

render 'icon', id: 'bag'

Hamburger: 

render 'icon', id: 'hamburger'

Close: 

render 'icon', id: 'close'

Search-close: 

render 'icon', id: 'search-close'

Review: 

render 'icon', id: 'review'

Arrow-down: 

render 'icon', id: 'arrow-down'

Arrow-left: 

render 'icon', id: 'arrow-left'

Slider-arrow-left: 

render 'icon', id: 'slider-arrow-left'

Selected-filter-close: 

render 'icon', id: 'selected-filter-close'

Pause: 

render 'icon', id: 'pause'

Play: 

render 'icon', id: 'play'

Unmute: 

render 'icon', id: 'unmute'

Mute: 

render 'icon', id: 'mute'

Arrow-left-account: 

render 'icon', id: 'arrow-left-account'

Buttons:

Use 
.buton and .button--primary or .button--secondary
for primary or secondary buttons creating

Primary button

.button.button--primary
.button.button--primary.max-w-max

Secondary button

.button.button--secondary
.button.button--secondary.max-w-max

Transparent link

.button.button--primary.border-transparent.underline.max-w-max
Transparent link

Dropdowns, Toggles, and Form Fields:

Use 
the <input> tag,
to render the input field.

Input with arrow inside:

Container classes: .relative.w-full
Input classes: .w-full.text-sm.pl-5.py-4.pr-12.mb-2.focus:outline-none.bg-white.border-none.text-black.lg:pl-6.lg:pt-3.5.lg:pb-3.lg:text-base
Button classes: .absolute.right-4.top-1/2.transform.-translate-y-1/2.focus:outline-none

Input, type="text"

Input, type="email"

Input, type="password"