GMX StudioNº 012026Paris / Lyontokens.css
Art direction
One studio, one ground, one accent. What follows is not a mood board: every colour, face and size on this page is read from the file every page of the site reads.
- 01One ground
- 02Palette
- 03Type
- 04Sizes
- 05The stretch
- 06Effects
- 07Renderings
- 08Surfaces
- 09Motion
- 10Standing decisions
One ground
Every page stands on the same near-black, whatever the visitor’s screen prefers: a photograph is the only lit thing on it. One page is the exception — the portfolio, drawn as a printed sheet, and the PDF it saves.
Palette
A ground, a raised panel, two warm neutrals for text and one gold. Nothing is pure black or pure white, so a photograph never meets a colder edge than itself. Red only says that something went wrong. On the paper, the gold darkens: the bright one cannot be read there.
--ground--panel--mute--dim--ink--gold--error--paper--paper-2--paper-ink--gold-deepType
Three faces, each with one job. Druk, heavy and condensed, for anything that is a title; Inter for sentences, labels and buttons; G2 Hyper only for a photograph’s details — camera, lens, film, exposure — and the chips that filter them.
GMX STUDIO
Aa Bb Cc — set to be read.
Leica M6 · HP5+ · 1/125 f/8
Sizes
Six sizes and no others. Three for titles — the hero, a page’s title, a section — each growing with the screen; one for sentences; one for labels; one for a photograph’s details.
--hero-fontArchive--title-fontProjects--section-fontSelected work--body-fontA photograph keeps its own colours.--label-fontEdition 07 / 30 · 50 × 70 cm--detail-fontLeica M6 · Summicron 35mm f/2
The stretch
Titles are drawn a third taller than their face. The height is in the font files themselves, so a title takes its real room on the page and nothing is scaled after the fact. The giant album numbers add a stretch of their own.
--display-tall 1.34 · --number-tall 1.58 · tools/fonts/stretch_font.py
Effects
What the home page does to a photograph under the pointer: the same picture seen through twelve instruments. They are drawn live below, on one real photograph, by the code the home page runs.
01Thermal 1- 02Thermal 2
- 03Thermal 3
- 04Noir
- 05CRT
- 06Blueprint
- 07Infrared
- 08X-Ray
- 09Glitch
- 10VHS
- 11Grain
- 12ASCII
Renderings
The photography page draws its own background live — rain, contour lines, rings, flow, hatching, ridges, strata, traces — and the contact and 404 pages a billboard standing in still water. Pick one, and a palette: each is named after what the picture looks like through it.
Surfaces
Where the ground holds, and where the paper takes over.
Motion
Two speeds. The fast one for a state that changes in place — a link lighting up, a button under the pointer; the slow one for anything that moves or appears — a menu opening, a picture swapping. Every one of them stops when the visitor has asked for less motion.
--dur-fast 200ms--dur-slow 400msStanding decisions
- IPhotographs keep their own colours. No filter, no duotone, no house grade.
- IIA photograph’s details are small capitals, drawn tall. They are there to be checked, not read.
- IIIOne accent. A second colour would make the first mean nothing.
- IVNothing moves on its own except where movement is the subject.
