Brand & Customise
Choose Your Site Colours
Primary, secondary, and background colours — how they cascade through every component, with WCAG contrast guidance.
Three colour values drive the entire storefront theme. Pick them carefully — they cascade through every button, link, hover state, and accent on the site.
Where to set them
Raffle admin → Brand. Three hex inputs:
- Primary (brand) colour— used for primary buttons, links, active nav items, and the “buy ticket” CTA. The single most visible colour on the site.
- Secondary colour — used for hover states, glow effects, ambient lighting on game previews, and accent borders. Looks best as a complementary or analogous hue to your primary.
- Background colour — the dark canvas behind everything. We default to a near-black (
#0a0a0a). You can pick any dark hue, but stay dark — the storefront UI is built for dark-mode contrast.
Quick combos that work
If you’re not a designer, here are five proven combinations from sites we’ve shipped:
- Lucky Turbo — Primary
#00B0F0(electric cyan) · Secondary#3B82F6(cobalt) · Background#0a0a0a - Mr XCA — Primary
#FF6B35(vivid orange) · Secondary#FFB700(gold) · Background#0F0F12 - Pink Raffles (test tenant) — Primary
#EC4899· Secondary#A855F7· Background#0a0a0a - Emerald — Primary
#10B981· Secondary#06B6D4· Background#0a0a0a - Gold-on-black — Primary
#EAB308· Secondary#F97316· Background#0a0a0a
WCAG contrast (don’t skip this)
Your primary colour must be readable as a link on the background. Aim for a contrast ratio of at least 4.5:1(WCAG AA for body text) — most bright saturated colours pass easily on a dark background, but if you want a deep navy primary on a near- black background you’ll fail it.
Test your combination at WebAIM Contrast Checker. If it fails AA, your CTAs will be hard to read for older customers and you’ll lose conversions you don’t know you’re losing.
How changes propagate
Saving in Brand writes to your tenant_configrow, which the storefront reads on every page render. There’s no rebuild step — colour changes are visible to your customers within a second.
Server-rendered emails use the same primary colour for their button styles, so colour changes also affect new transactional emails going forward.
If you change your mind later
Edit and save again — there’s no version history on colour choices today. If you’re running ads pointing to your site, give creative previews a re-render after a colour change to spot any contrast regressions in your specific ad-image overlays.