Brand Color Matching
Match the Qaid embed to your brand palette, with the contrast and dark-mode checks that keep it usable.
A feedback button in the wrong colour reads as somebody else's software bolted onto your page. Three settings fix that, and the rest of this is about picking values that still work for the people who have to see them.
Three colors, three jobs
positive paints the thumbs-up button and the states that follow it, and negative does the same job for thumbs down. marker is the odd one out: it colours the submit button, that button's focus ring, the pulsing circle around a targeted element, and the type badge in the modal. Put your accent there.
The same three values, moved around, change the feel of the thing completely:
Warm and Inviting
Warm colours read as approachable:
Warm Color Palette
Orange and coral tones for friendly brands
<script
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
data-endpoint="/api/feedback"
data-positive-color="#f97316"
data-negative-color="#dc2626"
data-marker-color="#ea580c"
></script>Orange for positive is enthusiastic where green is clinical, and the red still means what red means. Food, community and creative sites tend to land here.
Cool and Professional
Tech and finance sites usually want the cooler end:
Cool Professional Palette
Blues and teals for tech and finance
<script
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
data-endpoint="/api/feedback"
data-positive-color="#0891b2"
data-negative-color="#6366f1"
data-marker-color="#0d9488"
></script>Both buttons are cool here and the teal and indigo still separate cleanly. The marker sits between them and pulls the set together.
High Contrast for Accessibility
If contrast matters more than mood, go darker and more saturated:
High Contrast Palette
Maximum visibility for accessibility
<script
src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
data-endpoint="/api/feedback"
data-positive-color="#166534"
data-negative-color="#991b1b"
data-marker-color="#1e40af"
></script>WCAG asks for 4.5:1 against whatever the colour actually sits on. These three clear it on white. Check yours on your own background rather than trusting a palette that cleared it on someone else's.
Matching a brand you already know
Three palettes you can read off a site you have open in another tab.
Stripe-Inspired
Stripe runs on a purple gradient:
Stripe-Inspired
Purple gradient aesthetic
.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 { QaidFeedback } from '@qaiddev/thumbs-embed';
new QaidFeedback({
endpoint: '/api/feedback',
buttonClass: 'qaid-stripe-btn',
colors: {
positive: '#635bff',
negative: '#f43f5e',
marker: '#635bff'
}
});The shadow does most of the work. The one-pixel lift on hover is what makes it feel like a button rather than a picture of one.
GitHub-Inspired
GitHub is flatter: grey chrome, colour only on the icon.
GitHub-Inspired
Clean developer aesthetic
.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 { QaidFeedback } from '@qaiddev/thumbs-embed';
new QaidFeedback({
endpoint: '/api/feedback',
buttonClass: 'qaid-github-btn',
colors: {
positive: '#3fb950',
negative: '#f85149',
marker: '#58a6ff'
}
});Only the border changes colour on hover. The fill stays put.
Notion-Inspired
Notion goes further and drops the button entirely until you touch it:
Notion-Inspired
Warm minimal aesthetic
.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 { QaidFeedback } from '@qaiddev/thumbs-embed';
new QaidFeedback({
endpoint: '/api/feedback',
buttonClass: 'qaid-notion-btn',
colors: {
positive: '#2eaadc',
negative: '#eb5757',
marker: '#2eaadc'
}
});Ghost buttons stay out of the way, at the cost of being easy to miss. Worth it on a page dense with other controls.
Following your site into dark mode
If your site already flips a data-theme attribute, hand the embed variables instead of hex values:
: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);
}Now the buttons change when the rest of the page does, and you never write the switch twice.
What colors tend to mean
Rough associations, useful when you have no brand to match:
| 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 |
Check the colours before you ship them
Run WebAIM's contrast checker on each colour against the background it lands on. Run a deuteranopia simulator, because red and green thumbs are the one pairing colour blindness hits hardest. Look at the buttons on a real page rather than a preview, where nothing else is competing for attention. And if your site has a light mode and a dark one, look at both.
The buttons should read as part of your site and still read as buttons.