Color System

Color is the single most impactful design decision for perceived product quality. Users form trust judgments within milliseconds, and color is the first thing they process -- before reading a single word. For the specific HSL token values and CSS implementation, see Design Tokens. This page documents the reasoning behind the choices.

Palette Summary

Role	Color family	HSL hue	Purpose
Primary	Deep teal	188	CTAs, links, navigation highlights, focus rings
Accent	Gold/brass	45	Discovery moments, badges, highlights -- used sparingly
Neutral	Warm off-white	40	Backgrounds, text, borders -- covers 60-70% of screen area
Sidebar	Dark teal	188	Navigation surface that recedes behind content
Semantic	Green, amber, red, blue	155, 45, 5, 220	Success, warning, error, info -- universal conventions

Why Deep Teal

The primary color decision flows from three factors:

Brand Alignment

The Creator + Magician + Explorer archetype calls for a color that communicates trust (exploration requires trust), clarity (research demands precision), and moderate energy (curious without being frantic). Teal sits between blue (trust, reliability) and green (growth, balance), combining trust signals with an exploratory quality that pure blue lacks.

Competitive Differentiation

Blue is the most common SaaS primary color -- Salesforce, LinkedIn, Dropbox, and hundreds of others. Purple/indigo is the second most common, heavily amplified by AI-generated design defaults (the "AI Purple Problem"). Deep teal provides differentiation from both of these crowded hue families while remaining in the trustworthy cool-tone neighborhood that B2B users expect.

AI Differentiation

AI code generation models default to indigo/purple because those hues are massively overrepresented in their training data. Choosing teal as the primary color is a structural defense against generic output -- every component generated by an AI agent using Trovella's design tokens will look distinct from the statistical average.

Why Gold Accent

The accent color (hue 45, gold/brass) serves a specific role: it marks moments of discovery, completion, and reward. The Magician archetype needs a "reveal" color -- something that signals "we found something for you" or "something noteworthy happened here."

Gold is the complementary partner to teal on the color wheel, creating high visual energy when the two appear together. Research shows that navy/teal + warm accent is perceived as 34% more trustworthy than monochromatic schemes. The accent appears on less than 10% of screen area -- its scarcity gives it weight.

Why Warm Neutrals

Neutrals cover 60-70% of screen area in a typical SaaS dashboard. They define the product's visual character more than the primary color. Two products with identical teal primaries feel completely different if one uses cool blue-grays and the other uses warm stone-toned neutrals.

Trovella uses warm neutrals (hue 40, in the stone/sand family) because:

• Archetype alignment -- the Creator archetype is approachable and human; cool grays feel technical and austere.
• Industry trend -- the industry is moving away from cool blue-gray toward warmer, more human-feeling interfaces. Apple, Linear, and Notion all use off-white backgrounds rather than pure #FFFFFF.
• Anti-generic signal -- pure gray (gray-50 through gray-900) is the default Tailwind neutral palette. Using warm-tinted neutrals is a visible departure from the AI-generated default.
• Dark mode character -- warm dark backgrounds (hue 40, low lightness) feel more comfortable for extended reading than pure black or cool dark gray.

The 60/30/10 Rule

Color distribution across any interface follows this ratio:

• 60% neutral -- backgrounds, text, borders. The warm off-white and its dark mode counterpart.
• 30% primary and secondary -- navigation surfaces, card accents, section backgrounds. Deep teal in various lightness levels.
• 10% accent -- CTAs, discovery moments, badges, highlights. Gold appears sparingly and carries weight because of its scarcity.

AI tends to over-apply the primary color or spread it uniformly. The 60/30/10 constraint prevents this -- if gold appears everywhere, it stops signaling anything special.

Semantic State Colors

These four color families are among the strongest UI conventions. They are not brand-specific -- they are universal:

State	Color family	Hue	Purpose
Success	Green	155	Confirmations, completed states, positive metrics
Warning	Amber	45	Warnings, pending states, approaching limits
Error / Destructive	Red	5	Errors, validation failures, destructive actions
Info	Blue	220	Informational messages, tooltips, neutral status

Each semantic color has a four-step mini-scale: muted background, border, icon/text on light background, and text on tinted background. The scales use matching lightness values across all four colors so they look equally prominent.

Accessibility note: Red-green color blindness affects 8% of men. Trovella never relies on color alone to distinguish error from success -- every state is paired with an icon, label, or pattern.

Light-First, Dark-Ready

Trovella is designed light-first (the default for B2B SaaS) with dark mode as a derived secondary pass. The critical architectural decision is that tokens are structured for both modes from day one:

• Same semantic token names in both modes (--primary, --background, --border)
• Light values under :root, dark values under .dark
• Components never hardcode color values -- they always reference semantic tokens
• The mode switch is a class toggle, not a media query, allowing user override

This architecture means adding or adjusting dark mode is a token-value change, not a component-by-component refactor. See Theming for the implementation.

Accessibility Requirements

All color usage meets WCAG 2.2 Level AA:

Requirement	Minimum ratio	Applies to
Normal text (< 24px)	4.5:1	All body text, labels, links
Large text (>= 24px or >= 19px bold)	3:1	Headings, large labels
UI components	3:1	Buttons, inputs, icons, focus rings
Color not sole indicator	N/A	Never use color alone to convey meaning

Practical implications:

• Primary teal at its main shade is dark enough for text use on white backgrounds
• Muted foreground uses a neutral dark enough to pass 4.5:1 on the warm off-white background
• Semantic colors on tinted backgrounds (green text on green-muted) are tested explicitly -- these are the most commonly failed checks

Teal-Tinted Shadows

Shadows in Trovella are tinted with the primary hue (188 20% 30% at low opacity) rather than using pure black or gray. This is a subtle but effective brand signal -- tinted shadows feel warmer and more cohesive than neutral shadows, and they are a strong "not-AI-generated" signal because models rarely generate them. See Design Tokens for the full shadow scale values.

Related Pages

• Design Tokens -- the HSL values, CSS custom properties, and shadow scale
• Theming -- dark mode toggle, Tailwind v4 mapping
• Brand Identity -- archetype decisions that drove color choices
• Anti-Patterns -- how color choices counter AI-generated defaults