Manage workspace logos, colours and site branding
Settings → Branding gives you a central library of named logo variants, a colour palette, and reusable brand identities. Site headers and footers draw from this library so you can update a logo in one place and apply the change across all Sites. ## Logo library The logo library stores named variants such as Primary, Light, Dark, Monogram and Favicon. Each variant has an immutable URL, so removing a library entry does not break Sites that already use that file. ### Add a logo variant 1. Open **Settings → Branding**. 2. Select the **Logo** tab. 3. Select **Add logo variant**. 4. Give the variant a name (Hub suggests Primary, Light, Dark, Monogram and Favicon). 5. Upload a PNG, JPG, WebP or SVG file up to 2 MB. 6. Save the library when you are happy with all your variants. You can store up to 20 variants. Existing Sites keep the file they selected even if you later rename or remove the library entry. ### Set the workspace default logo Choose one variant as the workspace default. This logo is used wherever a Site or header has not selected a specific variant. ### Crop a logo If an uploaded logo has unwanted whitespace, use the crop editor to remove it without reuploading. 1. In the logo library, select **Crop** next to the variant. 2. Drag a rectangle over the artwork in the crop dialog, or enter edge percentages directly. 3. Select **Trim** to let Hub locate the artwork automatically (works best when the background is transparent or a uniform colour). 4. Select **Apply crop** to create the cropped version. SVG files are cropped as vector artwork and remain sharp at any size; raster files are cropped as high-resolution PNGs. 5. Save the library to store the cropped variant. The original file is preserved. You can reopen the crop dialog and reset to the original at any time. **Regenerating an older rasterised crop:** If a logo was cropped before the SVG quality fix was released, reopen its crop dialog, apply the crop again, and save the library. Sites that use the variant need to reselect it. ## Colour palette The colour palette stores multiple named roles such as Primary, Secondary, Accent, Background and Text. You can also choose one colour as the workspace accent, which is used for buttons and highlights across Hub. ### Add a colour 1. Open **Settings → Branding**. 2. Select the **Colours** tab. 3. Select **Add colour**. 4. Enter a role name and a six-digit hex value, or use the colour picker. 5. Repeat for additional roles. 6. Choose one colour as the **Workspace accent** from the palette, or leave it blank to use the Hub default. 7. Save the palette. You can store up to 24 colours. Each role must have a unique name and a valid hex value. ## Reusable brand identities Brand identities let you define a named, shareable brand for your organisation or a specific product — combining a logo, label, colour palette, font choices and theme variants in one reusable definition. Once created, a Site or header/footer can select an identity instead of configuring each element separately. ### Create a brand identity 1. Open **Settings → Branding**. 2. Select the **Identities** tab. 3. Select **New identity**. 4. Give the identity a clear name (for example, *Radley* or *Help & Support*). 5. Choose a logo variant from your library, and optionally configure separate Light and Dark logo variants. 6. Set a label (the name shown next to the logo). 7. Choose a colour palette, font and accent. 8. Save. Identities share the existing Marketing brand IDs and logo assets. Hub uses the organisation's logo variants, accent and favicon for its own interface. ### Apply a brand identity to a Site Sites opt into shared branding through a reviewed draft conversion: 1. Open a site header or footer in the editor. 2. Find **Use shared branding**. 3. The **identity picker** appears above the comparison — select or create an identity to see a proposed before/after preview. 4. Select **Apply to draft** to adopt the identity. Cancelling leaves the existing branding untouched. 5. Review the draft and publish when ready. Adopted Site chrome keeps a branding snapshot until publication. Brand changes are offered explicitly with before/after previews — the live site retains its previous branding while a library update is staged. You can revert to per-site branding at any time. > **Important:** Brand changes to a reusable identity affect all Sites that have adopted it. Review the before/after preview carefully before applying. ### Identity picker in reusable headers and footers The same identity picker is available in the standalone Header and Footer builders under **Marketing → Headers** and **Marketing → Footers**. Selecting or creating an identity changes the proposed preview; **Apply to draft** confirms the adoption. ## Use workspace logos in Site headers and footers When editing a Site's header or footer, a **Workspace logo** picker lets you choose any named variant from the library. The selected file is copied into the design draft — the Site keeps that file even if the library changes later. ### Select a logo in the Sites editor 1. Open your site and select **Edit site**. 2. Open the **Header & footer** panel. 3. Under **Header** or **Footer**, use the **Workspace logo** selector to choose a library variant. 4. The same picker is also available in the standalone Header and Footer builders under **Marketing → Headers** and **Marketing → Footers**. You can still upload a logo or paste a URL directly if you prefer a one-off image that does not come from the library. ### Logo appearance Each header and footer lets you control how the logo is displayed: | Setting | Options | |---|---| | **Logo frame** | Unboxed, Rounded box, Circle | | **Logo proportions** | Square, Natural proportions (gives wide wordmarks more horizontal room) | | **Logo height** | 24–64 px | Circle frames always use a square area. Natural proportions are not available when Circle is selected. ## Theme-specific logos Sites can show a different logo depending on whether the visitor's device is in light or dark mode. This replaces the previous behaviour where one logo appeared in all themes. ### Set theme logos 1. Open your site's header or footer in the editor. 2. Under the **Workspace logo** picker, use **Logo for light theme** and **Logo for dark theme** to choose a library variant for each. 3. Leave either field blank to fall back to the main logo. The resolved logo is chosen from the visitor's active theme, including their system preference. Previously saved selections remain usable if a library entry is later removed — the previously selected file is still served. > **Existing designs:** Theme logos are opt-in. Sites keep their default logo until you select variants and save. ## Notes on file formats - PNG, JPG and WebP uploads are accepted everywhere. - SVG uploads are supported for logo variants and produce vector crops that stay sharp at any size. - Uploaded files use immutable URLs. Removing a library entry does not affect the file. - The `getWorkspaceLogoForCrop` function loads saved logos for cropping through an authenticated path, so CORS restrictions on Storage files do not prevent editing.