Broadnarrow LLP — Brand Guidelines: Exports
Document type: deliverables specification · Governs: the exported SVG / PNG files and their open space Does not govern: how the marks are constructed — see
BN-BRAND-MASTERS, which is canonical for all design rules.
How to use this document. Section 0 summarises it.
Section 1 maps common questions to sections. Section 2 lists every
constant in machine-readable form. Sections 3 onward are the full
specification. Rules carry stable IDs (e.g. EXP-04).
0. Summary
- Exports are derivatives, never canonical. Every export is generated from a master; masters are the single source of truth.
- Exports are not 1:1 with masters. Most are derived — a master is duplicated, then a background, padding, and platform sizing are added to the duplicate before export.
- 50 files total — 16 SVG and 34 PNG — under
020 Logos & Wordmarks / 020 Exports. - Two formats: SVG for anything digital or vector-capable (preferred); PNG only where a platform demands a fixed-size raster.
- Every deliverable ships in both colourways — black and white.
- Open space is owned by this document, not by the
Masters guideline. SVGs are tight-cropped except the
Wordmark, which carries built-in padding (
EXP-19); fixed-canvas PNGs carry open space built in as a solid contrast background. - Open space is specified per deliverable type — avatar, Open Graph preview, and each platform cover differ. Target values are not yet set; the measured current state is recorded in §3.1.
- ® exports do not exist yet — deliberately deferred until trademark registration.
- If a master changes, its exports are regenerated — never hand-patched.
1. Quick answers
| Question | Section |
|---|---|
| Which file do I use for a website? | §5 Which file to use |
| Which file for a social profile picture? | §5 Which file to use |
| What size is a LinkedIn / X / YouTube cover? | §4.2 PNG |
| SVG or PNG? | §3.2 Format choice |
| Why do SVGs have no padding? | §3.1 Open space — true for
Logo/Lockup/Favicon; the Wordmark is an exception,
EXP-19 |
| How much space around the mark? | §3.1 Open space |
| Why is the filename colour token different for SVG and PNG? | §6 Naming |
| How do I produce a new export? | §7.2 Production process |
| Why are there no ® files? | §8 Decision log — E1 |
| What’s missing / still to do? | §8 Decision log |
| What colour values / fonts / construction? | Not here — see BN-BRAND-MASTERS |
2. Constants
location: "Brand & Creative/020 Logos & Wordmarks/020 Exports"
counts:
total: 50
svg: 16
png: 34
colourways:
svg: ["Black", "White"] # transparent background
png: ["Black on White", "White on Black"] # filled background
svg_assets:
favicon: { variants: 1, folder: "010 SVG/010 Favicons" }
lockup: { variants: 3, folder: "010 SVG/020 Lockups" }
logo: { variants: 1, folder: "010 SVG/030 Logos" }
wordmark: { variants: 3, folder: "010 SVG/040 Wordmarks" }
variant_names: ["Primary", "TM Size Standard", "TM Size Responsive"]
png_dimensions:
open_graph_preview: { w: 1200, h: 630 }
social_avatar: { w: 800, h: 800 }
facebook_cover: { w: 1640, h: 720 }
linkedin_cover: { w: 2257, h: 382 }
whatsapp_cover: { w: 1212, h: 682 }
x_cover: { w: 1501, h: 500 }
youtube_cover: { w: 2561, h: 1440 }
png_cover_variants: ["Wordmark Primary", "Wordmark TM Size Standard", "Wordmark TM Size Responsive"]
open_space:
status: "targets not yet specified"
svg: "none - tight-cropped (Logo, Lockup, Favicon); EXCEPTION: Wordmark SVGs carry built-in padding - see EXP-19"
svg_wordmark_padding: { canvas: "2000x2000", vertical_each_side: 850, artwork_height: 300, ratio_of_artwork_height: 2.83 }
png: "built in, as a solid contrast background"
specified_per: "deliverable type"
colour_space: RGB
r_exports_exist: false3. Principles
3.1 Open space
Open space is owned by this document. It is a
property of the delivered file, not of the master artwork —
masters are tight-cropped by design (BN-BRAND-MASTERS
FND-15). Nothing about spacing is inherited.
| ID | Export type | Open space | Reason |
|---|---|---|---|
EXP-01 |
SVG — logo, lockup, favicon | None — artwork is tight-cropped. Verified by measuring each file’s rendered bounding box against its declared canvas: 0px padding on all sides, for the Logo, all 3 Lockup variants, and the Favicon. | The consuming layout (CSS, document, artboard) controls spacing. A padded SVG would double-space unpredictably and break precise alignment. |
EXP-02 |
Fixed-canvas PNG — avatar, OG preview, covers | Built in — the mark sits on a solid contrast background, and that field is the open space | The platform dictates the canvas, so spacing must be committed at export time. |
EXP-03 |
— | Open space is specified per deliverable type. An avatar, an Open Graph preview, and each social cover each have their own requirement, driven by that platform’s crop behaviour and any overlay it places on the image. There is no single global value. | — |
EXP-19 |
SVG — Wordmark (exception to EXP-01) —
all 3 variants (Primary, TM Standard, TM Responsive), both
colourways |
Not tight-cropped. The delivered files carry built-in vertical padding: 850px above and 850px below the artwork, on a 2000×2000 canvas (artwork height 300px — the padding is ~2.83× the artwork’s own height on each side). Horizontal padding is smaller and varies by variant width but is symmetric left/right. Measured 27 July 2026; see the table below. | Accepted as-is — the founder chose to document this behaviour rather than re-export the files. Anyone consuming the Wordmark SVG directly (rather than via the Lockup, which is unaffected) should account for this padding, e.g. by cropping to content or measuring the visible artwork rather than assuming the canvas edge is the artwork edge. |
Measured Wordmark SVG padding (measured 27 July 2026; identical across Black and White for a given variant)
| Variant | Canvas (viewBox) | Artwork bbox (x, y, w, h) | Padding L / R / T / B |
|---|---|---|---|
| Primary | 2000 × 2000 | 182.2, 850.0, 1635.5, 300.0 | 182.2 / 182.3 / 850.0 / 850.0 |
| TM Size Standard | 2000 × 2000 | 146.0, 850.0, 1708.0, 300.0 | 146.0 / 146.0 / 850.0 / 850.0 |
| TM Size Responsive | 2000 × 2000 | 124.7, 850.0, 1750.6, 300.0 | 124.7 / 124.7 / 850.0 / 850.0 |
TODO: Define the target open space for each deliverable
type — avatar · Open Graph preview · each platform cover. Until
specified, the table below is a record of what was
delivered, not a ratified standard.
Measured current state (measured 27 July 2026 from the delivered PNGs; tightest margin as a multiple of the artwork’s own height)
| Deliverable | Canvas (px) | Artwork (px) | Margins L / R / T / B (px) | Tightest |
|---|---|---|---|---|
| Social Avatar (Logo) | 800 × 800 | 499 × 499 | 150 / 151 / 150 / 151 | 0.30 × |
| Open Graph Preview | 1200 × 630 | 799 × 142 | 201 / 200 / 243 / 245 | 1.41 × |
| LinkedIn Cover | 2257 × 382 | 484 × 88 | 888 / 885 / 147 / 147 | 1.67 × |
| Facebook Cover | 1640 × 720 | 895 × 163 | 372 / 373 / 279 / 278 | 1.71 × |
| X Cover | 1501 × 500 | 349 × 64 | 576 / 576 / 219 / 217 | 3.39 × |
| YouTube Cover | 2561 × 1440 | 1078 × 199 | 741 / 742 / 621 / 620 | 3.12 × |
| WhatsApp Cover | 1212 × 682 | 844 × 154 | 183 / 185 / 150 / 378 | 0.97 × |
Two observations for consideration when targets are set: - The avatar carries the least relative space (0.30 ×). Likely correct — profile pictures are cropped to a circle, so the mark is deliberately larger to survive the crop. - The WhatsApp cover is the only asset not vertically centred (top 150 px vs bottom 378 px); the mark sits high in the frame.
Measured observation: the avatar’s artwork measures
499 × 499 — exactly square. (This is a direct pixel
measurement of the exported file, not a value derived from the logo’s
construction ratios — BN-BRAND-MASTERS does not state the
logo’s overall bounding box.)
3.2 Format choice
| ID | Rule |
|---|---|
EXP-04 |
Reach for SVG first. Use it for websites, apps, digital UI, and vector-capable print. Infinitely scalable, smallest for line art, transparent background. |
EXP-05 |
Use PNG only where a platform demands a fixed-size raster. Exported at the exact pixel dimensions the platform expects, with a filled background. |
3.3 Relationship to the masters
| ID | Rule |
|---|---|
EXP-06 |
Exports are derivatives, not canon. Never treat an export as authoritative, and never edit one in place as if it were. |
EXP-07 |
Exports are not 1:1 with masters. Most are derived — a master is duplicated, then background, padding, and platform sizing are added to the duplicate. An export traces back to the master it was derived from, not to a master of its own. This is why there is (correctly) no dedicated favicon, avatar, or cover master. |
EXP-08 |
If a master changes, its exports are regenerated — never hand-patched. Flow is one-way: masters → exports. |
3.4 Inherited from the masters
Governed entirely by BN-BRAND-MASTERS and applying
unchanged to exports:
| Rule | Masters § |
|---|---|
Two-colour palette (#000000 /
#FFFFFF) |
§3.1 |
| Typography (Oswald) | §3.2 |
| Aspect-ratio lock — never distort | §3.4 |
| Minimum sizes | §3.5 |
| Backgrounds & contrast | §3.6 |
| Asset hierarchy and ™ / ® rules | §5 |
Colour space. Exports are RGB (screen). Print-CMYK files are produced on demand from masters using the Masters §3.1 values.
4. Inventory
All exports live under
Brand & Creative / 020 Logos & Wordmarks / 020 Exports.
50 files — 16 SVG, 34 PNG. Every item ships in both
colourways.
Folder structure
020 Exports/
├── 010 SVG/ vector — digital & vector print
│ ├── 010 Favicons/
│ ├── 020 Lockups/
│ ├── 030 Logos/
│ └── 040 Wordmarks/
└── 020 PNG/ raster — fixed platform sizes
├── 010 Open Graph Previews/
├── 020 Social Avatars/
└── 030 Social Covers and Banners/
4.1 SVG
16 files. Transparent background. Colourways named
Black / White.
| Asset | Variants | Folder |
|---|---|---|
| Favicon | — | 010 SVG / 010 Favicons |
| Lockup | Primary · TM Size Standard · TM Size Responsive | 010 SVG / 020 Lockups |
| Logo | — | 010 SVG / 030 Logos |
| Wordmark | Primary · TM Size Standard · TM Size Responsive | 010 SVG / 040 Wordmarks |
4.2 PNG
34 files. Filled background. Colourways named
Black on White / White on Black.
Single-purpose
| Deliverable | Dimensions (px) | Derived from | Folder |
|---|---|---|---|
| Open Graph Preview | 1200 × 630 | Wordmark | 020 PNG / 010 Open Graph Previews |
| Social Avatar | 800 × 800 | Logo | 020 PNG / 020 Social Avatars |
Social covers & banners — under
020 PNG / 030 Social Covers and Banners, for three wordmark
variants (010 Wordmark Primary,
020 Wordmark TM Size Standard,
030 Wordmark TM Size Responsive), each across five
platforms. Dimensions are identical across the three variants.
| Platform | Dimensions (px) |
|---|---|
| 1640 × 720 | |
| 2257 × 382 | |
| 1212 × 682 | |
| X | 1501 × 500 |
| YouTube | 2561 × 1440 |
5. Which file to use
| Context | Take | Colourway |
|---|---|---|
| Website / app / digital UI signature | Lockup SVG (default), or Wordmark / Logo SVG per hierarchy | contrast the background |
| Browser tab / site icon | Favicon SVG (+ raster set — E2) |
— |
| Social profile picture | Social Avatar PNG (800 × 800) | — |
| Link / share preview image | Open Graph Preview PNG (1200 × 630) | — |
| Social banner / cover | Platform cover PNG at the §4.2 size | contrast the profile theme |
| Print (vector-capable) | SVG | black on light stock |
| ID | Rule |
|---|---|
EXP-09 |
Colourway: black artwork on light backgrounds, white artwork on dark. |
EXP-10 |
Variant: use ™ now; ® only after registration is granted. |
6. Naming
YYYY-MM-DD BN <Asset> <Variant> <Platform> <Colour>.<ext>
Examples: -
2026-07-24 BN Wordmark TM Size Standard Black.svg -
2026-07-24 BN Wordmark Primary LinkedIn Cover Black on White.png
| ID | Rule |
|---|---|
EXP-11 |
SVG colour token is Black /
White — the artwork sits on a transparent
background, so only the ink colour is named. |
EXP-12 |
PNG colour token is Black on White /
White on Black — the file has a
background, so both ink and background are named. |
The difference between EXP-11 and
EXP-12 is intentional and reflects a real difference
between the formats. It is not an inconsistency to be “fixed”
(E3).
7. Governance
7.1 Ownership
| Role | Responsibility |
|---|---|
| Brand / Creative Lead | Accountable; approves any change |
| Records Owner (Operations) | Maintains the export folders and this document |
Review cadence. Quarterly, and on any change to the masters.
7.2 Production process
| ID | Step |
|---|---|
EXP-13 |
Start from the current canonical master — never from another export |
EXP-14 |
For a PNG deliverable, duplicate the master and add background, padding, and platform sizing to the duplicate |
EXP-15 |
Export to the correct format and exact pixel size, into the correct folder, named per §6 |
EXP-16 |
Provide both colourways |
EXP-17 |
On any master change, regenerate the affected exports |
EXP-18 |
Log and version |
Pre-export checklist
Versioning. MAJOR.MINOR. MAJOR = the
export set changes materially, or a restructure of this document. MINOR
= clarifications or added deliverables.
8. Decision log
Export-side decisions. E1–E5 set by the
brand advisor under delegated authority, 26 July 2026; E6
by the founder, 27 July 2026. Re-open via §7.2 change control.
| # | Item | Ratified decision | Open action |
|---|---|---|---|
E1 |
® exports | Deferred until trademark registration
(BN-BRAND-MASTERS R1). On grant, produce ® SVG
+ PNG to match the ™ set. |
On registration |
E2 |
Favicon raster sizes | Produce a raster set alongside the SVG: .ico
16/32/48, 180 px (apple-touch-icon),
192 & 512 px PNG (Android/PWA). |
Not yet generated |
E3 |
Naming colour token | Retained as-is — SVG
Black/White (transparent), PNG
X on Y (filled). Intentional, not an inconsistency. |
Closed |
E4 |
Logo / Lockup social covers | Not produced — wordmark covers suffice for legibility at banner scale. Revisit only if a specific need arises. | Closed |
E5 |
Colour space | Exports are RGB / screen. Print-CMYK produced on demand from masters. | Closed |
E6 |
Open space | Owned by this document, not the Masters guideline. SVG tight-cropped; fixed-canvas PNG built in as a solid contrast field. Specified per deliverable type. | Targets not yet set (§3.1) |
E7 |
Wordmark SVG padding | A full audit (27 Jul 2026) found the 6 Wordmark SVG files
(Primary/TM Standard/TM Responsive × Black/White) carry ~850px built-in
vertical padding on each side, contradicting the “tight-cropped” rule
that correctly holds for Logo, Lockup, and Favicon. Founder’s
decision: document the exception (EXP-19) rather than
re-export the files. |
Closed — accepted as-is. Re-open if the files are ever re-exported. |
9. Change log
| Version | Date | Author | Change |
|---|---|---|---|
| 1.0 | 26 Jul 2026 | Brand / Operations (advisor, delegated) | Formalised the exports guideline: derivation model, inherited-foundations map, full 50-file inventory with measured dimensions, usage matrix, naming rationale, production process, decision log, glossary. |
| 1.1 | 27 Jul 2026 | Founder / Brand | Added clear space in exports: tight-crop for SVG, built-in for
fixed-canvas PNG, and a measured audit of the delivered set
(E6). |
| 1.2 | 27 Jul 2026 | Founder / Brand | Renamed to Open space and made self-contained — this document now owns spacing outright. Reframed as a per-deliverable specification with targets still to be set. |
| 2.0 | 27 Jul 2026 | Founder / Brand | Restructured for AI-assisted retrieval. Added YAML
front matter, §0 Summary, §1 Quick answers, §2 machine-readable
constants block, and stable rule IDs (EXP-). Sections made
self-contained. No specification values changed. |
| 2.1 | 27 Jul 2026 | Founder / Brand | Front-matter hardening: added type,
purpose, applies_to, an explicit
precedence rule (subordinate to Masters for design rules,
canonical for open space), and rule_id_prefixes. Declared
conforms_to: BN-DOC-STANDARD. No specification values
changed. |
| 2.2 | 27 Jul 2026 | Founder / Brand | Reclassified from Confidential — Internal to
Public, matching BN-BRAND-MASTERS. Published to
the web so external designers and vendors can be sent a link. No
specification values changed. |
| 2.3 | 27 Jul 2026 | Founder / Brand | Published at the custom domain
brand.broadnarrow.co; published_at and
footer updated. No specification values changed. |
| 2.4 | 27 Jul 2026 | Founder / Brand | Added the describes_exports drift field (currently
2026-07-24), tied to the BN-BRAND-CHANGE SOP.
No specification values changed. |
| 2.5 | 27 Jul 2026 | Founder / Brand | Correction. The avatar-measurement note previously
claimed to “independently confirm” a p × p logo bounding
box stated in BN-BRAND-MASTERS §7.2. That figure has since
been removed from BN-BRAND-MASTERS as fabricated (never
specified). The 499 × 499 pixel measurement itself was real and is
retained; the claim that it confirmed a formula-derived value was not,
and has been removed. |
| 2.6 | 27 Jul 2026 | Founder / Brand | Access changed: gated, not public. Migrated hosting
from GitHub Pages to Cloudflare Pages with a Cloudflare Access gate. A
visitor must sign in with an approved email address. Classification
changed from Public to
Shareable — access-gated, matching
BN-BRAND-MASTERS. |
| 2.7 | 27 Jul 2026 | Founder / Brand | Full audit against the actual delivered files.
Verified: all counts, folder structure, PNG dimensions (34/34),
colourway naming vs actual pixel data (34 PNG + 16 SVG, zero
mismatches), SVG transparency, and the §3.1 open-space measurements —
all confirmed accurate. Found and documented one real
discrepancy: the 6 Wordmark SVG files (Primary/TM Standard/TM
Responsive × Black/White) carry ~850px built-in vertical padding per
side (measured), contradicting EXP-01’s “tight-cropped”
claim, which does correctly hold for Logo/Lockup/Favicon. Added
EXP-19 documenting the measured exception; founder’s
decision was to document rather than re-export the files
(E7). |
10. Glossary
Terms shared with BN-BRAND-MASTERS (wordmark, logo,
lockup, master, canonical, outlined, Size Standard / Responsive,
c, p) are defined there. Export-specific
terms:
| Term | Meaning |
|---|---|
| Export / deliverable | A file generated from a master for use (SVG or PNG) |
| Derivative | A file made from a master; never canonical |
| Colourway | A colour version — Black / White (SVG), Black-on-White / White-on-Black (PNG) |
| Open space | The empty field around the mark within a delivered file |
| Fixed-canvas | A deliverable whose dimensions are dictated by the destination platform |
| Open Graph Preview | The image shown when a link is shared on social or messaging |
| Favicon | The small icon shown in a browser tab or bookmark |
| Cover / banner | A platform header image (Facebook, LinkedIn, X, YouTube, WhatsApp) |
BN-BRAND-EXPORTS · Canonical source:
BN-BRAND-MASTERS · © Broadnarrow LLP