Marks Sheet

What does Marks Sheet do?

A logo is chosen more than it is generated. The work is to put five honest, different ideas in front of the person, each proven at the sizes a logo really lives at, on one page they can judge in a minute. That page is the marks sheet. It is a page to look at, not to read: five columns of pictures and almost no words.

The method comes from two real identity jobs in which the person picked a mark within ninety seconds of the sheet opening, and from tests against what a capable model produces with no method at all. The tests taught two things, and the steps below serve both.

• Discipline is what the method adds. Real knowledge of the brand before drawing, five ideas that are truly different, proof at 16 pixels, a plain weakness named for every mark, and a choice that stays with the person.
• Character is what it must not lose. The marks people prefer make sense on sight and look drawn with care. A sheet of tidy glyphs that each need a sentence to mean anything loses to one bold, well-drawn picture of the name.

Work quickly. In the source jobs the sheet was open five minutes after the request. It is a first look and another round is cheap, so choose well, draw with care, and do not polish.

The steps: know the brand, find the ideas, sketch and choose five, build the sheet, look at it, open and present, run further rounds, apply the pick.

1. Know the brand before you draw

You need five things. Look for them before asking for them.

• The name, exactly as the brand writes it, in its own script, and what it means: the literal meaning, the root, an idiom it echoes, a pun.
• What it does, in one sentence, ideally as a change: what goes in and what comes out.
• Who it is for and how it should feel, in two or three words.
• What already exists: the typeface the site uses, an old logo, the headline, the product's own vocabulary.
• Anything the person already said about the logo: a constraint, a sketch, a logo they admire.

In a project, read first: the README, the landing page copy, the page title and metadata, the font setup (@font-face, next/font, the Tailwind config, a Google Fonts link), any brand or logo files, and the conversation so far. Ask only for what you could not find, in one message of at most three short questions. If the person cannot be asked, or told you to just go, then go, and say what you assumed when you present.

This comes first because marks drawn without it come out as stock icons. On the source sheets every mark leaned on something specific: what the name means, a line from the site's headline, what the system does to the things it handles.

The default brief

Unless the person said otherwise, design to this: one colour, as simple as possible, with a purpose, a little unique.

That means black on a warm off-white and nothing else. If they want colour, or the site has an accent colour, still choose the shape in black first. Colour should not be what makes a weak shape acceptable, and a mark has to work in one colour anyway (tab icons, stamps, dark surfaces). Colour and effects arrive when the mark is applied.

2. Find ideas from different places

Write about ten candidates, one line each. Read references/concept-moves.md before you list them: it describes the places good marks come from, with examples and the trap in each.

Aim for a spread of kinds, because people's taste splits along these lines:

• a mark built on the brand's letter;
• a picture of the name, when the name is a thing;
• what the product does, shown as one shape;
• a sign or pattern from the brand's own world;
• one or two from further out.

Rules for choosing among them:

• Five ideas, not five styles. Two marks built on the same metaphor count as one. Group the candidates by the idea underneath and keep one from each group.
• Most should read on sight. The sheet explains nothing: a mark has its picture and a short name. So at least three of the final five should make sense from those alone: a thing, a letter, an action you can see. Your message can deepen a mark, not rescue it. A bare glyph that is nothing without a sentence (a dot and a bar, two slashes, a plain block) has to be striking to earn a place.
• Silhouette before story. Between two candidates, keep the stronger shape, not the cleverer story. The story is told once and the shape is seen every day.
• Name the obvious icons and ration them. Every category has one: a speech bubble for chat, a house for property, a spark for AI, a cart for shops, a shield for security, a page or a stack of lines for anything to do with documents. The name often has one of its own as well (a flame for a brand called Kiln). Say which they are for this brand. At most one of the five may lean on any of them, and only fused with something this brand alone owns. One mark that is a page and another that is a flame is two, not one each. Anything the person ruled out stays out.
• One idea per mark. If a mark needs the word "and" to explain it, it is two marks. Split it or drop half.

First ideas cluster on the obvious. On one source sheet three of the first five marks were speech bubbles, and the mark that won came from a later round that was kept away from them.

Five is the right number unless the person asks for another: fewer gives no real choice, more turns choosing into work, and five columns fit one screen.

3. Sketch, then choose five

