Branding
Set primary, accent, secondary, and tertiary colours, apply the suggested palette, and upload a company logo from Admin › Setup.
Overview
Branding controls the visual identity shown in the application chrome — four brand colours and an optional logo. A suggested palette derived from your accent colour is offered alongside the pickers so a coherent scheme is one click away.
Where it lives
Route: /admin/settings/branding (admin.settings.branding)
Open Admin → Setup → Branding. Requires admin access.
Key fields
| Field | Setting key | Notes |
|---|---|---|
| Primary Colour | branding.primary_colour |
Hex #RRGGBB — navigation and app chrome |
| Accent Colour | branding.accent_colour |
Hex #RRGGBB — buttons, links, focus rings; the palette is derived from this |
| Secondary Colour | branding.secondary_colour |
Hex #RRGGBB — supporting colour for opt-in badges and chips |
| Tertiary Colour | branding.tertiary_colour |
Hex #RRGGBB — quiet tint for surfaces and highlights |
| Company Logo | branding.logo_path |
PNG, JPG, SVG, or WebP up to 2MB |
All four colours are validated against #RRGGBB and stored in the branding settings group (Settings Registry).
Suggested palette
The Suggested Palette panel derives three colours from the current accent using App\Support\ColourTheory and re-derives them live as you change the accent:
| Suggestion | How it is derived |
|---|---|
| Primary | The accent's own hue, deepened — saturation 0.35–0.60, lightness 0.18–0.30, then darkened in steps until white text on it reaches 4.5:1 (WCAG AA) |
| Secondary | Analogous — the accent hue rotated +30°, saturation clamped 0.35–0.75, lightness 0.38–0.52 |
| Tertiary | Complementary tint — the accent hue rotated +180°, desaturated to 45% of the accent and lightened into a 0.62–0.82 band |
Greys and near-monochrome accents are lifted to a saturation floor first, so an achromatic accent still yields usable brand colours rather than more grey.
Apply copies one suggestion into its editable field; Apply all suggestions copies all three. Nothing is persisted until Save Changes — suggestions are a starting point, not a lock.
Where the colours are used
Every shell that renders app CSS includes resources/views/partials/brand-colours.blade.php, which publishes the palette as custom properties on :root — for guests on the auth pages exactly as for signed-in users:
| Variable | Meaning |
|---|---|
--brand-primary / --brand-accent |
The raw primary and accent colours |
--brand-secondary / --brand-tertiary |
The raw secondary and tertiary colours |
--brand-*-ink |
Contrast-corrected variants for text, headings, and active states on light surfaces |
--brand-on-* |
The foreground colour to use on top of each brand fill |
Secondary and tertiary are deliberately opt-in: nothing painted from --navy* or --blue* reads them, so setting them can never repaint the navigation, sidebar, or primary CTAs. They are consumed only by these helper classes (see the Component Library):
| Class | Use |
|---|---|
.s-badge-secondary |
Solid secondary badge with an accessible foreground |
.s-chip-secondary |
Pale secondary chip with a matching border and ink |
.s-tertiary-surface |
Subtle tertiary background panel with a soft border |
Workflows
- Save Changes persists all four colours; uploads store the logo on the
publicdisk underbranding/and detect transparency. The page reloads so the header picks the change up. - Apply / Apply all suggestions fill the pickers from the derived palette without saving.
- Remove deletes the stored file and clears logo settings, then reloads so the header updates.
Documents
Document rendering resolves its own branding per warehouse. When a warehouse defines no secondary colour, the resolver now falls back to branding.secondary_colour before the hardcoded document default, so shared and printed documents match the app — see Documents & Templates.