Secondary Colors

Secondary colors should be used sparingly to accentuate specific icons or backgrounds. Avoid overwhelming the design by introducing unnecessary variations.

Secondary-BG-Color

This secondary background color is applied to cards, lists, text-blocks empowerments, and other areas where a subtle distinction from the main text is needed.

Hex Color Code:

#dfd4f2

Muted-Text-Color

This color is used for secondary information, providing subtle contrast to the primary black text. It’s ideal for captions, subheadings, or supplementary details, helping to create a clear visual hierarchy.

Hex Color Code:

#2b2b2b

Danger-Color

Use this color on icons to emphasize warnings, precautions, and potential concerns. Apply it to highlight critical information that users should avoid, be cautious of, or take note of, ensuring that it stands out and effectively communicates important cautions.

Hex Color Code:

#e30613

Success-Color

Use this color on icons to highlight information related to positive outcomes or safe practices. It should be used to denote recommendations or actions that are safe and beneficial, helping users easily identify best practices and positive guidance.

Hex Color Code:

#029634

Info-Color

Use this color on icons and links to highlight informational content or provide helpful tips. It should be used to denote general guidance, neutral advice, or additional context, helping users easily identify important information and access further resources.

Hex Color Code:

#224e9d