Draw your candidates before you commit to any. Copy assets/contact-sheet.html to design-lab/logo/candidates.html in the project, add one <symbol> per candidate, render it with the script from step 5, and look at the picture. It shows every candidate large, small, and as a true 16px icon enlarged. Keep the five that are strongest as shapes and furthest apart as ideas, and improve those. Put most of your drawing time into the two you believe in most: the sheet needs at least one mark you would ship as it stands, and a sheet of five equal first drafts loses to one finished logo.

One contact sheet is normal. A second is for redrawing marks that almost work. Stop there: the person can ask for another round. Delete candidates.html and its picture before you present.

This step exists because a drawing in your head and a drawing on the page are different things. In testing, the runs that looked at their candidates before choosing made clearly better marks than the runs that drew five and stopped.

How to draw a mark

Each mark is one <symbol> on a 64 by 64 grid.

• Few parts, one silhouette. One to four shapes; the render script warns about a mark that uses more. Simple does not mean rectangles only: an arch, a curl, a flared bell or the bowl of a letter is welcome when it is one clean form. Both marks that shipped from the source jobs are four rounded rectangles, and the best mark in testing was a single silhouette of the thing the brand is named after.
• Solid shapes or bold lines. A solid shape carries no fill attribute, because the sheet paints the same drawing black in one place and white in another. A line-drawn shape carries fill="none" stroke="currentColor", round caps and joins, and one stroke width for the whole mark, 7 units or more. No gradients, opacity, filters, masks or <text>. A letter is built from shapes and never typed, since a typed letter is somebody else's font.
• Compute, don't guess. For anything beyond rectangles and circles, work out the points: where an arc meets a line, where a curve ends, an even thickness around a bend. A few lines of Python that print the path are quicker than guessing, and guessed curves look guessed.
• Snap to the grid. Whole or half units, equal gaps, aligned edges, one corner radius across the mark.
• Fill the box evenly. Let each mark span about 48 units in its longer direction, centred, so the five carry similar weight and the comparison is fair.
• Design for the tab icon. A gap or line thinner than about 6 units turns to mud at 16px. Big shapes and open gaps survive, and they usually make a better mark at every size.
• Follow the reading direction. A mark that shows a before and an after runs the way the brand's script reads: right to left for Arabic or Hebrew.

4. Build the sheet

Copy assets/sheet-template.html to design-lab/logo/marks-sheet.html in the project, creating the folders, and fill in the six numbered places. The template's script builds every column from your symbols, so each mark is drawn once and is identical at every size.

The page is plain on purpose: a one-line title, then five columns side by side. Each column shows, from the top:

• the mark, large;
• the mark beside the name, on light and on dark;
• the mark as an icon at 64, 32 and 16 pixels, and that 16 pixel icon enlarged so its real pixels can be seen;
• two buttons that download that mark alone on a transparent background, as a PNG and as an SVG.

People look at this page; they do not read it. Add nothing to it: no reasons, no captions, no line on how to read it, no recommendation. What a mark means, where it is weak and which one you would pick all go in your message (step 6).

• Language. Write the title and the names in the brand's language, the one its wordmark is in, when the person clearly reads it. Set dir="rtl" for right-to-left scripts. If the brand is written in two scripts, the sheet shows the main one; the second lockup comes with the pick.
• Typeface. Set the wordmark in the typeface the brand really uses: the project's own font files through a path relative to the sheet, or the hosted font the site loads. Match the weight, case and letter-spacing the site gives its name. If the brand has no typeface, choose one on purpose and say so.
• Title. One short line, for example "Five logos for Harbor".
• Names. Each mark gets a short name of one to three words, never a sentence. People pick and remember marks by name ("I like the knot"), so the name does real work.
• Letters. Letter the marks A to E.
• File name. A short lowercase name in Latin letters for the downloads: harbor gives harbor-logo-A.png.

If the project already has a marks sheet, do not overwrite it. Step 7 says what to do.

5. Look at it before they do

Render the sheet, then look at the picture. The script is in this skill's own folder and works on any HTML page, including the contact sheet:

bash "<this skill's folder>/scripts/render.sh" design-lab/logo/marks-sheet.html

