Skip to content
Meridian Field
Start a brief
Looking straight up the gap between four glass office towers into a blank white sky

An iVOLT recipe · fictional studio

We build the space between light and structure.

Identity, editorial and interface work for people who build things that last. Every piece of this page — the bar, the cover, the deck, the gallery, the wizard — comes from one stylesheet and one optional script.

See the frames Read the practice
  • 2019 founded
  • 3 disciplines
  • 0 network requests
Identity Editorial Interface Signage

The practice

Four rules we keep. They are also the rules of the framework this page is built with.

Draw the contract before the thing

Markup, class names, options, events, keyboard behaviour and what is deliberately out of scope are written down first. Implementation is what is left after the argument is over.

The served page already works

Every control here is complete HTML before a script runs. The gallery is a list of links, the wizard is a stack of sections, the menu is a list. JavaScript upgrades them; it never invents them.

Motion needs an argument

The cover lags behind the scroll because a cover is further away. The rule beside this paragraph lights up when the paragraph arrives. Ask for reduced motion and all of it stops, with the composition intact.

Nothing leaves the page

No fonts, no analytics, no third-party scripts, no network requests at all. The photographs sit in a folder next to this file and are credited in its README.

Three ways in

The deck below sticks as you scroll past it: each card hands over to the next one. Where the engine has scroll-driven animations the card underneath also shrinks and dims; where it does not, it is still a deck and nothing is lost.

01 — Identity

A mark, a voice and the rules that keep them

Wordmark, type scale, colour under both themes, and a written specification an engineer can implement without asking us anything.

  • 8–12 weeks
  • 2 people
  • Specification included
02 — Editorial

Long reading that survives a phone

Reports, annuals and catalogues designed for a 48-character measure first and a spread second. Print sheets are part of the delivery, not an afterthought.

  • 6–10 weeks
  • Print + screen
  • Grid documented
03 — Interface

Components with keyboards attached

Design systems delivered as working HTML and CSS with the keyboard behaviour written into the contract, so the handover is a repository and not a slide deck.

  • 10–16 weeks
  • Contract first
  • Tested in 3 engines

Selected frames

Six photographs from the studio reference wall. Each tile is a link to its own file, so the set works before any script does. With the script, a click opens the viewer at that image: arrows walk the set, Z zooms, Esc closes and focus returns to the tile you came from.

The corner of a white concrete building, its stacked balconies rising against a pale sky A tall brown building seen from below, its facade a dense lattice of metal beams A narrow alley between red brick walls, with fire escapes, ivy and a city street at the far end A ring of orange sparks spun in the dark, with a figure crouching at the left edge Two cyclists blurred by a long exposure as they cross a street, in black and white A waterfall dropping from a mossy cliff into a green forest ravine under low cloud

Photographs by Julien Moreau, Samuel Zeller, sergee bee, Kamesh Vedula, Maico Amorim and Andrew Coelho, published on Unsplash under the Unsplash License. Copies live in photos/ next to this page; the npm package ships no bitmaps.

Who is in the room

Five people, no portraits: each face is a pair of initials with its own accessible name.

  • Ada MárquezPrincipal, identity
  • Bruno OteizaEditorial director
  • Chen WeiInterface lead
  • Dario FerriTypography
  • Elin KarlssonProduction

A short history

  1. Two desks and a scanner

    The studio opens above a print shop, with a scanner and a borrowed plotter.

  2. First interface handover

    A design system shipped as a repository instead of a slide deck.

  3. Five people, three disciplines

    Working on identity, editorial and interface in the same room.

  4. A signage year

    Wayfinding and signage join identity, editorial and interface.

Start a brief

Three steps, validated in the browser. There is no server behind this example: nothing is submitted and nothing you type leaves the tab.

  1. You Name and email
  2. Work Scope and window
  3. End Summary

You

One person reads every brief that arrives.

Work

That is the whole brief

A live site would summarise the answers here and send them. Closing the tab discards what you typed: nothing was stored and nothing was transmitted.