Brand Style Guide
Official guidelines for designers, developers, and content creators working with The Darras Index. All brand assets and guidelines are proprietary.Brand Identity
Brand Name
The Darras Index
Tagline
"Your trusted local services directory"
Mission
Connecting the Darras Hall and Ponteland community to trusted local services.
Brand Voice
Warm, professional, and community-first. Approachable but credible. Avoids corporate jargon. Emphasises relationships, trust, and local pride.
Colour Palette
Light theme built on a soft off-white base. Navy anchors the brand; teal drives action; sage marks community content; coral is a sparing accent. Do not add colours beyond this palette.
Navy
#0F2D4D
Headers, footers, key text — the anchor colour
Teal
#14B6C4
Buttons, links, CTAs, active states
Dark Teal
#0E7881
Teal for text/links on light backgrounds (AA contrast)
Sage
#8BB98B
Community noticeboard sections, soft highlights
Soft Off-white
#F7F8FA
Page background — never use pure white
Card
#FCFCFD
Card and raised surface backgrounds
Border
#D7DEE8
Card and input borders
Muted Text
#48607B
Supporting/descriptive text
Coral
#E84C7A
Sparing accent only: alert dots, new labels, urgent notices
Destructive Red
hsl(0, 84%, 60%)
Error states and destructive actions only
Gradients & Effects
Navy Panel Gradient
Teal Tint Gradient
Glow Effect
Typography
Fonts
Inter
Body / UI · Weight 300–700
All body copy, labels, UI elements
Baloo Chettan 2
Display / Accent · Weight 400–700
Decorative headings, emphasis
JetBrains Mono
Monospace · Weight 400
Code snippets, technical content
Type Scale
Logo Usage
Wordmark
Text lockup used in the site header and home page. "Darras" in white (navy on light backgrounds) · "Index" in Brand Teal.
Monochrome — Black
Single-colour mark on transparent background. Use where colour isn't available.
App & PWA Icons
Social Banners
- ·Prefer the SVG for any scalable placement; rasters are provided for fixed-size and legacy contexts.
- ·Glyph is Brand Teal (#14B6C4) on Navy (#0F2D4D).
- ✕Do not recolour, stretch, or add effects to the logo.
Buttons
Primary
BG: Teal #14B6C4 · Text: Navy #0F2D4D
Hover: Teal at 90%
Secondary
BG: Navy #0F2D4D · Text: White
Hover: Navy at 90%
Outline
BG: Card · Text: Navy
Hover: Secondary surface
Pill
BG: Secondary surface · Text: Navy
Hover: Card + Dark Teal text
Pill Active
BG: Teal/20 · Text: Dark Teal #0E7881
Hover: Selected state of Pill
Ghost
BG: Transparent · Text: Navy
Hover: Soft teal tint
Link
BG: None · Text: Dark Teal #0E7881
Hover: Underline
Border radius: 0.5rem standard · 9999px pill/tag
Focus ring: 2px solid #14B6C4 with 2px offset
Toast Notifications
Non-blocking feedback messages. Auto-dismiss after 5 seconds. Appear in the bottom-right corner. Click the buttons below to preview each variant.
Error
BG: Red 600 · Icon: AlertCircle
API failures, submission errors
Success
BG: Green 600 · Icon: CheckCircle
Confirmations, completed actions
Warning
BG: Yellow 500 · Icon: AlertTriangle
Validation issues, non-critical warnings
Spacing & Layout
Container max width
1400px · centred · 2rem horizontal padding
Card border radius
1rem (16px)
Badge / tag border radius
9999px (full pill)
Card padding
1.5rem (24px) standard
Section spacing
gap-6 to gap-8 between cards
Within-card spacing
space-y-4
Tone of Voice
Community-first
Always frame messaging around the local community, neighbours, and shared value.
Trustworthy
Use words like "trusted", "curated", "verified" to reinforce credibility.
Warm & welcoming
Approachable tone — not corporate, not cold.
Action-oriented
Use strong, clear CTAs: "Browse", "Find", "Connect", "Get Started".
Benefit-led
Lead with what the user gains, not what the platform does.
Key phrases
- ·"Connecting our community to trusted local services, one recommendation at a time."
- ·"Your trusted local services directory"
- ·"Supporting Our Local Economy"
- ·"Strengthening Community Connections"
Avoid: Jargon, corporate language, passive voice, vague superlatives ("best", "amazing").
Iconography & Visual Style
- ·Icons should be simple, outlined, and consistent in stroke weight.
- ·Icon backgrounds use bg-primary/10 (teal at 10% opacity) with the icon itself in Dark Teal.
- ·On hover: icon background lifts to bg-primary/20.
- ·Cards elevate on hover: translateY(-4px) + soft navy shadow.
- ·Community and noticeboard content uses sage tints (bg-sage/15, sage chips) to stand apart from directory content.
- ·Coral appears only as tiny accents: alert dots and new labels.
Icon at rest — bg-primary/10
Icon on hover — bg-primary/20
Contact & Ownership
Website
darrasindex.co.uk
info@darrasindex.co.uk
Phone
+44 7424 760573
Address
Darras Hall, Ponteland, NE20 9AA, United Kingdom
Team
The Darras Index Team
This page is intended for use by third-party designers, developers, and content creators working on behalf of The Darras Index. All brand assets and guidelines are proprietary.