Style Guide

Colors

Periwinkle

#ACB6EF
// css classes .bg-primary-periwinkle
.text-primary-periwinkle
.border-primary-periwinkle

// color codes #ACB6EF

// css Variables var(--color-periwinkle)

Glaucous

#677DD2
// css classes .bg-primary-glaucous
.text-primary-glaucous
.border-primary-glaucous

// color codes #677DD2

// css Variables var(--color-glaucous)

Delft blue

#31426A
// css classes .bg-primary-delft-blue
.text-primary-delft-blue
.border-primary-delft-blue

// color codes #31426A

// css Variables var(--color-delft-blue)

Aquamarine

#B3FFE3
// css classes .bg-secondary-aquamarine
.text-secondary-aquamarine
.border-secondary-aquamarine

// color codes #B3FFE3

// css Variables var(--color-aquamarine)

Mid aquamarine

#65DEB1
// css classes .bg-secondary-mid-aquamarine
.text-secondary-mid-aquamarine
.border-secondary-mid-aquamarine

// color codes #65DEB1

// css Variables var(--color-mid-aquamarine)

Dark aquamarine

#157A55
// css classes .bg-secondary-dark-aquamarine
.text-secondary-dark-aquamarine
.border-secondary-dark-aquamarine

// color codes #157A55

// css Variables var(--color-dark-aquamarine)

Light periwinkle

#EBEDFF
// css classes .bg-secondary-light-periwinkle
.text-secondary-light-periwinkle
.border-secondary-light-periwinkle

// color codes #EBEDFF

// css Variables var(--color-light-periwinkle)

Dark glaucous

#2A4189
// css classes .bg-secondary-dark-glaucous
.text-secondary-dark-glaucous
.border-secondary-dark-glaucous

// color codes #2A4189

// css Variables var(--color-dark-glaucous)

Blue 10

#E0F3FF
// css classes .bg-secondary-blue-10
.text-secondary-blue-10
.border-secondary-blue-10

// color codes #E0F3FF

// css Variables var(--color-blue-10)

Blue 20

#C7DEED
// css classes .bg-secondary-blue-20
.text-secondary-blue-20
.border-secondary-blue-20

// color codes #C7DEED

// css Variables var(--color-blue-20)

Blue 40

#3D8FC2
// css classes .bg-secondary-blue-40
.text-secondary-blue-40
.border-secondary-blue-40

// color codes #3D8FC2

// css Variables var(--color-blue-40)

Blue 60

#086399
// css classes .bg-secondary-blue-60
.text-secondary-blue-60
.border-secondary-blue-60

// color codes #086399

// css Variables var(--color-blue-60)

Blue 80

#034F7D
// css classes .bg-secondary-blue-80
.text-secondary-blue-80
.border-secondary-blue-80

// color codes #034F7D

// css Variables var(--color-blue-80)

Neutral White

#FFFFFF
// css classes .bg-neutral-white
.text-neutral-white
.border-neutral-white

// color codes #FFFFFF

// css Variables var(--color-neutral-white)

Neutral 20

#E9ECF2
// css classes .bg-neutral-20
.text-neutral-20
.border-neutral-20

// color codes #E9ECF2

// css Variables var(--color-neutral-20)

Neutral 40

#C4C9D6
// css classes .bg-neutral-40
.text-neutral-40
.border-neutral-40

// color codes #C4C9D6

// css Variables var(--color-neutral-40)

Neutral 60

#949EB0
// css classes .bg-neutral-60
.text-neutral-60
.border-neutral-60

// color codes #949EB0

// css Variables var(--color-neutral-60)

Neutral 80

#59616E
// css classes .bg-neutral-80
.text-neutral-80
.border-neutral-80

// color codes #59616E

// css Variables var(--color-neutral-80)

Neutral 100

#2E3038
// css classes .bg-neutral-100
.text-neutral-100
.border-neutral-100

// color codes #2E3038

// css Variables var(--color-neutral-100)

Tertiary Error

#CC4563
// css classes .bg-tertiary-error
.text-tertiary-error
.border-tertiary-error

// color codes #CC4563

// css Variables var(--color-tertiary-error)

Tertiary Light background

#F6F8FE
// css classes .bg-tertiary-light-background
.text-tertiary-light-background
.border-tertiary-light-background

// color codes #F6F8FE

// css Variables var(--color-tertiary-light-background)

Gradients

