broadnarrow

Brand Guidelines

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

  1. Exports are derivatives, never canonical. Every export is generated from a master; masters are the single source of truth.
  2. 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.
  3. 50 files total — 16 SVG and 34 PNG — under 020 Logos & Wordmarks / 020 Exports.
  4. Two formats: SVG for anything digital or vector-capable (preferred); PNG only where a platform demands a fixed-size raster.
  5. Every deliverable ships in both colourways — black and white.
  6. 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.
  7. 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.
  8. ® exports do not exist yet — deliberately deferred until trademark registration.
  9. 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 logE1
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: false

3. 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)
Facebook 1640 × 720
LinkedIn 2257 × 382
WhatsApp 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. E1E5 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