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)
Heading 1 Italic
Heading 2 Italic
Heading 3 Italic
Heading 4 Italic
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.
Links
Link (Regular 15px/22px)
Link (Large 16px/24px)
Link (Small 13px/20px)
Link (Minor 10px/16px)
Link Italic (Regular 15px/22px)
Link Italic (Large 16px/24px)
Link italic (Small 13px/20px)
Link Italic (Minor 10px/16px)
Base dropdown