Branding overview
Choose between Design, Code, and Assets, then preview and publish customer-facing branding safely
Branding controls the customer dashboard identity, appearance, navigation, and dashboard layout. Start in Design for supported visual settings, use Code when you need to edit the branding files, and use Assets to manage reusable images.
Scope
Branding changes the customer-facing dashboard for the platform account. It includes the app name and marks, theme, typography, icons, dashboard canvas, navigation labels and visibility, and the dashboard blocks and project tabs customers see.
Design and Code edit one version-tracked branding draft. Design changes the semantic configuration, which describes the name, theme, navigation, and dashboard choices, through controls. Code exposes the same configuration as brand.json, adds reusable dashboard content in components.json, and can add optional presentation overrides in styles.css. Assets is a separate, account-scoped image library; adding an asset does not publish Branding.
Open Branding
Platform account owners and active platform admins can open Platform dashboard > White-label > Branding. The page opens the Design tab unless its URL selects another available tab.
Choose a tab
| Tab | Use it for | What it changes |
|---|---|---|
| Design | Name, marks, theme, dashboard, navigation, and text controls | The semantic branding configuration without editing files |
| Code | brand.json, components.json, and styles.css | The same semantic configuration, reusable dashboard content, and optional CSS overrides |
| Assets | Reusable wordmarks, icons, and backgrounds | The account asset library; select an asset and publish Branding separately to make it live |
The Assets tab appears only when the managed asset library is available. The Assets guide is the canonical procedure for uploading, naming, and referencing managed images.
Understand drafts and publishing
| Action | Customer-visible result |
|---|---|
| Update in Design | Publishes semantic branding and preserves Code CSS as a draft |
| Save draft in Code | Stores the three-file bundle without changing live branding |
| Preview in Code | Saves changes when needed, then opens that exact draft |
| Publish in Code | Makes the current semantic configuration and CSS live |
| Unpublish CSS | Removes live styles.css but keeps live brand.json and saved drafts |
The status beside the Branding title tells you which version you are working with:
- Live: the current semantic branding is live without a live CSS override.
- Shared draft: semantic changes exist in the shared Design and Code configuration but are not live.
- CSS draft:
styles.cssdiffers from the live stylesheet while the semantic configuration is unchanged. - Live with CSS overrides: a live
styles.cssis active and can override Design settings. - Conflict: Branding changed on the server after you loaded it. Reload the server state before making another update.
Publish branding safely
- Choose Design for supported dashboard controls, or Code when you need file-level changes. Add reusable images in Assets before selecting them in Design or Code.
- In Design, review the changed controls and select Update. This publishes the semantic configuration and leaves any Code CSS draft intact.
- In Code, select Save draft, open Preview, and select Publish only after the exact saved draft is correct.
- If a live stylesheet must be removed, use Unpublish CSS in Code. The semantic branding and saved drafts remain available.
Continue with a task
Account billing summary
The owner-facing billing snapshot for your own platform account — period usage, the upcoming invoice, the card on file, and recent invoices. Supabase user-JWT authed; not a host API call.
Design branding
Configure your customer dashboard identity, theme, navigation, text, and layout without editing code