Colors

Blues

.bg-pale-gray
$pale-gray
#F7F9FC

.text-pale-gray .border-pale-gray

.bg-light-sky
$light-sky
#ECF3FF

.text-light-sky .border-light-sky

.bg-focus
$focus
#ECF3FF

.text-focus .border-focus

.bg-classic-blue
$classic-blue
#3057A7

.text-classic-blue .border-classic-blue

.bg-lalo-ink / .bg-primary
$lalo-ink / $primary
#0F234C

.text-lalo-ink .border-lalo-ink

Others

.bg-chilli-red
$chilli-red
#B23100

.text-chilli-red .border-chilli-red

.bg-tangerine
$tangerine
#FF7E46

.text-tangerine .border-tangerine

.bg-white-peach
$white-peach
#FFF8F5

.text-white-peach .border-white-peach

.bg-basil
$basil
#376B52

.text-basil .border-basil

.bg-pistachio
$pistachio
#C6DDB5

.text-pistachio .border-pistachio

.bg-light-pesto
$light-pesto
#E4EDDD

.text-light-pesto .border-light-pesto

.bg-mustard/bg-warning
$mustard/ $warning/ $yellow
#DFAE00

.text-mustard .border-mustard

.bg-pineapple
$pineapple
#F4E55E

.text-pineapple .border-pineapple

.bg-sunflower
$sunflower
#FFF2C2

.text-sunflower .border-sunflower

.bg-white-peach
$white-peach
#FFF8F5

.text-white-peach .border-white-peach

.bg-pale-banana
$pale-banana
#FFFDF7

.text-pale-banana .border-pale-banana

.bg-white-tea
$white-tea
#F9FCF6

.text-white-tea .border-white-tea

.bg-light-apricot
$light-apricot
#FAEADF

.text-light-apricot .border-light-apricot

Support

.bg-success
$success
#056629

.text-success .border-success

.bg-success-inverse
$success-inverse
#C8F9D2

.text-success-inverse .border-success-inverse

.bg-danger
$danger/$error/$red
#AF0811

.text-danger .border-danger

.bg-error-inverse
$error-inverse
#F9C8CB

.text-error-inverse .border-error-inverse

Swatches

.bg-sage
$sage
A4AD99

.text-sage .border-sage

.bg-blueberry
$blueberry
#5174BC

.text-blueberry .border-blueberry

.bg-grapefruit
$grapefruit
#E0BCBC

.text-grapefruit .border-grapefruit

.bg-natural
$natural
#E4C497

.text-natural .border-natural

.bg-licorice
$licorice
#1e1c19

.text-licorice .border-licorice

.bg-coconut
$coconut
#f7f7f6

.text-coconut .border-coconut

Grays

.bg-white -- $white -- #ffffff

.bg-light -- $gray-100/ $light -- #F7F7F6

.bg-gray-200 -- $gray-200 -- #EEEDEB

.bg-gray-300 -- $gray-300 -- #DDDCDA

.bg-gray-400 -- $gray-400 -- #B7B4B2

.bg-gray-500 -- $gray-500 -- #979391

.bg-gray-600 -- $gray-600 -- #797472

.bg-gray-700 -- $gray-700 -- #33302F

.bg-gray-800 -- $gray-800 -- #171717

.bg-gray-900 -- $gray-900/-- #26221C

.bg-gray-900 -- $gray-900/ $black -- #0F234C

Font Family

Body-font: NeueHaasGrotDisp

.body-font / $body-font

Bold (600)

Medium (500)

Normal(400)

Light(300)

Bold italic

Medium italic

Normal italic

Light italic

Typography (font-size/line-height)

Desktop: greater than 768px

Mobile:less than 768px

h1. Heading 1 (h1,.h1, .heading-lg)

Desktop:(60px/63px) Mobile:(42px/48px)

h2. Heading 2 (h2,.h2, .heading)

Desktop:(44px/48px) Mobile:(34px/38px)

h3. Heading 3 (h3, .h3, heading-sm)

Desktop:(34px/30px) Mobile:(28px/32px)

h4. Heading 4 (h4,.h4), heading

(22px/26px)

h5. Heading 5 (h5,.h5) (18px/1.5)

h6. Heading 6 (h6,.h6)(16px/1.5)

.overline-cta-sm(12px/1.5)

.body Desktop:(18px/27px) Mobile:(16px/24px)

.body-display Desktop:(24px/34px) Mobile:(20px/32px)

.body-lg(20px/30px)

.body-sm(14px/21px)

.caption-sm(10px/1.5)

.caption(12px/1.5)

.text-link(14px/1.5)

.text-link-sm(16px/1.5)

.text-link-lg(12px/1.5)

Strong (.strong/strong/fw-medium)

Italic (.italic : font style italic)

Breakpoints

Desktop

xxl: >1400
xl: >1200

Tablet

lg: >992
md: >768

Mobile

sm: >650

Icons

.icon-cart

\e918

.icon-tick-circle

\e909

.icon-star-filled

\e917

.icon-star

\e920

.icon-heart

\e912

.icon-Subtract

\e921

.icon-ar

\e90b

.icon-arrow-left

\e90c

.icon-arrow-right

\e90e

.icon-arrow-left-filled

\e90d

.icon-arrow-right-filled

\e90f

.icon-chevron-left

\e911

.icon-chevron-bottom

\e910

.icon-chevron-right

\e912

.icon-chevron-top

\e913

.icon-close

\e914

.icon-facebook

\e916

.icon-Gift

\e919

.icon-hamburger

\e91a

.icon-insta

\e91c

.icon-Message-square

\e91d

.icon-Plus

\e902

.icon-search

\e91f

.icon-Thumbs-down

\e91b

.icon-Thumbs-up

\e924

.icon-tick

\e909

.icon-circle-plus

\e908

.icon-circle

\e900

.icon-circle-minus

\e901

.icon-Plus-circle

\e903

.icon-Radio-true

\e904

.icon-square

\e905

.icon-square-minus

\e906

.icon-square-tick

\e907

.icon-star-lead

\e929

.icon-arrow-down-lead

\e928

Buttons

Primary

Button Primary
Button Primary Disable

Secondary

Button Secondary
Button Secondary Disable

Tertiary

Button Tertiary
Button Tertiary Disable