Cart x

Quick contacts

UI Style Guide

Colors

PRIMARY colors

#FFEC42
#FADB14

Neutral colors

#262626
#595959
#8C8C8C
#BFBFBF
#D9D9D9
#E8E8E8
#F5F5F5
#FAFAFA
#FFFFFF

semantic colors

#0084F4
#66B5F8
#D5E9FA
#00C48C
#CDE7D8
#AD8B00
#D4B106
#C22C2C
#FFB8C9
#F8BF9C

Typography

Playfair Display & Poppins

Heading 1

Playfair Display 50px / L55px

BUTTON 1

Poppins Regular 16px / L24px

Body 1

Poppins Regular 18px / L26px

Heading 2

Poppins Regular 40px / L46px

BUTTON 2

Poppins Regular 14px / L22px

Body 2

Poppins Regular 16px / L24px

Heading 3

Poppins Regular 24px / L30px

Small Text 1

Poppins Regular 12px / L20px

Heading 4

Poppins Regular 20px / L28px

Small Text 2

Poppins Regular 14px / L22px

components

Button Colours:

Primary SEcondary DISABLED PriMARY HOVER SECONDARY HOVER

Button Size:

H=60 H=58 H=52 H=42 H=38

Text Link

text only
icon left
icon right

Tag:

sale
Hot
New
Hot

Filter & Tab Elements

ACTIVE
INACTIVE
INACTIVE

checkboxes

radio button

Tags

Tags

Stepper control

    01
    • 03

paginations page

123
123
123

paginations dot

123

Badges

8 4

Divider

Alerts

Tooltip

Quick View Quick View Quick View Quick View

Input & Dropdown forms

default

password

dropdown

Dropdown
  • Value
  • Value
  • Value

List

  • Tremblant In Canada

    Whether its a driving tour, a cruise or a bus, leaf viewing is a great way to spend a fall vacation.

  • Tremblant In Canada

    Whether its a driving tour, a cruise or a bus, leaf viewing is a great way to spend a fall vacation.

  • Tremblant In Canada

    Whether its a driving tour, a cruise or a bus, leaf viewing is a great way to spend a fall vacation.

  1. Tremblant In Canada

    Whether its a driving tour, a cruise or a bus, leaf viewing is a great way to spend a fall vacation.

  2. Tremblant In Canada

    Whether its a driving tour, a cruise or a bus, leaf viewing is a great way to spend a fall vacation.

  3. Tremblant In Canada

    Whether its a driving tour, a cruise or a bus, leaf viewing is a great way to spend a fall vacation.

Search bar

Image Size

Grid Style 1

588×588

434×434
279×279

OVERLAYS

Back to top