Back to the overview

Brand assets in bulk

One template, twenty banners, nine rules

The same four watches in five formats, rendered from one template. Every banner is then checked against the brand rules on the finished pixels, not on the intention. What fails is corrected and rendered again.

20banners, 5 formats, 4 builds
20pass all 9 rules
2corrected automatically

What went wrong first. The first rule set had eight rules, and all twenty banners passed. Eight of them had no watch in the picture: in the wide formats the photo was hidden behind the background. Every rule was about text and logo, none about the product. A ninth rule now removes the photo and measures how much of the banner changes.

The rules

Checked on every banner

  1. palette Text and shapes use brand colours only.
  2. fonts Headline in Instrument Serif, everything else in Hanken Grotesk, both actually loaded.
  3. margin Logo and text stay 5% of the short side away from every edge.
  4. clearspace Nothing comes closer to the logo than the height of the logo.
  5. minsize No text smaller than 2.3% of the short side.
  6. contrast Text against the picture behind it: at least 4.5 to 1, headline included. Measured on the rendered pixels.
  7. fit Headline on three lines at most, no text cut off, no blocks overlapping.
  8. accent The signal colour appears exactly once.
  9. product The product is actually in the picture: with the photo removed, at least 12% of the banner changes visibly.

The set

All twenty

Square · 1080 by 1080

square banner, steel-blue
9 of 9 rules Corrected in 1 step: darker scrim. Headline contrast 6.6 to 1.
square banner, gold-green
9 of 9 rules Passed first time. Headline contrast 5.5 to 1.
square banner, black-salmon
9 of 9 rules Passed first time. Headline contrast 15.3 to 1.
square banner, dial-macro
9 of 9 rules Corrected in 1 step: darker scrim. Headline contrast 11.6 to 1.

Portrait · 1080 by 1350

portrait banner, steel-blue
9 of 9 rules Passed first time. Headline contrast 8.1 to 1.
portrait banner, gold-green
9 of 9 rules Passed first time. Headline contrast 15.1 to 1.
portrait banner, black-salmon
9 of 9 rules Passed first time. Headline contrast 15.5 to 1.
portrait banner, dial-macro
9 of 9 rules Passed first time. Headline contrast 10.7 to 1.

Story · 1080 by 1920

story banner, steel-blue
9 of 9 rules Passed first time. Headline contrast 7.7 to 1.
story banner, gold-green
9 of 9 rules Passed first time. Headline contrast 15 to 1.
story banner, black-salmon
9 of 9 rules Passed first time. Headline contrast 15.4 to 1.
story banner, dial-macro
9 of 9 rules Passed first time. Headline contrast 11.9 to 1.

Landscape · 1200 by 628

landscape banner, steel-blue
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.
landscape banner, gold-green
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.
landscape banner, black-salmon
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.
landscape banner, dial-macro
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.

Strip · 1600 by 500

strip banner, steel-blue
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.
strip banner, gold-green
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.
strip banner, black-salmon
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.
strip banner, dial-macro
9 of 9 rules Passed first time. Headline contrast 17.3 to 1.

Tidewright is a fictional brand. Template, rules and the report with every measurement: template, rules.json, report.json, build.mjs.