Skip to content
Log in wishlist
Cart

Your cart is currently empty

Continue shopping

Colors

Base colors

  • Base black [base-black] (#000000)
  • Base white [base-white] (#FFFFFF)

Accents colors

  • Accent black [accent-black] (#23272A)
  • Accent dark Green [accent-dark-green] (#3E3D27)
  • Accent Dark Navy [accent-dark-navy] (#2A2330)
  • Accent Grey [accent-grey] (#373F45)
  • Accent Gold [accent-gold] (#B49A63)
  • Accent Cream [accent-cream] (#F4EFE6)
  • Accent Off White [accent-off-white] (#FAF5EF)

Gray colors

  • Gray 50 [gray-50] (#FCFCFC)
  • Gray 100 [gray-100] (#F2F2F2)
  • Gray 200 [gray-200] (#EFEFEF)
  • Gray 300 [gray-300] (#EFEFEF)
  • Gray 400 [gray-400] (#E3E3E3)
  • Gray 500 [gray-500] (#868994)
  • Gray 600 [gray-600] (#42444B)

Utility colors

  • Utility error (#DD1D1D)
  • Utility success (#18E098)
  • Utility warning (#FB8F2B)

Typography

Headings

Heading 1 - 36px/48px (mob: 26px/30px)

Heading 1 Italic - 36px/48px (mob: 26px/30px)

Heading 2 - 32px/34px (mob: 22px/26px)

Heading 2 Italic - 32px/34px (mob: 22px/26px)

Heading 3 - 24px/28px (mob: 18px/22px)

Heading 3 Italic - 24px/28px (mob: 18px/22px)

Heading 3 Capitalize - 24px/28px(line-height: 30px) (mob: 18px/22px(line-height: 24px))

Heading 4 - 20px/28px (mob: 18px/24px)

Heading 4 Italic - 20px/28px (mob: 18px/24px)

Heading 5 - 15px/20px (mob: 14px/20px)
Heading 6 - 12px/24px (mob: 12px/24px)

Paragraphs

Paragraph (Regular 15px/22px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (Large 16px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (Small 14px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (Minor 13px/20px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph Italic (Regular 15px/22px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph Italic (Large 16px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph Italic (Small 14px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph Italic (Minor 13px/20px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.


Primary buttons

Primary Solid
Primary Outlined

Secondary buttons

Secondary button
Secondary button Outlined

Tertiary buttons

Tertiary black
Tertiary white
Inputs

Base dropdown
Disabled dropdown
Dropdown with error