Supreme Advisory · Internal reference · Not for public linking
The system behind the box.
Navy, gold and royal blue for a London management-consultancy that runs formations, payroll, compliance and advisory as one joined-up system. Tokens on this page mirror the live site's CSS custom properties exactly — this is the working contract, not a redraw.
01 / Wordmark
Mark + wordmark lockup
The mark is a compass star in gold on a navy rounded square — steady direction, premium finish. It never separates from the wordmark below page-nav size.
On warm-white / paper — primary use, all public pages
On navy — footer, "the box" section, dark cards
Do
Keep the mark's navy square rx9 rounded corner and the gold star at full opacity. Pair with Syne 800 for the wordmark type.
Don't
Recolour the square anything but navy, or the star anything but gold — including on dark backgrounds. Never stretch non-uniformly.
Do
Use "Supreme Advisory" as the public-facing name. Legal name "Supreme Business Advisory Ltd" appears only in footers, legal copy and contracts.
Don't
Use "Supreme Digital" or "Switch Payroll" as the top-level wordmark — those are module names inside the box, not the parent brand.
02 / Palette
Nine tokens, one system
Navy is the authority colour and carries almost all text. Gold is an accent only — it fails body-text contrast on light backgrounds by design, so it is reserved for CTAs, badges and text on navy. Royal blue is the one colour licensed for links and data.
Primary — authority, headings, body text, primary buttons, nav.
14.2:1 on white · AAAHover state for navy buttons; deepest stop in dark-card gradients.
~17:1 on white · AAAPremium accent — CTAs on dark, partner badge, tags, icons. Not for body text on light backgrounds.
2.4:1 on white · fails AA textEyebrow labels, step numerals, sec-num — gold darkened for readability, but still an accent weight, not a body-text colour.
~3.6:1 on bg · large text/labels onlyFill only — badge backgrounds, bullet dots on light sections. Never used for text.
Fill colour — pair with navy or gold-deep textLinks, interactive states, data highlights, focus rings (with opacity).
5.2:1 on white · AACompliant status, filings complete. Use for large text/icons/fills on light bg; pass at 16pt+ or bold, not small body copy.
3.3:1 on white · large text/UI onlyOverdue filings, compliance failures. brand.md token — not yet wired into the hub's live :root (see audit note).
4.8:1 on white · AAPage background. Close to brand.md's #FAFAF8 — same warm-white intent (see audit note).
Base surface — pair with navy/ink2 textMuted (#6B7689, used for secondary copy and metadata) sits at ~4.36:1 on warm-white — just under the 4.5:1 AA threshold for small body text. Reserve it for labels, captions and large text; use ink2 (#3A4A63, 8.5:1) for anything that must read as body copy.
03 / Type ramp
Syne for authority, Inter for reading, mono for data
Headings run in Syne — geometric, a little architectural, built for a management-consultancy tone. Body copy runs in Inter for readability at length. JetBrains Mono marks anything numeric: filing dates, company numbers, compliance tables.
Hero headline size. Fallback: Arial Black, sans-serif.
0.72rem, 0.22em tracking, gold-deep — sits above every section heading.
Supreme runs your engine room — your website, payroll, formations, compliance and advisory — as one joined-up system. You run the business; we run the rest. Body copy sits at 1.7 line-height for a long-form advisory read.
One relationship, not five suppliers.
CH 17025531 · RTI submitted 05 Jul 2026 · Next filing 05 Aug 2026
Fallback: Courier New, monospace. Used for company numbers, filing dates and any tabular compliance data — never for prose.
04 / Components
Buttons, badges, cards, forms
Every component below is lifted directly from the live site's CSS classes — same class names, same values — so this page is a working swatch sheet, not a separate design.
Buttons
Badges & status
Module cards (dark)
Supreme Digital
A website that actually sells — built, hosted and kept current.
Website & digitalWe Switch Payroll
RTI to HMRC and pension auto-enrolment — payday just works.
Payroll & peopleForm inputs
05 / Voice
Professional, efficient, trustworthy — never bureaucratic
Management-consultancy heritage, plain-English delivery. Compliance is the outcome we hand over, never the obstacle we lead with. Three examples from the canonical brand voice doc:
"Your company formation is the foundation everything else sits on. Get it wrong and you spend years fixing it."
"We've partnered with Supreme Business Advisory to handle your company formation, compliance monitoring, and ongoing filing support. Their team manages everything from incorporation through to annual returns."
- NOT "Cheap formations" — USE "properly structured" or "compliant from day one"
- NOT "DIY" — Supreme is the done-for-you service
- NOT "One-size-fits-all" — every formation is tailored to the business structure