Brand Asset Pack

If an approved logo exists, it is the first source. Inspect its proportions, take candidate colours from it, and decide which part can stand alone as an icon.

The Built by men-g.be Colour Palette Extractor pulls colours from a logo and exports HEX, RGB, HSL, CSS variables or JSON. Treat the output as candidates: a frequent pixel can belong to a shadow or an anti-aliased edge rather than to the brand.

If there is no logo, set a small colour system and choose the type first. Those decisions give the future logo a visual home.

Record where each decision came from. Mark approved values as approved and open ones as unknown.

Create three SVG masters:

• full logo: symbol plus name or wordmark
• icon-only logo: the recognisable symbol without small lettering
• one-colour logo: a solid version for light or dark use

SVG is the right default for a logo: it stays sharp at any size and is usually smaller than the equivalent PNG. Clean the exported file before it enters the pack: strip editor metadata, and keep scripts out of logo files.

If the only logo you have is a raster file on a white background, the Built by men-g.be Background Remover gives you a transparent PNG to work with until the SVG exists. It is a stopgap, not the master.

There is no single right pack. n-g.be deliberately uses an animated logo so the site looks unlike other sites. That choice has a cost the pack must cover: favicons, install icons and Open Graph images cannot animate, so an animated identity still needs a simple static mark.

Test every variant on light, dark and transparent backgrounds. Shrink the icon-only mark to 16, 32 and 48 pixels. If it turns into a blur, simplify the small version instead of forcing the full logo into it.

A palette is not finished when the HEX values look good together. Give each value a job.

```css
:root {
--colour-brand-primary: #0b6ffb;
--colour-brand-secondary: #ff735c;
--colour-surface: #ffffff;
--colour-text: #101828;
--colour-text-muted: #475467;
--colour-border: #d0d5dd;
--colour-focus: #155eef;
}
```

Then test the foreground and background pairs that will actually appear together. WCAG 2.2 Level AA asks for at least 4.5:1 for normal text and 3:1 for large text, and 3:1 for the visible parts of controls such as input borders and focus rings. Logotypes are exempt; navigation, labels, buttons and body copy are not.

Run the tokens above and the result is instructive:

• --colour-text on --colour-surface: 17.75:1, passes
• --colour-text-muted on --colour-surface: 7.69:1, passes
• --colour-focus on --colour-surface: 5.41:1, passes
• --colour-brand-primary on --colour-surface: 4.49:1, fails normal text by a hundredth; the threshold is not rounded
• --colour-brand-secondary on --colour-surface: 2.67:1, fails as text; --colour-text on it reaches 6.64:1
• --colour-border on --colour-surface: 1.47:1, fine for a divider, fails as the only outline of an input

Save each pair with its ratio, intended use and result. The same blue can pass as a large heading and fail as a link in body copy. Accessibility belongs to the pair, not the colour.

Choose one or two font families. One family can carry the whole site. A second can give headings contrast, but it adds files, loading time and decisions.

For each family, record:

• exact family name and fallback stack
• approved weights and styles
• source and licence
• web files, WOFF2 where available
• heading and body roles
• loading behaviour, such as font-display

Keep only the weights the site will use. Self-host the font files rather than loading them from a third-party font service: it removes an external request and keeps visitor IP addresses from being sent to that provider, which matters for sites serving EU visitors.

Test headings, body copy, buttons, numbers, punctuation and every required language. A font is approved when its files are licensed, load correctly and stay readable across the interface, not when one hero headline looks good.

Icons should look related before they look clever. Choose outline or filled, one stroke weight, one corner treatment, and a small set of approved sizes.

Prefer one established icon library rendered as code, or a controlled folder of SVG files, over raster images. Size, colour and visual weight then stay consistent. Do not mix libraries because one symbol looks better in another set.

Write down when an icon needs a text label. An icon-only button needs an accessible name, and an unfamiliar symbol usually needs visible text. The pack sets the visual rule; the build implements the behaviour.

The favicon set is generated from the static icon-only mark, never from the full wordmark or an animated logo. The pack's job is to supply that mark and the list of files the build must produce:

• favicon.ico
• icon.svg
• apple-touch-icon.png at 180×180
• PWA icons at 192×192 and 512×512
• a separate maskable PWA icon at 512×512
• site.webmanifest

A maskable icon needs padding around the mark, because Android crops it into circles, squircles and other shapes. Reusing the regular icon as maskable is how a logo ends up clipped on a home screen. Declare the two separately in the manifest.

The Built by men-g.be Favicon Generator produces the set from one source image. Google Search can show a site favicon but does not guarantee it, so keep the favicon URL stable and favour recognition over detail. Regenerate the set whenever the logo changes.

An Open Graph template gives every shared page a consistent preview without designing each one. Define the canvas, the logo safe area, the title area and line limit, the colour pair, the fallback for a page with no image, and the og:image:alt pattern.

The Open Graph protocol supports image URL, type, width, height and alt text, but sets no image size. 1200×630 is the common working standard and what n-g.be uses for its article previews. Keep the logo and the title away from the edges, because some platforms crop the preview.

Keep social images as PNG or JPEG. Use the Built by men-g.be PNG-to-WebP Converter for images shown on the page itself, where file size affects load time.

Use predictable folders and filenames so another person or agent finds the approved asset without asking.

```text
brand/
logos/
colours/
fonts/
icons/
favicons/
social/
brand-assets.json
README.md
```

brand-assets.json holds the token values, contrast pairs, font roles, asset paths, licence notes and the last approval date. README.md explains the few decisions a filename cannot carry.

The pack then goes into the handoff checklist in Prepare Website Inputs. The builder should not need a meeting to find out which logo, colour pair or font weight is approved.