Primary Primary periwinkle

// css class .gradient-primary-periwinkle

// css Variables var(--gradient-primary-periwinkle)

Primary primary delft blue to periwinkle

// css class .gradient-primary-delft-blue-to-periwinkle

// css Variables var(--gradient-primary-delft-blue-to-periwinkle)

Primary secondary aquamarine

// css class .gradient-secondary-aquamarine

// css Variables var(--gradient-secondary-aquamarine)

Primary secondary glaucous to aquamarine

// css class .gradient-secondary-glaucous-to-aquamarine

// css Variables var(--gradient-secondary-glaucous-to-aquamarine)

Primary secondary glaucous to mid aquamarine

// css class .gradient-secondary-glaucous-to-mid-aquamarine

// css Variables var(--gradient-secondary-glaucous-to-mid-aquamarine)

Primary secondary light periwinkle to tertiary light

// css class .gradient-secondary-light-periwinkle-to-tertiary-light

// css Variables var(--gradient-secondary-light-periwinkle-to-tertiary-light)

Typography

Font-family: Lato // css class .title

// css Variables var(--font-heading-family)

Font-family: Lato // css class .text

// css Variables var(--font-body-family)

Page Title XL
Page Title L
Page Title M
Page Title S
Page Title XS
// css class .title-xl
.title-lg
.title-md
.title-sm
.title-xs

Paragraph
Paragraph
Paragraph
Paragraph
// css class .text-lg
.text-md
.text-sm
.text-xs

Buttons

Button

// css class .btn

// Variants --buttons-radius
--buttons-radius-outset
--buttons-border-width
--buttons-border-opacity
--buttons-shadow-opacity
--buttons-shadow-visible
--buttons-shadow-horizontal-offset
--buttons-shadow-vertical-offset
--buttons-shadow-blur-radius
--buttons-border-offset

Button

// css class .btn .btn-sm

Button

// css class .btn .btn-lg

Primary


// css class .btn-primary--glaucous

// css class .btn-primary--blue

// css class .btn-primary--aquamarine

// css class .btn-primary--* .btn-disabled

Secondary


// css class .btn-secondary--glaucous

// css class .btn-secondary--blue

// css class .btn-secondary--aquamarine

// css class .btn-secondary--dark-aquamarine

// css class .btn-secondary--* .btn-disabled

Tertiary


// css class .btn-tertiary

Badges & Labels

1 28 New! !

Label Label Label Label

// css class .badge
.tag
.tag-long

Icons

// css class .icon-lg
.icon-md
.icon-sm
.icon-xs

// Render Tag render 'icon-3d-model', class: 'icon-xs'
// Render Tag render 'icon-account', class: 'icon-xs'
// Render Tag render 'icon-arrow', class: 'icon-xs'
// Render Tag render 'icon-caret', class: 'icon-xs'
// Render Tag render 'icon-cart-empty', class: 'icon-xs'
// Render Tag render 'icon-cart-empty', class: 'icon-xs'
// Render Tag render 'icon-cart', class: 'icon-xs'
// Render Tag render 'icon-discount', class: 'icon-xs'
// Render Tag render 'icon-error', class: 'icon-xs'
// Render Tag render 'icon-facebook', class: 'icon-xs'
// Render Tag render 'icon-filter', class: 'icon-xs'
// Render Tag render 'icon-hamburger', class: 'icon-xs'
// Render Tag render 'icon-info', class: 'icon-xs'
// Render Tag render 'icon-instagram', class: 'icon-xs'
// Render Tag render 'icon-minus', class: 'icon-xs'
// Render Tag render 'icon-padlock', class: 'icon-xs'
// Render Tag render 'icon-pause', class: 'icon-xs'
// Render Tag render 'icon-pinterest', class: 'icon-xs'
// Render Tag render 'icon-play', class: 'icon-xs'
// Render Tag render 'icon-plus', class: 'icon-xs'
// Render Tag render 'icon-remove', class: 'icon-xs'
// Render Tag render 'icon-share', class: 'icon-xs'
// Render Tag render 'icon-snapchat', class: 'icon-xs'
// Render Tag render 'icon-success', class: 'icon-xs'
// Render Tag render 'icon-tick', class: 'icon-xs'
// Render Tag render 'icon-tiktok', class: 'icon-xs'
// Render Tag render 'icon-tumblr', class: 'icon-xs'
// Render Tag render 'icon-twitter', class: 'icon-xs'
// Render Tag render 'icon-unavailable', class: 'icon-xs'
// Render Tag render 'icon-vimeo', class: 'icon-xs'
// Render Tag render 'icon-youtube', class: 'icon-xs'
// Render Tag render 'icon-zoom', class: 'icon-xs'

