Design branding

Use Design to configure the customer dashboard through Branding controls. Most Design changes stay in the shared branding draft until you select Update; any CSS authored in Code remains an additive layer. When Assets is unavailable, direct image uploads apply immediately, and direct wordmark or app-icon removals do too.

Availability

Platform account owners and active platform admins can open Platform dashboard > White-label > Branding > Design.

Brand

Enter 1–80 plain-text characters in App name to replace the product name across the customer dashboard. The field does not stop you at 80 characters, so Update can succeed with a value that the customer dashboard will not display. When the dashboard reads the value, it removes markup and control characters, then trims whitespace. If nothing remains or the result is longer than 80 characters, it uses the platform account name, then Apps when that name is also unavailable.

Set a Light wordmark for light app surfaces, a Dark wordmark for dark app surfaces, and an App icon for browser tabs and compact placements.

When Assets is available, use Choose light wordmark, Choose dark wordmark, or Choose app icon to select a managed asset. Use Upload new to add a file to Assets, then select Remove to clear the selected asset. Without Assets, use the matching Upload or Replace action for the direct path; that path applies the image immediately.

Theme

• Color mode: Select Light mode, Dark mode, or System. Light and Dark mode lock the customer dashboard to that mode; System follows each customer's computer and leaves their theme choice available.
• Preset themes: Select Default, Dracula, Nord, Gruvbox, Catppuccin, Tokyo Night, Solarized, One Dark, Rosé Pine, GitHub, Vercel, Linear, Notion, Supabase, Ayu, Everforest, Kanagawa, Monokai, Night Owl, Material, or Custom. Custom exposes the light and dark surface and text colors for a hand-built theme.
• Accent color: Choose a color from the selected theme's accent palette, or select Custom and enter an exact hexadecimal color. A custom accent remains in place when you switch themes.
• Font: Keep System default (Geist), or select Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Source Sans 3, Nunito, Work Sans, DM Sans, Plus Jakarta Sans, or Space Grotesk.
• Icons: When the icon-library control is available, select Lucide, Heroicons, Phosphor, or Tabler. Icons omitted from a custom pack fall back to this base library.

Upload a custom icon pack

When custom icon packs are available, select Upload ZIP or Replace ZIP. The ZIP must contain one manifest.json file at its root. This minimal pack replaces the dashboard icon and hides the settings icon:

manifest.json
icons/dashboard.svg

{
  "version": 1,
  "name": "Acme UI",
  "icons": {
    "dashboard": "icons/dashboard.svg",
    "settings": null
  }
}

version must be 1. name must contain 1–80 characters after trimming. icons maps a supported slot to an exact file path or null. A path uses that custom icon, null hides the icon, and an omitted slot uses the selected base library. Each declared path must exist once and can belong to only one slot. The ZIP cannot contain undeclared files.

Supported slots are dashboard, projects, settings, profile, usage, sign-out, search, folder, see-all, template, create-project, attachment, plan, submit, remove, open, rename, delete, close, confirm, cancel, save, discard, publish, unpublish, external-link, connect, disconnect, verify, attach, detach, make-primary, copy, retry, github, pull, push, link, unlink, integration, validate, apply, update, and back. Unknown slots are rejected.

Icon source files can be SVG, PNG, or WebP, and the file contents must match the extension. Swarmz converts accepted icons to 128 × 128 lossless WebP files. Keep the compressed ZIP at or below 10 MB and its expanded contents at or below 25 MB. A pack can have at most 256 entries. manifest.json can be at most 64 KiB, and each source icon can be at most 512 KiB. Encrypted entries, ZIP64 archives, nested archives, unsafe paths, and unsupported entry types are rejected.

An unsuccessful upload does not replace the pack currently selected in the Branding draft. Use the displayed error to correct the ZIP, then select Upload ZIP or Replace ZIP and choose the corrected file. Reduce the archive or source file for a size error, and convert an icon to SVG, PNG, or WebP for a format error. After the upload succeeds, select Update to publish the pack with the rest of the Design changes.

