Exploring 6 directions, comparing 4 final candidates, and choosing one. We document the process and rationale behind QA NOTE's key color decision.
What we tried and learned
Good choices come from good eliminations. Below are directions we actually prototyped and excluded through user feedback. The lessons each left behind became the rationale for our final choice.
Connected with QA's 'pass' image, but in the Korean market, overlapped with Naver's green, making brand independence impossible.
What matters more than a color's meaning is whether it's already claimed in the market.
Moved to true green (hue 135-148), but same Naver association problem in light mode. Felt like a terminal window in dark mode.
The entire green family is unsuitable as a key color for QA tools in the Korean market.
Referenced dark themes from dev tools like Linear and Vercel, but since QA itself is tedious work, the 'terminal-like seriousness' backfired.
If your target isn't developers but QA/PM/designers, your design references should differ too.
Accent-only approach on achromatic base. Refined but cold — impression of 'feels heavy' rather than 'let me try this.'
Sophistication and accessibility are different axes.
Warm but felt more like a coffee brand/F&B than SaaS. Too casual for B2B products.
Not all warm colors have the same temperature. Industry-specific color associations exist.
Distinctive but the purple family is oversaturated in the existing SaaS market (Figma, Notion, Linear).
Differentiation comes not from the color itself, but from the combination of color and brand personality.
Choosing one from four
After abandoning dark themes and switching to light-first, we prototyped 4 candidates from warm color families. We compared actual usability by placing each color on identical UI.
Warm with energy, a color rarely used in the dev tool market. The surprise of 'this is a QA tool?'
Too soft, reducing CTA button visibility. Lacks strength as an accent.
Solid but too dark for a 'light start' impression. Feels too heavy.
Unique but pink-leaning, strongly associated with cosmetics/beauty industry.
5 reasons we chose Warm Coral #E8624A
Coral is virtually unused in the dev and QA tool market. Green (GitHub, JetBrains), blue (Jira, Linear), purple (Figma, Notion) — coral is absent from this red ocean.
The reaction 'a QA tool that feels this warm?' is itself an anchor for brand memory. A color that breaks the prejudice QA = cold and mechanical defines the brand.
Coral is neither 'warning' red nor 'stop' red. A color where energy and warmth coexist, lowering the psychological barrier to 'let me try this.'
On light backgrounds, coral has high visibility without being aggressive. Unlike neon colors on dark mode, it's an easy-on-the-eyes accent.
Coral naturally extends to Tint(#FFF0ED), Hover(#D4553E), Deep(#B8422E). Status badges, background emphasis, and dark mode support — all from a single hue.
"A QA tool that feels this warm?"
That surprise is our brand.
Token system composed of 5 layers
All colors are defined in the OKLCH color space. OKLCH is a perceptually-based color space where Lightness, Chroma, and Hue can be adjusted independently, enabling consistent contrast ratios and harmonious palette expansion.
Coral lightness scale. 6 levels from 50 (badge background) to 900 (dark mode text).
--coral--coral-deep--coral-tint--coral-barSurface-based hierarchy. Core system that distinguishes areas with background color differences instead of borders.
--canvas--panel--inset--chip--inset-deep--inkFunctional colors representing states. Operated independently from brand color.
--hairline--outline--panel-hover--month-outIssue status-specific colors. Open = coral (brand), Resolved = green, etc.
--status-open-bg--status-in-progress-bg--status-blocked-bg--status-fix-submitted-bg--status-verified-bg--status-closed-bg4-level text hierarchy. WCAG 2.1 AA contrast ratio compliant.
--text-1--text-2--text-3--text-4--text-5--text-6--text-7--text-8Distinguishing with surfaces instead of borders
QA NOTE distinguishes UI areas with gradual background color differences instead of borders. This "surface-based design" reduces visual noise and creates an environment focused on content. Surface Hue and Chroma control the overall temperature of the app.
--canvasBackground#E8E6E3Full page background. Minimal chroma as it covers the largest area.
--panelCard#FFFFFFBackground for cards, modals, popovers. Brighter than background with slightly lower chroma, creating surface hierarchy.
--insetMuted/Hover#F6F4F1Table headers, hover states, zebra striping. Same brightness as background with only chroma raised for distinction.
--chipEmphasis#F1EFECSelected items, active tab background. Darkest with highest chroma for visual weight.
Adjusting Surface's Hue (color direction) and Chroma (saturation) changes the overall "temperature" of the app. Current default is hue 264 (cool gray), and we're exploring a shift toward warm direction (hue 70~90) for harmony with the coral key color. Chroma is fine-tuned in the 0.003~0.008 range.
Rules for using color
All color values are referenced through CSS variables (--token). Never use #E8624A directly in components. This is the foundation for theme switching and dark mode support.
Unified on OKLCH instead of HEX or HSL. Perceptual color remains consistent when changing Lightness (L), ensuring coherent impressions when expanding lightness scales.
Distinguish areas with Surface level differences instead of borders. Use borders only when unavoidable, and derive their color from Surface tokens.
Use coral only where it 'drives action' — CTA buttons, status badges, key metrics. Spreading brand color over large areas increases fatigue.
Text-to-background contrast ratio is guaranteed at WCAG 2.1 AA (4.5:1) or above. Contrast ratios are predicted and managed using OKLCH Lightness values.
Success (green), Warning (amber), Info (blue) are operated as independent tokens unaffected by brand rebranding. Meaning determines color.
The journey to determining the key color
Emerald → Check Green. One-dimensional connection of QA = pass (✓). Discovered Naver association problem in Korean market.
Concerns about dark theme's 'terminal feel.' Since QA is tedious work, needed light and solid impression over seriousness. Full review of green family.
Target redefinition: Notion/1Password/Channel Talk instead of Linear/Vercel. Explored 4 color directions (coral, charcoal, amber, violet).
Warm Coral #E8624A confirmed among 4 final candidates. Brand page creation, light mode token system established.
Exploring Surface hue shift from cool (264) to warm (70~90) direction for temperature harmony with key color.
QA NOTE Color Story — Internal Design Documentation
This document was written to preserve the context of branding decisions.