Logo Lab · labs.llc
A mark, a logotype, and the ground you will actually put them on.
The mark comes out of a seeded geometry engine: the same number always draws the same shape, so a direction can be written down, sent, and drawn again. The logotype is set from one table of numbers that the screen and the exporter both read, so the specimen, the caption and the downloaded file agree.
Both sit on an artboard whose ground you choose — white, black, or nothing at all — independently of which edition of this site you are reading. That is the whole reason the lab exists: a mark judged only on the colour of the page it was designed on has not been judged.
8 engines 24 faces 20 sizes 5 grounds 4 finishes
One — the mark
Draw it from a seed.
Eight engines, one scene model, two renderers. What you see on the artboard and what comes out of the SVG button are the same geometry read twice — masks, carved negative space and all.
Engine
Advanced
Glow is a canvas shadow and grain is a pixel pass; neither can be a vector, and the SVG file says so in its own description. Grain is skipped entirely on a clear ground, because a pixel pass over transparency paints the transparency.
Embed an image
A picture laid over the generated geometry. It is never carved and never clipped, and an uploaded one is read in this browser and goes nowhere.
The brief
Used for one thing and printed here so it is not mistaken for more: it names a direction when you save it.
Adjectives
Each one is a nudge to the sliders and nothing else — press it and watch them move. Hover for the exact amounts.
Constraints
The second one is a real gate: Generate, Mutate and True random try up to twenty-four seeds, take the first that measures 2.5 or better at sixteen pixels, and tell you when none of them did.
G generate · M mutate · R random · [ ] walk the seeds you have seen
Contact sheet
Nine seeds at your current settings. Press one to take it.Auto-next is off.
Your system asks for reduced motion, so the one-second step is off. Three and five seconds remain.
It walks the nine in order, taking each one onto the artboard, and deals nine more when it reaches the end. Touching any control pauses it; closing the sheet or leaving the tab stops it.
Down the sizes
Real renders at 16, 24, 32, 48 and 64 pixels — drawn at those sizes, not scaled down from a big one.
In place
Directions
Score it by hand
Saved in this browser and nowhere else — twenty-four directions, newest first, each carrying its whole state.
Two — the logotype
One word, twenty-four faces, twenty sizes.
Every rung below is the same wordmark. Height, type size, side padding, corner and tracking all come off one number — the height — so this is a size system rather than twenty separately drawn objects. The caption under each rung prints the numbers it was drawn from, and the exporter reads the same ones.
The faces — press one to set the whole ladder in it
The ladder
A big rung is wider than this column; each one scrolls inside its own box rather than pushing the page. PNG exports at three times the rung’s own size, SVG keeps the type live, HTML copies one self-contained element.
Three — the lockup
Put them together.
The mark from the first section and the logotype from the second, on one ground, exported as one file. Neither half is re-implemented here: the mark is the same scene the artboard draws and the type is the same pill the ladder sets.
Arrangement
Both are percentages of the logotype’s height, so the lockup holds its proportions at any rung.
The SVG nests the two documents inside a third. Its geometry is real vector; its type is a live font reference, and the file’s own description says which is which.
Four — notes
What is measured, and what is not.
Three numbers under the artboard are measurements, taken from a render made for the purpose and thrown away afterwards. Ink is the share of a 64×64 transparent render whose alpha clears 24. Balance is how far that ink’s centre of mass sits from the centre of the frame. @16px is the standard deviation of the luminance of a real sixteen-pixel render — a mark with nothing to see at favicon size has a low one.
Nothing else on this page is a score. There is no counter of marks generated, no frame-rate target and no quality grade; where a figure appears it was counted at the moment it was printed.
Same seed, same mark
One seeded generator drives the whole scene, so a seed and a set of controls always draw the same geometry. Copy link puts all of it in the address — the engine, the seed, every slider, the ground, the ink, the word, the face, the size, the finish and the lockup’s arrangement — so the link restores what was on screen rather than an approximation of it.
What each export contains
- Mark SVG — real geometry, including the monogram mask and the carved negative space. Glow and grain cannot be vectors and the file says so.
- Mark PNG — 512 or 1024 square. PNG transparent is 1024 with a genuine alpha channel whatever the artboard is showing.
- Logotype PNG — three times the rung’s own size, on the chosen ground, or with real transparency on a clear one. A knockout finish exports its letters as actual holes.
- Logotype SVG — a real vector shape with live type. It needs the named face; the PNG needs nothing.
- Logotype HTML — one element carrying every value inline, plus the stylesheet link for its face. No framework, no classes, no build step.
The ladder, in full
Generated from the same table the page draws from, for the face and corner currently selected.
| Rung | Height | Type | Sides | Radius | Tracking | Where it goes |
|---|
Where things are kept
Saved directions live in this browser’s local storage and are never sent anywhere. An image you upload is read by this page and stays in the tab. The only requests this page makes to another host are the typeface stylesheet at the top and the font files it names — fonts.googleapis.com and fonts.gstatic.com, which the page preconnects to — and the site’s analytics tag.
Five — contact
Bring a hard mark problem.
Identity systems that have to survive contact with real users, generative tooling, or a two-edition property that needs to ship clean. One address, and it is a real mailbox: labs@labs.llc.
With JavaScript off the form posts normally and the server answers with a page. Either way the answer you see is the server’s own, not the page guessing. One exception, and it is deliberate: the hidden trap field above is answered with a thank-you and nothing is sent, because a bot that is told it was caught learns how to stop being caught.