Product Attributes

// Render Tag render 'icon-firmness', class: 'icon-md'
// Render Tag render 'icon-certifications', class: 'icon-md'
// Render Tag render 'icon-feel', class: 'icon-md'
// Render Tag render 'icon-movement-sensitivity', class: 'icon-md'
// Render Tag render 'icon-surface-usage', class: 'icon-md'
// Render Tag render 'icon-spinal-alignment', class: 'icon-md'
// Render Tag render 'icon-couples', class: 'icon-md'
// Render Tag render 'icon-value', class: 'icon-md'
// Render Tag render 'icon-cooling', class: 'icon-md'
// Render Tag render 'icon-pain-relief', class: 'icon-md'
// Render Tag render 'icon-ideal-for', class: 'icon-md'
// Render Tag render 'icon-sustainability', class: 'icon-md'

Functional

// Render Tag render 'sd-search', class: 'icon-xs'
// Render Tag render 'sd-menu', class: 'icon-xs'
// Render Tag render 'sd-checkmark', class: 'icon-xs'
// Render Tag render 'sd-close', class: 'icon-xs'
// Render Tag render 'sd-contents', class: 'icon-xs'
// Render Tag render 'sd-caret-down', class: 'icon-xs'
// Render Tag render 'sd-caret-up', class: 'icon-xs'
// Render Tag render 'sd-caret-right', class: 'icon-xs'
// Render Tag render 'sd-caret-left', class: 'icon-xs'
// Render Tag render 'sd-add', class: 'icon-xs'
// Render Tag render 'sd-subtract', class: 'icon-xs'
// Render Tag render 'sd-zoom', class: 'icon-xs'
// Render Tag render 'sd-link', class: 'icon-xs'
// Render Tag render 'sd-delete', class: 'icon-xs'
// Render Tag render 'sd-like', class: 'icon-xs'
// Render Tag render 'sd-dislike', class: 'icon-xs'
// Render Tag render 'sd-moon', class: 'icon-xs'
// Render Tag render 'sd-sun', class: 'icon-xs'
// Render Tag render 'sd-info', class: 'icon-xs'
// Render Tag render 'sd-bag', class: 'icon-xs'
// Render Tag render 'sd-cart', class: 'icon-xs'
// Render Tag render 'sd-trash', class: 'icon-xs'
// Render Tag render 'sd-lock', class: 'icon-xs'
// Render Tag render 'sd-email', class: 'icon-xs'
// Render Tag render 'sd-chat', class: 'icon-xs'
// Render Tag render 'sd-call', class: 'icon-xs'
// Render Tag render 'sd-open-eye', class: 'icon-xs'
// Render Tag render 'sd-closed-eye', class: 'icon-xs'
// Render Tag render 'sd-arrow-left', class: 'icon-xs'
// Render Tag render 'sd-arrow-right', class: 'icon-xs'
// Render Tag render 'sd-arrow-up', class: 'icon-xs'
// Render Tag render 'sd-arrow-down', class: 'icon-xs'
// Render Tag render 'sd-settings', class: 'icon-xs'

Social

// Render Tag render 'sd-icon-fb', class: 'icon-xs'
render 'sd-round-icon-fb', class: 'icon-xs'
// Render Tag render 'sd-icon-tw', class: 'icon-xs'
render 'sd-round-icon-tw', class: 'icon-xs'
// Render Tag render 'sd-icon-in', class: 'icon-xs'
render 'sd-round-icon-in', class: 'icon-xs'
// Render Tag render 'sd-icon-instagram', class: 'icon-xs'
render 'sd-round-icon-instagram', class: 'icon-xs'
// Render Tag render 'sd-icon-threads', class: 'icon-xs'
render 'sd-round-icon-threads', class: 'icon-xs'
// Render Tag render 'sd-icon-youtube', class: 'icon-xs'
render 'sd-round-icon-youtube', class: 'icon-xs'
// Render Tag render 'sd-icon-tiktok', class: 'icon-xs'
render 'sd-round-icon-tiktok', class: 'icon-xs'

Container

// css class .page-width

// Variant var(--page-width)