Branding

Set your app name, upload logos, and choose your primary accent colour.

App Name

The app name replaces "TotalApp" everywhere it appears — the browser tab title, the header bar, welcome banners, and any auto-generated email footers.

Field	Notes
App Name	Keep under 24 characters for best fit in the header. Examples: "Acme Workspace", "DevCo Hub", "Nexus ERP".

Tip

Use your company name or a short product name. Avoid punctuation marks that may render oddly in browser tab titles.

Logo

TotalApp uses two logo slots — a full-width logo and a compact icon logo — to handle both the expanded and collapsed sidebar states.

Slot	Where used	Recommended size	Format
Full logo	Expanded sidebar header, top header bar	120 × 32 px (wide aspect ratio)	SVG preferred, PNG accepted
Small logo	Collapsed sidebar (icon-only mode)	32 × 32 px (square)	SVG preferred, PNG accepted

Use SVG where possible

SVG logos scale perfectly at all screen densities and render crisply on high-DPI displays. PNG logos with transparent backgrounds are the next best option. JPEG may show white or grey edges against dark backgrounds.

Primary Colour

The primary colour is the single most visible branding variable in TotalApp. It drives buttons, active tab underlines, progress bars, chart accent bars, AI panel highlights, and focus rings throughout the entire application.

The value is stored as a hex code and applied to the CSS variable --color-primary globally. Every component that references this variable updates automatically — no need to change individual screens.

Choosing a Good Primary Colour

Guideline	Why it matters
Aim for mid-range saturation	Very pale colours are invisible on white backgrounds; very dark colours lose contrast on dark surfaces.
Test in both Dark and Light themes	The same hex looks different on dark vs light backgrounds. A colour that looks good in Dark theme may be too light in Light theme.
Check active tab text readability	Active tab labels use the primary colour as text. If the colour is very light, labels become hard to read.
Avoid pure red (`#ff0000`)	Pure red is used for error states. A primary that is too close to red creates ambiguity between "active" and "error".

Always test contrast

After setting your primary colour, navigate through a few screens and check that active tab labels, button text, and icon fills are clearly readable. Use the browser's DevTools accessibility panel if unsure.

FAQ

Can different users see different logos?

No. Branding is instance-wide — all users on the same TotalApp server see the same app name, logos, and primary colour.

What happens to the old logo after I upload a new one?

The new logo replaces the previous one immediately. The change is visible to all users as soon as their browser refreshes.

Is there a file size limit for logo uploads?

SVG files should be under 100 KB for best performance. PNG files should be under 500 KB. Larger files are accepted but may slow initial page load.