- Documentation
- Agency
- Brand the app, sign-in, and client portal
Brand the app, sign-in, and client portal
Upload your logos, icons, and favicon, set brand colors, and see exactly where each one renders across TaskJuice.
Goal
Replace the default TaskJuice look with your agency's brand. You upload logos, square icons, and a favicon, then set up to nine brand colors with independent light and dark values. One configuration drives four surfaces: your agency dashboard, the sign-in pages, the client portal, and public forms.
When to use this
Do this once after you create your account, and again whenever your brand changes. The setup wizard captures a starter palette and an optional logo and icon at signup. The full set of assets and colors lives at Agency settings > Branding, where you finish the job.
Only the Owner and Admin roles can edit branding. Members can build workflows and connections but cannot change branding. See team and roles for the full capability split.
Branding is included on Starter and higher plans.
Where each asset shows up
Branding has five upload slots. Dark variants and the favicon fall back to lighter slots when you leave them empty, so the minimum viable setup is one light logo and one light icon.
| Slot | Recommended size | Where it renders | Falls back to |
|---|---|---|---|
| Logo light | 512x128 | Sidebar header, sign-in page, emails | none (required for full coverage) |
| Logo dark | 512x128 | The same surfaces in dark mode | Logo light |
| Icon light | 128x128 | Collapsed sidebar, browser tab | none |
| Icon dark | 128x128 | The same surfaces in dark mode | Icon light |
| Favicon | 64x64 | Browser tab | Icon light |
If you upload only Logo light and Icon light, every dark-mode and favicon slot cascades from those two. The browser tab favicon resolves in this order: favicon, then Icon light, then Icon dark.
Upload your assets
Open the branding page
Go to Agency settings > Branding. On your subdomain the URL is
acme.taskjuice.ai/settings/branding. The page opens on the Identity section, where each preview renders on the sidebar color it will actually use.Add your logos and icons
Upload a file into each slot you want to customize. Files must be PNG, JPG, or WebP and under 2 MB each. Square icons read best at 128x128, and the favicon at 64x64. The server resizes assets to brand sizes after upload, so close-enough source files are fine.
Save
Click Save changes. A "Branding updated" toast confirms the write. The button stays disabled until you have made a change and all color values are valid.
Your logo appears on the sign-in page before anyone authenticates, so it is readable by anyone who visits your sign-in URL. Use a brand mark you are comfortable showing publicly, not an internal or placeholder asset.
Set your brand colors
Colors live in the Brand colors section below Identity. Every token carries an independent light and dark hex value, and a light/dark toggle switches which mode you are editing. A split preview shows both modes side by side as you type.
Tokens are split into Core (always visible) and Advanced (collapsible, for structural surfaces like background, card, and border). Leave any field empty to inherit the platform default.
Core colors
| Color | Token use | Default (light) | Default (dark) |
|---|---|---|---|
| Primary | Buttons, links, active states | #ed601a | #ed601a |
| Secondary | Badges, secondary buttons | #f8a92a | #f8a92a |
| Accent | Highlights, focus rings | #46841f | #46841f |
| Sidebar | Sidebar background and borders | #fafafa | #18181b |
Advanced colors
| Color | Token use | Default (light) | Default (dark) |
|---|---|---|---|
| Background | App body background | #ffffff | #09090b |
| Card | Raised surfaces and popovers | #ffffff | #18181b |
| Border | Element borders | #e4e4e7 | #222224 |
| Muted | Secondary text surfaces | #f4f4f5 | #27272a |
| Destructive | Danger buttons and errors | #e7000b | #ff6467 |
Set a color by typing a hex value, for example #1f6feb for Primary. Only the tokens you fill in are applied. Every empty token keeps the platform default, so you can override just Primary and Sidebar and leave the rest untouched.
When the colors look right, click Save changes.
Brand a client
Each client can have its own brand, so Acme Plumbing's people see Acme Plumbing, not your agency. A client gets the same options you have: logos, icons, a favicon, a theme, colors, and a portal welcome message. Any field you leave empty uses your agency's value.
Open the client's branding
Open the client's workspace and go to Settings > Branding.
Set what should differ from your agency
The page works the same way as your own Branding page. Each field you have not set shows Using agency's and previews your agency's value. Upload the client's logos, icons, or favicon, pick a theme, or set colors. Files must be PNG, JPEG, or WebP and up to 2 MB. The Preview shows the client's portal in light and dark mode as you edit.
Write a welcome message (optional)
Under Portal welcome message, write what the client's people see the first time they sign in. Leave it empty to use your agency's message.
Save
Click Save changes. A "Branding updated" toast confirms the write.
What the client sees: their logo in the portal header with a small "by {your agency}" line beside it, their colors across the portal, their sign-in page on their own domain, and the forms you assign to them. On their own domain, the browser tab shows their favicon. A client without a logo sees your agency logo, exactly as before.
To go back to your agency's value for one field, click Use agency's (or Reset on a color). To undo everything, click Reset all to agency's, then Save changes. Removing branding is always allowed, even on a plan without branding. You can also add a logo while you set the client up: the first step of Add client has an optional Logo field.
Verify it worked
- Reload your agency dashboard. The sidebar header shows your logo, the collapsed sidebar and browser tab show your icon, and buttons and links use your Primary color.
- Sign out and open your sign-in URL. Your logo sits centered above the form and your colors apply.
- Open the client portal as a client (or preview it). Clients see your logo, your colors, and your chrome, never the TaskJuice brand.
- Open any published public form. It uses the same branding shell.
If a surface still shows TaskJuice defaults, you likely left that slot or token empty and it fell back, or your change has not been saved yet.
Troubleshooting
"Only PNG, JPG, and WebP files are supported." You tried to upload an unsupported format such as SVG or GIF. Convert the asset to PNG, JPG, or WebP and upload again.
"File must be under 2 MB." The asset exceeds the 2 MB per-file limit. Export at a smaller dimension or compress it. Logos only need to render up to 512x128, so a large source file is rarely necessary.
Save changes stays disabled. The button enables only after you make a change and every color value is valid. A malformed hex value (anything that is not a valid hex color) blocks the save. Fix the highlighted color field, then save.
A dark-mode logo or favicon looks wrong. Empty dark and favicon slots fall back: Logo dark to Logo light, Icon dark to Icon light, and favicon to Icon light. Upload a dedicated dark asset if the fallback does not read well on dark surfaces.
Your agency's Branding form covers assets and colors only. To set the welcome message a client sees, open that client's Settings > Branding.
Related
- Custom domain - serve the branded app on your own hostname.
- Account and workspaces - one account, one workspace per client.
- Team and roles - who can edit branding and invite teammates.