Brand guidelines
Brand & style guide
01
Colour
A calm blue-grey base with one confident blue for action. The warm accents come from the church's spectrum mark and are used sparingly, for meaning rather than decoration.
STBBC Blue
#00AAFF
--primary · hsl(200 100% 50%)
Primary buttons, links, focus rings. One main action per screen.
Ink
#21242C
--foreground · hsl(220 15% 15%)
Headings, body copy, dark panels and the footer surface.
White
#FFFFFF
--background · hsl(0 0% 100%)
Default page surface and cards.
Soft surface
#F3F5F7
--secondary / --muted · hsl(210 20% 96%)
Alternating sections, quiet cards, table headers, inputs.
Muted text
#6A7181
--muted-foreground · hsl(220 10% 46%)
Secondary copy, captions, metadata, helper text.
Hairline
#E5E7EB
--border · hsl(220 13% 91%)
1px borders on every card, divider and table row.
Accent tint
#E6F7FF
--accent · hsl(200 100% 95%)
Badges, selected nav items, quiet highlight blocks.
Hero navy
#1F2833
.hero-sky · hsl(214 24% 16%)
Hero and page-header backdrop, washed with soft blue light.
Accent palette
Red
#E74C63
--brand-red
Spectrum rule, icon accents.
Gold
#FFCB5C
--brand-gold
Eyebrow and hero labels only.
Green
#00E699
--brand-green
Spectrum rule, eco and positive accents.
Blue
#1A85B3
--brand-blue
Section eyebrow rules.
Teal
#005C5C
--brand-teal
Deep supporting panels.
Spectrum rule
Red → gold → green → blue, flowing slowly. Four pixels tall, full width, used once per page to close a hero or open a footer.
02
Typography
Two typefaces, no more. Bebas Neue is the voice of the church — condensed, uppercase, always large. Inter carries every word you actually have to read.
Bebas Neue
Headings · page titles · buttons
Always uppercase, always tracked slightly wide. Never used below 16px, never for a sentence of body copy.
Inter
Body · labels · tables · forms
Weights 300 to 700. Line height 1.6 for reading, 1.4 for interface labels.
Page title
Faith, hope and love
Bebas Neue · 48 → 72px · uppercase · tracking-wide · line height 0.9
Section title
Life together
Bebas Neue · 36 → 60px · uppercase · line height 0.95
Eyebrow
Our community
Inter 600 · 12px · uppercase · tracking 0.15em · gold or accent
Lead
A vibrant and inclusive community of faith in South East Essex.
Inter 400 · 16 → 18px · muted · line height 1.6
Body
We gather on Sundays, share life in small groups through the week, and serve our neighbours across Shoeburyness and Thorpe Bay.
Inter 400 · 14 → 16px · line height 1.6 · measure 60–70 characters
Button label
Find out more
Bebas Neue · 12 → 14px · uppercase · tracking-wider
03
Layout & spacing
Generous white space, one clear column of thought at a time, and a steady rhythm of white and soft grey sections down every page.
Container
max-w-7xl · mx-auto · px-4 sm:px-6 lg:px-8
Section padding
py-20 md:py-28 main · py-16 md:py-20 supporting
Rhythm
Alternate white and soft #F3F5F7 sections down the page.
Radius
10px base · buttons rounded-lg · cards and images rounded-2xl
Borders
1px #E5E7EB on every card, never heavier than 2px.
Shadow
shadow-soft: barely-there lift, no hard drop shadows.
Spectrum rule
4px red→gold→green→blue hairline closing heroes and opening footers.
Grid
1, 2 or 3-up columns with gap-6 to gap-8, always collapsing to 1-up on mobile.
04
Components
A small, fixed kit. Every card is white with a hairline border, a 16px radius and the softest possible shadow; every button is Bebas, uppercase and at least 44px tall.
Buttons
Bebas Neue, uppercase, tracking-wider, 10px radius, 44px minimum height.
Form field
Eyebrow and title
Our community
Sundays together
A 1px accent rule sits before the eyebrow. The eyebrow names the section, the title is always Bebas and uppercase.
Status badges
Always a word plus a colour dot — never colour on its own.
05
Imagery & motion
Photography
Real people, real rooms. Every photo fills its frame with object-cover inside a 16px radius; portraits are anchored towards the top so faces stay visible. Never letterbox a photo and never use generated imagery of people.
Motion
Content fades up 20px over 0.65s with a gentle ease-out, once per element. Nothing loops except the spectrum rule, and every animation switches off for visitors who ask for reduced motion.
06
Tone of voice
Warm, honest and plain. We write like a friend explaining something clearly, not like an institution announcing it.
- Warm, plain English. Write as we speak: “you” and “we”, never formal church jargon.
- British spelling (organisation, centre, programme).
- Sentence case in body copy. UPPERCASE belongs to Bebas headings only.
- Short sentences, one idea each. Explain any church term the first time it appears.
- Inclusive and welcoming — never assume someone's background, belief or family shape.
- No hype, no exclamation-mark marketing, no stock filler.
Always
- Keep one primary blue action per screen.
- Let white space and generous padding do the work.
- Use real photography of real people and places.
- Use Bebas Neue for headings and buttons only.
- Give every card a 1px hairline border and a 16px radius.
Never
- Set paragraphs or long copy in Bebas Neue.
- Put accent colours (gold, green, red) in body text.
- Use more than one accent colour inside a single component.
- Add gradients or glows outside the hero backdrop.
- Introduce another typeface or a second button style.
07
Building the staff portal
The same identity translated into an application: softer surfaces, tighter density, colour kept for meaning.
01
Surfaces
Soft #F3F5F7 app background, white cards with a 1px #E5E7EB border and 16px radius. No coloured panels for layout — colour is for meaning, not decoration.
02
Navigation
White sidebar or top bar, ink labels in Inter 500. The active item is a soft #E6F7FF block with blue text, never a solid blue bar.
03
Headings and labels
Page titles in Bebas Neue uppercase. Everything else — form labels, table content, buttons inside forms, helper text — in Inter.
04
Actions
One filled blue button (10px radius) for the main action of a view. Everything else is a secondary outline or ghost button. Icon-only controls get a 44px target and a tooltip.
05
Status and badges
Pale tint with darker text: blue = information, green = complete, gold = pending, red = urgent. Never colour alone — always pair it with a word.
06
Tables and data
Inter 14px for rows, soft surface for the header row with 12px uppercase tracking-wide labels, hairline row dividers, numbers right-aligned.
07
Header band
Use the spectrum rule once per screen at most (app header or footer), never in both, and never inside content.
08
Accessibility
Ink on white and white on ink for text. Gold never carries text on white. Keep the 2px blue focus ring visible on every interactive element.
Tokens live in src/index.css and are mapped to utility classes in tailwind.config.js. Copy both files into the portal project and the same colour, type and radius classes work out of the box — Bebas Neue and Inter load from Google Fonts.