Logo Tool

Guidelines are documentation: rules somebody has to read, remember and apply by hand every time they need the logo. This tool inverts that. Minimum size is the floor of the width field, not a paragraph on page twelve. Clear space is a toggle that bakes the exclusion zone into the file, not a diagram. Colour is a choice between approved options, not a hex field.

If the tool exports it, it is on brand.

How to use it

1. Pick a variation
2. Set a width — the height follows, locked to the artwork's ratio
3. Pick a colour — its designed background comes with it
4. Toggle clear space and transparency
5. Pick a format and export

The stage is the file. By default it sits on the checkerboard because that is what an SVG or PNG export is — transparent; the Backdrop switch shows it on the colour's designed background instead, and JPG shows that background always, because the file really has it. The frame is the artwork at true pixel size, scaled down to fit the screen, and the note under it says which — "Shown at 48% · exports at 400 × 505 px" — so the preview never quietly misleads you about size or backing.

Variations

Five lockups, drawn from the Logo guidelines.

There are no separate light and dark files. Every fill is normalised to currentColor when the tool loads, which turns colour into a control rather than a duplicate file per colourway. That is the whole argument in miniature: the version of the logo you need is a choice, not a download folder.

Size

The width field is the logo's width. Type a number, use the steppers, or take a preset.

Below the variation's minimum the field clamps on commit and says why. It clamps when you leave the field, not while you type, so typing 5 on the way to 512 does not snap out from under you.

The ceiling is 4096 px. Past that browsers start failing to rasterise, and a logo that size has no use.

Colour

Each option is a logo colour that carries the background it was designed for. Selecting one sets both, and the contrast readout shows the ratio between them with a tier: 3:1 is the WCAG non-text bar that applies to a logo mark, AA and AAA are the text tiers above it.

Backdrop is a preview control, filed under a Preview heading so it cannot be mistaken for an export option. Off — the default — the stage shows the checkerboard, which is what SVG and PNG exports actually are: always transparent. On, the stage shows the background the colour was designed against. JPG has no alpha, so while it is selected the backdrop is on and locked — the background really is part of that file.

Clear space

One b-width on every side — 172 units of the artwork's own coordinate space, taken from the brand's clear-space diagram.

Turned on, the exclusion zone is baked into the export as padding and both guide rings are drawn on the stage. The width you set stays the width of the logo; the file grows around it.

Format

Format lives with Clear space and Flatten in the export options panel, one cell to the right of the Export button — everything that defines the file, beside the button that makes it. The bar itself holds what defines the logo: variation, width, colour.

Flatten applies to SVG only. It merges every letter path into one, which is what most workflows want from a downloaded logo. It is a merge, not a geometry operation: counters and holes survive because they are already subpaths. Where artwork mixes fill rules the option refuses rather than silently corrupting the shape.

Filenames

The tool names the file:

logo_<brand>_<variant>_<colour>_<file-width>.<ext>
logo_bydefault_primary-centered_off-black_400.svg

The width in the name is the file's width — with clear space on, that is the padded size, not the logo size, so the number in the name always matches what a design tool measures. The name is shown under the preview before you export. Nobody ships logo-final-v2 (1).png again.

Still placeholder

Three values in the manifest are not brand decisions yet. They are flagged here rather than left to look official:

• Minimum sizes — every variation currently carries 120 px. No official By Default minimums exist. The enforcement is real; the number is not.
• Colour options — seeded from the By Default theme, not an approved logo-colourway list.
• Avatar clear space — the 172-unit rule is absolute to the artwork's coordinate space, and the avatar's is 40 units across. The rule does not transfer, and the tool disables the toggle rather than invent a substitute.

Clear space on the four full lockups is the real rule.

Adding another brand

The tool renders a manifest. It holds no By Default artwork, sizes or colours of its own, so a second brand needs no code change.

assets/js/logo-manifest.js declares window.LogoManifest:

window.LogoManifest = {
  brand: { id: "acme", name: "Acme" },
  variants: [
    {
      id: "primary",
      label: "Primary",
      minWidth: 160,
      clearSpace: { units: 172, label: "1× b-width" },
      rotate: 90,              // optional, ±90 for vertical placements
      markup: '<svg viewBox="0 0 1050 505" …>…</svg>'
    }
  ],
  colours: [
    { id: "ink", label: "Ink", value: "#1F1F1F", bg: { id: "white", value: "#FFFFFF" } }
  ]
};

Notes on the shape:

• markup is inlined, not a path. Raster export goes through a canvas, and a string the page owns can never taint it the way a fetched file can.
• clearSpace.units is in the artwork's viewBox units, not pixels. Set it to null where the brand has no rule and the toggle disables itself.
• value and bg.value are six-digit hex, not tokens. They end up inside an exported file, which cannot resolve a custom property.
• variants on a colour is an optional allow-list, for a colour approved on some lockups but not others.

One manifest today, not one per brand

Worth being straight about the current limit: brand instances link to this same tool page, and it loads one global manifest. Every brand is therefore shown the By Default logos. The email signature has the same shape of limitation — it reads a single top-level block of brand configuration rather than the active brand's.

Wiring the manifest through cms/brands/<brand>/brand.json, so each instance serves its own logos, is the next step and is tracked in the roadmap.