Colors
Primary colors
- Primary black [primary-black] (#231F20)
- Primary white [primary-white] (#FFFFFF)
Secondary colors
- Secondary Teal [secondary-teal] (#91DED8)
- Secondary deep orange [secondary-deep_orange] (#CC7142)
- Secondary gold [secondary-gold] (#C0A677)
Brand Grays
- Brand Surface light [bg-brand-surface-light] (#F3F3F3)
- Brand Gray 50 [brand-gray-50] (#F9F9F9)
- Brand Gray 100 [brand-gray-100] (#F0F0F2)
- Brand Gray 200 [brand-gray-200] (#E1E2E5)
- Brand Gray 300 [brand-gray-300] (#D2D3D7)
- Brand Gray 400 [brand-gray-400] (#A5A7AF)
- Brand Gray 500 [brand-gray-500] (#868994)
- Brand Gray 600 [brand-gray-600] (#5D5F69)
- Brand Gray 700 [brand-gray-700] (#50525A)
- Brand Gray 800 [brand-gray-800] (#42444B)
- Brand Gray 900 [brand-gray-900] (#34353B)
Utility colors
- Utility error (#DD1D1D)
- Utility success (#18E098)
- Utility warning (#FB8F2B)
Typography
Heading 1 - 40px/48px (mob: 34px/42px)
Heading 2 - 30px/38px (mob: 30px/38px)
Heading 3 - 26px/34px (mob: 26px/34px)
Heading 4 - 22px/30px (mob: 20px/28px)
Heading 5 - 18px/24px (mob: 16px/26px)
Heading 6 - 14px/16px (mob: 14px/16px)
Minor heading - 10px/16px (mob: 10px/16px)
Paragraphs
Paragraph (large 18px/28px)
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 (standard 16px/28px)
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/28px)
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/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 (large - bold 18px/28px)
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 (standard - bold 16px/28px)
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 - bold 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 - bold 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.