Neighbourhood · Website 2026 · v2

Design for the humans on the tools.

The living design system for the 2026 site. Every colour, type role and component is driven by tokens.css. Components ship in two stacks (React + vanilla) from one token layer. Toggle the theme (top-right) to check dark mode. Serve this folder to view it (fonts + partials need a server).

01 — Logo

The marks

Three lockups, one identity. Use the stacked mark by default; the inline lockup where width is tight (headers, footers); the brand mark only at small sizes or as an avatar / favicon. Reverse to white on dark, brand colour or busy backgrounds.

Stacked — primary

Inline — horizontal lockup

Brand mark — compact / avatar

On light & dark

Ink lockups on cream or paper. White lockups on charcoal, on the coral accent, or over photography.

Ink on cream

White on charcoal

White on coral

Inline, reversed

Clear space & minimum size

Keep clear space of at least one mark-module on every side (the dashed box). Don't render the brand mark below 24px, or the inline lockup below 120px wide.

Do & don't

Use the supplied lockups as-is · keep generous clear space · reverse to white on dark or photography · scale proportionally · pick the lockup that fits the space.

Don't

Stretch, squash or rotate · recolour outside ink / white · add shadows, outlines or effects · place the ink mark on a dark or busy background · crowd it against other elements.

02 — Colour

Surfaces & ink

Pure-white ground (V4), graphite ink, soft grey for layering. Cream is kept only as an optional warm surface. In dark mode these flip to a warm charcoal via the surface aliases.

Cream

#fbf9f4 · optional warm surface

Paper

#ffffff · cards

Ink

#2e2e30 · text

Ink soft

#5a5a5a · secondary

Hairline

#e6e6e6 · borders

Interactive accent

Coral drives buttons, links and active states. The deep red is reserved for rare high-emphasis only.

Accent / Coral

#f09068

Accent tint

#f5dcca

Accent strong

#e2663a · sparing

Service-category palette

Each service owns a colour and a light tint. Solid colour for pills and accents; tint for section blocks and card grounds.

Customer Service

#c880b0 · #f2cee5

HubSpot Onboarding

#f09068 · #f5dcca

Marketing & Growth

#4ec880 · #d8f5dc

SEO / AI Solutions

#709ee8 · #cadaf8

Sales & CRM

#edd850 · #f2eaaa

Websites & Integrations

#a898d8 · #d8d4f0

03 — Typography

Inter

One family, five weights (Inter — a free Swiss-modernist neo-grotesque from Google Fonts, the closest free match to the licence-gated Lay Grotesk). Hierarchy from size and weight, not extra typefaces. Heading roles carry their own clamp + tracking — use the .text-hero / .h-section roles, not raw sizes.

Regular 400

Medium 500

SemiBold 600

Bold 700

ExtraBold 800

Hero--text-hero · 800

Good Neighbours

Sub--text-sub · 800

Results are the proof

Section--text-section · 700

Good things happen here

Pull quote--text-pull

An immediate spike in enquiry from the new website.

Stat--text-stat · 800 · tnum

210%

Lead--text-lead

With new AI tech at our fingertips and a team of high-level thinkers and doers.

Body20px · 400

Neighbourhood is Australia's #1 HubSpot Diamond Partner. We help businesses attract, convert and retain customers.

Small.small

General Manager, Flight Centre Travel

Eyebrow.eyebrow · caps

HubSpot Solutions Diamond Partner

04 — Spacing

4-point scale

Semantic names, not pixel names. Use gap for sibling spacing; the .stack-* utilities for flow rhythm.

--space-2xs · 4px

--space-xs · 8px

--space-sm · 12px

--space-md · 16px

--space-lg · 24px

--space-xl · 32px

--space-2xl · 48px

--space-3xl · 64px

--space-4xl · 96px

--space-5xl · 128px

05 — Radius & elevation

Rounded & soft

Generous radii: pill buttons, 16px cards, 50px image masks. Shadows are warm-tinted and subtle (deeper on dark).

--radius-sm · 8px

--radius-md · 16px

--radius-lg · 24px

--radius-xl · 50px

--radius-pill

--shadow-sm

--shadow-md

--shadow-lg

06 — Voice & brand

How we sound

The brand is what it looks like and what it sounds like. Full detail lives in BRAND.md (the single source of truth). The essentials:

Essence & personality

Super Human — bringing humanity to the spaces it's been forgotten. 90% nerd, 10% rebel.

Off-beat

The sharpest person in the room who doesn't make you feel stupid for being there.

Casual swagger

Professionally casual, never corporate.

Open door

Share knowledge freely and boldly.

Tenacious

Show more donkey, less pony. Earn attention through hard work and real results.

Calibration: "Smart enough for the CTO, human enough for the CMO, real enough that neither feels sold to." Consistent across every channel.

Vocabulary

Prefer

"your people" over customers/leads · frame outcomes around humans, not platforms · specific examples + real results · contractions always · direct "you/your" · "we" not third-person · light Australian touch when natural.

Avoid

synergy · game-changer · best-in-class · cutting-edge · leverage · unlock potential · seamless · holistic · rapidly evolving landscape · generic B2B agency-speak · corporate jargon · show-pony behaviour.

Patterns: short punchy sentences mixed with deeper ones. Sentence fragments for emphasis. Dry wit through parenthetical asides, never try-hard. No emojis in long-form (social is the exception).

Approved headlines

From the V4 deck. Confident, direct, short. Use as hero headlines, social titles, brief covers, posters.

Put people before platform.

HubSpot Made Human.

We do simple differently.

Process should be fun!

Expect the unexpected.

Speed meets growth.

Photography

Super Human (team)

Bold angles, unexpected perspectives. Brand colours woven in via wardrobe, props, environments. Staff portraits on flat brand-colour backgrounds. No direct eye contact — averted gaze for a premium, deliberate feel.

Sector (conceptual)

Expressive, offbeat, character-led. Personality and humour over polish. Think a dog at a laptop or a bear with a "SAVE ME" sign — distinctive, never literal category cliche.

07 — Components

The library

25 components, each shipping in React and vanilla from the same tokens. Demos below are the vanilla build; the React API mirrors it. See MANIFEST.md.

Loading components… (serve this folder if they don't appear)