A forum brand is not a PNG in the header. It is the same mark, the same chips, and the same sentence on the public site, the HTML email, the notice strip, the widget HTML, and — if you also run Discourse — the theme that sits on that sister community. When those surfaces disagree, members do not say “the email style is wrong.” They say the site feels fake.
This is a brand system article: logo, palette chips, the separate Default style for HTML email, extra.less tokens, prefix and notice colours, PWA chrome, and a conservative Discourse theme. It is not how to survive the next upgrade — that sibling owns Master → vendor parent → your child, TMS, and the merge tool. Use that process. Do not turn this piece into a merge manual. It is not the later graphics-tools article (how to make the PNG). It is not how to enable the 2.3 light/dark switch. It is not whether light or dark should win. Stay here until a guest, a mail client, and a notice all look like the same organisation.
What “consistent” means on a board
Write the brand as four facts a tired moderator can follow.
| Fact | Lives in | Not in |
|---|---|---|
| The mark (logo, wordmark, favicon) | Header/logo row; favicon; PWA icons |
A second PNG pasted into a widget |
| The chips (three to six colours with jobs) | Color palette + Basic colors | Hex in extra.less, notice HTML, Discord embeds |
| The type (one display, one body) | Typography style properties; self-hosted files | A Google Fonts CDN |
| The voice (how a notice is worded) | Staff page | Twelve signature packs |
If you cannot fill the chips column without opening Photoshop, you do not have a brand. You have a logo file. The FiveStyle review already told game hubs that a skin is not a community. A logo without chips is the same mistake in the other direction.
Official XenForo pieces you will actually touch:
- Appearance → Styles — the child that is the public brand. Parent stays vanilla.
- Style properties → Color palette and Basic colors — chips and roles (
@xf-paletteNeutral3,@xf-textColor). - Header/logo row — the mark, header background, header text.
- Appearance options — Default style for visitors; a separate default style for HTML email.
- Child extra.less — community practice, not an official docs chapter — only for selectors the property UI cannot reach, always via tokens.
Discourse, if it is in the picture: one theme, one colour scheme, theme components for layout, not a fake XenForo index. The 2026 matrix already compared widgets to theme components. This article only insists the chips match.
One public style, one mark
Official inheritance: do the work on a child. The customization article is the law. Branding adds one more rule: one public style. The style chooser is for Brand A versus Brand B (a staff-only style, an event microsite), not for “light logo” versus “dark logo.” Night mode is a variation inside the one style. Two logos in two styles is two brand books.
Header/logo row, on the child:
- Upload the mark that still reads at 32 px tall on a phone. A detailed crest that only works at 200 px is a footer decoration, not a logo.
- Point header background and text at palette chips, not at
#0b0f14you eyedropped from a trailer. - If the dark variation needs a lighter wordmark, that is a variation-aware property or a second asset the variation can swap — not a second style. The switcher article owns the mechanism. If a property is not variation-aware, use a mark that survives both surfaces (solid mark on a transparent canvas, enough contrast on slate and on paper).
- Leave user style selection off unless you truly have two brands.
Favicon and touch icons are the same mark, cropped, not a different mascot. PWA: official Meta theme color and Page background color on Setup → PWA setup. A dark public variation with a light meta theme colour is a status-bar lie. Pick values that survive both variations or accept that install-to-home-screen will show the default variation’s chrome. The switcher article already flagged this. The later push/PWA piece owns the rest.
Do not put the logo in PAGE_CONTAINER. That is how the next upgrade yellow-merges your brand.
Palette chips are the brand
Official Color palette defines chips. Changing a chip replaces every use of that chip. Basic colors assign chips to roles. Official syntax in properties and Less:
@xf-paletteNeutral3
@xf-textColorGive chips jobs on a staff page, in English, not in hex-first language:
| Chip job | Typical role | Do not use it for |
|---|---|---|
| Paper | Content background (light variation) | Buttons |
| Ink | textColor |
Borders you will not read as text |
| Steel | Links, key buttons, unread | Large backgrounds (it will shout) |
| Slate | Header / nav on the light half | Body text on dark paper |
| Danger | Only destructive / genuine downtime | “Sale” banners |
| Quiet | Borders, disabled, meta | Headlines |
You do not need twelve chips. You need six that a moderator can name. When someone asks for “a bit more pop,” you change Steel, not a random button.
On the alternate variation, the jobs stay. The values change. Paper becomes a night surface. Ink becomes light text. Steel may need a lighter step so a link still passes contrast. Style type Light on the light half and Dark on the dark half so xf-intensify / xf-diminish push the right way. How to enable the two halves is the switcher article. Which half should be the default is light vs dark. This article only requires that both halves are the same brand.
Hard hex in extra.less, in an HTML widget, in a notice, or in a page-node landing is how the brand forks. Search those four places for #. Every hit is a suspect.
HTML email is a different Default style
Official Appearance options: you set the Default style for visitors, and you set a default style for HTML email in the same place. Email is a style, not a variation. The member’s public flip does not apply to the message. If the public default is a dark Board, and email points at Board, many clients will show a dark brick — or they will invert a light template and still lie. The switcher article already walked the mail check. Branding adds the design rule:
- Public site may be dark.
- Mail should read on a white or transparent client canvas: near-black ink, a single logo, one steel link colour, no night-mode hero.
- Point HTML email at Default (light) or at a tiny child of Default whose only job is mail: logo, steel link, no extra.less novel.
- Setup → Options → Email options is transport (PHP mail, SMTP, Google OAuth). A dark brick is a style problem. A missing mail is transport. Do not confuse them. XenForo 2.3 uses Symfony Mailer, not SwiftMailer.
Worked mail check, because this is the ticket that arrives a week after the rebrand:
- Appearance options → HTML email style → light style.
- Trigger a conversation reply or a watched-thread mail to a throwaway.
- Open it in a desktop client and on a phone.
- If the client forces a dark canvas, your light template can still invert. That is the client. You can still keep the HTML from shipping near-black text on a transparent background — Basic colors on the email style.
- The logo in the mail should be the same mark, on a background that survives inversion (or a lockup that includes its own paper).
There is no official XenForo newsletter product. Mass mail is ACP user tools; watches already send notifications. The later newsletter article can talk about export and third-party tools. This one only says: whatever you send, it wears the same chips.
extra.less tokens, not a second brand
Community standard: custom CSS lives in the child’s extra.less (official styles manual does not document this file; community threads do). Branding rules for that file:
.notice--boardAlert {
background: @xf-paletteColor5;
color: @xf-textColor;
border-color: @xf-borderColor;
}
a.link--steel {
color: @xf-paletteColor2;
}Not #1b4f72. Not white. When you recolour Steel in the palette, the notice follows. When the dark variation redefines the chip, the notice follows. That is the brand system working.
If extra.less grew, community include:
<xf:include template="board_brand.less" />Keep brand rules in one include so a future admin does not hunt them through node-icon experiments. The nodes extra.less pattern (.m-faContent) is not branding. Do not mix the ID map into board_brand.less.
Custom font files: typography families and sizes are style properties. A file-upload control is not in the official docs. Community practice is self-hosted @font-face in extra.less. Do not load Google Fonts from their CDN — site policy and a DNS+CSS hit you do not need. Official 2.3 already self-hosts UI fonts. Your display face, if you insist on one, lives next to them on your origin. The later typography article can go deeper. Here: one display face, one body, both local, both named in properties, not in a random h1 { font-family: … } that ignores the scale.
Surfaces people forget
These are where a careful header still looks unbranded.
Notices. Ticker / notices should use a display class you defined with tokens. Stock notice styles are fine if they already sit on palette colours. A bright “alert” yellow from 2014 is not your Danger chip unless you decided it is.
Widgets. HTML widgets with inline colour will not flip and will not track a rebrand. Classes + tokens, or accept that the welcome box is a poster from last year.
Prefixes. Style the prefix CSS classes in extra.less with tokens so Verified and Offline cannot be confused — the listing article already asked for that. Do not invent a fifth green.
User banners / group colours. A rainbow of rank colours is not a brand. Pick two: members, staff. The ranks article owns the ladder. Branding owns the veto: if a banner is not Steel, Ink, or Danger, it is probably noise.
Staff signatures. One mark, one line, no animated GIF. A signature pack is how five moderators ship five brands. Put the rule on the staff page.
Open Graph / share image. ogImage for this site is a JPG. Your board’s share image should be the mark on paper or slate, no six-word slogan in 12 px type. Make it in the later graphics-tools article. Upload it where your style or a page node expects a share image. Do not paste a screenshot of the header.
BB-code media and unfurl. You do not control other sites’ colours. You do control whether your own landing and portal use the same chips.
ACP. The admin control panel is not the public brand. Do not customize ACP templates to “match.” Staff already know they are backstage.
Discourse: the same chips, a different machine
If the community also runs Discourse (or you are choosing), do not install a theme component that fakes a XenForo board index so the two “match.” That is two homepages. The beginner guide already said: layout changes are theme components; live with Latest for a month.
Brand rules that do transfer:
- One theme. Colour scheme holds the chips (paper, ink, steel). Do not run three community themes “for seasons.”
- Logo in the official theme header setting, not a component that injects a second header.
- Theme components for genuine layout needs. Meta’s discourse-full-width-component exists; the notebook we use notes the quoting popup can be flaky on mobile. Treat that as a known trade, not as a brand requirement.
- Self-host typefaces. Discourse will load what you configure; do not point production at a Google Fonts URL if you refused to do that on XenForo.
- Email: Discourse has its own digest / mailing-list story and needs SMTP. The digest should still use the same mark and a readable light mail canvas. This is not a XenForo variation.
You will not get widget-level parity. You can get a guest who opens both URLs and believes they are the same organisation. That is the only Discourse goal this article has.
A brand hour that does not become a redesign
You have a child Board, Default as parent, a logo file, and three hex codes from a one-page PDF.
- Open the PDF. Translate hex into chip jobs (Paper, Ink, Steel). Discard the fourth “accent” if you cannot name its job.
- Color palette on
Board, light variation: set those chips. Style type Light. - Basic colors: text and content background point at Ink and Paper. Links point at Steel.
- Alternate variation: night Paper, light Ink, Steel that still contrasts. Style type Dark. Flip as a guest. Switcher.
- Header/logo row: upload the mark. Header background / text on chips.
- Appearance options: public Default style =
Board. HTML email = Default (light). - Search extra.less, HTML widgets, notices, and the landing page node for
#. Replace with tokens or delete. - Send one mail. Open it on a phone.
- Screenshot guest forum list, a thread, a notice, and the mail. Put the four images on the staff page under “this is the brand.”
- Stop. Do not fork
PAGE_CONTAINERto get a 4 px closer logo.
If step 1 has no PDF, write the four facts on the staff page first. The later graphics article can make a nicer PNG. A named Steel chip beats a prettier crest.
Staff page: the brand book that is not a tool review
Keep this short enough that a new moderator will read it.
Mark: board-logo.svg (light + dark headers) + favicon.png
Paper / Ink / Steel / Slate / Danger: (palette chip names, not hex)
Public style: Board (child of Default). Do not edit Default. Do not edit Master.
Mail style: Default (light). Never point mail at Board.
Notices: class notice--boardAlert only. No inline colour.
Prefixes: Verified = Steel, Offline = Quiet. No new greens.
Signatures: text + one link. No extra marks.
Discourse (if any): theme X, scheme Y. No second header component.That is a brand system. A 40-page PDF of mockups is not, until those nine lines exist.
Recolouring later, without a treasure hunt
A brand system pays off the morning you change Steel. If everything pointed at the chip, the header, the apply button, the notice class, and the prefix named Verified all move together. If half of them were hex, you will spend the morning grepping extra.less, widgets, and page nodes.
Quarterly rebrand drill (fifteen minutes):
- Change Steel one step on the child. Save.
- Guest: header CTA, a link in a post, the Season notice, the Verified prefix, the landing button.
- Flip the variation. Same five.
- Open the test mail. Steel in mail comes from the email style. Change that chip too if mail has its own child, or accept that mail Steel is the Default chip — document which.
- Revert or keep. If step 2 showed a leftover hex, fix that surface now, not “in the graphics pass.”
Event microsites (a weekend tournament, a charity week) are the only good reason for a second style. Official inheritance already showed a tree of colour children. Make Board Event a child of Board, override two chips, point the Default style at it for seven days, then point back. Do not customize templates on the event child. Do not leave it selectable in January.
What this is not
It is not permission to customize Master so “every future style inherits the logo.” Future styles will inherit a merge. It is not a FiveStyle repurchase. It is not a Discourse migration. It is not SEO — a consistent title pattern helps, but og:image is not a palette chip. It is not how to draw the logo; wait for the graphics-tools piece.
Checklist
- One public child style; Master and vendor parent untouched
- Logo in Header/logo row, readable at phone height, survives both variations or has a variation-aware pair
- Palette chips have jobs; Basic colors point at chips
- User style selection off unless you have two brands
- HTML email Default style is light and readable
- extra.less / notices / widgets / landing HTML use
@xf-tokens, not hex - Fonts, if custom, are self-hosted; no Google Fonts CDN
- Favicon + PWA meta colours agree with the default variation
- Prefix, banner, and signature colours were vetoed down to the chip list
- Discourse (if any) uses one theme and the same chip jobs
- Staff page has the nine-line brand book
- Four screenshots (list, thread, notice, mail) match
Takeaways
- A forum brand is one mark, named chips, a light mail style, and tokens everywhere else.
- Official Appearance options let email use a different style from the public site. Use that. Dark public ≠ dark mail.
- extra.less is community practice: the place tokens go when the property UI cannot reach. Hex is how the brand forks.
- Discourse can share chips and a mark. It cannot share widgets. Do not fake an index to “match.”
- The upgrade-safe process is how this system survives 2.3.x. This article is what you put in that system.
When a guest, a mail client, and a notice agree, you can stop painting. Go write the next edition. The brand was supposed to disappear into being obvious.