Build7 min read
The Webflow class system we use on every build
Most Webflow projects rot because classes are named after what things look like. Here is the convention we use instead, and the three rules that keep it intact.
Tomas Reiner
Branding
All writingNobody reads your brand guidelines
A hundred-page PDF is a monument, not a tool. What actually keeps a brand consistent is a short document, published where people work, showing misuse alongside correct use.
Mara EllisonDesign director6 min read
Ask a marketing team where their brand guidelines are. The answer is usually a pause, then a search of a shared drive, then a file named something like Brand_Guidelines_FINAL_v4_updated.pdf, last opened eight months ago.
The document is not the problem. The format is.
Guidelines get consulted under pressure
Nobody reads guidelines for pleasure. They are opened by someone building a slide at half past five who needs to know whether the logo can sit on a photograph. That person has about ninety seconds of patience.
A hundred-page PDF fails that moment completely. The answer is in there somewhere, on page forty-three, in a section called Visual Territory.
Publish it as a web page
Every set of guidelines we produce is a live page on the client site. It is searchable, it has an address people can bookmark, and when something changes it changes everywhere at once rather than forking into four versions.
Assets download directly from it. If getting the correct logo requires emailing a designer, people will use the wrong logo, and they will be right to.
Show what is wrong
Most guidelines only demonstrate correct use. That teaches far less than it seems to, because the reader has to infer the rule from the example.
Showing misuse next to correct use is faster and stickier. The stretched logo, the accent used as a background for body text, the wordmark on a busy photograph. People remember the wrong one and avoid making it.
Shorter than you think
Our guidelines usually run to one long page. Logo and clear space, type scale, colour with contrast pairings, photography direction, tone of voice with three before-and-after sentences, and a download panel.
Everything that does not change behaviour is cut. A page on the philosophical meaning of the palette changes nobody behaviour, and its presence makes the rules that matter harder to find.
Give it an owner
Finally, one named person keeps it current, and the page says who that is. Guidelines without an owner are a snapshot of what the brand was on the day the project ended.
Written by
Mara Ellison
Design director
Leads discovery and interface design at OrangeOrange. Spends most of her time arguing that the navigation should have fewer items in it.
More writing
Other notes from the studio on the same shelf.
Design5 min read
Why we wireframe in grey
Colour ends arguments prematurely. Designing structure in greyscale forces the conversation you actually need to have, and it makes the visual stage faster.
Mara Ellison
Launch8 min read
What we check in the week before a site goes live
Redirects, metadata, forms that actually deliver, and analytics that fire. The unglamorous list that separates a calm launch from a bad fortnight.
Tomas Reiner
