The colour your users see on every sign-in button. The most impactful one-line branding change.
Where to set it
Section titled “Where to set it”Branding → Theme colours. Two pickers:
- Primary — your brand's main colour. Applied to the "Sign in" button, primary links, focus rings.
- Accent (optional) — used for highlights, less-emphasis buttons, secondary affordances. Most tenants leave the platform default; some pair the primary with a complementary accent.
Use a colour picker, paste a hex code, or click your existing brand colour from the recent-colours strip.
Picking a good primary
Section titled “Picking a good primary”A few practical guidelines:
- High contrast against white — the button text is white-on-primary. Test contrast at WCAG AA (4.5:1) minimum. The picker shows a warning when contrast fails.
- Distinct from red and green — colour-blind users have a harder time when the primary collides with their reduced-perception range. Blues, purples, oranges all read clearly to most colour-blind users; pure red / green are risky.
- Distinct from error / warning colours — the platform uses red for errors. If your primary is a red, the sign-in page becomes confusing.
- Match your real product — the sign-in page is a moment of trust; if its colour doesn't match the rest of your product, users get a flicker of "is this real?" Use the exact same hex as your product's primary button.
What changes
Section titled “What changes”The colour propagates to:
- Sign-in button background.
- Primary links in the sign-in form.
- Focus rings (the outline that appears around an input when you tab into it).
- The progress indicator on multi-step flows.
- The brand strip at the top of transactional emails (verification, recovery, OTP).
The colour does NOT propagate to:
- Error messages (always red).
- Success confirmations (always green).
- Body text (always near-black on light mode, near-white on dark mode).
- Page backgrounds (white / near-black; not colourable here).
For deeper control over what's coloured where, see Custom CSS.
Dark mode
Section titled “Dark mode”The platform auto-derives a dark-mode variant of your primary. If your primary is too dark to read on a dark background, the auto-derivation lightens it; if it's too light to read on a light background, it darkens.
For tenants who care about pixel-perfect dark mode, set both Primary (light mode) and Primary (dark mode) explicitly. Two pickers; pick each for the appropriate mode.
Accent colour
Section titled “Accent colour”The accent is for "things that are colourful but not primary buttons". The most common use:
- A "Sign up" link next to the "Sign in" button — accent colour instead of primary.
- An info-style banner ("Enrolling MFA?") — accent colour background.
Most tenants don't pick an accent; the platform's default complementary tone is fine.
Save. The change is live. Preview pane confirms. If your eyes don't agree with the preview, you're free to adjust + save again.
branding.theme_colors_updated records the change with before/after hex values. Useful for "who changed the colour to neon pink last Friday?" investigations.
Common questions
Section titled “Common questions”"Can I have different colours per application?"
Yes — per-application branding overrides include theme colours. See the application's settings page → Branding override.
"Can I theme the email templates differently from the sign-in page?"
Partly. The email templates inherit the primary colour for accents; the rest of the email styling is fixed. For deeper email customisation, edit individual email templates (Email templates).
"How do I disable the theme colour entirely and just use neutral grey?"
Set Primary to a near-black hex like #1a1a1a. The sign-in page becomes grey-on-white; cleaner than no-colour-at-all.