The colour your users see on every sign-in button. The most impactful one-line branding change.
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
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
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
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
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
Save. The change is live. Preview pane confirms. If your eyes don't agree with the preview, you're free to adjust + save again.
Audit
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
"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.