Styleguide
tabulka a mřížka karet. Ty dvě pokryjí většinu zadání.
Vizuální principy
Pět pravidel, ze kterých vychází všechno ostatní. Když se u nějakého rozhodnutí váháte, rozhoduje tento seznam.
Hodně bílého místa. Sekce dýchají, obsah se netlačí k okrajům. Základní odstup určuje --section-space-lg, kompaktní variantu --section-space-md.
Červená #ed1c24 je jediná akcentní barva. Používá se na primární tlačítka, linku u nadnadpisu, pruh na horní hraně hlavičky, číslování a aktivní stavy. Nikde jinde.
Značkové prvky ze skupiny Liapor. Krátká červená linka (64 px) u nadpisů a červený pruh 5 px nahoře v hlavičce jsou převzaté z webů skupiny — používají je DE, AT, CH, NL, PL, HR, SI i dnešní liapor.cz. Liapor nemá brandmanuál, tohle je jeho skutečně používaný vizuální jazyk.
Karty se oddělují tenkým rámem 1px solid, ne stínem. Stín je vyhrazen jen pro plovoucí prvky nad obsahem, například rozbalené hledání.
Mřížky nejsou pravidelné. Bento rozvržení míchá velikosti dlaždic, aby vznikla hierarchie — velká dlaždice = důležitější vstup.
Přechody 0,15 až 0,35 s s jedinou křivkou --ease. Nic neposkakuje, nic nebliká. Fotka se při hoveru přiblíží o 4 %, karta zvedne o 2 px.
Druhá akcentní barva · stíny na kartách · rádiusy mimo definovanou sadu · vlastní font-size mimo typografickou stupnici · animace delší než 0,4 s.
Barvy
Paleta je záměrně malá: jedna akcentní, čtyři odstíny textu, dva rámy, čtyři podklady. Barvy se používají výhradně přes proměnné, nikdy jako zapsaná hodnota v komponentě.
[data-theme-accent] — byly to varianty pro rozhodování a v produkci se nepoužívají.
Typografie
Jediné písmo pro celý web je Inter, pro čísla a technické údaje JetBrains Mono. Nadpisy i běžný text sdílejí stejnou rodinu — hierarchii nese velikost a tučnost, ne druhé písmo.
| Proměnná | Rodina | Řezy | Kde |
|---|---|---|---|
| --font-base | Inter | 400 · 500 · 600 · 700 · 800 | vše kromě čísel |
| --font-heading | Inter | 700 · 800 | nadpisy (stejná rodina, ponecháno jako proměnná) |
| --font-mono | JetBrains Mono | 400 · 500 | čísla, kódy, technické údaje |
ss01 a cv11 — dělají jednobříškové „a" a alternativní znaky. Bez nich písmo vypadá jinak, než je návrh. Nastavuje se na body, není potřeba to opakovat.
Nadpis stránky
Nadpis sekce
Nadpis bloku
Nadpis karty
Menší nadpis
Nejmenší nadpis
Výrazný úvodní text velikosti XL.
Větší běžný text velikosti L.
Výchozí běžný text velikosti M.
Doplňkový běžný text velikosti S.
Perex pod nadpisem. Shrnuje obsah následující části.
16 px je základ pro veškerý souvislý text — odstavce, popisy v kartách, seznamy. 14 px pro ovládací prvky a doprovodné údaje (tlačítka, odkazy, menu, filtry, popisky polí, poznámky). 13 px je minimum — štítky, čísla, patička, právní text. Nic menšího na webu nepoužívat (přístupnost a čitelnost na mobilu).
Text 4,5:1, velký text (24 px, nebo 19 px tučně) 3:1, hrany formulářových polí 3:1. Proto: bílý text na červené ploše jen na --color-primary-ui #e3141c (4,7:1 — značková #ed1c24 má jen 4,38:1 a zůstává na linkách a ikonách), doplňkový šedý text --color-text-subtle #6b6b6b, světlý text na tmavé nejméně 60 % bílé, hrana polí --color-border-field #c8c8c8 (vědomě světlejší, fokus a hover ztmavují).
Jednotný dvojitý prstenec — tmavý obrys 2 px s bílým lemem (:focus-visible ve styles.css). Je vidět na bílé, tmavé, fotce i červené. Nepřepisovat barvou podle kontextu a nikdy nevypínat bez náhrady.
Co se samo přepíná nebo hraje déle než 5 s, má viditelné tlačítko pauza (.motion-toggle, vytváří LiaporPauza() v site-components.js), zastaví se při najetí a fokusu a při omezeném pohybu v systému se nespouští. Video v kartách hraje jen při najetí. WCAG 2.2.2.
Nadpisy, text, tlačítka a štítky dělí slova podle jazyka stránky (hyphens: auto, jen slova od 12 znaků a jen když je potřeba). Testováno na „Schallschutzmauerwerk“ na 360 px. Kde záleží na místě dělení, vložit do slova ­. Stránka musí mít správný lang.
Čím větší stupeň, tím těsnější tracking. Inter ve velkých velikostech potřebuje stáhnout, jinak nadpis působí rozvolněně. Hodnoty jsou ve stupnici výš — nevymýšlet vlastní.
.heading-label si červenou linku (64 × 2 px) kreslí sám přes ::before. Nepřidávat ji do textu ručně. Linka je značkový prvek skupiny Liapor (dřív tečka). U centrovaného nadnadpisu přidat .heading-label-center — linka je pak nad textem, také na středu.
V .section-head je nadpis omezený na 16 znaků šířky, aby se lámal do dvou až tří řádků. Dlouhý nadpis na jednu řádku rozbíjí rytmus.
Základní odstavec používá velikost M (16 px). S (14 px) patří doplňkovému textu, L (18 px) úvodům a důležitějším odstavcům, XL (22 px) výrazným sdělením. Všechny čtyři úrovně mají řádkování 1,5em a základní tučnost 400. Velikost se volí podle významu, ne podle volného místa.
Velikosti mimo stupnici · druhé písmo pro nadpisy · text-transform: uppercase jinde než u nadnadpisu a popisků v patičce.
Spacing systém
Všechny mezery vycházejí ze základní mřížky 4 px. Systém má dvě vrstvy: číselná stupnice určuje povolené hodnoty a významové tokeny určují, kde se používají. Komponenta tak neřeší konkrétní počet pixelů, ale roli mezery.
| Token | Desktop | Mobil | Použití |
|---|---|---|---|
| --layout-gutter | 32 px | 20 px | vodorovný okraj obsahu a zarovnání ploch přes celou stránku |
| --section-space-lg | 96 px | 48 px | hlavní obsahové a konverzní sekce |
| --section-space-md | 64 px | 40 px | kompaktní sekce a vnitřní stránky |
| --section-space-sm | 48 px | 32 px | pásy, CTA bloky a navazující části |
| --section-content-gap | 40 px | 32 px | mezera mezi záhlavím sekce a jejím obsahem |
| --layout-gap | 48 px | 24 px | běžný dvousloupcový layout a skupiny velkých bloků |
| --layout-gap-wide | 64 px | 32 px | vzdušný marketingový nebo redakční layout |
| --grid-gap | 16 px | 16 px | výchozí mezera mezi kartami a dlaždicemi |
| --grid-gap-lg | 24 px | 24 px | volnější mřížka nebo karty na tmavém podkladu |
| --card-padding | 24 px | 24 px | výchozí vnitřní odsazení karty |
| --card-padding-lg | 32 px | 32 px | dominantní a obsahově bohatá karta |
| --stack-gap | 16 px | 16 px | svislá mezera mezi souvisejícími prvky |
| --inline-gap | 8 px | 8 px | ikona a text nebo prvky v jednom řádku |
.section-pad {
padding: var(--section-space-lg) 0;
}
.product-grid {
display: grid;
gap: var(--grid-gap);
}
.product-card {
padding: var(--card-padding);
}
Pokud pro mezeru existuje významový token, použije se před číselným. --card-padding je lepší než --space-6, protože popisuje záměr.
Komponenty nemění vlastní spacing v každém media query. Na mobilu se přepíší významové tokeny v :root a všechny komponenty se přizpůsobí společně.
Hodnoty 26, 28 a 30 px se převádějí na 24 nebo 32 px. Hodnoty 56, 60 a 72 px se převádějí podle významu na 48, 64 nebo 80 px.
Optické korekce a geometrie ovládacích prvků, například padding tlačítka 14 × 22 px, nemusí ležet na stupnici. Výjimka patří ke konkrétní komponentě a nesmí se použít jako obecná mezera.
Rádiusy, stíny a pohyb
Zaoblení má čtyři hodnoty a jednu výjimku. Nic mezi tím.
6px
14px
22px
32px
pilulka
| Hodnota | Kde se používá |
|---|---|
| --radius-sm · 6px | drobné plochy — ikonky, řádky v rozbaleném hledání, bloky kódu |
| --radius · 14px | karty, fotoplochy, ukázkové rámce |
| --radius-lg · 22px | bento dlaždice, velké karty, rozbalené hledání |
| --radius-xl · 32px | největší plochy, celé sekce s podkladem |
| 999px | vše pilulkovité — tlačítka, štítky, chipy, položky navigace |
Jediná časová křivka: --ease: cubic-bezier(.2,.7,.2,1). Rychlá na začátku, doklouzne. Délky: 0,15 s na barvu a podklad, 0,2–0,25 s na posun a rám, 0,35 s na zvednutí dlaždice, 0,8 s na přiblížení fotky. Nic delšího.
Karty stín nemají. Jediný stín v systému patří plovoucím prvkům nad obsahem: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06).
Ikony
Jediný zdroj ikon je lucide.dev/icons. Není to volba do budoucna — návrh homepage z Lucide už čerpá, je v něm 19 ikon ze 14 různých názvů. Nová stránka si tedy nevybírá knihovnu, jen dohledá název v Lucide a použije stejné pravidlo velikosti a tloušťky.
<i data-lucide="house"></i> <!-- jednou na konci stránky --> <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script> <script>lucide.createIcons();</script>
Skript nahradí každé <i data-lucide> za inline <svg>. Ikona pak dědí barvu z currentColor — barva se nastavuje na rodiči, nikdy na ikoně.
Čím větší ikona, tím tenčí obrys. Lucide má výchozí stroke-width: 2, což je správně na 14–16 px, ale na 26 px už kreslí těžkou, kýčovitou ikonu. Snížení na 1,5 drží optickou váhu konstantní. Jiné velikosti než těchto pět nezavádět.
Výjimka: sociální sítě. Lucide od verze 1 neobsahuje loga značek, proto ikony sítí (.social, 16 px v bílém kolečku 36 px, inverzně, aby v tmavé patičce svítily) bereme ze Simple Icons jako vložené SVG. Které sítě se v patičce zobrazí, určuje klient pro každý trh.
| Velikost | Obrys | Kde |
|---|---|---|
| 12 px | 2 (výchozí) | jen šipka v servisním řádku (přepínač jazyka) — u 12–13px textu |
| 14 px | 2 (výchozí) | v řádku textu, v položkách rozbaleného hledání, v chipech, šipky položek menu |
| 16 px | 2 (výchozí) | ve vyhledávacím poli |
| 22 px | 1,75 | na 48px ploše u karet aplikací |
| 26 px | 1,5 | samostatně v kartách „Čím se Liapor liší" |
| Třída | Plocha | Barva ikony |
|---|---|---|
| .why-icon | žádná — ikona stojí volně | --color-primary |
| .apl-icon | 48×48 · bg-light · radius-sm | --color-text-dark |
| .sd-icon | 30×30 · bg-light · radius-sm | --color-text-muted |
| .sd-icon-doc | 30×30 · #fff0f0 | --color-primary — dokument ke stažení |
| .sd-icon-guide | 30×30 · #f0fdf4 | #16a34a — článek v poradně |
Zelená u .sd-icon-guide je jediné místo v systému, kde se objevuje jiná barva než červená, černá a šedá. Má úzký důvod: v rozbaleném hledání odlišuje typ výsledku, aby se dokument nepletl s článkem. Mimo tenhle kontext ji nepoužívat.
Stejný pojem = stejná ikona na celém webu. Než sáhnete pro novou ikonu, zkontrolujte, jestli pojem už v tabulce není — Lucide má 2 030 ikon a bez tohoto seznamu skončí každá stránka s jiným domečkem.
| Ikona | Název v Lucide | Význam |
|---|---|---|
| feather | nízká hmotnost | |
| layers | skladba, vrstvy — i podlahy a zásypy | |
| leaf | přírodní materiál, ekologie | |
| infinity | trvanlivost, životnost | |
| zap | rychlost výstavby | |
| shield-check | ochrana — plísně, požár, zdraví | |
| milestone | infrastruktura | |
| house | stavby a domy | |
| box | konkrétní produkt | |
| grid-2x2 | kategorie, výpis | |
| file-text | dokument ke stažení — technický list, certifikát | |
| book-open | článek v poradně, návod | |
| search | hledání | |
| x | zavřít |
Ikona vždy s textem. Nese doprovodný signál, ne informaci — kdo ikonu nepřečte, musí se dozvědět totéž z popisku.
Ikona jako jediný nositel významu. Když stojí sama (zavírací x, lupa), musí mít aria-label — jinak ji odečítač přeskočí.
Ikona tam, kde karta nemá fotku. Ikona a fotoplocha se v jedné kartě nekombinují — buď jedno, nebo druhé.
Emoji, ikony z jiné knihovny, vlastní kreslené. Jediná povolená výjimka mimo Lucide jsou vlajky státu — flag-icons v patičce a v přepínači jazyka, protože vlajky Lucide nemá.
Barvu nastavit na rodiči a nechat ikonu dědit currentColor. Ikona pak automaticky sedí i na tmavé sekci.
Nahrazovat šipky v tlačítkách za arrow-right. Šipky → v .btn a .pill-link jsou textové glyfy záměrně — drží účaří a dědí řez písma. Buď zůstanou všude, nebo se změní všude.
unpkg.com/lucide@latest. To znamená, že se web může kdykoli rozbít cizí aktualizací, a každý návštěvník platí cizí požadavek. Verzi zamknout a ideálně sbalit do vlastního balíčku — do produkce se z 2 030 ikon potřebuje 14.
Layout a mřížka
Obsah drží dvě šířky a dvě svislé rozteče. Sekce se od sebe oddělují podkladem, ne linkou.
| Třída | Hodnota | Kde |
|---|---|---|
| .wrap | max 1440 px · --layout-gutter | standardní obsah, výchozí volba |
| .wrap-wide | max 1600 px · --layout-gutter | plochy, které mají jít víc do šířky — hero, karusely |
| .section-pad | --section-space-lg svisle | běžná sekce |
| .section-pad-sm | --section-space-md svisle | kompaktní sekce, navazující bloky |
| .section-head | gap --space-8 · mb --section-content-gap | nadpis vlevo, odkaz „vše" vpravo |
Nadpis sekce na dva řádky
<div class="section-head">
<div>
<div class="heading-label">Nadnadpis</div>
<h2>Nadpis sekce</h2>
</div>
<a href="#" class="btn btn-outline btn-sm">Zobrazit vše <span class="arrow">→</span></a>
</div>
.section-head láme na sloupec a odkaz jde pod nadpis. Bez toho se tlačítko tlačí na nadpis — je to nejčastější chyba při přenosu na mobil.
| Vzor | Použití |
|---|---|
| repeat(3, 1fr) · gap 24px | tři rovnocenné karty — nejčastější mřížka webu |
| 1.35fr 1fr 1fr · řádky 248px | bento s dominantní dlaždicí vlevo |
| 1.25fr 1fr · gap 64px | text vlevo, vizuál vpravo |
| 1fr 320px · gap 48px | obsah a postranní panel |
Tlačítka a odkazy
Tři úrovně důležitosti, každá ve dvou provedeních — na světlém a na tmavém podkladu. Na jedné obrazovce má být jedno primární tlačítko — jakmile jsou dvě, přestává být primární.
Pořadí je v obou řádcích stejné: primární → sekundární → obrysové. Na tmavém podkladu mají sekundární a obrysové příponu -dark. Primární ji nepotřebuje — červená funguje na obou.
| Třída | Úroveň | Kdy použít |
|---|---|---|
| .btn-primary | primární | hlavní akce sekce — poptávka, e-shop, konzultace. Funguje na světlém i tmavém. |
| .btn-secondary | sekundární | druhá akce na světlém podkladu, nebo silná akce tam, kde by červená kolidovala s obsahem |
| .btn-secondary-dark | sekundární | druhá akce na tmavém podkladu — protiváha k červené |
| .btn-outline | obrysové | třetí úroveň na světlém — „zobrazit vše", „zpět" |
| .btn-outline-dark | obrysové | třetí úroveň na tmavém — rozcestníky v patičce, vedlejší odkazy v konverzním bloku |
| .btn-sm | — | zmenšení kterékoli varianty: v záhlaví sekce, v kartách, v navigaci |
<span class="arrow">→</span> je volitelná, ale když se použije, tak konzistentně — v jedné sekci buď všechna tlačítka se šipkou, nebo žádné. Při hoveru se posune o 3 px. Nemá podklad ani kolečko; posun o −2 px vpravo (u .btn-sm −1 px) je optická korekce prázdna v glyfu, ne odsazení.
.btn-outline-dark má 2,0:1 proti podkladu, .btn-outline jen 1,4:1. Je to součást vizuálního jazyka návrhu, nezvyšovat. Čitelnost akce drží text a šipka na 13,2:1 (při hoveru 18,1:1), což je nad AAA.
.pill-link.link-uV odstavci se podtržený odkaz zalomí přes řádek jako každé jiné slovo. Zkuste na něj najet.
.pill-link si šipku kreslí sám a při hoveru ji posune o 4 px — nepřidávat ji do textu. .link-u je pro odkazy uvnitř běžného textu; při hoveru mění barvu a zároveň zesílí linku na 2 px.
.link-u zesiluje i linku a .pill-link posouvá šipku. Barva hoveru je --color-primary-hover (5,5–6,0:1), ne značková červená — ta má na světlých podkladech jen 3,98–4,38:1 a na 14px textu AA nesplní.
Štítky a chipy
Štítek nese informaci a neklikne se na něj. Chip je ovládací prvek — filtr, přepínač. Vizuálně se liší velikostí a tím, že chip má stav.
Aktivní chip je plný tmavý, neaktivní bílý s rámem. Nikdy ne červený — červená je vyhrazená akci, ne stavu filtru.
Varianta se volí podle počtu citátů. Obsah, jména, fotky a souhlas citovaných plní klient. Citát má mluvit o konkrétním produktu nebo použití.
A · Více citátů (homepage) — .trust-layout
Materiál, na který se projektanti spoléhají
Statik nedával rezervu na zatížení, takže klasický substrát nešel.
Oceňuji, že dodávky drží termín i v sezóně.
Úvod s nadpisem vlevo, citáty pod sebou vpravo. Funguje od dvou citátů výš — s jedním zůstane vedle nadpisu prázdné místo. Popisek je anonymní (role + zakázka) nebo jmenovitý (viz B).
B · Jeden citát (detail produktu) — .trust-quote-lg
Oceňuji, že dodávky drží termín i v sezóně.
<div class="heading-label" id="h-x">Zkušenost z praxe</div>
<figure class="trust-quote trust-quote-lg">
<blockquote>Text citátu</blockquote>
<figcaption class="trust-quote-who">
<img class="trust-quote-avatar" src="…" alt=""> <!-- nebo <span> s iniciálami -->
<span><strong>Jméno</strong><span>Role, firma</span></span>
<a class="btn btn-secondary btn-sm trust-quote-cta">…</a>
</figcaption>
</figure>
Citát je sám nadpisem sekce — bez h2, nad ním jen pre-line. Jmenovitý popisek (.trust-quote-who): fotka nebo iniciály, jméno, role a firma. Tlačítko .trust-quote-cta vpravo vedle jména, na mobilu pod ním.
Malé odkazy na příbuzné položky — nejsou to filtry, nemají stav. Popisek vlevo (.related-row) je volitelný. Dnes je používá výpis aplikací u doporučených produktů. Z detailu produktu odstraněno 10/2026 v rámci zjednodušení — komponenta zůstává k dispozici.
Karty a dlaždice
Dva typy plochy. Karta je bílá s rámem a nese text. Bento dlaždice je fotka s textem přes ni a slouží jako vstup dál.
Nadpis karty
Text karty. Rám zesílí při hoveru, karta se nezvedá ani nevrhá stín.
S nadnadpisem
Nadnadpis se hodí, když karty patří do různých kategorií.
<div class="card card-pad"> <h4>Nadpis karty</h4> <p>Text karty.</p> <a href="#" class="pill-link" style="margin-top:auto">Zobrazit</a> </div>
<a href="#" class="bento-tile">
<div class="bento-bg photo photo-warm"></div>
<div class="bento-content">
<h3>Nadpis</h3>
<p>Popis</p>
</div>
</a>
Fotka nahoře, text pod ní na bílé. Při najetí se fotka přiblíží o 4 % a na rozhraní fotky a textu se zleva naplní červená linka 2 px; rámeček zůstává světlý. Karty bez fotky mají linku na horní hraně — platí pro všechny klikací karty webu. Stejně jsou postavené produktové dlaždice a karty referencí na HP (.prod-bento, .ref-c).
Text v kartách a dlaždicích nedáváme přes fotku, ale pod ni. Čitelnost textu na fotce záleží na tom, co na fotce zrovna je — měřený kontrast nadpisů na původních dlaždicích klesal až na 1,3:1 (AA vyžaduje 4,5:1, u velkého písma 3:1). Pod fotkou je text vždy tmavý na bílé a kontrast nezávisí na obsahu ani na délce textu (dlouhá německá slova, úzký mobil).
Výjimkou je hero stránky: tam text na fotce zůstává, ale stojí na tmavém překryvu, který musí pod textem dát bílému textu aspoň 4,5:1 i v nejsvětlejším místě fotky. Pod text nikdy nepatří fotka, ve které je sama text nebo rozhraní (screenshot).
Fotoplochy
Dokud nejsou skutečné fotky, drží místo šrafované plochy. Barevná varianta napovídá, co na místo patří — usnadňuje to zadání fotografovi.
Při doplňování skutečných fotek se třída ponechá jako podklad, dokud se obrázek nenačte — .photo tak funguje i jako stav načítání.
Tmavé sekce
Tmavý podklad #161616 je vyhrazený pro konverzní a důvěryhodnostní bloky — kontakt, poptávka, stats, patička. Není to dekorace; tmavá sekce znamená „tady se něco děje".
Nadpis na tmavém podkladu
Odstavec na tmavém. Text nikdy není plně bílý — bílá je vyhrazena nadpisu, běžný text má krytí okolo 68 %.
| Prvek | Barva na tmavém |
|---|---|
| nadpis | #ffffff |
| odstavec | rgba(255,255,255,.68) |
| nadnadpis, metadata | rgba(255,255,255,.5) |
| popisek v patičce | rgba(255,255,255,.45) |
| odkaz v patičce | rgba(255,255,255,.7) → #fff při hoveru |
| rám, dělicí linka | rgba(255,255,255,.12) |
| obrysové tlačítko | text .85 · rám .22 → #fff a .55 při hoveru |
Sekční komponenty
Kromě sdíleného styles.css má homepage přes sto tříd definovaných přímo v index.html. Nejsou to další primitivy — jsou to složeniny postavené z výše popsaných tokenů a komponent pro jednu konkrétní sekci.
| Předpona | Sekce | Z čeho se skládá |
|---|---|---|
| .hero-tab* | hero — přepínač aplikačních oblastí | pilulka · blur · rgba na fotce · progress lišta |
| .apl-* | karty aplikací | karta · radius-lg · fotoplocha · ikona |
| .diff-* | diferenciátory na tmavém | mřížka 3×1 · číslo v mono · tmavý podklad |
| .proc-* | proces výroby | mřížka 1.25fr/1fr · číslované kroky |
| .chip* | filtry produktů | pilulka · aktivní tmavý stav |
| .footer-* | patička | tmavý podklad · sloupce · vlajky zemí |
| .nl-* | přihlášení k novinkám | průhledný input na tmavém · souhlas |
| .nav-mobile-* | mobilní navigace | překryv · hamburger · seznam odkazů |
<style> u dané sekce, ne do styles.css — tam jde jen to, co používají alespoň dvě různé stránky.
Nadpis sekce s logem v pozadí
Na tmavém podkladu
Jiný odlišující prvek značky než logo zatím není, proto se logo opakuje jako podpis. Hostitelská sekce dostane .has-logo-wm, logo je její první potomek. Dva tóny: .logo-wm-light vpravo v úvodu stránky na bílé, .logo-wm-dark vlevo pod tlačítkem v závěrečné tmavé sekci. Velikost je pevná a všude stejná. Při scrollování se vodorovně mírně posouvá (celkem 120 px).
--wm-gap) a spodem se nikdy neořezává. Do strany smí mírně přesahovat okraj — zrcadlově: světlé vpravo, tmavé vlevo. Ukotvení dole drží uspořádání bez ohledu na množství textu: víc textu přidá vzduch nad logem, logo se nehne. Liapor nemá brand- ani logomanuál, ořez loga zespodu by působil jako chyba. Celé logo je vždy i v hlavičce a patičce. Používat střídmě — úvod stránky a závěrečná tmavá sekce, ne každá sekce.