WE'RE YOUR ATLANTIC CANADIAN TEAM!

WE'RE YOUR ATLANTIC CANADIAN TEAM!

KENT B2C Design System

  1. Color Pallete
    1. Primary Colors
    2. Supplementary/Secondary Colors
    3. Specialty Accent/Marketing Colours
    4. Alert Message Colors
    5. Greyscale
  2. Typography
    1. Font Families
    2. Headings
    3. Paragraph
  3. Components
    1. Primary Buttons
    2. Secondary Buttons
    3. Text Links
    4. Breadcrumbs
    5. List Styles
    6. Input Fields
    7. Dropdowns
    8. Selectors
    9. Accordions
    10. Copy Sku
    11. Pagination
  4. Messaging
    1. Tooltips
    2. Alert Messaging
    3. Badges
  5. Iconography
    1. Navigation Icons
    2. Social Icons
    3. Payment Icons

Colour Palette

Primary Colours

Kent Grenn kent-green/kent-yellow
Kent Grey kent-grey
Kent Yellow kent-yellow

Supplementary/Secondary Colours

Forest Green kent-forest-green
Mint Green kent-mint-green
Pale Blue kent-pale-blue
Container Outline kent-container-outline

Specialty Accent/Marketing Colours

Lime Green kent-lime-green
Blast Red kent-blast-red
Hot Pink kent-hot-pink
Orange kent-orange
Grape kent-grape
Coastal Blue kent-coastal-blue
Acadian Blue kent-acadian-blue

Alert Message Colours

Success Green kent-success-green
Warning Yellow kent-warning-yellow
Error Red kent-error-red

Greyscale

Black kent-black
Grey 1 kent-grey-1
Grey 2 kent-grey-2
Grey 3 kent-grey-3
Grey 4 kent-grey-4
Grey 5 kent-grey-5
Grey 6 kent-grey-6
Grey 7 kent-grey-7
White kent-white

Typography

Font Families Used

Inter Regular

Inter Medium

Inter Semibold

Inter Bold

Inter Medium Italic

Heading Styles

H1 Heading

Desktop: Inter / Bold / 52px / Line Height 60px / Letter 0 px Mobile: Inter / Bold / 44px / Line Height 52px / Letter 0 px

H2 Heading

Desktop: Inter / Bold / 32px / Line Height 42px / Letter 0 px Mobile: Inter / Bold / 28px / Line Height 36px / Letter 0 px

H3 Heading

Desktop: Inter / Semibold / 26px / Line Height 36px / Letter 0 px Mobile: Inter / Semibold / 24px / Line Height 32px / Letter 0 px

H4 Heading

Desktop: Inter / Medium / 22px / Line Height 28px / Letter 0 px Mobile: Inter / Medium / 20px / Line Height 26px / Letter 0 px
H5 Heading
Desktop: Inter / Bold / 20px / Line Height 24px / Letter 0 px Mobile: Inter / Bold / 18px / Line Height 22px / Letter 0 px
H6 Heading
Desktop: Inter / Med Italic / 18px / Line Height 20px / Letter 0 px Mobile: Inter / Med Italic / 16px / Line Height 20px / Letter 0 px

Paragraph Styles

Paragraph Caption Heading

Inter / Bold / 16px / Line Height 24px / Letter 1 px

Paragraph Caption Small

Inter / Bold / 13px / Line Height 20px / Letter 0 px

Lead Paragraph

Inter / Regular / 22px / Line Height 30px / Letter 0 px

Body Large

Inter / Regular / 20px / Line Height 28px / Letter 0 px

Body Large Medium

Inter / Medium / 20px / Line Height 28px / Letter 0 px

Body Regular

Inter / Regular / 18px / Line Height 28px / Letter 0 px

Body Medium

Inter / Medium / 18px / Line Height 28px / Letter 0 px

Body Small

Inter / Regular / 16px / Line Height 24px / Letter 0 px

Body Small Medium

Inter / Medium / 16px / Line Height 24px / Letter 0 px

Body Extra Small

Inter / Regular / 14px / Line Height 18px / Letter 0 px

Components

Button Styles

Primary Button

Primary Buttons - Inverse

Primary Contrast Buttons - Pale Blue

Secondary Button

Secondary Buttons - Inverse

Secondary Contrast Buttons - Pale Blue

List Style

Numbered List

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
  2. Assumenda, quia temporibus eveniet a libero incidunt suscipit
  3. Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

Bulleted List

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

Forms

Selectors

RADIO BUTTONS
Checkboxes
Toggle Button
Toggle button
Disabled Toggle

Accordion

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Copy Sku

Will be covered as part of corresponding ticket

Pagination

Will be covered as part of corresponding ticket

Messaging

Tooltips

Will be covered as part of corresponding ticket

Alerts Messages

Success Alert Title This is a success message.
Warning Alert Title This is a warning message.
Error Alert Title This is a error message.
Notification Alert Title This is a notification.

Badges

Will be covered as part of corresponding ticket

Iconography

Social Icons

Payment Icons

Product added to your cart
Loading...