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
States (live component)
The label keeps its place in the layout while the spinner shows, so the button holds its width — watch the edges stay put. The old pattern swapped the text for “Saving…” and resized the button under the cursor mid-click.
Border radius: base token --radius: 1rem — rounded-lg 1rem · rounded-md calc(1rem − 2px), what Button uses · rounded-sm calc(1rem − 4px) · 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
Media Embeds
Paste a link into MediaEmbed and it renders the right player. Two closed whitelists keep it honest: only YouTube, Vimeo and Spotify links become iframes, and only files on our own hosts play inline. Everything else degrades to a plain link — no arbitrary URL is ever framed, and no visitor's browser is ever sent to an unvetted third party.
Video — YouTube or Vimeo link
https://www.youtube.com/watch?v=aqz-KE-bpKQSpotify — track, album, playlist, show or episode
Spotify playlist — this Spotify player is not loaded yet. Spotify sets its own cookies, so we only contact it once you say it is fine.
Loading it here applies to this visit only. Allowing advertising cookies when the consent banner appears loads embeds automatically.
https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5MVimeo — gated, because Vimeo sets cookies on load
Vimeo example clip — this Vimeo player is not loaded yet. Vimeo sets its own cookies, so we only contact it once you say it is fine.
Loading it here applies to this visit only. Allowing advertising cookies when the consent banner appears loads embeds automatically.
https://vimeo.com/76979871Audio upload — our storage only
Cloggs Cottages audio guide
PDF document — opens in a new tab
Video file — our storage only
A video on the Azure blob container or the Sanity CDN plays in a native player, so a signed (SAS) URL keeps working. Not shown live because no video is uploaded yet.
https://darrasindexstorage.blob.core.windows.net/media/tour.mp4The audio and PDF tiles are the real block components an article uses, fed the same values a Sanity post supplies. Audio deliberately uses the browser’s own player: it costs no JavaScript and stays a server component, at the price of looking slightly different in each browser. A PDF opens in a new tab rather than previewing in place, because mobile browsers frequently refuse to render one inline and fall back anyway. Neither needs a consent gate — both serve from our own hosts, so there is no third party involved.
Cookie consent: never decide this by hand. The tiles above ask consentProvider(), which returns the provider to wrap in ConsentGatedEmbed — Spotify and Vimeo above — or nothing at all. Until the visitor allows advertising cookies or presses the button, the provider is not contacted. YouTube goes through youtube-nocookie, which sets nothing until play, so it loads directly. A new provider is a type error until it is classified; add it to the cookie policy too.
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.