MirrorSphere · KB Article Standards

Style Guide v1.

One page. Everything an author needs to write a KB article that matches the brand.

Voice

Tone: Calm, professional, helpful. Second person ("you", "your"). Sentence case in headings.
Spelling: UK English. authorisation, organisation, behaviour. Never American.
Brand name: Always MirrorSphere. Not "Mirror Sphere", not "Mirrorsphere", not "MS".
Phone format: +44 (0) 1295 595 444 — with the (0), grouped 4-3-3.
Em-dashes: Use real em-dashes (—) with a space either side — like this — not hyphens.
Apostrophes: Use curly quotes (’, “”) in body text. The HTML entities are ’, “, ”.
Breadcrumbs: Use › with non-breaking spaces: Services › Users and Services › USB Enablement
Emphasis: <strong> = a button or menu item to click. <em> = a referenced UI element. <code> = a literal command, URL, or value.
Step naming: Process articles use "Step N — verb phrase". Reference articles use "What is X?"

Brand Palette

Slate

#394852

Teal

#4CBDEE

Orange

#E5833B

Muted

#92A9BD

Success

#34a853

Error

#c0392b

Panel

#f2f5f8

Page

#ffffff

Font: Montserrat (loaded from Google Fonts via @import). Falls back to Segoe UI / Helvetica / Arial.
Body size: 13px, line-height 1.7, colour #6B8295.
Heading sizes: H1 = 28px / 800. H2 = 17px / 700 with 2px teal underline. H3 = 14px / 700.
Logo: White inline logo with strap, from assets.unlayer.com/projects/0/.... Used in the hero only.

Component Vocabulary

Pick the ones your article needs. Don’t invent new components — if something doesn’t fit, the template needs extending.

.kb-hero · Hero banner

Logo + title + tagline. One per article, always at the top.

.kb-eyebrow · Section eyebrow

Tiny uppercase teal label. "KB N · Category · Audience".

.kb-lede · Lede paragraph

One-sentence summary of the article. Bolder than body text.

.kb-callout · Info callout

Variants: default (info), is-warn, is-success, is-tip, is-time, is-danger.

.kb-pill-row · Metadata pills

3-4 pills from the vocabulary (Audience, Process Time, Last Reviewed, Article Type, Difficulty, Approval, Platform, Access Level).

.kb-toc · Table of contents

For articles with 5+ H2 sections. Links jump to id-anchored sections.

.kb-flow-cards · Flow cards (horizontal)

3-4 horizontal "buckets" with SVG icons. Best for at-a-glance summaries.

.kb-flow-pipeline · Flow pipeline

5-6 sequential coloured pills with arrows. Best for linear "state" flows.

.kb-email-row · Email preview row

Numbered circle + title + description + screenshot. One per email.

.kb-table · Reference table

Dark header, zebra striping. For emails, schedules, troubleshooting.

.kb-step-card · Step card

Dark header with eyebrow + title + body. For configuration steps or failure scenarios.

.kb-checklist · Checklist callout

Green box with ✓ bullets. For "what success looks like" or "what's included".

.kb-faq · FAQ accordion

Stacked cards with question header + answer body. Optional.

.kb-keyvalue · Contact table

2-column label/value table. For "Need more help?" escalation paths.

.kb-cta · CTA card

Dark card with urgency message + phone button. One per article, near the end.

.kb-signoff · Signoff line

Quiet "KB N · Category · fallback prompt" in the footer area.

Article Skeleton

Hero (logo + title + tagline)
Eyebrow + lede
// optional "What is X?" + "Who is this for?" callouts
Pill row (3-4 from vocabulary)
// only if 5+ sections Table of contents
--- divider ---
H2 sections with id="..." anchors
    Numbered or bulleted steps
    Callouts (info / warn / tip / time / etc.)
    Tables / flow cards / step cards as needed
    Email preview rows with screenshots
// strongly recommended If something goes wrong (named scenarios)
// optional FAQ accordion
// recommended Need more help? (key/value contact table)
CTA card (urgent action)
Signoff line
Branded footer (always)

Do / Don’t

Use components only from the vocabulary above
Keep brand colours strict — the seven hex codes only
Write alt text on every image
One <h1> per article (the hero title)
Add an id="..." to every H2 that the TOC links to
Wrap standalone screenshots in <figure> + <figcaption>
Drop pills that just repeat what the article body teaches
Quote button labels exactly, including their arrows (→)

Don’t

Invent new colours, fonts, or components per article
Use Material-style greens/reds (#2e7d32, #c62828)
Use emoji decoratively in body text
Use inline styles — classes only
Skip the branded footer or write a custom one
Repeat metadata in the body that’s already in the pill row
Pad articles with "Approval: Not Required" or filler pills
Use American spelling, "click here" links, or sales language