Most brand design of the past decade made a trade. It gave up character in exchange for consistency, on the theory that an identity with nothing distinctive in it could never be implemented wrong. Porto Rocha’s work rejects the trade. Its argument, made in type, form and motion, is that expression is not the opposite of system. Expression is what a well-built system produces. Nearly everything good about the studio follows from taking that idea literally, and so does nearly everything difficult about it.
Safe everywhere, memorable nowhere
For years a familiar identity kept arriving. A lowercase geometric sans-serif. One friendly color, usually a blue or a violet. Rounded corners on everything. An illustration style of flat figures with long limbs and small heads. Critics named the condition “blanding,” and the word lasted because the condition was real.
The logic behind it was not foolish. Screens are small, products ship every week, and an identity has to survive being implemented by hundreds of people who will never meet the designers who made it. A neutral system is easy to implement and hard to break. That is a genuine virtue, and it deserves to be stated plainly before it is criticized.
The cost is that a system which cannot break has usually been made unbreakable by removing every element capable of carrying meaning: the odd letterform, the color that is slightly too much, the shape that only makes sense for one company. What survives is safe in every application and memorable in none. Remove the names and the identities are interchangeable, which is the plainest available definition of failure for something whose entire job is to be told apart.
The standard reaction to blanding is the opposite mistake: the expressive one-off. A launch with a spectacular hero image, a typeface chosen because it photographs well, a film that exists exactly once. It is beautiful in the case study and gone within a year, because nothing in it was designed to be repeated by anyone else. Blanding sacrifices expression to buy reliability. The one-off sacrifices reliability to buy expression. Both are answers to the wrong question.
An identity is a grammar, not a picture
Porto Rocha is a design and brand studio in New York, founded by the designers Leo Porto and Felipe Rocha and named for the two of them. Its premise is legible in the work itself: an identity is a grammar, and the logo is one sentence written in it. The design problem is not to make that sentence beautiful. It is to make the grammar good enough that people who are not the designers can write new sentences in it, and that every one of those sentences still sounds unmistakably like the brand.
That premise relocates the designer’s responsibility. In an identity built around a picture, the designer owns the hero moment, and everything after it is someone else’s problem. In an identity built as a grammar, the designer owns the rules: which forms exist, how they may combine, what the type does when it is forced into a mobile header, what the color is permitted to mean, how anything arrives on a screen and how it leaves. Expression stops being a finish applied at the end and becomes a property of the rules. If the rules are good, the expression is reliable. If the rules are bad, no amount of finishing will rescue them.
Read across the studio’s portfolio, that expression tends to live in three places. The choice of those three places is the ethos in its practical form.
Type first
In much of Porto Rocha’s work, typography is the primary carrier of voice rather than a neutral container for it: custom or substantially modified letterforms, scale contrast pushed hard, words treated as image. This is a structural decision before it is a stylistic one. Type is the only brand element present in every application, from a building sign to a push notification. Put the character in the type and the character is present everywhere by default, including in the places nobody remembered to design.
Motion as a native state
Many identities are designed as still images and animated afterward, which is why so much brand motion looks like a logo being slid around a screen. The stronger approach, and the one this studio’s work repeatedly points toward, gives the system behavior from the start: rules for how its parts arrive, transform and leave. A brand that lives mostly on screens lives mostly in time. Designing it as a still image is designing for the exception.
Form derived, not borrowed
The third place is graphic form: the shapes, patterns and devices that surround the type. At its best this form is derived from something specific to the client rather than borrowed from the current repertoire, which gives the system a reason to look the way it does. A derived form can be explained in a sentence. A borrowed one can only be defended by saying that it looks good, and looking good is the cheapest property a design can have.
Three tests the work has to pass
A studio’s quality standard is not whatever it says it values. It is the set of tests a piece of work must pass before it leaves the building. Read backward from Porto Rocha’s work, the standard can be stated as three tests. The formulation is mine, not the studio’s; the work passes them often enough that they are worth writing down.
1The hundredth application
Does the system still hold the hundredth time it is used, at its smallest size, in someone else’s hands? The first application of an identity is designed. The hundredth is implemented: by an in-house team on a deadline, by a partner agency, by an engineer building a settings screen at the end of a sprint. Most identities are judged by their first application because that is the one in the case study. A serious identity is judged by its hundredth, because that is the one most people will actually see.
2Time
Does it make sense in motion, not only in stills? The question is not whether the identity can be animated; anything can be animated. The question is whether the motion follows from the same logic as the static form, closely enough that someone who had only ever seen the motion could reconstruct the logo from it. When that is true, motion stops being decoration and becomes a second way of stating the same idea.
3The swap
Could this identity belong to anyone else? Remove the name. If the system could be handed to a competitor unchanged, it has failed, however well it is finished. Blanding fails this test by design. The expressive one-off fails it by accident, because a style chosen for its beauty is usually a style that would be equally beautiful on somebody else.
What, specifically, makes it good
The tests describe a floor. What lifts work above the floor is a set of habits at the scale of detail, in the places where an average studio stops and a good one keeps going. In my reading these habits are what separate Porto Rocha’s strongest work from competent work in the same idiom. Every one of them is learnable, which is why the work rewards study and not only admiration.
- Scale contrast with a reason
- Very large type beside very small type, with little in between. The middle sizes are where hierarchy goes soft. Committing to extremes forces a decision on every surface about what matters most, and that decision is the hierarchy.
- One rule broken on purpose
- A strict structure with exactly one element allowed to break it. The break is legible only because everything else obeys. An identity that breaks every rule has no rules left to break, and its gestures stop registering as gestures.
- Wit that comes from the system
- The best surprises in a good identity are not added. They are found: the moment the grammar produces a sentence nobody planned. Surprise that the system can reproduce is a feature. Surprise that depends on one designer’s inspired afternoon is an accident, and accidents do not scale.
- Finish nobody asked for
- Spacing corrected by eye at the smallest size. A round letter allowed to overshoot a flat edge so that the two look aligned. A motion curve that eases in and out instead of sliding at constant speed. A dark mode designed rather than inverted. None of these is visible on its own. Together they are the difference between work that is considered and work that only looks expensive.
The principle is easier to see than to describe, so here is a deliberately small grammar. Press the button as many times as you like.
Composition 001
Never changes
- A grid of six by four
- Three colors: paper, ink, signal
- Signal on exactly three tiles, never touching
- Every shape cut from a circle or a square
Always changes
- Which shape each tile holds
- Which way each shape faces
- Where the signal lands
- Which tiles are ink and which are paper
Loud is also a period style
There is a fair objection, and an essay that skips it is advocacy. Expressive systems date. Big grotesques, kinetic type and saturated color are, among other things, the look of a particular period, and period styles harden into their own kind of sameness. A studio with a recognizable hand runs the risk that its clients begin to resemble one another instead of themselves. That would be blanding again, at a higher volume.
The objection is right about the risk and wrong about where the defense lies. The defense is not restraint. It is derivation. The swap test applies to a studio as much as to its clients: a system that could move from one of the studio’s clients to another without modification fails the same test blanding fails, whoever’s hand it shows. Expression built from a client’s specific substance ages the way a well-made object ages. Expression built from a studio’s repertoire ages like a trend. The standard is the instrument that tells the two apart, and it has to be applied hardest to a studio’s own favorite moves.
Whether a given project clears that bar is a judgment to make one project at a time, with the work in front of you. The claim here is narrower: the bar exists, the best of the work is organized around it, and it is the right bar.
Precision is the half nobody sees
The usual vocabulary of design quality, words like clean, bold and timeless, describes how work looks. Porto Rocha’s work argues for a vocabulary that describes how work behaves. Does it hold at sixteen pixels? Does it make sense in time? Does it belong to this client and no other? Can it be handed to strangers and survive them?
Expression is the visible half of the answer. Precision is what makes the expression repeatable, and it is mostly invisible: it lives in rules, tolerances and corrections that no presentation will ever show. Plenty of work achieves one half. Bland work is precise and silent. One-off work is loud and fragile. The work worth studying achieves both at once, which is much harder than either alone, and the harder half is the one nobody sees.
That is the standard. This page tries to meet it, and the next section says how, so the argument can be checked against the page instead of taken on trust.
How this page argues
An essay about precision that is imprecise about itself undermines its own argument. Each claim above corresponds to a decision below, and each decision can be checked in the page source.
- Type carries the voice.
- Two families. Bricolage Grotesque does the shouting and uses its width axis as part of the hierarchy. Newsreader does the reading. The only other type on the page is the generic system font in Exhibit A, which is there to fail.
- The loudest color is the most restricted.
- One signal color. It appears in the section numbers, the two pull lines, the mark wherever it appears, the tiles of Exhibit C, and interaction states: link and button hovers, text selection, keyboard focus. It never sets running text, where its contrast against the paper would be too low for comfortable reading.
- One rule broken on purpose.
- Inside the numbered sections, on wide screens, every heading, paragraph and exhibit starts at the fourth of twelve columns. The two pull lines alone start at the second.
- Motion follows the logic of the form.
- Three things move, and none of them loops. The mark assembles from three quarter turns and one square. The exhibit’s tiles turn in quarter turns and exchange shapes in place. The last word of the title flexes along its width axis once, again when you point at the title, and only if the typeface that gives the flex its meaning has loaded. If your system asks for reduced motion, nothing moves.
- The hundredth application decides.
- The mark in the masthead, the footer and the browser tab is the same drawing as the mark in the title, at 28 pixels, 44 pixels and favicon size. The page is built to hold at 320 pixels wide without sideways scrolling, to keep its hierarchy in system fonts if the web fonts fail, and to have a dark mode with its own signal color rather than an inversion.
- Wit comes from the system.
- Composition 100. It obeys exactly the same rules as composition 1. The only thing that makes it special is the argument.
A note on sources. This essay names no clients and no projects, deliberately. It was written from general knowledge of the studio’s public work, without reference material at hand, and an argument about precision should not rest on half-remembered specifics. Its factual claims about Porto Rocha are limited to what kind of studio it is, who founded it and where it is based. Everything else is interpretation and is offered as such. The exhibits were drawn for this page and reproduce none of the studio’s work.