# Nezávislý audit grafického stylopisu — GPT‑6 Sol / velmi vysoká

**28. 10. 2026.** Cílem je vzhledově přiblížit **oba** posuzované prototypy živé prezentaci České pojištění. Jediná vizuální autorita tohoto posudku je veřejný WordPress; úrazový ani cestovní prototyp není vzorem pro druhý. Jde o návrh vzhledu, nikoli o změnu průchodů, výpočtů, obsahu pojistných produktů nebo integrací.

## Metoda a ověřený rozsah

Vlastní izolovaný proces Playwright/Chrome měřil `getComputedStyle` po `document.fonts.ready` v 1440 × 900 a 375 × 812. U komponent jsem četl také `backgroundImage`, `::before`, `::after`, geometrii a `:disabled`. Hover jsem odečetl po 700–800 ms; na **spodním** produktovém `a.calculate-button` jsem zvlášť změřil default, hover, fokus po odjetí myši a active po ustálení. Fokus u ostatních komponent v hromadném JSON probíhal po hoveru, proto jej **nevykládám jako izolovaný fokus**. Screenshot vznikl před zkoušením stavů. Každá čtená stránka měla ještě před `goto` zablokované všechny požadavky mimo GET/HEAD/OPTIONS. Na WordPressu jsem výslovně vybral „Povolit pouze nezbytné cookies“. Veřejné podstránky jsem získal z reálných odkazů hlavního menu; nic jsem neposlal z kontaktního, sjednávacího ani platebního formuláře. Zdrojové HTML, CSS a JS cizích webů nejsou uloženy.

