Design

Ask someone to describe Swiss Style and you'll hear grid, Helvetica, red. Of those three, the Swiss Style record requires only the grid, and the description skipped nine areas entirely. Here's how to read a look so nothing gets skipped or assumed.

Every record describes its look in the same twelve areas. Layout is how the surface is divided. Typography is letterforms and how text is set. Color asks how many colors do work, and what each one is for. Imagery is what pictures are allowed to do. Surface is what the page is made of. Interface is radius, borders and elevation. Then motion, motif, the production technique the look depends on, and form, which is three-dimensional organization where a language has one. Hierarchy and density work differently. They hold rules, but they have no overall position of their own. Context sits apart and is never scored: 'also called International Typographic Style' is true, and tells you nothing about where a heading goes. Because the set is fixed, you can write your own direction in the same twelve and lay it next to any record.

Ten areas carry an overall position, and each one gets two questions, answered separately. Does something have to be here? And if it is, does the language say how to handle it? Swiss Style shows why they come apart. Imagery is supporting, so you don't need pictures at all. Use them, though, and the record is strict: photographs treated as objective records, placed by function. Optional presence, constrained treatment. Merge the two questions and you lose that.

Open the Swiss Style record from Explore and scroll to Build. The record lists its areas, each with a state, and the states are precise. Core means the language isn't itself without this. Ruled out means adding it builds something else. Not specified by the source means the area doesn't apply. Interface and motion both postdate the language, so there's no position to record, which is a different thing from a position against them.

This is the distinction that does the most work. 'The language lets you choose' and 'nobody has looked into it' read the same in a careless write-up. They're opposite instructions. Swiss Style's technique area is the first kind: historically offset litho, but nothing in the language requires a process, so you choose. Japanese Minimalism's record says outright that its positions by area aren't researched yet. Same blank look. Completely different license.

The record's rule for this is four words. Silence never becomes permission. When an area is unresearched, you don't fill it with whatever sounds right for the name. You decide it from your brief and your client's evidence, and you write down that that's what you did.

Then turn the frame on your own work. Write all twelve headings before you write anything else, so no area gets skipped for being boring. For the ten with a position, answer the presence question in a word: core, supporting, ruled out. Then write the handling. And wherever you haven't decided, or have no evidence, write exactly that.

Here's a first pass for a fictional bookbinder, all twelve areas. Look at motion, motif and technique. Motif is ruled out, a decision. Motion says not decided, and technique says not researched. Those two honest lines will save you an argument with your agent later. 'Motion: not decided' is useful. A blank invites the AI to fill it with its default, and then claim the brief allowed it.

Every area gets two questions. And silence stays silence.

This moodboard was the starting point for my speculative redesign of the AllWeb conference site. AllWeb didn't commission it. It looks finished, and that's the risk. A board like this makes claims about the brand: its marks, its colors, its type, even its numbers. So before any of it reaches a page, check it the way you'd check any other evidence.

Start with the references. The board shows four other events' sites, each with a few words beside it. Words like creative confidence describe a mood, and you can't build a mood or check one. So I kept two references and took one principle from each, written as a sentence. From OFFF Barcelona: let the event have an aesthetic, and let the type and art carry it. From Web Summit: the ticket button is always one move away, and the date and city never fall below the fold. Each one is now a sentence you can check. On a phone, the date, the city and the ticket button all sit on the redesign's first screen.

Then check every mark. The board shows four versions of the logo, and one is an A-W monogram. AllWeb's own marks are its wordmark and a speech bubble. The monogram isn't one of them, so it's crossed out. The redesign's header uses the real wordmark file instead of typing the name. Numbers are claims too. The board says a hundred and twenty plus speakers and panels. AllWeb's own site says a hundred and twenty plus partner brands. Same number, different claim. The redesign uses the site's words, and the board's line is crossed out. Type gets the same question: why this one? The board keeps Inter for body text, the face the current site uses, and it says nothing about AllWeb in particular. AllWeb already sets its labels in Space Mono, and Space Grotesk was drawn from Space Mono. So Space Grotesk does both jobs, and no new family comes in.

Write it down in one short file: each reference with its principle, then each thing you crossed out and where you checked it. The art-direction brief picks this file up later, so the monogram never comes back.

Take one principle from each reference, and check every mark before it reaches a page.

