Website Color Usage Guideline

Primary Color:

• It’s the main branding color
• Apply to main headlines
• Use in backgrounds
• Apply to icons
• Utilize in key visual elements to establish brand identity.

Secondary Color (optional):

• Look for a neutral/quiet tone (e.g. brown). I pretty much won’t use the secondary colour. It’s just for =<H3 and elements where the primary/accent don’t work well
• H3 and below.
• Use in backgrounds (it’s ok if both primary and secondary are used for backgrounds)
• Use for secondary buttons and other supporting UI elements.
• Enhance overall design balance and contrast.

Accent Color:

• Use for interactive elements like buttons and links to create contrast.
• Apply to icons (specially when they are related to CTA), badges, and other attention-grabbing elements.

Soft backgrounds:

• For backgrounds where white is too stark.