Brand & Design System

Palette

Colours.

• Ink

  colors.ink

  #050505

  Darkest. Footer + invert text.

• Base

  colors.base

  #0a0a0a

  Body background.

• Surface

  colors.surface

  #161616

  Cards, raised areas.

• Line

  colors.line

  #2a2a2a

  Borders, hairlines, dividers.

• Ink Soft

  colors.inkSoft

  #c9c4bc

  Body copy on dark.

• Bone

  colors.bone

  #f4f1ec

  Primary text + invert bg.

• Gold

  colors.gold

  #c9a961

  Accent. CTAs, lines, marks.

• Gold Bright

  colors.goldBright

  #e0c075

  Hover/highlight gold.

Layout

Spacing scale.

4-based scale, 0 → 160 px. Pulled directly from spacing in tokens.ts.

• 0

  0

• 1

  4px

• 2

  8px

• 3

  12px

• 4

  16px

• 5

  20px

• 6

  24px

• 8

  32px

• 10

  40px

• 12

  48px

• 16

  64px

• 20

  80px

• 24

  96px

• 32

  128px

• 40

  160px

Behaviour

Motion & hover library.

Every interactive effect used across the site, grouped by trigger. Hover any tile to see the effect live. All effects mirror on :focus-visible for keyboard nav and collapse to zero-duration transitions when prefers-reduced-motion: reduce is set.

Hover & focus

Standard 200 ms with the soft-out easing. Cards use a heavier 320 ms curve for a more deliberate lift.

• .fx-underline

  200 ms · scaleX 0→1 from left

  Gold hairline reveals beneath an inline link.

  Nav, footer, contact details, in-page links.

• .fx-arrow .arrow

  200 ms · translateX 0→4px

  Read more →

  Section headers, more-links, CTA buttons.

• CTAButton

  colour fill + arrow slide

  Get Started → See Our Work →

  Primary fills gold-bright; ghost shifts border + text to gold.

• .fx-lift

  320 ms · bg → surface, drop shadow

  Project tile

  Background lifts toward surface, border softens, subtle shadow drops.

  Projects mosaic, gallery tiles.

• .fx-invert

  320 ms · same idea, overrides bg-surface

  Sector card

  Lifts above siblings via z-index. Text & accent colours stay put.

  5 reasons, reviews, FAQ, services, testimonials.

• .fx-zoom

  700 ms · child image scale 1 → 1.08

  

  Service tiles, projects mosaic, gallery.

• .fx-line-grow

  480 ms · gold gradient grows L→R

  • Shoreditch →
  • Canary Wharf →

  Locations + sector lists, footer columns.

• .sector-card-icon

  450 ms · lift, tilt, scale (per nth-child)

  🏢 Office

  🍸 Hospitality

  🛍️ Retail

  Tilt alternates by position — adds personality without rhythm-killing repetition.

• ::selection

  global — text selection

  Select this paragraph to see the gold highlight with ink-coloured text — applied site-wide.

  Selection background: gold, foreground: ink.

Cursor-driven

Pointer position feeds CSS custom properties via rAF-throttled JS. Desktop / fine-pointer only — touch devices skip these entirely.

• [data-magnetic]

  240 ms · translate3d(--tx, --ty)

  Pull me → Stronger →

  Strength configurable via data-magnet (default 18). Hero ghost CTA uses 12 for restraint.

• [data-cursor-glow]

  400 ms fade · 520px radial gold halo follows cursor

  Move your cursor across this panel — a soft gold light tracks it. Used on the homepage hero and every page hero.

• .brand-cursor

  280 ms · gold ring trails the system cursor

  Active site-wide on desktops with a fine pointer. The ring expands over interactive elements (a, button, [data-magnetic]), shrinks on press and hides over form fields so it doesn't fight the caret.

  Lerps with 0.1 easing (0.14 while pressed). Honours prefers-reduced-motion.

• .brand-cursor.is-field

  opacity → 0 over form fields

  Cursor ring fades so caret stays visible.

Scroll-driven

Powered by Motion One's scroll() driver, with a Lenis smooth-scroll layer when available. All scroll effects pause off-screen and skip entirely under reduced motion.

• [data-scroll-heading] / .scroll-char

  Per-character RGB lerp from #2a2a2a → bone across a 44 vh band

  Scroll past this headline to see it.

  Smoothstep eased with ~8-char overlap so several letters fade at once. Used on every SectionHeader and bespoke headings via the <ScrollHeading> component.

• .fx-scroll-progress

  4 px vertical gold bar, glowing, fixed left edge

  Pinned to the left edge of every page, height fills 0 → 100 vh as you read down. Look at the left edge of this page now.

  Slims to 3 px under 640 px. Rail behind is gold @ 8% alpha for context.

• [data-parallax-bg]

  translateY 0 → 180 px across hero exit

  Hero background image translates as the section scrolls through the viewport. The hero is over-extended ±15% to hide edges.

  See it on any page hero. Skipped under reduced motion (image stays put with no transform applied).

Ambient & continuous

Always-on motion. Each effect pauses off-screen or when the tab is hidden, and is fully suppressed under reduced motion.

• <Particles /> — .fx-particles

  Canvas: drifting motes + constellation lines + cursor repel

  Move your cursor across this panel. Motes spring back to a base velocity, twinkle on a per-mote phase, and pause when the canvas leaves the viewport.

  Props: count, color, maxAlpha, linkDistance, repelRadius. devicePixelRatio-aware, O(n²/2) link pass — keep count modest.

• .fx-marquee / .fx-marquee-track

  40 s linear infinite · pause on hover · mask-edges

  • Shoreditch
  • ·
  • Canary Wharf
  • ·
  • Soho
  • ·
  • Mayfair
  • ·
  • Hackney
  • ·
  • Camden
  • ·

  • Shoreditch
  • ·
  • Canary Wharf
  • ·
  • Soho
  • ·
  • Mayfair
  • ·
  • Hackney
  • ·
  • Camden
  • ·

  Wrap two identical groups inside the track — CSS translates -50% so the loop is seamless. Hover anywhere on the strip to pause.

• .fx-line

  Static 1 px gold hairline accent

  ---

  Section dividers, accent rules under eyebrows.

• canvas-confetti

  One-shot burst — /thank-you only

  Fires a timed multi-burst on /thank-you using brand gold, bone and WhatsApp green. Skipped entirely under reduced motion.

  Bundled lazily — only loads on the thank-you page.

Responsive

Breakpoints.

• Mobile

  < 640px

  1 columns

• sm

  ≥ 640px

  2 columns

• md

  ≥ 768px

  2–3 columns

• lg

  ≥ 1024px

  3–5 columns

• xl

  ≥ 1280px

  5 columns