Switchboard is Brighton & Hove's LGBTQ+ charity — a place for community, support, and connection. The brand needs to feel warm and welcoming while carrying the weight and authority of an organisation people turn to in difficult moments.
The visual identity balances these two things: a deep, grounded purple that communicates trust and commitment, lifted by a coral-salmon accent that feels human, alive, and approachable. The oldlace background softens the digital experience and connects the brand to something tactile and considered.
Brand in one sentence
Bold enough to be seen. Warm enough to feel safe. Every visual decision should pass this test — does it feel authoritative without being cold? Approachable without being trivial?
02
Colour
Palette
The palette is intentionally small and purposeful. Brand Purple is the dominant voice — it anchors every page. Salmon provides warmth, energy, and action. Oldlace is the canvas everything lives on.
--background · --oldlace
Page background · reversed text
#7209B7
Purple
--purple Links
#190825
Near Black
--black Body text
#FBE7C1
Warm Cream
--news-bg News sections
#A90000
Red
--red Error states only
The brand gradient
The gradient runs at 163° from Brand Purple to Salmon. It appears in the hero sections, footer texture, and the grainy gradient class. Always apply the grain texture via mix-blend-mode: multiply over this gradient for depth.
Use Brand Purple for all primary headings and the header
Use Salmon for CTAs, tags, and interactive accent elements
Use Oldlace as the page background — never plain white
Reverse to Oldlace/white text on Brand Purple backgrounds
Apply grain texture on gradient sections for depth
✗ Don't
Don't use Salmon for headings — it's an accent only
Don't use Red outside of error and validation states
Don't place Brand Purple text on Salmon backgrounds
Don't use pure white (#FFF) as a page background
Don't add colours from outside this palette
03
Typography
Typefaces & scale
Switchboard uses two typefaces. Amifer (Adobe Fonts) is the display and heading typeface — distinctive, slightly editorial, and warm. Poppins (Google Fonts) is the body typeface — clean, legible, and approachable at all sizes.
The Place for Community.
Display font
Amifer (Adobe Fonts)
Weight
400 regular · 700 bold
Styles
Normal · Italic
Use
All headings + hero text
.text-size-jumbo ~3.5rem · hero headlines
Switchboard
.text-size-medium 1.25rem · subheadings
Supporting LGBTQ+ communities
.text-size-small 1.2rem · card descriptions
Our services are here for you
.text-size-sm 1rem · body text
Brighton & Hove's LGBTQ+ charity since 1975
.text-medium-small 0.9375rem
Secondary body copy and captions
.text-size-extra-small ~0.75rem · legal / fine print
Reg Company No 03920445 · Charity No 1088133
Typography rules
✓ Do
Use Amifer for all headings, hero text, and display elements
Use Poppins Light (300) for long-form body copy
Use italic Amifer for emphasis in headlines
Keep heading colour to Brand Purple on light backgrounds
✗ Don't
Don't use more than two typefaces on a page
Don't use Poppins for hero headings — Amifer only
Don't use font weights above 700 (bold)
Don't set body text in Brand Purple — use near-black
04
Spacing & Shape
Space, rhythm & corners
All spacing uses a consistent token scale. Using these tokens — rather than arbitrary pixel values — keeps the website's rhythm coherent and makes global adjustments easy.
--xs
0.5rem · 8px
--s
1rem · 16px
--m
1.5rem · 24px
--l
2rem · 32px
--xl
3rem · 48px
--xxl
4rem · 64px
Border radius
All rounded elements use a consistent 10px radius (--radius / var(--s)). This applies to cards, buttons, form fields, tags, and navigation. Larger decorative containers (CTA blocks, modal overlays) use 16px. Circles (staff photos, icons) use 50%.
0px · none
10px · standard
16px · large containers
50% / pill · circles
Section padding
All full-width sections use 5% horizontal padding for consistent gutters. Section vertical padding uses either --xl (standard) or 10% for hero-adjacent sections. Cards use --m internal padding consistently.
05
Components
UI building blocks
All UI components are built as Oxygen Builder Components and draw from the same token system. They are designed to be composable — stack the card pattern (white background + shadow + rounded corners + padding) to build any new component consistently.
Training
LGBTQ+ Inclusion Workshop
A practical half-day session for organisations committed to inclusive workplace culture.
White bg · 10px radius · shadow-s · card-padding. Used for services, training, news, and hub listings.
Buttons
Primary: brand purple bg · oldlace text. Secondary: salmon bg · red border. White: white bg · black border. All 10px radius.
Frosted glass overlay — used on hero sections over gradient backgrounds.
Frosted Card
rgba white at 23% opacity · backdrop-filter blur · shadow. Requires non-transparent parent. .frosted-card
ServicesTrainingJobsNews
Tags / Pills
Salmon bg · white text · 999px radius · bold 700. Used for categories, post types, and status labels. .tag
The card pattern formula
Every content card is built from the same four classes combined: .bg-white + .card-padding + .shadow-s + .borders-rounded-s. This combination produces a consistent card foundation. Additional classes — image, heading wrapper, link container — are added on top.
Shadow
A single shadow value is used across the entire site: box-shadow: 0 2px 12px rgba(0,0,0,0.1) via .shadow-s. This is also used on Gravity Forms input fields as a border replacement. Do not introduce heavier shadows — the existing value provides sufficient depth without competing with the brand's flat colour approach.
06
Visual Patterns
Textures & effects
Switchboard's brand uses a small set of recurring visual effects that give the website its distinctive depth and warmth. These should be applied consistently and not mixed arbitrarily.
SVG noise filter blended via multiply over the gradient. Adds tactile depth. .bg-grainy-gradient
Frosted glass overlay
Frosted Glass
23% white opacity + backdrop-blur. Used for cards over image/gradient backgrounds.
Decorative Circles
Fixed-position SVG ellipses behind content. Pink and brown tones. z-index: -1. .cc-pink_bg / .cc-brown_bg
Warm cream section
Warm Cream Section
#FBE7C1 background with 5% vertical padding. News listings and soft content sections. .news-section
White card on oldlace
White on Oldlace
White cards always sit on the oldlace background, never on pure white. The contrast is intentionally gentle.
07
Voice & Tone
How Switchboard speaks
Switchboard's voice is direct, warm, and non-clinical. It speaks to people as equals, without jargon or bureaucratic distance. Whether someone is looking for urgent help or exploring what Switchboard offers, the language should feel human and unhurried.
✓ Sound like this
"We're here for LGBTQ+ people who need a listening ear, a safe space, or a community to belong to."
"Get help now — whatever you're going through, we can connect you to the right support."
Clear, short sentences. Active voice. Speak to "you."
Use "we" and "our" — Switchboard is a collective, not a service provider.
✗ Not like this
"Switchboard provides a range of services and programmes for individuals within the LGBTQ+ community."
"Please be advised that support is available to eligible service users."
Avoid passive voice, clinical language, and long compound sentences.
Never use jargon that creates distance from the people Switchboard serves.
Page headlines
Headlines should be bold, short, and active. Use Amifer italic for the key word or phrase to create warmth and emphasis. Aim for one line on desktop where possible.
