LEON ROMERO portfolio index with filter columns and project grid

LEON ROMERO portfolio index with filter columns and project grid, minimal, swiss, light

Preview image. Unlock full-res

Studio portfolio index pairing a three-column text filter list (Sector, Services, Year) above a tight grid of project thumbnails spanning branding, packaging and editorial work.

Industryagency, portfolio
Palette
#E2E2E2
#010101
#725B50
#D6F827
#FFFFFF

Summary

A creative-studio portfolio index page for LEON ROMERO that turns its filter system into the hero, listing Sector, Services and Year as three vertical columns of small-caps labels above a grid of project thumbnails.

Visual description

The top band carries a thin black nav with the studio name, Index, and Informations on the left. Below it, three left-aligned columns of small uppercase sans-serif text act as filters: Sector (Architecture, Fashion, Hospitality, Music Industry, Retail, Sports), Services (Art Direction, Editorial, Identity, Packaging, Print, Website), and a Year list 2017 to 2022, with a Clear control on the far right. A black highlight bar sits behind "Index" and another behind a filter row, signalling active selection. Underneath, a flush two-row grid of project thumbnails shows varied work: poster mockups, a neon-lit installation, an editorial spread, a sweat-beaded skin closeup, a lime-yellow record sleeve, and folded brochures against black. Generous white space frames the type; lime-yellow appears only inside the imagery.

Key takeaway

The filter taxonomy doubles as the page's typographic composition, so the index communicates the studio's range before any image loads. Setting the whole filter system in one small caps size across three aligned columns keeps it calm and legible while implying a deep, browsable archive.

Reuse notes

Reach for this on an agency or multidisciplinary portfolio homepage where the work is varied and you want filtering to feel editorial rather than utilitarian. Pairs well with a flush, gutterless thumbnail grid. The reserved type means the thumbnails must carry all the color and energy.

More like this