noun, in music. A pause held for as long as it needs.
The pause goes where you point, and stays where you leave it.
Most interfaces talk over you. Fermata waits. It is a design system made of two typefaces, one colour and a great deal of space, for work that is read slowly and used for hours. There are no boxes to fill and no icons to decode. A checkbox is a sentence you strike through. A switch is the last word of a sentence, and you choose it. Everything the interface says is set upright in a grotesque; everything you say back arrives in an italic serif, so your words are never mistaken for ours. Colour appears once, to show where you are. Motion answers you, then rests. What remains is the space between the notes, and that is where the reading happens.
Five rules. Every component below follows all of them.
Space does the layout. A hairline appears only where space alone can't hold two things apart.
Weight, width, size, tracking and order carry every level of hierarchy. There are no icons, fills or shadows to fall back on.
The interface speaks upright, in Archivo. Whatever you choose or type answers in Bodoni italic, the way a score sets dolce apart from its notes.
A single accent marks where you are: the current page, the chosen option, the focused field. The rest is ink and paper.
Motion answers a hand and then rests. Pointing sketches in pencil; choosing inks it in. The overture at the top is the one thing that plays by itself, once.
Two typefaces with different jobs, a scale borrowed from music, and a handful of house rules.
One grotesque, one italic serif. The expression is set a little larger so the two x-heights meet on the line.
Archivo
Aa Gg Rr & 0123456789
The voice. Everything the interface says.
Bodoni Moda
Aa Gg Rr & 0123456789
The expression. Everything you say back.
Four pairings, one rule: the voice is always a grotesque, the expression always an italic serif. Each pair carries its own scale, so the x-heights still meet. The whole page changes with it.
Archivo's width axis is a design tool. Condensed and heavy holds a breath; wide and light lets it go.
Silence
Text steps by a fourth, headings by a fifth. As the size grows, tracking tightens and leading closes.
Sentence case. Capitals are for names and the first word. No labels in capitals, ever.
Italic is theirs. A chosen option, a typed value, a state someone set. Also musical and foreign terms, as books have always done.
Tracking follows size. Small text opens a little; display type closes in. Nothing is tracked for decoration.
Sixty-two characters. Body text holds its measure. Long lines belong to display type.
Figures that change sit still. Counters and times use tabular figures, so nothing jitters as it counts.
Real punctuation. Curly quotes, true apostrophes, and an en dash for ranges like 6–96.
Ink and paper do almost everything. One accent says where you are, crimson says something's wrong, and the highlighter is for reading.
Contrast is measured live against the paper, so it follows the key and Nocturne.
Paper, ink and accent, chosen together. Each scheme has a Nocturne of its own, and every text colour clears 4.5:1 in both.
Change only the accent, over any scheme; the rule doesn't change. Every key clears 4.5:1 on every paper, by day and in Nocturne.
Space is the main material. Lines and shapes come in only when space can't say it.
Ten steps, each a perfect fifth above the last. The headings climb by the same interval.
Twelve columns and 24px gutters, with margins that grow with the window. The first three columns hold names and notes; the rest is the stave.
Press G anywhere to lay the grid over the page.
The whole vocabulary. If it isn't here, it's type.
Right to left, the components turn with the text: the path's hairlines lean the other way, the strike runs from the right, and the accent line grows from where a right-to-left reader starts. The pairs have no Arabic, so the system's face stands in, and since Arabic has no italic, what you type there stays upright.
Four speeds, two curves, and the articulations played with them. Point at a row to watch it play.
Under reduced motion every tempo becomes a millisecond. Things still change; they just don't travel.
Exhale arrives fast and settles slowly. Breath eases in and out, for moving between two states.
How a thing moves, named the way a score marks how a note is played. Pointing sketches in pencil; choosing inks it in. What's inked lands with one small rebound, and a stroke leaves the way it was heading.
Every control is a native element dressed as type, so it works with a keyboard, a screen reader and a finger, as the browser intended.
Three voices. A statement is reversed type in an ink block, one per view; its letters widen when you point at it, and pressed, it holds its breath: heavier, narrower, the frame clasped. Brackets hold a secondary action and step apart. A quiet button is only a line, and the line redraws.
States
No box. The words are the control. Pointing sketches the strike in pencil; checking inks it in the accent, left to right, and the pen runs a little past the words, as a hand does. The tally is a fraction whose count rolls the way it moves. Space toggles.
States
Words in a row. The one you choose turns italic, because it's yours now; the others step back to pencil, and one dot moves beneath it, stretching as it travels. The word you point at gets a ring. Arrow keys move the choice.
States
A radio for numbers, set on an arc. The whole dial rolls to what you choose, swinging a touch past and settling: the number swells and turns italic, the others grey with distance, and the dot travels the arc between them. Arrow keys turn it.
A sentence, and you choose its last word. The state rolls between on and off in italic, and the full stop answers too: ink fills the ring when on and drains when off. Underneath, a native checkbox with the switch role.
States
A ruler with a hand: minor ticks every 5, major every 25. Above it, the value is drawn as a dimension, the way Paul Rand measured his pages: a line from zero to the hand, with your number, in italic, in the gap. It lifts while your hand is on it. Arrow keys step by one, Page keys by ten.
States
Only a baseline. The label and placeholder are ours; what you type arrives in italic. Focus draws the accent out from where you touched the line and shows how much room is left. An error hangs from the line as a callout: the anchor lands, the leader drops, then the words.
This address needs a domain ending, like studio.com.
Ruled like paper. The lines scroll with what you write.
States
Add the ending.
A choice inside a sentence. The chosen word is italic over a hairline, and the arrow drops a little when you point at it. Where the browser allows, the open list is set in the same type, with the dot beside the current choice.
Showprojects from
A word you can hold down. Held, it wears the fermata, the sign for a note held longer than written: the arc rises over the word, then the dot lands inside it. Pointing sketches the arc in pencil. In a group, standing hairlines keep the words apart; a group can allow one or many. Each format word becomes what it says.
Silence is structure.
States
One pair of parentheses holds the set, as 20(25) holds its number, and hairlines stand between the actions. Pointing draws a line under one; it leaves the way it was heading.
States
Ours and yours on one line. What we supply, a prefix or a suffix, stays upright in pencil; what you type is italic between them. The accent line draws only under your part.
Six short baselines, three and three, split by a leaning hairline. Each digit drops onto its line in italic; the line waiting for the next one is the accent. Whole, the lines ink in turn. Wrong, they turn crimson together and say why. One real input underneath, so paste and autofill work.
For this page, the code is 246810.
That code doesn't match. Check the message and type it again.
A field that suggests. In each suggestion, the letters you typed are marked with the highlighter, and the suggestions arrive in turn. Arrow keys move a dot through them; Enter takes one, Escape closes the list.
A date inside a sentence, like the select. It opens the month on a leader line; choose a day and it's written into the sentence in italic.
The call is on .
How the system tells you something happened: plainly, once, and in the words of the action you took.
A hairline fills and a number counts, and each file is a ring that fills as it lands, like days on the calendar. The action keeps its name all the way through: upload, uploading, uploaded.
12 files ready to upload
Three periods breathe in turn, only while something you started is still going. The button keeps its place and says what it's doing.
Baselines where the words will be, at the length they'll run. While it loads, a pencil stroke reads along each line in turn, the way an eye would; then the words take their places.
One line rises at the bottom left and is written in, led by a fermata whose arc empties as its time runs out; when it goes, the others close over the gap. Point at the toast and the pause is held, which is what a fermata means. Undo is always in brackets.
A double bar, the sign in a score that something changes here. It draws down the margin, then the words arrive beside it. Crimson only when something went wrong, and then it says what to do.
Your trial ends on 14 October.
Choose a plan before then and nothing you've made will change.
Halden didn't publish.
Two images are over the 20 MB limit. Make them smaller, then publish again.
The question, set large, like a poster: corner marks close in instead of a box, a row of facts draws along the top, the question breathes out, and two answers in words. The safe answer is in brackets and takes focus first. A plain dialog closes with Escape or a click outside. An alert dialog, for what can't be undone, closes only with Escape or an answer.
A form is fields on a grid and one statement to send it. Errors say what happened and how to fix it, next to the field, in plain words; the line turns crimson and focus goes to the first one. Nothing shakes and nothing apologises. While it sends, the button says so.
An invitation to act, not a mood. The zero is cropped to its top half, which is the fermata's arc: nothing here yet, held open. Reach for the action and the arc rises.
Nothing archived yet.
Archive a note to keep it out of the way without deleting it. It will wait here until you need it.
Where you are, where you can go, and what's inside. Shown here dressing a studio's index.
Words with their counts raised; a line inches to the one in view, leading edge first, and the count of what's showing is set huge, sinking into the rule. The row you point at reverses out of ink, rolled on from the side your hand came in and off the side it leaves, and steps forward with an arrow.
Numbers with a dot beneath each; the current page's dot is the accent, and weight falls away with distance from it. The path is divided by drawn hairlines, leaning like slashes; point at a step and the two beside it lean in to hold it.
A native details element. The plus turns into a cross, the question breathes out wider and lighter, and the answer opens at the speed of reading.
Most identity work runs four to eight weeks, and websites take a season. We agree the timeline before anything starts, and we keep to it.
Often. Some of the best briefs arrive before there's a name.
A short brief, one person who can decide, and an hour for a first call.
The dot calendar. Past days are filled, today is the accent, and days to come are rings. Choose one and its number lands in italic, and the days you'll wait through wax into half-moons, one after another. Arrow keys move by day and by week.
Pick a day for a first call.
No day chosen yet.
The one rounded shape. A removable tag carries a cross, and pointing at it strikes the word, as the checkbox does. Removed, it closes up and its neighbours slide in; focus moves to the next.
A dotted term. Point at it or focus it, and the highlighter marks it, a dot anchors a leader line, and the note spreads from the line's tip like ink. Leaving plays it backwards. Escape puts it away.
The voice is , and the expression is .
Small words open a panel of large names, the scale contrast of a poster. The panel's rule draws across, the names arrive in turn, and the arrow turns. It opens when you point or press, and closes when you leave, press Escape or move on.
A menu hangs from what opened it on a leader line; the dot lands, the line drops, the words arrive in turn. The one you point at is marked with the highlighter. A menubar is a row of words over a hairline, with a stroke that slides to the open one. A context menu opens where you pressed and spreads from that point like ink. Arrow keys move; Escape closes.
What you type is set as large as a headline, because it's the only thing on the page that matters for a moment. Matches are marked; the chosen one steps forward with an arrow. Arrow keys move, Enter runs it.
A column of words beside the work. Folded, each word keeps only its initial, set large and light, like a monogram; the rest folds away in turn. The page you're on carries the dot.
Projects
Seven projects, three of them live. Choose a page on the left, or fold the column away to give the work the room.
Things that lie on the page or over it. None of them is a box: a rule, a leader line, a crop mark or an edge holds each one.
A column under a rule, not a box. It can carry one giant letter, cropped by the rule like a poster's headline. Point at it and an ink stroke passes along the rule, in on one side and out the other.
Names, marks, and the rules that keep them from drifting.
Built to be read slowly and used for years, then handed over.
Titles and idents: things that move once, and mean it.
States
Names and marks.
Names and marks.
A panel hung from what opened it, on a leader line, the way Weingart hung notes from words. The dot lands on the button's edge, the line drops, and the panel settles below. Escape or a click elsewhere puts it away.
Point at a name and wait a moment: a card opens with the name set large and cropped by its edge, sliding in to meet you. The keyboard gets it at once.
The work is led by Ada LindqvistDesign director. Twelve years of identities for museums and publishers, and the reason the studio sets everything in two faces..
A whisper in parentheses above the thing it names. It waits for a still pointer; focus shows it at once, and Escape puts it away.
A sheet is a page slid in from the edge, its title running up the spine like a book's. A drawer rises from below and lands with a small rebound; its handle is the fermata's arc. Drag it down to put it away, or tap the arc.
A list that ends in the rest of itself: “and 4 more” is the control. The rest opens at the speed of reading, and its lines arrive in turn.
Two panes and the rule between them. Take the rule and it inks; while you hold it, each pane's share is drawn as a dimension, the way Paul Rand measured his pages. Arrow keys move it in fives.
The brief
A new identity for a ferry line that has run between the islands since 1911.
The notes
Keep the flag. Lose the anchor. The timetable is the real product.
A rule appears at an edge only while there's more beyond it, and leaves when you reach the end. Pure CSS: paper that scrolls covers rules that don't.
This page's own, down the right edge. The page is measured like a ruler: a hairline, a mark where each movement begins, and an ink thumb as long as what you can see. Point at it and the movements' numbers arrive down the rail; point at a mark to read its name, and press it to go there. Hold the thumb and it takes the accent, because it's where you are. Every box that scrolls down carries the same rail, pinned to its edge: the release notes, the thread, the command list, the combobox, the sheet and the drawer. Pointing at the box darkens it.
Look to the right edge of the window, or point at it.
States
A frame kept to a ratio and marked the way a printer marks a crop: short lines outside each corner, never a border. Change the ratio and the frame eases to it while the fraction rolls.
One poster at a time, each name set so large the frame crops it. The count between the arrows rolls the way you travel. Swipe, scroll, or use the arrows.
Halden
Northlight
Oda Studio
Tidewater
Marram
Numbers, people and long text. Figures line up in columns, and nothing is decorated that could be read instead.
Hairline rows and figures that line up. The column you sort by is set in ink, and when the order changes the rows glide to their new places rather than jump. Choosing a row is a ring that fills; the name you chose turns italic, because it's yours now.
| Northlight | Web | 2026 | £62,000 | |
| Tidewater | Motion | 2025 | £54,000 | |
| Halden | Identity | 2026 | £48,000 | |
| Marram | Web | 2025 | £41,000 | |
| Oda Studio | Identity | 2025 | £36,000 | |
| Felt & Field | Identity | 2024 | £33,000 | |
| Quiet Hours | Web | 2024 | £29,000 |
0 of 7 chosen
Hairlines and dots against one very large number, as the posters set tiny data beside giant type. Point at a month and its line inks, its dot swells, and the number rolls to it; leave and it rolls back to now. This month is the accent.
A person is a ring and their initial, in italic, since a name is theirs. Someone who's here carries the accent dot. In a group they overlap, and point at the group and they step apart to be counted.
States
A ledger line: what it is, a dotted leader, then its value or what you can do with it. Point at the line and the leader inks from one end to the other, joining the two.
Long text, set to be read. Headings step by the dynamics; quotes are in the expression, with the opening mark hung in the margin so the edge stays true; lists hang their dashes the same way. Code is the voice, condensed.
Every extra typeface is another voice in the room. Two is a conversation.
The grotesque carries everything the interface says: labels, buttons, the names of things. The italic serif carries everything you say back. Nothing else is needed to tell the two apart, and nothing else is added. In the stylesheet, the whole rule is one line: .f-yours sets the expression, in italic.
The space isn't empty. It's waiting for the reader.
Where the rule matters most. In a conversation, what they wrote is upright and what you wrote is italic, so you can always tell your words from theirs.
No balloons. Of the speech bubble only its tail is left, a leaning hairline. Your messages sit on the other side in italic. Sent is a ring; read, it fills to a dot. Reactions are words, and the one you add turns italic while its count rolls.
The Halden marks are ready for review. I kept the arc from the first round.
Looking now. Can we see it at stamp size too?
States
Ready for review.
Looking now.
Published.
Read this first.
A quiet line in the flow: a status, or where a day begins. A day's divider draws its rules outward from the word, as if the word pushed them apart.
Today
Ada joined the thread
Edited at 09:52
A file's extension is its picture, set wide and thin. A ring counts it in, then fills to a dot when it's safe. If it fails, the ring turns crimson and the line says what happened and offers to try again.
States
A thread keeps to the latest message while you're at the end. Scroll back to read and it stops following you; new messages are counted in an ink pill instead, and the count rolls as they come. Scroll up, then ask Ada for an update.
Yesterday
First round of marks is up. Three directions, one arc.
The second one. The arc feels like a harbour.
That was the idea. I'll take it further tomorrow.
Today
The Halden marks are ready for review.
Looking now. Can we see it at stamp size too?
One question at a time, set large. The count rolls and a hairline fills as you go; each question turns in from the side you're heading. At the end your answers are written into one sentence, arriving in turn, in italic, because every word of it is yours.
Every value above, as the variables the components read.
Choose a name to copy it as a CSS variable. The values follow the key and Nocturne.