PriceCompare brand kit
Logos, colors, type and voice. Everything needed to keep PriceCompare looking and sounding the same everywhere.
The mark
Two price bars for the same product. The shorter one, the lower price, ends in a mint dot: the lowest price, at a glance.
- Violet → fuchsia gradient: calm, modern, a little warm. Never flat gray.
- Faded top bar: the higher price, deliberately quieter.
- Solid short bar + mint dot: the better deal, which is what we help people find.
- Rounded corners everywhere: soft and friendly, matching the site's cards.
Logos
SVG for the web and anything scalable; PNG where SVG isn't supported (email, some social tools).
Colors
Light and calm. Violet leads; pastels set the mood; mint only ever means savings.
Primary brand color, links, key accents
Gradient partner to violet (mark, AI features)
The 'lowest price' dot, savings. Use sparingly
Text and dark backgrounds
Violet's stand-in on dark backgrounds
Soft lavender background wash
Soft blue background wash
Soft warm background wash
Brand gradient: Violet #7C3AED → Fuchsia #D946EF, top-left to bottom-right. Status colors stay separate: green = great price, amber = caution/sample, gray = neutral.
Typography
Geist, free and open source (by Vercel). One family for everything.
Using the logo
A few rules keep it looking right.
- Leave clear space around the logo at least the height of the mint dot.
- Keep the mark at least 16px and the full logo at least 96px wide.
- Use the dark version on dark backgrounds and the one-color mark on photos.
- Write the name as PriceCompare in text (one word, two capitals).
- Stretch, rotate, outline, or add shadows or effects.
- Change the gradient or recolor the mint dot.
- Put the gradient mark on busy photos or clashing colors.
- Retype the wordmark in another font.
Voice
A knowledgeable friend who respects your time. Calm, honest, plain.
✓ “Stays bright in a sunny room”
“1,800-nit peak luminance”
✓ “Save $152 at Walmart”
“HUGE DEAL!!! Don't miss out!”
✓ “It's been cheaper recently. Consider tracking it.”
“Only 2 left! Buy now!”
Social & icons
Already wired into the site.
Default link preview (1200×630). Favicon, app icons and email headers use the mark. Regenerate everything with npx tsx scripts/brand.mts.