Brand Color Matching: A Deep Dive

Color is one of the most powerful tools in design. The right colors create emotional connections, reinforce brand recognition, and guide user behavior. In this guide, we’ll explore how to customize Qaid’s feedback buttons to perfectly match any brand palette while maintaining accessibility and visual hierarchy.

Understanding Qaid’s Color System

Qaid uses three primary colors that you can customize:

• Positive Color: Used for the “thumbs up” button and positive feedback states
• Negative Color: Used for the “thumbs down” button and negative feedback states
• Marker Color: Used for the submit button, focus states, and the element targeting indicator

Let’s see how different color combinations affect the feel of the embed:

Warm and Inviting

For brands that want to feel approachable and friendly, warm colors create an inviting atmosphere:

Warm Color Palette

Orange and coral tones for friendly brands

Loading embed...

<script
  src="https://unpkg.com/@bjsm/qaid"
  data-endpoint="/api/feedback"
  data-positive-color="#f97316"
  data-negative-color="#dc2626"
  data-marker-color="#ea580c"
></script>

The orange positive button feels enthusiastic rather than clinical, while the red negative maintains clear meaning. This palette works well for food brands, community platforms, and creative industries.

Cool and Professional

Technology companies and financial services often prefer cooler tones that convey trust and reliability:

Cool Professional Palette

Blues and teals for tech and finance

Loading embed...

<script
  src="https://unpkg.com/@bjsm/qaid"
  data-endpoint="/api/feedback"
  data-positive-color="#0891b2"
  data-negative-color="#6366f1"
  data-marker-color="#0d9488"
></script>

Notice how both buttons use cool colors, yet the positive (teal) and negative (indigo) are still distinguishable. The marker color ties them together while maintaining its own identity.

High Contrast for Accessibility

Some brands prioritize maximum accessibility. Here’s a high-contrast configuration:

High Contrast Palette

Maximum visibility for accessibility

Loading embed...

<script
  src="https://unpkg.com/@bjsm/qaid"
  data-endpoint="/api/feedback"
  data-positive-color="#166534"
  data-negative-color="#991b1b"
  data-marker-color="#1e40af"
></script>

Darker, more saturated colors provide better contrast against light backgrounds. The WCAG 2.1 guidelines recommend a contrast ratio of at least 4.5:1 for text—these colors exceed that requirement.

Matching Specific Brand Palettes

Let’s walk through matching Qaid to some common brand styles.

Stripe-Inspired

Stripe uses a distinctive purple gradient. Here’s how to capture that feel:

Stripe-Inspired

Purple gradient aesthetic

Loading embed...

.qaid-stripe-btn {
  background: linear-gradient(135deg, #635bff 0%, #a855f7 100%);
  border: none;
  border-radius: 8px;
  padding: 12px;
  color: white;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(99, 91, 255, 0.3);
}

.qaid-stripe-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -5px rgba(99, 91, 255, 0.4);
}

.qaid-stripe-btn.qaid-btn-up {
  background: linear-gradient(135deg, #635bff 0%, #818cf8 100%);
}

.qaid-stripe-btn.qaid-btn-down {
  background: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
}

import { FeedbackEmbed } from '@bjsm/qaid';

new FeedbackEmbed({
  endpoint: '/api/feedback',
  buttonClass: 'qaid-stripe-btn',
  colors: {
    positive: '#635bff',
    negative: '#f43f5e',
    marker: '#635bff'
  }
});

The gradient backgrounds and subtle shadows match Stripe’s premium feel. The lift on hover adds tactile feedback.

GitHub-Inspired

GitHub’s interface is minimal but distinctive. Here’s a GitHub-style embed:

GitHub-Inspired

Clean developer aesthetic

Loading embed...

.qaid-github-btn {
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 12px;
  color: #c9d1d9;
  font-size: 14px;
  transition: all 0.15s ease;
}

.qaid-github-btn:hover {
  background: #30363d;
  border-color: #8b949e;
}

.qaid-github-btn.qaid-btn-up {
  color: #3fb950;
}

.qaid-github-btn.qaid-btn-up:hover {
  border-color: #3fb950;
}

.qaid-github-btn.qaid-btn-down {
  color: #f85149;
}

.qaid-github-btn.qaid-btn-down:hover {
  border-color: #f85149;
}

import { FeedbackEmbed } from '@bjsm/qaid';

new FeedbackEmbed({
  endpoint: '/api/feedback',
  buttonClass: 'qaid-github-btn',
  colors: {
    positive: '#3fb950',
    negative: '#f85149',
    marker: '#58a6ff'
  }
});

The dark background with subtle borders and colored icons perfectly captures GitHub’s utilitarian design language.

Notion-Inspired

Notion’s aesthetic is minimal and highly readable with ghost buttons:

Notion-Inspired

Warm minimal aesthetic

Loading embed...

.qaid-notion-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease;
}

.qaid-notion-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.qaid-notion-btn.qaid-btn-up:hover {
  color: #2eaadc;
}

.qaid-notion-btn.qaid-btn-down:hover {
  color: #eb5757;
}

import { FeedbackEmbed } from '@bjsm/qaid';

new FeedbackEmbed({
  endpoint: '/api/feedback',
  buttonClass: 'qaid-notion-btn',
  colors: {
    positive: '#2eaadc',
    negative: '#eb5757',
    marker: '#2eaadc'
  }
});

Ghost buttons that only reveal color on hover keep the interface clean until interaction.

Using CSS Custom Properties

For advanced implementations, you can use CSS custom properties to make theming dynamic:

:root {
  --brand-positive: #22c55e;
  --brand-negative: #ef4444;
  --brand-accent: #6366f1;
}

[data-theme="dark"] {
  --brand-positive: #4ade80;
  --brand-negative: #f87171;
  --brand-accent: #818cf8;
}

.qaid-dynamic-btn {
  background: var(--brand-accent);
}

.qaid-dynamic-btn.qaid-btn-up {
  background: var(--brand-positive);
}

.qaid-dynamic-btn.qaid-btn-down {
  background: var(--brand-negative);
}

This approach lets your feedback embed automatically adapt when users toggle between light and dark modes.

Color Psychology Quick Reference

When choosing colors, consider the emotional associations:

Color	Positive Associations	Best For
Green	Growth, success, nature	Eco brands, finance, health
Blue	Trust, calm, professional	Tech, corporate, healthcare
Orange	Energy, creativity, warmth	Food, creative, community
Purple	Luxury, creativity, wisdom	Premium brands, creative tools
Teal	Balance, clarity, sophistication	Modern brands, wellness

Testing Your Colors

Before deploying, test your color choices:

1. Contrast Check: Use a tool like WebAIM’s contrast checker to verify accessibility
2. Color Blindness: Test with simulators for deuteranopia, protanopia, and tritanopia
3. Context Testing: View your embed on actual pages, not just isolated previews
4. Dark/Light Modes: Verify colors work in both contexts if your site supports both

The goal is feedback buttons that feel like a natural extension of your site while remaining clearly actionable. Color is your most powerful tool for achieving that balance.