Ask an AI tool for three design directions and you'll often get one direction in three colorways. Same layout, same type, a navy one, a green one and a terracotta one. You can't choose between those on evidence, because they don't disagree about anything.

So why three directions? One direction gets approved by default. Two becomes a coin toss. Three gives the client a real comparison, and gives you room for one that's a risk. But the number only works if they disagree about something that matters: the one decisive move each direction commits to.

Here's the swap test. Take the palette from one and put it on another. If they now look like the same site, they were the same direction.

Here are three for the bakery. A, Morning queue: documentary photos in warm early light, and confident type. B, Flour and paper: craft paper and hand-drawn labels. C, the neighborhood notice board: type only, like the board in the window. Now put A's colors on all three. They stay three different sites, so these are three directions.

Then the order. Write your three directions before you open the records. Name the visual language each one leans on and what you expect its rules to be. Only then open the records. The gap between your prediction and the record is the useful part. If you look first, you'll never find out what you'd have assumed. Keep the predictions in the same file as the directions.

Develop all three to the same depth. One sentence naming the decisive move. The top of the home page. One inner page, because many directions look great as a hero and fall apart on a page of prices. And the type, with one real image from the client. If you finish your favorite and sketch the other two, the client will pick the finished one.

Choose against three things, and taste isn't one of them. The site's one job, from the brief. The position the business can back with evidence. And the category default: if every bakery site you found already looks like B, B has to work much harder. Score each direction in writing before anyone says which one they like.

Here's what that looks like for the bakery. All three can do the site's one job, getting regulars to order ahead. A backs the position best: bread, baked every morning, is on every screen. B sits right on the category default. The notice board lost the bread entirely. The decision is written down with its reason.

Then the part people skip. Don't blend the winner with the best bits of the losers. That averages three ideas back into the middle you were trying to leave. Keep one principle at most, written as a principle. From C: today's bread as a plain list, like the menu board. And keep the other two directions in the project folder, so when someone asks about them later, you can show why they lost.

If swapping the colors makes two directions the same, you have one direction.

Open the styles on a page your AI built and list every font size it uses. If you find nine or ten, ask what the difference between nineteen and twenty pixels is supposed to mean. Nobody will know, because nobody decided.

Choosing a face starts with an audition. Placeholder text hides exactly the problems you're looking for. So set the client's real words instead. Here's the bakery's headline and two real lines, in three candidates at the same sizes. Then look at the parts that break. The numerals, because the bakery shows pickup times. The italic, because sooner or later the site quotes someone. And Young Serif has no italic at all, so the browser fakes one by slanting the letters. And read it at phone size. Plenty of faces that look wonderful at eighty pixels go faint at eighteen.

Then choose against the brief, not against the word. The literal move for a bakery is a warm, chunky serif. Ask what the face has to do instead. People read this site on a phone, in the queue, usually for one thing: what's left, and when it's ready. So the headline face has to hold up at phone size, and its numerals have to be plain.

For the bakery, that face is Literata. It stays clear at phone size, its numerals are plain, and it has a real italic. Everything people read gets a plain sans, down to the prices and allergens. One face for headings, one for reading, and each has a job the other can't do.

Now the scale. Keep it small, and give every step a job. If you can't say what a size ranks, it shouldn't exist. Two sizes that mean the same thing are a bug, and on the page they read as a mistake.

Here's the order page as an agent first built it. It uses ten font sizes. Write the rank each size carries. Where two sizes carry the same rank, merge them. Ten sizes become five: the headline, page headings, section headings, reading text, and small print such as allergens.

Here's the bakery's scale, five steps named by rank, so nobody types text-xl and wonders what it's for. The headline is about three times the reading size, and it appears once per page. When the biggest step is barely bigger than the headings, the page reads like a document.

Size isn't your only tool for rank, and leaning on it alone is how scales bloat. Position, weight and the space around an element all rank things. Swiss Style is the extreme case: hierarchy comes from position on the grid.

Then put the five into the tokens file, and tell your agent that any other size is a bug to report, never a value to invent.

Each size is a rank. If two sizes mean the same thing, delete one.

This photo of the venue, for my speculative AllWeb redesign, is three and a half megabytes and three thousand pixels wide. On a phone, the page shows it about three hundred and thirty pixels wide. A photo that's graded and approved still isn't ready for a page. It needs a file for each width it's shown at.