| Označení | Ověřená URL a stav | Místní měření a snímky |
|---|---|---|
| WP-H | [Hlavní WordPress](https://www.ceskepojisteni.cz/) | [1440 JSON](./evidence/gpt-6-sol/wp-1440.json), [1440 PNG](./evidence/gpt-6-sol/wp-1440.png), [375 JSON](./evidence/gpt-6-sol/wp-375.json), [375 PNG](./evidence/gpt-6-sol/wp-375.png) |
| WP-P | [Produkt Pojištění cizinců](https://www.ceskepojisteni.cz/pojisteni-cizincu/) | [1440 JSON](./evidence/gpt-6-sol/wp-product-1440.json), [1440 PNG](./evidence/gpt-6-sol/wp-product-1440.png), [375 JSON](./evidence/gpt-6-sol/wp-product-375.json), [375 PNG](./evidence/gpt-6-sol/wp-product-375.png) |
| WP-K | [Kontakt](https://www.ceskepojisteni.cz/kontakt/) | [1440 JSON](./evidence/gpt-6-sol/wp-contact-1440.json), [375 JSON](./evidence/gpt-6-sol/wp-contact-375.json), [375 PNG](./evidence/gpt-6-sol/wp-contact-375.png) |
| WP-Č | [Článek o pojištění sportovců](https://www.ceskepojisteni.cz/blog/zdravotni-pojisteni-cizincu-pro-sportovce/) | [1440 JSON](./evidence/gpt-6-sol/wp-article-1440.json), [375 JSON](./evidence/gpt-6-sol/wp-article-375.json), [375 PNG](./evidence/gpt-6-sol/wp-article-375.png) |
| Ú-P / Ú-R / Ú-K | [Úraz v0.11.1](https://devel.kingux.cz/cmp_uraz/ferda-0.11.1/index.html), skutečné `#profile`, `#risks`, `#customize` po UI | [profil 1440](./evidence/gpt-6-sol/uraz-1440.json), [profil 375](./evidence/gpt-6-sol/uraz-375.png), [rizika 1440](./evidence/gpt-6-sol/uraz-risks-1440.json), [rizika 375](./evidence/gpt-6-sol/uraz-risks-375.png), [konfigurace 1440](./evidence/gpt-6-sol/uraz-customize-1440.png), [konfigurace 375](./evidence/gpt-6-sol/uraz-customize-375.json) |
| C-Z / C-V / C-P | [Cesta V19](https://sldevel.ceskepojisteni.cz/Tests/Standa/CePoTravelNextV19/index.php), úvod, skutečné `#vysledky`, `#porovnani` přes vestavěný přehled | [zadání 1440](./evidence/gpt-6-sol/cesta-1440.json), [zadání 375](./evidence/gpt-6-sol/cesta-375.png), [výsledky 1440](./evidence/gpt-6-sol/cesta-results-1440.json), [výsledky 375](./evidence/gpt-6-sol/cesta-results-375.png), [porovnání 1440](./evidence/gpt-6-sol/cesta-compare-1440.png), [porovnání 375](./evidence/gpt-6-sol/cesta-compare-375.json) |

Na všech uvedených záběrech se `location.href` v měření shoduje s popsaným krokem; žádná z kontrolovaných šířek neměla horizontální přetečení. Přechod na cestovní výsledky se i při blokaci pokusu o POST na `api.php` zobrazil s 22 variantami; tento audit neověřuje žádnou službu ani správnost nabídky. Detaily hromadných stavů a měření podkladů jsou ve [vlastním skriptu](./evidence/gpt-6-sol/measure.cjs), [cíleném měření WordPressu](./evidence/gpt-6-sol/wp-targeted.json), [přehledu povrchů](./evidence/gpt-6-sol/wp-surfaces.json) a [ověřených odkazech menu](./evidence/gpt-6-sol/wp-menu-links.json).

## Zjištěná vizuální pravidla WordPressu

- **Písmo:** načtené řezy Montserratu; `body` na WP-H/P 18 px / 27 px / 400. Hlavní produktové `h1.title` WP-P je 64 px desktop, 42 px mobil, váha 600, barva `#003b71`. Titulek článku `h1.main-page-title` WP-Č je 50 px / 50 px a 800; kontakt WP-K 54 px / 54 px a 800. Neexistuje tedy jediné „WP h1“. Sekční `h2.format-title` je typicky 32 px desktop a 28 px mobil, 600–700, `#03407c`. Nadpisy krátkých článků `h2.name` jsou 24 px / 600 / `#002e5f`.
- **Značka a povrchy:** stránka má `body` `#fcfcfc`, hlavní navy `#003b71`, sekundární textové navy `#002e5f`, nadpisové navy `#03407c` a akcent `#f42534` / v některých prvcích `#f42434`. WP-H `.body` kategorií a `.citaceBox` používají `#f2f4f7`, roh 15 px, bez viditelného borderu a stínu. Patka produktu je `#003b71`; hlavička `#fcfcfc`. To je měřený marketingový web, ne přímý vzor pro husté formulářové karty.
- **Čáry:** `.format-title::after` na WP-H/P/K/Č má `content:""`, `background:#f42534`, rozměr **100 × 2 px** i na mobilu. Produktové a obsahové `h1` tuto čáru nemají. V článku a na kontaktu se používá krátký akcent za sekčním nadpisem, nikoliv červený border přes celou šířku komponenty.
- **Hlavní akce:** WP-P horní `.button-icons-area a.button` a spodní `a.calculate-button` „Srovnat pojištění“ mají v základu `#00b53b`, bílý text, Montserrat 24/600/28, 84 px výšku na desktopu, roh 8 px, bez borderu/stínu. Ikona kalkulačky je skutečně v `background-image`, ne v `::after`; proto by prosté čtení `backgroundColor` roli nepopisovalo. Na mobilu první CTA měří 311 × 84 px, spodní se kvůli textu zvýší na 112 px. **Stavy se liší:** horní `.button-icons-area a.button` po 700 ms hoveru i ve fokusu zůstává bílý bez podtržení ([hromadné měření](./evidence/gpt-6-sol/wp-product-1440.json)); **jen spodní** `a.calculate-button` má po 800 ms hoveru podtržení při stejné zelené, ve fokusu po odjetí myši mění text na `#f42434` bez viditelného outline a v active vrací bílý text ([cílené měření](./evidence/gpt-6-sol/wp-targeted.json)). Červený fokus spodní akce není vhodný přístupný návrh. WP-H má menší variantu `a.button` 240 × 57 px, 18/400, `#51b24e`, r8.
- **Sekundární odkaz:** WP-H `.moreBlogInside` kolem „Navštívit blog“ nese `1px solid #002e5f`, r15 a `background-image:linear-gradient(...)`; vlastní vnořený odkaz border nenese. V prototypu použít pouze měřenou vizuální roli, se sémantickým `<a>`/`<button>` jako skutečným ovladačem. Kontextově se tedy vedle primárního zeleného CTA objevuje navy obrys, ale ne jako jediný univerzální styl všech navigačních akcí.
- **Omezení přímého převzetí:** WP nemá doloženou kalkulačkovou nabídku, sticky cenový přehled, formulářový modal, selected rizikovou kartu ani disabled nabídku. `div.box.disabled` na homepage značí marketingovou kategorii, ne nativní `:disabled` tlačítko. Tyto stavy musí být výslovně adaptací.

## Srovnání a doporučené změny

V tabulce „WP pravda“ vždy znamená **konkrétní měřený komponent** a jeho stránku, nikoli obecnou domněnku o značce. „Změna“ je implementační návrh pro daný prototyp. Priorita P1 = hlavní vizuální nesoulad či čitelnost, P2 = sjednocení rolí, P3 = jemné doladění.

| WP pravda | Úraz nyní | Cesta nyní | Změna úraz | Změna cesta | Priorita |
|---|---|---|---|---|---|
| WP-P `a.button` produktového CTA: `#00b53b`, bílá, 24/600, r8, bez border/shadow; [měření](./evidence/gpt-6-sol/wp-product-1440.json). | Ú-P `button.button` „Vybrat krytí“ a Ú-K „Pokračovat“: `#003b71`, 14/650 či 13 px, r12, 1px navy; [Ú-P](./evidence/gpt-6-sol/uraz-1440.json), [Ú-K](./evidence/gpt-6-sol/uraz-customize-1440.json). | C-Z `button--primary` „Porovnat nabídky“ je už zelené `#00b53c`, 18/700, r8; C-V/C-P „Vybrat“ má navy gradient, r8; [C-Z](./evidence/gpt-6-sol/cesta-1440.json), [C-V](./evidence/gpt-6-sol/cesta-results-1440.json). | Všechny hlavní postupové akce převeďte do jedné zelené role odvozené z WP-P. V kompaktním ceníku zachovejte velikost ovladače i čitelné „Vybrat“, zvětšujte hlavně text/plošku podle místa, nedávejte sem 84px produktový banner. | Ponechte zelenou hlavní akci v zadání a stejnou roli dejte i finálnímu „Vybrat nabídku“ na výsledcích a v porovnání; navy gradient není doložená WP primární akce. | P1 |
| WP-P horní `.button-icons-area a.button`: hover i fokus bílý text bez podtržení ([JSON](./evidence/gpt-6-sol/wp-product-1440.json)). **Spodní** `a.calculate-button`: hover po 800 ms přidá podtržení, fokus po odjetí myši má červený text bez outline, active bílý text ([cílené stavy](./evidence/gpt-6-sol/wp-targeted.json)). | Ú-P hover přepíná na `#51b24e` s tmavým `#102f49`; fokus dává 3px modrý outline, [stav](./evidence/gpt-6-sol/uraz-1440.json). | C-Z primární hover nebyl v prvních deseti hromadně měřených stavech; C-Z obrysový hover je `#edf4fa`, fokus růžový 3px outline po hoveru, [stav](./evidence/gpt-6-sol/cesta-1440.json). | Pro zelenou akci navrhněte stabilní pozadí a **vlastní** nebarevný cue; podtržení je doloženo pouze u spodního CTA. Zřetelný fokus zachovejte. | Zelené CTA ošetřete stejně; pro obrysové akce přejměte pouze vizuální navy obrys, fokus sjednoťte se silným přístupným prstencem. Červený fokus spodního WP CTA nekopírovat. | P1 |
| WP-P `h1.title` hero 64/42 px, 600; WP-Č `h1.main-page-title` obsah 50/50 px, 800; [P](./evidence/gpt-6-sol/wp-product-1440.json), [Č](./evidence/gpt-6-sol/wp-article-375.json). | Ú-P/R/K `h1` 34/25 px, 700, `#003b71` desktop a `#173b58` mobil; [profil](./evidence/gpt-6-sol/uraz-375.json). | C-Z hero 58/36 px, 500; C-V h1 50/29 px, 500; C-P 43/30 px, 500; [zadání](./evidence/gpt-6-sol/cesta-1440.json), [výsledky](./evidence/gpt-6-sol/cesta-results-375.json). | Kalkulačkové nadpisy nejsou reklamní hero. **Adaptace z WP-Č:** zvýšit význam na cca 40/29–30 px, váhu 600, barvu `#003b71` i mobilně. Nenutit WP-Č 50px mobil na dlouhé pracovní titulky. | Hero přiblížit WP-P na cca 64/42 px a váhu 600, pokud se při 375 px zachová čitelné zalomení; výsledky/porovnání jako vnitřní tituly cca 40–50/29–32 px a 600. Výchozí 500 je na všech třech krocích lehčí než měřený WP. | P1 |
| WP-P/K/Č `h2.format-title` 32/28 px, 600–700, `#03407c`; [produkt](./evidence/gpt-6-sol/wp-product-375.json), [kontakt](./evidence/gpt-6-sol/wp-contact-1440.json). | Ú-P formulářové h2 14/700 a Ú-K „Vaše krytí“ 16/700; [Ú-P](./evidence/gpt-6-sol/uraz-1440.json), [Ú-K](./evidence/gpt-6-sol/uraz-customize-1440.json). | C-Z `Kam vyrazíte?` 28/23 px a 500; výsledkové názvy pojištění 17/700; [C-Z](./evidence/gpt-6-sol/cesta-375.json), [C-V](./evidence/gpt-6-sol/cesta-results-1440.json). | Skutečné nadpisy velkých sekcí odlišit od fieldset popisků: přibližně 28/24 px 600 pro hlavní bloky, malé 14–16 px ponechat jen u vnitřních skupin. Zachovat hustotu ceníku. | `Kam vyrazíte?` přiblížit sekční roli 32/28 px a 600; názvy nabídky ponechat jako titulky karet, ne všechny povýšit na sekční h2. | P1 |
| WP `.format-title::after` má 100×2 px `#f42534`; produktové/obsahové h1 bez čáry; [WP-P](./evidence/gpt-6-sol/wp-product-1440.json), [WP-K](./evidence/gpt-6-sol/wp-contact-375.json). | Ú-P `h1::after` má 88×1 px `#f42434`; [stav](./evidence/gpt-6-sol/uraz-1440.json). | C-Z `.card-heading` má červený `border-bottom:2px solid #f42434` přes celou šířku; [stav](./evidence/gpt-6-sol/cesta-1440.json). | Přesuňte akcent od h1 k vybraným sekčním nadpisům jako 100×2. Pokud zůstane čára za názvem kroku kvůli orientaci, označit to jako **adaptaci**, protože WP h1 ji nemá. | V hlavní kartě nahradit celoplošný červený border krátkou 100×2 linkou za blokem `Kam vyrazíte?`; běžné oddělovače nabídky nebarvit červeně. | P1 |
| WP-H/P `body` `#fcfcfc`, `.body` kategorie a `.citaceBox` `#f2f4f7`, r15, border 0, shadow 0; [povrchy](./evidence/gpt-6-sol/wp-surfaces.json). | Ú-P pozadí chladnější `#f3f6fa` přibližně podle screenshotu, bílé panely r14 a 1px `#dce5ed`; Ú-K panel 1px `#c5d2df`, r14; [Ú-K](./evidence/gpt-6-sol/uraz-customize-1440.json). | C-Z bílá karta r14 se stínem 0 0 30px `#d6d6d6`; C-V karty 1px `#d8e3e9`, r14 se stínem 0 12 34px navy/10 %; [C-Z](./evidence/gpt-6-sol/cesta-1440.json), [C-V](./evidence/gpt-6-sol/cesta-results-1440.json). | Základ změnit na `#fcfcfc`; hlavní skupiny ponechat bílé. Border používat jen jako **adaptaci pro formulář**, ztenčit jeho vizuální roli; informační bloky mohou použít WP `#f2f4f7`/r15 bez orámování. | Základ `#fcfcfc`; zmenšit či odstranit plošné stíny na běžných kartách a nechat jemné oddělení jen tam, kde se nabídky skutečně dotýkají. WP nemá stín jako plošné pravidlo. | P1 |
| WP-H kategorie `.body` r15 bez borderu; CTA r8; informační štítek `.category` r5; [povrchy](./evidence/gpt-6-sol/wp-surfaces.json). | Ú-R `.desktop-risk-card` r13, mobil `.v2-tile` r12, akční tlačítka r12/6; [Ú-R](./evidence/gpt-6-sol/uraz-risks-1440.json), [mobil](./evidence/gpt-6-sol/uraz-risks-375.json). | C-Z hlavní karta r14, ovladače r8, čítače r6; C-V nabídka r14; [C-Z](./evidence/gpt-6-sol/cesta-1440.json), [C-V](./evidence/gpt-6-sol/cesta-results-1440.json). | Sjednotit role: obsahová/volbová karta ~15 px, běžná akce 8 px, malý ovladač 5–6 px. `selected` border ponechat jako **adaptaci**, WP nemá stejné rizikové volby. | R8 tlačítka sedí; r14 karta je blízko WP r15. Kde karta obsahuje jen navigační volbu, omezit stín a převzít jemnější povrch WP-H. | P2 |
| WP-H `.moreBlogInside` navy obrys 1px `#002e5f`, r15, světle šedý gradient; WP-Č „zpět na blog“ je prostý navy odkaz; [cílené měření](./evidence/gpt-6-sol/wp-targeted.json), [článek](./evidence/gpt-6-sol/wp-article-1440.json). | Ú-R rozsahy „Rozšířené/Základní/Vlastní“ jsou malé obrysové buttony, Ú-K dokumenty jsou řádek; [rizika](./evidence/gpt-6-sol/uraz-risks-375.json). | C-Z „Chci to zkusit vlastními slovy“ má 1px `#003b71`, r8; C-P „Detail nabídky“ je textový button; [zadání](./evidence/gpt-6-sol/cesta-1440.json), [porovnání](./evidence/gpt-6-sol/cesta-compare-1440.json). | Sekundární kroky a volby řešte navy obrysem/textem s jasně odlišenou aktivní volbou; r15 reklamního odkazu nepřenášet doslova na malé filtry. | Obrysová vedlejší akce je směrově správná; sjednotit její navy s `#002e5f` podle WP-H tam, kde jde o navigační alternativu. Detail nabídky může zůstat prostý podtržený odkaz. | P2 |
| WP-P produktové CTA nepoužívá gradient; WP-H kategorie gradient v `background-image` slouží **povrchu**, nikoli potvrzení volby; [WP-P](./evidence/gpt-6-sol/wp-product-1440.json), [povrchy](./evidence/gpt-6-sol/wp-surfaces.json). | Ú-R „Vybrat“ je jednobarevné navy; vybrané karty mají navy 1px + inset 1px, [Ú-R](./evidence/gpt-6-sol/uraz-risks-1440.json). | C-V/P `button--navy` má `linear-gradient(110deg,#00457e,#273443)` pro „Vybrat“; [C-P](./evidence/gpt-6-sol/cesta-compare-1440.json). | Po přesunu výběru do zelené akce ponechat indikaci vybraného rizika pomocí borderu a slovního/ikonového stavu; jde o **adaptaci**, ne WordPress selected token. | Gradient z výběrového CTA odstranit ve prospěch jednolité zelené nebo navy obrysové role podle toho, zda akce skutečně pokračuje; stav vybraného plánu zůstává samostatná adaptace. | P2 |
| WP-P bílý text na `#00b53b` má vypočtený kontrast 2,74:1; WP-H bílý na `#51b24e` 2,68:1; **pouze spodní** WP-P `a.calculate-button` ve fokusu mění text na červenou bez prstence. To jsou **pozorované hodnoty**, ne kvalitní přístupné vzory. | Ú-R mobilní „Vybrat“ má 10px text; disabled „Vybrat“ ponechává stejnou `backgroundColor`, ale záběr ukazuje šedý vizuální stav přes další pravidlo; [Ú-R](./evidence/gpt-6-sol/uraz-risks-375.json). | C-Z zelená primární akce má rovněž bílý text; C-V disabled „Porovnat vedle sebe“ je doložený jen v prototypu, nikoli ve WP; [C-Z](./evidence/gpt-6-sol/cesta-1440.json), [C-V](./evidence/gpt-6-sol/cesta-results-1440.json). | **Přístupná adaptace:** pro menší bílý text použít tmavší zelenou např. `#00852c` (4,78:1), alespoň 12–14px u kompaktních cen, viditelný 3px focus ring. Nedostupnost vysvětlit textem a `disabled`. | Stejná přístupná adaptace napříč zadáním i výběrem; disabled porovnání ponechat funkčně, ale doplnit čitelný důvod. Neprohlašovat selected/disabled za WP převzatý vzor. | P1 |
| WP-P/K hlavička `#fcfcfc`, patka `#003b71`; [WP-P](./evidence/gpt-6-sol/wp-surfaces.json). | Ú-P patka `#edf2f7`, hlavička zůstává světlá; [Ú-P](./evidence/gpt-6-sol/uraz-1440.json). | C-Z patka `#17324f`, hlavička bílá/97 %; [C-Z](./evidence/gpt-6-sol/cesta-1440.json). | Patku přiblížit navy `#003b71`, ale cenu za to nesmí platit čitelnost drobných údajů; hlavičku sjednotit na `#fcfcfc`. | Patku přebarvit z `#17324f` na `#003b71` a hlavičku na `#fcfcfc`; vlastní obsah a navigaci zachovat. | P2 |

## Návrh tokenů pro implementační iteraci

| Token / role | Hodnota | Původ a status |
|---|---|---|
| `--brand-navy` | `#003b71` | WP-P `h1.title`, WP patka — **měřeno** |
| `--brand-navy-text` | `#002e5f` | WP-H sekundární text a obrys `.moreBlogInside` — **měřeno** |
| `--brand-heading` | `#03407c` | WP `h2.format-title` — **měřeno** |
| `--brand-red` | `#f42534` | WP `.format-title::after` — **měřeno** |
| `--canvas` / `--quiet-surface` | `#fcfcfc` / `#f2f4f7` | WP `body` / kategorie a citace — **měřeno** |
| `--cta-green-wp` | `#00b53b` | WP-P produktová akce — **měřeno, jen referenční** |
| `--cta-green-accessible` | `#00852c` | **adaptace** pro menší bílý text, 4,78:1 vůči bílé; nenazývat přesnou WP barvou |
| `--radius-control` / `--radius-surface` | `8px` / `15px` | WP-P CTA / WP-H kategorie — **měřeno**, mapování na formuláře je adaptace |
| `--section-rule` | `100px × 2px`, `#f42534` | WP `h2.format-title::after` — **měřeno** |
| `--form-border` / `--focus-ring` | jemný 1px neutrální / 3px kontrastní | **adaptace**: WP formulářový border ani dostupný fokus nedokládá |

Font systém držet jako Montserrat s rolovým měřítkem: produktový hero 64/42 a 600; vnitřní h1 je adaptované měřítko podle článku, sekce 32/28 a 600–700, text 18/27. Při redukci pro hustý kalkulátor zachovat čitelný line-height a sémantický pořádek nadpisů. Značkové akcenty nemají převzít význam chybové či úspěchové hlášky jen podle barvy.

## Pořadí realizace a přejímka

1. Založit v **každém prototypu zvlášť** tokeny navy, plochy, typografie a rolí CTA; první vizuální zkouška na 1440/375 bez změny průchodu. Zelenou přístupnou adaptaci jasně odlišit od přesné hodnoty WP.
2. Sjednotit primární postupové akce a typografickou hierarchii. U úrazu zvlášť rozlišit velké kroky od drobných tlačítek v cenovém přehledu; u cesty rozlišit hero, výsledky a názvy plánů.
3. Upravit červené linky podle sekční role, potom plochy, stíny, border a radius. Interaktivní selected/disabled/modaly specifikovat jako vlastní adaptace a vizuálně přezkoušet ve skutečných stavech.
4. Znovu měřit default/hover/focus/active/disabled na hotové iteraci, včetně kontrastu a 375px mobilního kroku. Ověřit stejné informace, tlačítka, validace, částky, cenu, průchod a dostupnost dokumentů; žádný zdrojový kód WordPressu nepřenášet.

**Meze:** WordPress zde neposkytl doložený selected, disabled, kalkulačkový modal ani platební vzor. Tento audit neprováděl fyzický telefon, Safari, kompletní regresní test ani skutečné sjednání. Závěry se opírají o uvedené veřejné URL, computed JSON a snímky z izolovaného Chrome; nejde o potvrzení aktuálnosti produktů, částek či cen.