Index

Product / studio site

Phokus

The studio site is the first case in it. It has to argue its own method before it is trusted to argue anyone else's, so it teaches the rule first and makes the index a viewfinder rather than a grid.

Year
2026
Kind
Product
Role
Design, front-end, tooling
Frames
Responsive, 9:16 focus area

The format problem

An index that focuses instead of listing.

A portfolio grid asks a visitor to compare thumbnails. This one asks them to look at one project at a time, so the index behaves like a viewfinder: whatever sits inside the brackets is the thing about to be entered.

The intro briefing on a royal blue field, teaching one rule at a time: if it has an audience, Image, with campaigns, film, stills and generative production listed beneath.
The briefing
The homepage reel with a campaign still held inside gold reticle brackets, a blurred plate of the same still filling the background, and a readout naming the project, kind, year and frame.
The viewfinder
Nothing advances on its own. The briefing holds until it is dismissed, and the reel stops running the moment the visitor takes over.

Open the work

Source GitHub / phokus-studio

Structure

Two doors, one substrate.

The whole site rests on a single distinction, so it is taught once at the door and never explained again.

  1. Act I

    The rule

    If it has an audience it is Image. If it has a user it is Product. Pipelines are not a third door; they run underneath both.

  2. Act II

    The focus

    One project inside the brackets at a time, with its kind, year, and native frame printed beside it.

  3. Act III

    The case

    Every project opens into the same six blocks, so two campaigns can actually be compared.

The muse

One composition, every frame.

The artwork is a single engraved scene — an astrolabe whose centre is a camera iris, held up out of the clouds past ruined columns. It is re-framed rather than redrawn, which is what lets any project declare a native frame and still sit inside the same world.

Landscape engraving in electric blue of a robed goddess holding an astrolabe whose centre is a camera aperture, with ruined Corinthian columns and clouds beneath a star field.
16:9 master
The same engraving composed vertically, the astrolabe high in the frame and the goddess rising from the clouds below it.
9:16 master
The same engraving in a square frame, cropped close on the astrolabe and the goddess reaching up to it.
1:1 master — interim crop

Type

Three voices, no webfonts.

Every family is a system stack, so nothing is downloaded and nothing shifts on load. Each does one job and never borrows another's: titles are set, data is printed, and prose is read. The palette is as tight — electric royal blue, porcelain paper, and gold used only to mark focus.

Didot

Display / titles

Didot, Bodoni 72, Baskerville, Times New Roman, serif

Courier New

Utility / labels, specs, readouts

Courier New, Courier, ui-monospace, monospace

Inter

Body / running copy

Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif

How it was built

Pipeline.

Hand-written and dependency-free, with one small tool so that adding a campaign never becomes copy-paste work.

Hand

Plain HTML, one stylesheet, one script. No framework, no bundler, nothing to run before deploying.

System

Three type families, three colours, and a set of section bands reused across every page.

Tooling

PHOKUS pulls a campaign out of Notion, converts its stills, and scaffolds the case page once.

Own

Generated pages are edited by hand afterwards, so the tool never turns into a dependency.