It writes a PNG beside the HTML with whatever headless Chromium the machine has, and prints the path, followed by a warning for any mark drawn from more than four shapes or with a line thinner than 7 units. Act on those warnings. Open that image and check, mark by mark:

• Is it the sheet at all: five columns, the right typeface on the wordmark, no leftover {{placeholders}}? A render can silently capture the wrong page or a fallback font.
• Does each mark read as what its name says, with nothing else to explain it?
• Does any mark read as something you did not intend: a digit, a different letter, a menu icon, a logo you already know?
• In the enlarged 16px icon at the bottom of each column, do the shapes stay separate, or do gaps close and thin parts turn grey?
• Is anything clipped at the edge of its box, off centre, or visibly heavier or lighter than its neighbours?
• Does a long name still fit beside its mark, and is every column the same height?
• Beside the wordmark, does the mark sit well with the name, or does it stutter by repeating the name's first letter right next to it?

Fix what you find and render once more to confirm. A mark that fails at 16px gets redrawn with fewer, bigger parts, or replaced by your next-best candidate. At most two of the five may be shown with a known weakness at 16px, and each must say so in its weakness line.

If the script cannot render (it exits with a reason), open the HTML in a browser you can screenshot, if you have one. If you cannot look at all, say so when you present.

6. Open it and present

Open the sheet for the person: open on macOS, xdg-open on Linux, start on Windows. The HTML is the thing to open, and the PNG is for checking and sharing. Leave both in design-lab/logo/, and commit them only if the person or the project's own rules say to.

Do not wire any mark into the product, and do not make production files, before the person has picked. That is their decision, and it takes two minutes once it is made. The download buttons on the sheet are for trying a mark out in a slide or a mock-up. The proper files come with the pick.

Then write a short message:

• where the sheet is, and that it is open;
• one line per mark, as letter, name, what it is and why it belongs to this brand, and its honest weakness if it has one ("closest to a generic building icon", "quiet and a little literal"). The page carries none of this, so the line is where a mark's meaning lives;
• your pick and why, in a sentence or two. Recommend a mark you would ship as it stands: one that reads on sight and holds as a 16px icon. If the idea you like most has a known flaw, say it is your favourite idea and name a different mark as the one to ship;
• a closing question: which one, or which two to push further. Say that once they pick, you will make the files and put it in the site.

Give a real opinion and real weaknesses, then leave the choice with them. In the source jobs the person overruled the recommendation once. Do not ask them to choose colours, styles or fonts at this point, and keep the message to those few lines: the page shows and the message explains, each once.

7. Further rounds

• "Another five." Write a new file, marks-sheet-2.html, and continue the letters (F to J) so every mark keeps a unique letter across rounds. Put a link back to the earlier sheet under the title, the way the template shows. The new five must come from ideas the earlier rounds did not touch: list every idea already used, including the letter marks, and stay off all of them. Later rounds are where the less obvious ideas appear, so treat the request as progress and not as a verdict on round one. New ground still has to be this brand's ground: go back to the name, the tagline and the product and mine what the earlier rounds skipped (another meaning of the name, a phrase it comes from, its punctuation) before reaching for metaphors from outside. The rules of steps 2 and 3 still hold.
• "I like B and D." Make a refinement sheet from the same template: three to five variations of each chosen mark (proportions, gap, corner radius, weight, a simplified tab-icon cut), lettered B1, B2 and so on. The template takes any number of marks and wraps them five to a row.
• They send a sketch or a reference. First give an honest read: what is strong in it, and where it works against the brief (two ideas in one mark, thin parts that will fuse at 16px, a shape many brands already use). Then translate its core idea into the visual language of the set as one more mark, and credit it in your message ("your sketch's idea, four parts meeting at one centre, drawn in bricks"). Keep their idea and redraw the form. In one source job that translated mark was the one chosen.

8. When they pick

Read references/applying-the-mark.md and follow it. In short: the mark as a clean SVG file with its grid written in a comment, a tab-icon cut tuned for 16px, a component that draws in the current text colour, every old logo replaced, one small touch that comes from the mark's own geometry, and a check in the real page.

What this is not for

This method draws marks from plain geometry. It does not use image models, and it does not produce illustrated, multi-colour or hand-lettered logos. If the person wants one of those, say that this is the wrong tool for it, and offer what it can do: a mark beside the name set in a well-chosen typeface.