REF

Item: REF
Rating: 7.1

Montreal digital agency building e-commerce, apps, websites and experiences.

ref.digital Save page

7.1/10MABTU rating

Home

[ ] ABOUT ABOUT

[ ] SERVICES SERVICES

DESKTOP · 1440 × 4,646/ ↗

MOBILE · 390

Section outline · Home

01heroWordmark left, statement right on stone grey312
02carouselBlue band with centred project media and thumbnail pager
03aboutStatement, button, pixelated video
04work2x2 photo grid with capability corner labels
05servicesLine diagram of three disciplines
06footerBracketed links, address, wordmark and badges

Rating · Home

Visual design7.3

UX & clarity7.0

Originality7.4

Craft & consistency7.0

Motion6.0

Performance & a11y7.0

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

Main colours

Light·coloured background·vivid

Typography

Habitusheading · font · self-hosted Habitusbody · font · self-hosted Aeonikaccent · sans · self-hosted

Stack & style

Lenis Nuxt Vue Tailwind CSS Storyblok

Minimal Editorial Swiss grid Custom cursor Hero carousel Hero video Marquee Smooth scroll Sticky header Transparent header

Also: Google Tag Manager, Cloudflare, Google Analytics

Design DNA

Warm stone-grey canvas with a chunky geometric 'REF' wordmark top left and a right-column grid where every statement starts at the same x offset. A deep ultramarine band holds a project carousel with a centred media card and thumbnail pager. Sections have tiny square-bullet labels (ABOUT, WORK, SERVICES) and outlined mono-caps buttons. Work is a four-square photo grid with capability names at the corners on white; services is a line diagram joining three hand-drawn figures. Footer repeats the wordmark with bracketed mono links.

Worth borrowing

Place capability labels at the four corners of a 2x2 image grid.
Explain services as a thin-line diagram connecting three small figures at the ends.
Start every section statement at the same right-column offset under a square-bullet label.