The redesign makes all its image files with one script. Each photo gets one line: its source, its treatment, and the widths it's needed at. The venue is black and white, at two widths: a large file and a small one. For each width, the script resizes the graded photo and saves it as WebP, a modern format current browsers all read. One quality setting covers the whole set. Run it on a copy of the site, and every image comes out the same way: all seventy-nine, in about half a minute. The venue's small file is thirty-eight kilobytes, and the large one a hundred and forty.

Then the line that puts it on the page. The source set lists both files and their widths. Sizes tells the browser how wide the picture will be shown: the full width on a phone, forty percent on a wide screen. The browser does the arithmetic and picks a file. Width and height give the page the photo's shape before the file arrives, so nothing below it jumps. And because the venue is far down the page, it loads lazily, only when you scroll near it. The photos on the first screen leave that out, because they're needed straight away. Check it in a browser. At phone width, nothing from the venue loads with the page. Scrolled to it, a phone screen at normal density gets the six hundred file, and a sharp screen gets the twelve hundred. Last, the alt text. Write what the picture shows in its place on the page, for someone who can't see it: the mosque in daylight, its minarets and domes above the entrance plaza. Not image of venue, and never the file name.

Put it all in the asset list, one block per image: the slot, the files and their sizes, the shape, how it loads, the alt text and the credit. Anyone can then check the page against it.

Export a file for each width, give it a shape, and write alt text for its place.

Most art direction dies quietly in the build. The direction was agreed, the agent started on page one, and by page five it's a pleasant generic website in the right colors. The fix is a brief so precise that drift breaks a sentence.

There are six parts, and each one has to be checkable, by you, by a reviewer, or by the agent itself halfway through page four. A line nobody can check against the build is a mood, and moods don't survive.

The concept is one idea the whole site expresses, in a sentence a stranger could test. Take a fictional bookbinder. 'Timeless craftsmanship' fails, because any page passes it. 'See how every book is made' works. Any section that can't trace back to that sentence gets cut, and that's the first check a reviewer runs. Write the concept first. Everything after it has to serve it.

The decisive move is the single unusually strong decision the rest follow from. For the bookbinder: every page is built around one photograph of construction, full width, before any text. Once that's fixed, the type has to stay quiet, the grid has to leave room, and color can't compete. It rules things out as well: no headline-first pages, no carousel of six products. If your brief has three decisive moves, it has none.

The motif is the visual through-line across every page. Here it's the stitch: a dashed line, drawn the way thread crosses a fold, joining a caption to the detail it names. Once per section, and never as decoration. Write the ration into the brief, or your agent will stitch everything. And test the motif against the concept. A stitch works here because the concept is construction. If your motif could belong to any business in the category, try again.

References go in as principles. 'Make it look like Quiet Luxury' gets you beige and a thin serif. The Quiet Luxury record gives you the principle instead, as its own reading: the object is the protagonist, and the system withdraws so it can be inspected. Write that. Take one principle per reference, because averaging five references gets you their midpoint, which is the generic site again.

The not-doing list is where a brief earns its keep with an AI agent, because it names the defaults before they arrive. Be specific. 'No clichés' can't be checked. 'No headline over a photo' can. Say what moves, too. If motion isn't in the brief, the agent will add it everywhere, so this one allows motion only where it explains a change. One line carries its reason. When the reason is a fact, like a failed contrast check, write it in, so nobody reverses it on taste.

Last, the recipe: the order every page is built in. It's what the agent actually follows on page five, long after the meeting. Five lines, each pointing at something the specification will define as a token.

Then put the brief where the agent will read it: a file in the project, named in your standing instructions, the ones from the lesson on keeping your project in files. Tell the agent to stop and ask if a change would break a line of it. And never let it edit the brief to fit the build, or the brief will end up agreeing with whatever it built.

Then test the brief before anyone builds. Give it to someone who wasn't in the room, or to a fresh AI session, and ask for a rough page three. Wherever their page differs from what you meant, the brief was ambiguous. Fix the sentence that allowed it.

If the build could drift without breaking a line of your brief, the brief isn't finished.

You ask for a homepage and get one in under a minute. A big centered headline, two buttons, three cards with icons. It looks fine. The trouble is that nobody chose any of it.

That's what a tell is: a decision nobody made. The test is one question. Could a competitor's AI have made this exact element by reflex? If yes, it's a tell.

