---
title: "Logo Tool"
subtitle: "Export the logo with the rules built in"
description: "Pick a variation, size and approved colour, then download a correctly named SVG, PNG or JPG. The guidelines are the interface."
author: "Studio"
section: "Tools"
subsection: ""
order: 1
status: "published"
actionUrl: "./logo-tool.html"
actionLabel: "Open 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, once the brand defines a rule, 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 **transparency** (the clear-space toggle wakes up once the brand supplies a rule)
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 actual size · exports at 400 × 58 px" — so the preview never quietly misleads you about size or backing.
---
## Variations
Six marks, drawn from the [Logo guidelines](/brand/logo.html). Widths are the artwork's viewBox; the floor is the width field's minimum.
| Variation | Artwork | Floor | Notes |
|---|---|---|---|
| Wordmark | 1037 × 150 | 120 px | The primary mark |
| Monogram | 181 × 150 | 32 px | The BD ligature; in *Black on gold* it is the avatar and favicon artwork |
| Tagline lockup | 1159 × 351 | 200 px | Wordmark over *Where Culture Meets Care* |
| BlackDoctor House | 1666 × 199 | 200 px | Sub-brand lockup |
| BlackDoctor Pro | 1447 × 200 | 200 px | Sub-brand lockup |
| BlackDoctor Health On Point | 2605 × 204 | 260 px | Sub-brand lockup |
The round social avatar is not a variation: the tool draws a rectangular backdrop, so the disc is produced as a fixed asset instead.
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
No rule yet. The design file defines no clear space for any mark, so every variation carries `clearSpace: null` and the toggle stays disabled with a note saying so — the tool would rather hide a control than invent a brand rule.
When a rule lands, it is one manifest edit per variation (`units` in the artwork's own coordinate space and a label). 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 | Background | Notes |
|---|---|---|
| SVG | Transparent | Vector. Colours are written as hex, so the file renders correctly in Finder, in an ``, anywhere |
| PNG | Transparent | Rasterised at the exact export pixels |
| JPG | The colour's background | No alpha, so the background is flattened in |
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____.
logo_blackdoctor_primary_black-paper_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
Two values in the manifest are not brand decisions yet. They are flagged here rather than left to look official:
- **Minimum sizes** — the floors in the table above (120 / 32 / 200 / 200 / 200 / 260 px) are provisional. No official BlackDoctor minimums have been supplied; the enforcement is real, the numbers are not.
- **Clear space** — none defined, so the toggle is disabled on every variation.
The colour options are real: the five pairings the design file uses (black on paper, white on the dark page, paper on black, black on gold, gold on black).
---
## Changing the logo set
The tool renders a manifest, `assets/js/logo-manifest.js`. It holds no artwork, sizes or colours of its own, so a change of logo set is a manifest edit, not a code change.
`assets/js/logo-manifest.js` declares `window.LogoManifest`:
```js
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: ''
}
],
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, one brand
The tool loads a single manifest, so it shows one logo set. A sister brand (BlackDoctor Pro, for example) would need its own manifest and its own tool page; that is tracked in the roadmap.