Pinnacl

Item: Pinnacl
Rating: 8

Australian contractor for data centres and critical electrical infrastructure.

8.0/10MABTU rating

Experience Experience

DESKTOP · 1440 × 6,935/ ↗

MOBILE · 390

Section outline · Home

01heroLiDAR point-cloud plant room, violet wordmark on bottom edge
02introText half left, motion-blurred data-hall photo right
03statsAcid lime panel, diagonal hairlines, second stat bottom right
04sectorsBlack split band, copy left, switchgear photo right1,294
05listSector rows with right-aligned project counts on black
06imageFull-bleed yellow cable-tray ceiling photograph
07valuesViolet accordion bars: innovation, people, relationships
08teamHi-vis crew photos on grey, short trust paragraph
09footerLink and contact columns, ISO cards, giant wordmark on starfield

Rating · Home

Visual design8.6

UX & clarity7.8

Originality8.7

Craft & consistency8.4

Motion7.0

Performance & a11y6.0

This page scores 8.0; the site score weights the home page double.

Main colours

Light·white background·vivid

Typography

KMR Apparatheading · font · self-hosted KMR Apparatbody · font · self-hosted Tempel Groteskaccent · sans · self-hosted

Stack & style

Lenis Three.js Svelte Tailwind CSS SvelteKit Sanity WebGL canvas

Bold typography Photography-led Sharp / geometric Dark tech Custom cursor Hamburger-only nav Smooth scroll Stats band Sticky header Tabs Text reveal Transparent header

Also: Vercel

Design DNA

Black, acid lime and electric violet only, with a very heavy condensed grotesk for display and tiny uppercase mono for every label and rule. The hero is a white-on-black LiDAR point cloud of a plant room with the violet PINNACL wordmark locked to the bottom edge. Content bands are hard-split halves: text left on white, one photo right, with the images motion-blurred so cable trays and switchgear streak orange. A lime panel carries the numbers with faint diagonal hairlines across it, then a black table lists sectors with counts right-aligned. Principles are stacked violet accordion bars, and a starfield black footer repeats the wordmark full width.

Worth borrowing

Lock the wordmark to the bottom edge of a full-bleed technical hero image instead of centring it.
Use deliberately motion-blurred site photography so infrastructure reads as speed and data, not as a job site.
Put the headline stat on an acid panel with faint diagonal hairlines and a second stat anchored to the opposite corner.