Brand Colors

Comprehensive Brand Color Guide

Complete Color System with Tints, Shades & Implementation Tokens

Quick Reference

Clarity Sky Blue

Primary brand, headers, CTAs

Clarity Leaf Green

Secondary brand, success states

Clarity Apple Green

Light backgrounds, subtle accents

Turquoise

Supporting elements, icons

Blue Gray

Text, borders, subtle backgrounds

Dark Charcoal

Primary text, high contrast

Bright Green

Success indicators, positive data

Golden Orange

Warnings, attention elements

Rich Purple

Premium features, highlights

Deep Navy

Data visualization, charts

Core Colors
 

Clarity Sky Blue

#CBE3F5
rgb(203, 227, 245)
var(--clarity-sky-blue)

Usage: Primary brand, headers, CTAs

Tints

 
 
 
 
 

Shades

 
 
 
 
 
 

Clarity Leaf Green

#7EE6A1
rgb(126, 230, 161)
var(--clarity-leaf-green)

Usage: Secondary brand, success states

Tints

 
 
 
 
 

Shades

 
 
 
 
 
 

Clarity Apple Green

#E5FAEC
rgb(229, 250, 236)
var(--clarity-apple-green)

Usage: Light backgrounds, subtle accents

Tints

 
 
 
 
 

Shades

 
 
 
 
 
Secondary Colors
 

Turquoise

#81D8D0
rgb(129, 216, 208)
var(--turquoise)

Usage: Supporting elements, icons

Tints

 
 
 
 
 

Shades

 
 
 
 
 
 

Blue Gray

#69758C
rgb(105, 117, 140)
var(--blue-gray)

Usage: Text, borders, subtle backgrounds

Tints

 
 
 
 
 

Shades

 
 
 
 
 
 

Dark Charcoal

#000000
rgb(0, 0, 0)
var(--dark-charcoal)

Usage: Primary text, high contrast

Tints

 
 
 
 
 
Accent Colors
 

Bright Green

#6BC288
rgb(107, 194, 136)
var(--bright-green)

Usage: Success indicators, positive data

Tints

 
 
 
 
 

Shades

 
 
 
 
 
 

Golden Orange

#D9AE6C
rgb(217, 174, 108)
var(--golden-orange)

Usage: Warnings, attention elements

Tints

 
 
 
 
 

Shades

 
 
 
 
 
 

Rich Purple

#985EB9
rgb(152, 94, 185)
var(--rich-purple)

Usage: Premium features, highlights

Tints

 
 
 
 
 

Shades

 
 
 
 
 
 

Deep Navy

#000067
rgb(0, 0, 103)
var(--deep-navy)

Usage: Data visualization, charts

Tints

 
 
 
 
 

Shades

 
 
 
 
 
CSS Variables
:root { /* === CORE PALETTE === */ --clarity-sky-blue: #CBE3F5; --clarity-leaf-green: #7EE6A1; --clarity-apple-green: #E5FAEC; /* === SECONDARY PALETTE === */ --turquoise: #81D8D0; --blue-gray: #69758C; --dark-charcoal: #000000; /* === ACCENT PALETTE === */ --bright-green: #6BC288; --golden-orange: #D9AE6C; --rich-purple: #985EB9; --deep-navy: #000067; }

Add these variables to your root CSS file to use them throughout your project.

Color copied to clipboard!