Here's a bakery homepage as a generator drafts it, before anyone has written a brief. Start with the surface. A purple-to-pink gradient. Pill buttons with a glow under them. A stock photo of croissants. Then the structure. Everything sits centered on one line, with the same 64 pixels of padding on every section. Three identical cards with icons say fresh, local and artisan. And the headline is filler, crafted with passion, which nobody can check. Last, the stat bar: since 1998, and fifty thousand loaves baked. Ask where those numbers came from. Nobody knows, because the generator made them up.

Nothing on that list is banned. A centered headline can be exactly right. So grade each tell against the brief. The centered layout and the pill buttons might be choices, so they're flagged, and somebody confirms them or changes them. The rest are blockers, and they don't ship. The gradient isn't the bakery's green. The croissants push out the queue photo the brief puts first. And the worst is the stat bar, a false claim with the bakery's name on it.

Then replace each default with a decision from the brief, on the bakery's own colors and type. The queue photo goes first, cropped so no faces show. The real headline sits under it, in Literata. The icon cards become today's bread, which is what people came for. And the invented numbers come off until the owner can source them. None of these fixes is make it prettier. Each one is a decision you can say out loud.

The bookbinder in the worksheet got the same pass: one sewn spine instead of the default hero, the icon cards cut, and the unsourced number removed.

The Quiet Luxury record has a sharper version, the costume test. Make the palette, the type and the spacing ordinary. If the page still says what it should, the design is doing the work. On the bakery, the queue photo and the headline still do.

Tells also land wherever your plan left a gap. 'Hero' is a placeholder the generator fills with its default. 'The morning queue, no faces, headline under it' is a decision. Write that sentence before you prompt.

Keep your own list next to the project: the tell, where you caught it, the fix that worked, and its grade. Your tools have habits. So do you.

If you can't give the reason, the generator chose it.

Your direction for the bakery says one action, in the awning green. Your agent writes one hex value on the home page, a slightly different one on the next page, and a bluer one in the footer. Each is close. None is the color. A brief describes the direction. A specification turns it into values the build can't approximate.

A specification holds four things. Tokens, the named values for type, color and spacing. Component rules. The responsive rules you wrote at the structure stage. And the checks: how anyone will know the build followed it. Tokens are the part people know about. The checks are what make the rest worth writing.

Here's the start of the bakery's tokens file. Colors named by job, from the color lesson. The five type sizes, from the type lesson. And a spacing scale: five steps, set from the size of the reading text, so every gap on every page comes from one of five values. If a value isn't in this file, it shouldn't be in the build.

Name every token by its job. A token called 'red' breaks the day the brand changes color. 'Space seventeen' tells nobody when to use it. 'Text extra large' invites an extra-extra-large. Named by job, the file reads as a set of decisions, and a wrong use is visible: action on a heading is obviously a mistake.

Then label where each value came from: the brand's own evidence, the brief, the accessibility floor, or your own choice. The green says provisional, because it was read off a photo. The gold names the printer's proof. You're done when every color, size and gap in the file has a name and a source.

The Swiss Style kit has the same habit, with four labels. Required means break it and it isn't Swiss. Period means it was done in period practice, a defensible default. Modern is current good practice and no part of the language. Ours means the kit's authors chose it, so change it freely. Look at the font line: the class of typeface is required, the exact stack is ours.

Component rules use the tokens and cover every state. Here's the bakery's action button: its fill, its label with the ratio, what hover and focus look like, what happens while an order is sending, and how many may appear. That last line comes straight from the direction: one Order ahead button per page. When the agent puts a second one beside the photo, the spec says no.

The responsive rules from your structure work belong in the spec as well, written as rules rather than three layouts. The queue photo stays first at every width, with the headline under it. Nothing hides on a phone without a stated reason. Write the 'never changes' list first. It's the one agents most need.

Then define the checks, in two kinds. Some are mechanical: no raw color value outside the tokens file, no font size off the type scale, no gap off the spacing scale, every pair passing contrast. A script or an agent can run those. Others need a person to look. Tell the agent to score only the mechanical checks and leave the visual ones unjudged rather than guess. Don't add the results into one total, because failing a required rule and departing from your own choice aren't the same result. And end the spec with a short list of rules for the agent, such as never inventing a value the file doesn't hold.

If the build can't be checked against it, it isn't a spec yet.