Health
Why walking still beats every new fitness app
A look at the evidence — and how to start tomorrow.
Web Brand Guidelinesv1.0 · 2026
Brand Guidelines · Web
A trusted guide for readers over 50.
These guidelines define how The Beacon looks, reads, and behaves on the web — built for clarity, dignity, and the reading habits of an audience that grew up with newspapers and now lives online.
01 — Identity
The Logo
Do
- — Use the supplied logo art only.
- — Keep clear space equal to the height of the "B" on all sides.
- — Minimum width: 120px on web.
- — Pair with white or Light Gray backgrounds for default use.
Don't
- — Don't recolor the wordmark. Brand Red is locked.
- — Don't stretch, skew, or rotate.
- — Don't place over busy photography without a scrim.
- — Don't recreate the typography manually.
02 — Color
Section Palette
Each editorial section owns a color. The pairing is fixed and used for navigation, section headers, category tags, and accent rules. Hex values are exact and must not be adjusted.
#E71F3C
Primary Brand Red
Masthead, primary actions, breaking news
--beacon-red
#040402
Primary Black
Body copy, headlines, UI text
--beacon-black
#24A749
Green
Money section
--beacon-green
#A12877
Violet
Arts section
--beacon-violet
#2EBEBF
Teal
Travel section
--beacon-teal
#5090CD
Blue
Health section
--beacon-blue
#F26122
Orange
Housing section
--beacon-orange
#998675
Beige
From the Publisher
--beacon-beige
#969696
Gray
Secondary text, dividers
--beacon-gray
#F4F5F7
Light Gray
Backgrounds, surface tints
--beacon-light-gray
Usage Rules
60%
Neutral
White, Light Gray, and Black should account for ~60% of any screen.
30%
Section
The active section color leads category pages, tags, and rules.
10%
Red
Reserve Brand Red for masthead, breaking news, and primary actions.
03 — Typography
Type System
Display · Playfair Display
Aa
A serif voice echoing the Beacon wordmark — used for headlines and editorial moments.
Body · Source Sans 3
Aa
A clear, generous sans for body copy, UI, and metadata. Optimized for long reads.
H1 Display
Playfair Display Bold · 56–72px · 1.05
Older readers deserve better news design.
H2 Section
Playfair Display Semibold · 36–44px · 1.15
A new chapter for community news.
H3 Article
Playfair Display Semibold · 24–28px · 1.25
Inside Tuesday's town hall meeting
Body
Source Sans 3 Regular · 18–20px · 1.6
Body copy is set at 18px minimum to respect aging eyes. Line length is capped at 68 characters and line height is generous so paragraphs breathe.
Caption / Meta
Source Sans 3 Medium · 13–14px · uppercase tracking-widest
By Jane Doe · Updated June 9, 2026
04 — Voice & Tone
How The Beacon Sounds
Plain-spoken, respectful, and substantive. We write for adults who have seen the world — never down to them.
YesLocal, useful, specific.
NoClickbait or doom-scrolling tropes.
Yes"Here's what changed and why it matters."
No"You won't believe what happened…"
YesActive voice. Short sentences.
NoJargon, acronyms, or slang.
YesWarm, neighborly, dignified.
NoPatronizing references to age.
05 — Layout
Grid & Spacing
Container
Max-width 1200px, gutter 24–32px. Article reading column capped at 680px.
Grid
12-column desktop, 4-column tablet, 1-column mobile. 32px baseline gap.
Density
Generous vertical rhythm. Minimum 64px between major sections; 96px+ at landing.
Section Header Pattern
Travel
A weekend in Annapolis
By Marcus Hall · 8 min read
06 — Components
Core UI
Buttons
Min height 48px. Hit area ≥ 44px for mobile (WCAG).
Section Tags
MoneyArtsTravelHealthHousingFrom the Publisher
Article Card
Pull Quote
"Good journalism doesn't get old. Neither do our readers."
07 — Imagery
Photography & Illustration
Authentic
Real people, real places. No staged stock. Show the over-50 audience in active, dignified roles.
Editorial Crop
Favor 3:2 and 4:5 aspect ratios. Leave space for an overlay tag in the top-left.
Color Treatment
No heavy filters. Natural light. Section color appears as a thin rule, never on top of the image.
08 — Accessibility
Designed for 50+
- Body text: 18px minimum, 20px preferred.
- Line height: 1.6 for body, 1.05–1.25 for headlines.
- Contrast: All text meets WCAG AA (4.5:1). Brand Red on white passes for non-text and large headlines only.
- Touch targets: 44×44px minimum.
- Focus states: Always visible. 2px outline in Brand Red.
- Motion: Respect
prefers-reduced-motion. No autoplay video with sound. - Forms: Labels always visible, never placeholder-only.
- Reading mode: Offer a text-size control on every article.