Dashboard

The Dashboard controls change the canvas, navigation placement, customer-facing text, and the dashboard blocks and tabs.

Choose a background

Choose a static background: Default, Dotted, Grid, Diagonal, Grain, Rings, Soft gradient, Ambient glow, Mesh, or Vignette.

Choose an animated background: Aurora drift, Pulse, Noise, Flow, Smoke, Bloom, Cellular, Gyroid, Crystal, Interference, or Sweep. Animated backgrounds derive their color from your theme and accent.

Under Your own, select Gradient to enter top and bottom hexadecimal colors, or select Image to choose a managed background asset or use the direct upload path. The Preview panel shows the current unsaved background and accent at dashboard scale.

Set the sidebar side

Select Left or Right under Sidebar to place customer navigation on that side of the dashboard.

Write greeting lines

Add up to 12 greeting lines, with up to 80 characters per line. Use the optional {name} placeholder for the customer's first name. You can add and remove lines, or select Reset to defaults to restore the standard rotation.

Rename product terms

Rename the ten customer-facing terms Project, Projects, Publish, Workspace, Team, Domain, Credits, Included, Rollover, and Top-up. Each value is limited to 24 characters. Leave a field empty to use the default term.

Navigation

Navigation has two forms. With no schema, flat overrides let you rename or show and hide the built-in items. A schema is a saved navigation map. New branding starts without one, so Design initially shows only flat controls. Add a non-null navigation schema in Code branding; after that, schema mode owns navigation order, visibility, and labels, and Design shows the structural controls for reordering, renaming, hiding, and adding links.

Branding can hide or customize only items that the current customer is already eligible to use. It cannot grant access or re-add a surface removed by the customer's role, plan, or a runtime capability gate.

main.dashboard, settings.workspace, and settings.profile are locked: you can rename them, but you cannot hide them. Labels are limited to 24 characters.

Schema group keys are Main, Projects, Settings, and SidebarHeader; SidebarHeader is for eligible Main navigation items. You can add up to eight custom links, each with an HTTPS URL and one of these icons: Link, Book, LifeBuoy, Star, Globe, Home, Settings, CreditCard, Users, or Zap.

Arrange dashboard blocks and tabs

Under Blocks & tabs, show or hide the Greeting, Folder row, New-project tile, Credits widget, and Upgrade card.

For project tabs, reorder, relabel, show, or hide My Projects, Recents, Starred, and Templates. A custom label can contain up to 24 characters. The first visible tab is the default customer destination. At least one eligible project tab remains visible.

Project-tab customization runs after the dashboard decides which tabs the customer can use. It cannot grant or re-add a tab removed by the customer's role, plan, or a runtime capability gate.

Save Design changes

After changing a Design control, the floating unsaved-changes bar offers Cancel and Update. Select Cancel to discard the current draft changes; it cannot undo an image upload or a direct wordmark or app-icon removal that already applied. Select Update to publish the semantic branding configuration; it does not erase the Code CSS draft.

Verify the result in the customer dashboard. If a field shows Overridden in CSS draft or Overridden by live CSS, styles.css has a competing value. Use Code branding to inspect, change, publish, or remove that override.

Recover from Design problems

• Design is read-only: An invalid brand.json keeps its text but makes Design read-only. Correct it in Code branding, or discard the invalid JSON there, before returning to Design.
• Conflict: Another Branding update changed the server revision. Select Reload server state to reload the authoritative version, then reapply any changes you still need. This is the Reload recovery action.
• Unsaved navigation: While Design changes are unsaved, same-origin link navigation is held on the page and the unsaved-changes bar remains available. Select Cancel to discard or Update to publish. Refreshing, closing, or another departure that unloads the page uses the browser's unsaved-change confirmation.