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.
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.
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.
The Branding form covers assets and colors only. There is no field here for client portal welcome copy. Do not expect to edit portal greeting text from this page.
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.