Każdy format PromptEye liczysz z jednego wzorca: hero strony www 1440 × 860. Margines, odstępy, pismo i motyw rosną albo maleją razem, według jednej skali. Dzięki temu slajd, post i baner wyglądają jak części tego samego systemu.
Jedna skala
s = √(W · H) / 1113, gdzie 1113 = √(1440 · 860). Hero www ma s = 1.
Wartość z wzorca mnożysz przez s formatu. Pismo zaokrąglasz do 4 px, odstępy do 8 px. Motyw liczy się sam; gdy tekst stoi obok obiektu, skala motywu to min(s, H / 860).
| Format | Wymiary | s |
|---|---|---|
| Hero www | 1440 × 860 | 1,00 |
| Slajd | 1920 × 1080 | 1,29 |
| Post | 1080 × 1350 | 1,08 |
| Post kwadratowy | 1080 × 1080 | 0,97 |
| OG | 1200 × 630 | 0,78 |
| Okładka LinkedIn | 1584 × 396 | 0,71 |
Gotowe wartości dla każdego formatu (margines, logo, H1, lead) są w tabeli w rozdziale Formaty. Format spoza tabeli: weź najbliższy kanałem i proporcjami i przemnóż jego wartości przez s nowego ÷ s z tabeli.
Siatka
Odstępy i rogi
Odstępy pionowe idą w krokach 8, od --pe-o-1 do --pe-o-8. Rogi mają 2 px (--pe-promien), bez pigułek i bez dużych zaokrągleń.
--pe-o-18--pe-o-216--pe-o-324--pe-o-432--pe-o-548--pe-o-664--pe-o-796--pe-o-8128Tekst w kadrze
- Hero: tytuł i lead do 3 linii każdy.
- Dół kolumny tekstu do ok. 70 % wysokości kadru, żeby gradient zachował skalę.
- Logo w lewym górnym rogu na marginesie. W wariancie G (tekst na dole) logo pod tekstem, w lewym dolnym rogu (Logo).
Rama jasnego F
Jasne F potrzebuje ramy, żeby biel kadru nie zlała się z tłem miejsca, w którym stoi. Rama ma szerokość marginesu formatu, a tekst stoi o jeden margines wewnątrz ramy. Ciemne D, G i E są zawsze bez ramy.
| Wariant | Atrybut | Kiedy |
|---|---|---|
| www | bez atrybutu | hero F na stronie: rama po bokach (48), dół zamyka biała strona |
| B · pudełko | data-pe-rama="pudelko" | samodzielna strona: slajd, raport, druk |
| C · bez ramy | data-pe-rama="brak" | kafelek platformy: post, OG, baner |
W jednej serii albo dokumencie nie mieszasz B i C.
Wariant www: rama po bokach, dół zamyka biała strona.
Pokaż kod
<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="#">Produkt</a><a href="#">Raporty</a><a class="on" href="#">Blog</a><a href="#">Cennik</a></nav>
<span class="r"><a class="b b3 n S" href="#">Zaloguj</a><a class="b b1b S" href="#">Umów demo</a></span>
</header>
<div class="ah-in">
<h1>Zobacz, jak AI poleca Twoją markę</h1>
<p>Sprawdzamy odpowiedzi modeli AI w pytaniach, które przynoszą klientów, i pokazujemy, co zmienić, żeby AI polecało Twoją markę.</p>
</div>
</section><!-- B · pudełko: slajd, raport, druk -->
<section class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="pudelko" style="width:1920px;height:1080px;--pe-rama:64px">…</section>
<!-- C · bez ramy: post, OG, baner -->
<section class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="brak" style="width:1080px;height:1350px">…</section>