Boc.Studio

Item: Boc.Studio
Rating: 7.2

Creative brand studio in Barcelona that creates, refreshes and boosts brands.

7.2/10MABTU rating

DESKTOP · 1440 × 2,244/ ↗

MOBILE · 390

No capture for this viewport

Section outline · Home

01headerThin red bar with wordmark, info link and local time
02heroFull-bleed video with red strap (mobile); missing on desktop capture
03work indexLeft filter rail, rows of three to four project frames per case

Rating · Home

Visual design7.6

UX & clarity7.0

Originality7.2

Craft & consistency7.4

Motion6.5

Performance & a11y7.0

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

Main colours

Dark·dark grey background·mono

Typography

PP Moriheading · font · self-hosted PP Moribody · font · self-hosted

Stack & style

Next.js Lenis React Sanity Tailwind CSS

Minimal Photography-led Dark tech Hamburger-only nav Hero video Marquee Smooth scroll Sticky header

Also: Vercel

Design DNA

Near-black page with a thin vermilion top bar holding the wordmark and a tiny grotesque nav. A narrow left rail carries 'Work' and filter links; the rest is a work index where each project is a row of three to four landscape stills or video frames, cropped edge to edge and bleeding off the right, with the project name and a 'View project' link in small type beneath. On mobile a full-bleed video hero with a red strap states 'Creative brand studio, create, refresh and boost' before the same rows stack.

Worth borrowing

Present each case study as a horizontal filmstrip of three frames that bleeds off the right edge.
Keep the chrome to one thin brand-colour bar so the work carries all the colour.
Pair every project row with a one-line caption and a right-aligned 'View project' link in tiny type.