NOTICE: Banner

KENT B2B 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 Yellow kentYellow
Kent Grey kentGrey
kent White kentWhite

Supplementary/Secondary Colours

Satin Sheen Gold kentSatinSheenGold
Pale Yellow kentPaleYellow
Loyalty House1 kentLoyaltyHouse1
Loyalty House2 kentLoyaltyHouse2
Loyalty House3 kentLoyaltyHouse3
Loyalty House4 kentLoyaltyHouse4
Kent Green kentGreen
Forest Green kentForestGreen
Pale Blue kentPaleBlue
Container Outline kentContainerOutline

Specialty Accent/Marketing Colours

Lime Green kentLimeGreen
Blast Red kentBlastRed
Hot Pink kentHotPink
Orange kentOrange
Grape kentGrape
Coastal Blue kentCoastalBlue
Acadian Blue kentAcadianBlue

Alert Message Colours

Success Green kentSuccessGreen
Warning Yellow kentWarningYellow
Error Red kentErrorRed

Greyscale

Black kentBlack
Grey 1 kentGrey1
Grey 2 kent-grey-2
Grey 3 kentGrey3
Grey 4 kentGrey4
Grey 5 kentGrey5
Grey 6 kentGrey6
Grey 7 kentGrey7
White kentWhite

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

Secondary Button

Secondary Buttons - Inverse

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...