Colors

Base colors

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

Accents colors

  • Accent Red [accent-red] (#F11A1A)
  • Accent Green [accent-green] (#15FF9D)
  • Accent Blue [accent-blue] (#02A6FF)
  • Accent Orange [accent-orange] (#FF952B)

Gray colors

  • Gray 50 [project-gray-50] (#F7F7F7)
  • Gray 200 [project-gray-200] (#E1E2E5)
  • Gray 400 [project-gray-400] (#A5A7AF)
  • Gray 500 [project-gray-500] (#868994)
  • Gray 600 [project-gray-600] (#5D5F69)

Utility colors

  • Utility error [utility-error] (#DD1D1D)
  • Utility success [utility-success] (#18E098)
  • Utility warning [utility-warning] (#FB8F2B)

Typography

Fonts:

Inter: Tailwind class [font-body]

Helvetica: Tailwind class [font-secondary]

Headings

Heading 1 - 28px/28px (mob: 20px/24px)

Heading 2 - 24px/24px (mob: 18px/20px)

Heading 3 - 32px/44px (mob: 20px/24px)

Heading 4 - 20px/24px (mob: 16px/20px)

Heading 5 - 13px/16px (mob: 12px/16px)
Heading 6 - 12px/14px (mob: 11px/14px)

Heading minor - 12px/14px (mob: 12px/14px)

Paragraphs

Paragraph (Regular 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 (Small 13px/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 12px/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.

Links

Link (Regular 14px/24px)
Link (Small 13px/20px)
Link (Minor 12px/20px)

Pulse

Pulse buttons

Buttons

Primary buttons

Secondary buttons

View in room button

CTA link buttons

Filter buttons

Frame and sizes dropdown

Close and Zoom buttons

Inputs
Cart

Your cart is empty

Browse Catalogue

You might like these

Popular

"SPEED" 5-Panel
"SPEED" 5-Panel
1974
24 Hours