Every piece of PromptEye material is assembled from the same blocks: background, motif, type and logo. This chapter tells you which block to use in each format and with which values. The examples below are live, and each has code to copy.
The decision in three questions
- Does the frame have the motif object? Covers, heroes, title slides, slogan posts and CTAs have the motif (
data-pe-hero,data-pe-cta). Content slides, quote or number posts and business cards do not: a dot grid or a plain background. Data is a linear figure or a chart. - Dark or light? Dark D by default. Covers and social posts with text at the bottom use G. Light is F, with a frame depending on where it is used.
- Where does the text stand? On the left or at the top: D, F, E. At the bottom: G. Mark the text column with
data-pe-tekst.
Table of formats
Values in pixels. The reference is the web hero (s = 1); for a format not in the table, start from the closest one with the same multiplier s. The scale and grid rules are in the Layout and formats chapter.
| Format | Margin | Columns · gutter | Logo | H1 | Lead | Small | Motif |
|---|---|---|---|---|---|---|---|
| Web hero 1440 × 860 | 48 | 12 · 24 | 22 | 64 | 21 | 14 | D, F, E · G on a cover |
| Slide 1920 × 1080 | 64 | 12 · 32 | 28 | 80 | 28 | 20 | D, E, boxed F · G on a cover |
| Post 1080 × 1350 | 72 | 6 · 24 | 32 | 72 | 28 | 22 | D text at the top · G text at the bottom · F without frame |
| Post 1080 × 1080 | 72 | 6 · 24 | 32 | 64 | 26 | 20 | as above |
| OG 1200 × 630 | 64 | 12 · 16 | 28 | 56 | 24 | 20 | D · F without frame |
| LinkedIn cover 1584 × 396 | 56 | 12 · 24 | none | 52 | – | – | D, text from 400 px |
Slides
A title slide has the motif. A content slide stands on black with a dot grid, which a mask cuts out from under the text. A light slide is a boxed F: the logo and text start 128 px from the edge (frame + margin).
Title slide D: motif, breadcrumb, question headline without a dot.
Show code
<section class="ah dk" data-pe-hero="d" style="width:1920px;height:1080px">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
<div class="ah-in" style="left:64px;top:216px;width:880px">
<div class="ah-cr" style="font-size:20px">Report · Tourism</div>
<h1 style="font-size:80px">Where does AI send Poles to the seaside?</h1>
<p style="font-size:28px;max-width:760px">12,000 answers from seven AI models.</p>
</div>
</section>Content slide: dot grid on black, no motif. The title is a slogan, so it has the dot.
Show code
<div class="t2f dk" style="position:relative;width:1920px;height:1080px">
<canvas class="lt" data-m="flat" data-t="0" data-nz="fade" data-dp="26" data-dh="d" data-dk="cover" data-da=".15" data-dsz="2" data-dm=".03,.18,.5,.6"></canvas>
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;left:64px;top:64px;height:28px">
<h1 style="position:absolute;left:64px;top:216px;width:880px;margin:0;font:400 80px/1.05 var(--pe-font-display);letter-spacing:-.04em;color:var(--pe-papier)">At the seaside AI recommends three brands<span class="dot"></span></h1>
<p style="position:absolute;left:64px;top:432px;width:760px;margin:0;font:400 28px/1.45 var(--pe-font-text);color:var(--pe-noc-tekst)">Booking, Nocowanie.pl and Airbnb together collect 73% of accommodation recommendations.</p>
</div>Social media
A post with text at the bottom is G, with text at the top D, a light one is F without a frame. A square 1080 × 1080 post is built the same way, with a 64 H1. The LinkedIn cover has no logo, and the text starts at 400 px because the profile photo covers the bottom left corner.
Post G: text at the bottom, logo below the text in the bottom left corner.
Show code
<section class="ah dk gt" data-pe-hero="g" style="width:1080px;height:1350px">
<div class="ah-in" style="left:72px;bottom:152px;top:auto;width:936px">
<h1 style="font-size:72px">Where does AI send Poles to the seaside?</h1>
<p style="font-size:28px;max-width:800px">12,000 answers from seven AI models.</p>
</div>
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:72px;bottom:72px;height:32px">
</section>Link image (OG): D, title up to two lines. Export to PNG with data-pe-static.
Show code
<section class="ah dk" data-pe-hero="d" style="width:1200px;height:630px">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
<div class="ah-in" style="left:64px;top:140px;width:618px"><h1 style="font-size:56px">Where does AI send Poles to the seaside?</h1></div>
</section>LinkedIn cover: no logo, text from 400 px.
Show code
<section class="ah dk" data-pe-hero="d" style="width:1584px;height:396px">
<div class="ah-in" data-pe-tekst="lewo" style="left:400px;top:146px;width:720px"><h1 style="font-size:52px;margin:0">See how AI recommends your brand</h1></div>
</section>Website, article, CTA
The page and article hero, the four variants and the CTA section are described in the Motif chapter. Ready templates: templates/hero-raportu and templates/artykul. A page header without the motif stands on G5 stretched like the hero D light (rules in tla.md). The last slide of a presentation is the raster CTA section in a 1920 × 1080 frame.
Templates: guidelines/kanaly.html (D1–D3).
Arial, 13–15 px, the logo as an image. Geist and Inter do not work in mail clients, and the motif and gradients do not survive e-mail. Template: guidelines/kanaly.html (D6).
Export to PNG and PDF
For a screenshot add data-pe-static to the section (the motif without animation) and wait for PEmotyw.ready. A black frame without dots means the motif has not started: call PEmotyw.init(document), never draw it yourself.
<section class="ah dk" data-pe-hero="d" data-pe-static style="width:1200px;height:630px">…</section>
<script>
await window.PEmotyw.ready; // the motif is drawn, take the screenshot now
</script>