Every PromptEye format is derived from one reference: the 1440 × 860 website hero. Margins, spacing, type and the motif grow or shrink together, on one scale. That is why a slide, a post and a banner look like parts of the same system.
One scale
s = √(W · H) / 1113, where 1113 = √(1440 · 860). The web hero has s = 1.
Multiply the reference value by the format’s s. Round type to 4 px and spacing to 8 px. The motif computes itself; when text stands beside the object, the motif scale is min(s, H / 860).
| Format | Size | s |
|---|---|---|
| Web hero | 1440 × 860 | 1.00 |
| Slide | 1920 × 1080 | 1.29 |
| Post | 1080 × 1350 | 1.08 |
| Square post | 1080 × 1080 | 0.97 |
| OG | 1200 × 630 | 0.78 |
| LinkedIn cover | 1584 × 396 | 0.71 |
Ready values for each format (margin, logo, H1, lead) are in the table in the Formats chapter. For a format not in the table, take the closest one by channel and proportions and multiply its values by the new s ÷ the table’s s.
Grid
Spacing and corners
Vertical spacing goes in steps of 8, from --pe-o-1 to --pe-o-8. Corners are 2 px (--pe-promien), no pills and no large radii.
--pe-o-18--pe-o-216--pe-o-324--pe-o-432--pe-o-548--pe-o-664--pe-o-796--pe-o-8128Text in the frame
- Hero: title and lead up to 3 lines each.
- The bottom of the text column at about 70% of the frame height, so the gradient keeps its scale.
- The logo in the top left corner on the margin. In variant G (text at the bottom) the logo sits below the text, in the bottom left corner (Logo).
The light F frame
Light F needs a frame so that the white of the frame does not merge with the background of the place where it stands. The frame is as wide as the format’s margin, and the text stands one margin inside the frame. Dark D, G and E never have a frame.
| Variant | Attribute | When |
|---|---|---|
| www | no attribute | hero F on the website: frame on the sides (48), the white page closes the bottom |
| B · box | data-pe-rama="pudelko" | a standalone page: slide, report, print |
| C · no frame | data-pe-rama="brak" | a platform tile: post, OG, banner |
Never mix B and C within one series or document.
Web variant: frame on the sides, the white page closes the bottom.
Show code
<section class="ah ahl cx-l f86" data-pe-hero="f">
<header class="hn">
<img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye">
<nav><a href="#">Product</a><a href="#">Reports</a><a class="on" href="#">Blog</a><a href="#">Pricing</a></nav>
<span class="r"><a class="b b3 n S" href="#">Log in</a><a class="b b1b S" href="#">Book a demo</a></span>
</header>
<div class="ah-in">
<h1>See how AI recommends your brand</h1>
<p>We check AI answers to the questions that bring customers and show what to change so that AI recommends your brand.</p>
</div>
</section><!-- B · box: slide, report, print -->
<section class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="pudelko" style="width:1920px;height:1080px;--pe-rama:64px">…</section>
<!-- C · no frame: post, OG, banner -->
<section class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="brak" style="width:1080px;height:1350px">…</section>