Brand the admin

The admin at /admin is Arc CMS's blue, with Arc CMS's name and logo at the top of its side panel, until you change them. Colours come from your stylesheet in the custom space, the name and logo from Settings, About or the custom space, and none of it is a core file.

Colours

Set these on :root in src/custom/styles.css, which loads after Arc CMS's styles. For a teal app:

:root {
    --arc-admin-accent: #0d8478;
    --arc-admin-accent-dark: #0a675e;
    --arc-admin-button-background: #0d8478;
    --arc-admin-button-hover-background: #0a675e;
    --arc-admin-panel-background: linear-gradient(180deg, #0d8478, #063f39);
}

Lighter tints and shadows are mixed from the two accents, so two colours and a panel are usually all you set. They reach every admin page, the setup wizard and the dialogs, menus and toasts opened while they are on screen, including the Bootstrap and Material parts (links, toggles, checkboxes, tabs, spinners). Colours that mean something stay as they are: red for danger, green for success, the teal-blue of an information note, and a picture's own colours.

Name and logo

The top of the side panel, the sign-in page, the member area, every browser tab and the og:site_name of content pages show the same name and logo. Each is taken from the first of these that has one:

1. Settings, About: the site name, and the logo URL (with Choose from media to pick it from the media library). An admin changes them there, with no code and no deploy; after saving, the panel shows them at once.
2. The app's default: name in src/custom/brand.ts, and the logo file src/custom/logo.svg, logo.png or logo.webp.
3. Arc CMS's name and logo, only when nothing above gives a name or a logo. A name with no logo shows the name alone, never beside Arc CMS's logo.

import type { CustomBrand } from '../app/core/brand/site-brand';

export const CUSTOM_BRAND: CustomBrand = {
    name: 'Acme Studio',
};

Nothing shows until Settings, About has loaded, so Arc CMS's name never flashes before yours.

Logo shapes

The panel looks at the logo's shape when it loads; an SVG's shape is read from its viewBox, else its width and height. A wordmark, at least twice as wide as it is tall, shows alone in the open panel (up to 150 pixels wide and 40 high), since it already carries the name. A square mark shows at 40 by 40 pixels beside the name. A name too long for the panel is cut short, so the button that collapses the panel always stays beside it. In the collapsed panel, 65 pixels wide, a square mark shows below that button and a wordmark does not. Search engines also read this logo (see Get found by search engines and AI) and prefer a square one of at least 112 by 112 pixels.

The browser tab

Every tab reads "Page | Site name", such as "Users | Acme Studio". Until the site name is in, the page's name stands alone; a page with no title shows the site name alone. Before the app starts, the tab shows the app's name from brand.ts, or "Loading" when it has none.

• Pages members see (sign in, profile, account, dashboard, payments, premium, notifications, no access, page not found) take their name from the member strings, member.titles.*, in the reader's language. An app with its own member language translates them in src/custom/i18n/{lang}.json like any member string; npm run i18n:member lists the ones missing, and the suite fails until they are there (see Member languages).
• Admin pages stay in English, except Profile and Notifications, which members see too.
• A core page's own name: give it in titles in brand.ts, by path. The site name is still added after it.
• Your own pages: give the route a title, and a data: { titleKey } for a translated one (see Add pages and routes).

export const CUSTOM_BRAND: CustomBrand = {
    name: 'Acme Studio',
    titles: { '/admin/users': 'Staff' },
};

A page that sets its own title once it has loaded, such as a content page, keeps it.

Next

Give your members their own area: Build the member area.