Studio. Built to win work by showing it.

Navbar 1 with your studio's name set in type at the left (no logo file needed), the links centered and "Start a project" always at the right, with the current page underlined. It sits on the page above the work, takes a surface and a hairline once you scroll, hides as you scroll down and comes back as you scroll up. On a phone it's your name and a "Menu" button that opens a numbered menu in plain type. Footer 7 sits on its own tinted ground with your name, what you do, a line that can point to the inquiry instead of a street address, three columns of links, and the small print with the photo credits, and no call-to-action band above it.

Gallery and Concrete, light pages with a derived dark mode, and Black Box and Blueprint, designed dark pages with a derived light page.

Archivo, one variable typeface set at three widths, so width does the work that size usually does: wide for headings and job numbers, normal for anything a visitor reads, and condensed for facts, captions, credits and counts. Facts are in sentence case, never small spaced capitals, and every number is set in even-width figures so a column of years or job numbers lines up. The largest words on any page are at heading size; the hero is a photograph. Archivo ships inside the package under the SIL Open Font License, so the site makes no third-party font request.

The featured-project hero and its facts line, the work index in both views, selected work, the studio statement with facts counted from your projects, services with a representative project each, the process, people with their portraits, clients set as names, the case study's header, plates, drawings, client voice, credits and next project, and the closing inquiry band.

Ledger and Plates views of the same records, switched in place and remembered on the visitor's next visit, with no jump while the page loads. Chips by type, plus status, a year range and place in the full index, each with a count that respects the other filters, and a count line ("20 projects, 9 shown.") that updates as they change. The address bar carries the filter, and a reload or a shared link opens the same filtered list. The filters hide when you have fewer than eight projects, and the home page's index hides below three. A project you mark as new carries a dot until the date you set. Without JavaScript the chips submit as a form and the full index renders the filtered list.

One page per project, built from its record: a breadcrumb, the lead photograph across the full width (with its own phone crop), the title, a one-line summary, the facts in ruled cells and the description. Then the plates in three chapters (finished work, drawings and work in progress), each plate numbered across the whole project, in a column, an offset plate, a pair, a trio or the full width, with three short named passages between them. The third passage can carry checkable figures, such as area, build time and budget held, and hides them when a project has none. Drawings are SVG linework that takes the palette's ink, opened full screen from a button on phones. Below come one client quote, the credits and exactly one next project, which stays inside the visitor's filter.

Each project's facts sit in ruled cells in a fixed order (project number, client or "Private client", place, year, scope, lead, collaborators, photographer, status), two columns on a phone. Credits are structured: every photograph carries its photographer and source, and the credits band lists them in the order you enter them. The statement's facts (years practicing, projects completed, places worked) are counted from your records, and a fact with no data behind it doesn't render.

Name, email, the project type (from your own list of types, with "Not sure yet"), where the site is, a rough budget, timing and the brief, with your response time stated in the copy and under the button. It sends the inquiry to your inbox in Tome. With Tome Forms, part of the CRM & Marketing plan ($400 a year), an inquiry sent from a case study arrives with that project's type already chosen; without it, the same form runs on Payload's Form Builder and the visitor picks the type.

The hero photograph settles once from a slight zoom, plates and portraits rise and fade in once as they arrive (a photograph waits until it has loaded), and the process list marks the phase in view. In Chrome and Edge, a project's picture grows into its case study's lead image as the page opens. With reduced motion turned on, nothing settles, rises or grows, and the process list still marks its phase.

Five, from the Portfolio Blocks pack, which is free with any theme: Work Index, Project Hero, Title Block, Plate Sequence and Service Rows. They read your projects from one archive kept in Tome Portfolio, so the hero, the index, selected work, the services and every case study always agree. They need Portfolio Blocks 0.1.0 and @wabbit/tome-portfolio 0.1.0 or later; both are free.