Partner artwork spec · v1

What we need from partners

Three ad slots on cgn.gg carry partner campaigns. This is what to send us so a campaign renders sharp on a 27″ desktop and on a phone, without us rebuilding the artwork for each one.

Master format: PNG or SVG
Animation: MP4 / WebM
Colour space: sRGB
Per campaign: 4 files

Why the format matters

One set of files, every screen

The ad slots are fluid, not fixed-size banners. The same card is about 487 px wide in the three-across desktop grid and full-width on a phone, and the wide banner goes from a 1560 px bar to a stacked block on small screens. Nothing is letterboxed and nothing is a fixed pixel canvas.

That rules out the usual IAB banner set. A flattened 728×90 leaderboard with the headline baked into it cannot reflow when the layout stacks — the type ends up 4 px tall on a phone. So we don't take finished banners. We take the parts: the logo, the key visual, the colour, the words. We compose them, and they stay sharp and readable at every width.

The one rule that matters most

Never send us artwork with the headline, price, or call-to-action baked into the image. Text inside a picture cannot be resized, translated to German, read by a screen reader, or found by Google. Send the words as text in the brief and the picture without them.

Slot 01 — the wide banner

Leaderboard

The full-width bar above the card row. Currently runs XPERION Days and the HanseMerkur partnership. Two logos: yours on a white plate at the left, and an optional co-brand mark at the right.

Leaderboard

104 px tall bar · max 1560 px column · stacks on small screens

Desktop. On small screens the bar becomes one column: logo, then copy, then button. The co-brand mark is hidden on phones.

Your logo (required)	SVG, or PNG ≥ 600×240Sits on a white plate, rendered up to 62 px tall. Full colour is fine — it's on white. Crop to the ink: transparent margin inside the file shows as dead space we can't pad away.
Co-brand mark (optional)	SVG, or PNG ≥ 600×600Sits directly on your background colour, no plate, up to 76 px tall. Send a single-colour white version — a full-colour mark on a coloured bar needs a filter that flattens it.
Background	one hex, or a CSS gradientFlat colour or a gradient we build from your values. All text on it is white, so it must be dark enough for white to pass 4.5:1 contrast.
Copy (as text)	4 linesEyebrow ≤ 40 chars · headline ≤ 30 chars (2 lines max) · subline ≤ 55 chars · date/venue ≤ 70 chars · button ≤ 14 chars. German and English if you have both.

Slot 02 — the card row

Campaign card

Three across on desktop, stacked full-width on phones. This is the slot with a key visual — the product shot or campaign object that sits on the right of the card while the copy runs down the left.

Campaign card

≈487 px wide on desktop · full-width on phones

The card grows taller as copy wraps — it has a minimum, not a fixed height. Artwork must survive being cropped vertically.

Key visual (required)	PNG, 1600×1600, transparentThe product or campaign object, cut out — no background, no ground shadow baked on, no text. Square canvas with the object centred; we position and fade it.
Safe area	keep the subject inside the centre 80%The card crops at the top and bottom as it reflows. Anything in the outer 10% on any edge can be cut.
Your logo (required)	SVG, or PNG ≥ 600×120Rendered 30 px tall, max 150 px wide, so it shrinks in the narrow tablet column. If your mark is already white-on-transparent we drop the white plate — send that version if you have it.
Background	one hexAll card text is white. Dark or saturated colours only — a pale brand colour makes the card unreadable and we'll have to darken it.
Copy (as text)	4 fieldsKicker ≤ 24 chars · headline ≤ 26 chars (2 lines) · subline ≤ 34 chars · button ≤ 16 chars. Up to 3 optional feature chips at ≤ 18 chars each.

Slot 03 — motion

If the campaign moves

A campaign can bring an animated key visual. It goes in the same place as the still one and follows the same crop rules — but the file is video, not GIF.

Please don't send GIFs

A GIF is capped at 256 colours, so gradients band and product shots posterise; it can't be compressed like video, so a five-second loop lands at 8–15 MB where the same loop as MP4 is under 500 KB; and it has no alpha beyond a hard 1-bit matte, which gives cut-outs jagged edges. It also can't be paused, which is an accessibility problem for visitors with vestibular conditions. If a GIF is genuinely all you have, send it and we'll convert it — but the master will always look better.

Format	MP4 (H.264) + WebM (VP9)Both if you can. MP4 alone is acceptable; we'll generate the WebM.
Size	1600×1600 or 1920×1080Match whichever suits the composition. Square for a cut-out object, 16:9 for a scene.
Length & loop	≤ 8 s, seamlessIt autoplays muted on a loop. The last frame must cut back to the first without a visible jump.
Weight	≤ 2 MBHard ceiling. This loads on mobile data alongside the rest of the page.
Audio	noneStrip the track. Autoplay only works muted, so the file is pure overhead.
Still fallback	PNG, 1600×1600Required with every video. It shows on reduced-motion settings and as the poster frame before the video loads.

Resolution

Why 1600 px, and not more

The widest a card ever renders is about 487 CSS px, which on a retina screen needs roughly 1000 real pixels. 1600 gives comfortable headroom for a full-width phone card and any future layout change, and our image pipeline resizes down from it automatically.

Going much bigger actively hurts: we've had 4600 px masters that the optimizer timed out on, and the image simply failed to appear. Keep source files at or under 2000 px on the long edge and roughly 3 MB. If your only master is a 40 MB print file, downsample before sending — or send it and tell us, and we'll do it.

1600×1600Key visuals, cut-out product shots

1920×1080Scene video, 16:9 footage

≥ 600×240Wordmark logos (PNG fallback)

SVGAny logo, always preferred

Checklist

What to send us

One folder per campaign. Name the files as below and we can drop them straight in.

logo.svgRequiredYour wordmark or lockup, cropped to the ink. PNG at 600×240 or larger if no vector exists.

logo-white.svgIf you have itSingle-colour white version. Lets us drop the white plate and set the mark straight onto the card.

key-visual.pngRequired1600×1600, transparent, subject in the centre 80%, no text on it.

key-visual.mp4Optional≤ 8 s, ≤ 2 MB, muted, seamless loop. Ships with the PNG as its fallback.

brief.txtRequiredBackground hex, the copy lines in EN and DE, the destination URL, and the campaign's run dates.

Quick reference

Do and don't

Send vector logos whenever they exist — they're sharp at every size and weigh nothing.
Cut the subject out on transparency and let us place it.
Export sRGB, 8-bit.
Give us both language versions of the copy if the campaign runs in Germany.
Tell us the exact destination URL, including any tracking parameters.
Say if the artwork has a hard end date so we can pull it.

Don't

Bake headlines, prices, or buttons into the image — they can't resize or translate.
Send a finished IAB banner (728×90, 300×250). There is nowhere fixed-size to put it.
Send CMYK or Display P3 files — colours shift on screen.
Send GIFs for animation, or 40 MB print masters for stills.
Leave transparent padding around a logo. It renders as dead space we can't remove.
Pick a pale background colour. All card text is white.

Anything unusual

If it doesn't fit this spec

Some campaigns want something these three slots don't do — a takeover, an interactive unit, a custom object drawn to match the site's own style. Several of the cards on the site now are built that way rather than from supplied artwork. Send the concept and we'll tell you what's buildable and what it costs in lead time.

Talk to us →Partner artwork spec