Color Palette
A carefully crafted spectrum designed for clarity, accessibility, and brand consistency across all That Is A Q digital products.
Brand Colors
Core identity colors used for primary actions, branding, and key visual elements.
Neutrals & Surfaces
Used for backgrounds, text, borders, and structural layout. Optimized for dark & light contexts.
Functional States
Semantic colors for status, feedback, and interactive states.
Usage Guidelines
See how our palette applies to real UI components and typography.
Buttons & CTAs
Use Primary for main conversions. Secondary for alternative paths. Accent sparingly for highlights or campaigns.
Typography Hierarchy
Heading / Primary Text (1.6:1 min)
Subheading / Secondary (4.5:1 WCAG AA)
Body / Tertiary / Muted (3:1 WCAG AA)
Captions / Disabled (2.5:1)
Surface Combinations
Layer surfaces intentionally. Maintain minimum 4.5:1 contrast for text on tinted backgrounds.