Původní Markdown

Nezávislý audit stylopisu vůči živému WordPressu — GPT‑5.6 Sol

Datum měření: 28. 10. 2026 Posuzované prototypy:

• úraz: https://devel.kingux.cz/cmp_uraz/ferda-0.11.1/index.html
• cesta: https://sldevel.ceskepojisteni.cz/Tests/Standa/CePoTravelNextV19/index.php

Jediná vizuální autorita:

• WordPress domovská stránka: https://www.ceskepojisteni.cz/
• skutečný produktový odkaz z domovské stránky: https://www.ceskepojisteni.cz/pojisteni-cizincu/
• skutečný produktový odkaz z domovské stránky: https://www.ceskepojisteni.cz/pojisteni-dopravcu/

Shrnutí

Největší společný nesoulad není v logu nebo ve fontové rodině, ale v přiřazení vizuálních rolí. Oba prototypy skutečně vykreslují vlastní webový Montserrat, používají základní tmavě modrou blízkou WordPressu a mají červený akcent. WordPress však dává hlavní akci od prvního snímku zeleně, bez gradientu, s rohem 8 px; úraz začíná tmavě modře a až po hoveru přepne do jiné zelené, zatímco cesta má zelenou jen na prvním „Porovnat nabídky“, ale vlastní výběr nabídky převádí do tmavého modrého gradientu.

První sjednocující zásah proto má být rolový, nikoli plošný: hlavní akce každé obrazovky zelená, sekundární akce bílé/tmavě modré, textové akce bez výplně. Poté následuje typografie a linky. WordPress má produktový hero 64/83,2 px, 600 a na mobilu 42/54,6 px, 600; sekční nadpis má 32/35,2 px, 600 a na produktové mobilní stránce 28/30,8 px, 600. Úraz používá pro hlavní krok 34/41,48 px, 700 a mobilně 25/30 px, 700; cesta má hero 58/62,64 px, 500 a mobilně 36/38,88 px, 500, výsledkové h1 dokonce 50/59 px, 500. Hierarchie je tedy v úrazu příliš tučná a na mobilu drobná, zatímco výsledkový nadpis cesty je na desktopu zbytečně dominantní.

WordPressová nadpisová linka je stabilní, krátká a měřitelná: 100 × 2 px, #f42534. Úraz má 88 × 1 px; cesta používá v hlavní formulářové kartě plnou 2px červenou spodní hranu přes šířku 679 px. Oba prototypy mají značku, ale ne stejný systém.

Karty, formulářová pole, selected/disabled a modaly WordPressové vzorky přímo nedokládají. Nesmí se proto autoritativně převzít z jednoho prototypu do druhého. WordPress dokládá jen dvě užitečné geometrické role: akční roh 8 px a jednoduchou domovskou kategorii s povrchem #f2f4f7, rohem 15 px, bez borderu a stínu. Nabídkové tabulky a dialogy obou kalkulaček jsou dále adaptační komponenty.

Metodika, rozsah a limity

Měření

• Vlastní proces Chrome/Playwright a vlastní dočasný persistentní profil; po auditu byl prohlížeč uzavřen a profil odstraněn.
• Viewporty přesně 1440 × 900 a 375 × 812.
• Před prvním goto byla pro všechny stránky registrována blokace všech metod kromě GET, HEAD, OPTIONS.
• Marketingový Google Tag Manager byl blokován. U WordPressu nebyly povoleny marketingové cookies; ovládací prvek „Povolit pouze nezbytné cookies“ byl použit, pokud byl zobrazen.
• Cestovní prototyp se dvakrát pokusil o POST .../api.php; oba požadavky byly blokovány. Nabídky se přesto vykreslily z dostupného fallbacku. Neproběhlo sjednání, chat, platba ani odeslání kontaktního formuláře.
• Každý interaktivní vzorek byl měřen normálně, po focusu a po ustálení hoveru 700 ms. U ::before a ::after byly uloženy stejné computed vlastnosti jako u prvku, včetně content, rozměru, pozadí a hran.
• Skutečně vykreslené fonty byly zjištěny přes Chrome DevTools Protocol CSS.getPlatformFontsForNode, nejen přes deklarované font-family. Fonty i obrázky byly před odečtem vyčkány přes document.fonts.ready a decode().
• Reprezentativní stavy: WordPress domovská stránka a dvě produktové podstránky; úrazové nabídky, selected/unselected riziko, disabled nabídka, detailový dialog, doladění a osobní formulář; cestovní vstupní formulář, výsledky s 22 nabídkami a modal detailu nabídky.

Rozlišení tvrzení

• Fakt = hodnota skutečně naměřená v uvedeném URL, viewportu a selektoru.
• Interpretace = přiřazení vizuální role nebo vysvětlení dopadu.
• Návrh = konkrétní změna. Kde WordPress daný stav nedokládá, je návrh výslovně označen jako adaptace / nedoloženo WP.

Limity

• Headless Chrome na Windows; žádný fyzický telefon, Safari ani WebKit.
• WordPressové produktové stránky odkazují ze zeleného CTA mimo WordPress na samostatný srovnávač. Tento externí srovnávač nebyl použit jako autorita. Proto WordPress nedokládá vzhled inputů, selectů, nabídkové tabulky, selected/disabled ani modalu.
• Audit je vizuální a čtecí. Neověřuje serverové API, platbu, sjednání ani obchodní správnost modelových dat.
• Nenavrhuji kopírovat WordPress runtime, HTML, CSS, JS nebo obrázky; cílem jsou znovupoužitelné lokální tokeny a rolové úpravy ve stávajícím vanilla HTML/CSS/JS.

Srovnávací tabulka a doporučení

Přístupnostní rozpor autority

Naměřená kombinace WordPress CTA white / #00b53b má kontrast 2,74:1. Nesplní 4,5:1 pro běžný text a nedosáhne ani 3:1 pro velký text. Přesné vizuální kopírování této kombinace proto nedoporučuji pro malé flow buttony. V tabulce navrhuji transparentně označenou přístupnostní adaptaci: tmavší zelenou pro samotné buttony (např. #00852c, naměřený výpočet 4,78:1 s bílou) a přesný #00b53b ponechat pro dekorativní/status akcenty. Alternativou je změnit text na dostatečně tmavou barvu a znovu změřit konkrétní pár; navy #003b71 na WP zelené má jen 4,12:1, takže pro běžný malý text také nestačí.

Červená #f42534 na bílé má 4,07:1. Je vhodná pro naměřené velké/tučné nadpisy a 2px dekorativní linku, ne automaticky pro drobný běžný text.

Přesné URL a selektory důkazů

Úplný strojový odečet je v computed-styles.json. Doplňující strom povrchů a plná formulářová linka jsou v supplemental-styles.json. Samostatné ověření rodičovské linky výsledků na obou šířkách je v results-heading-parent.json. Inventář skutečných stavů/selektorů je ve state-inventory.json a navigační původ WordPress URL v discovery.json.

Vizuální důkazy:

• WordPress: home desktop, home mobil, cizinci desktop, cizinci mobil, dopravci desktop, dopravci mobil
• úraz: nabídky desktop, nabídky mobil, dialog desktop, dialog mobil, doladění desktop, osobní údaje mobil
• cesta: vstup desktop, vstup mobil, nabídky desktop, nabídky mobil, modal desktop, modal mobil

Návrh společných tokenů — pouze to, co WordPress dokládá

:root {
  --brand-font: "Montserrat", sans-serif;

  --brand-navy-hero: #003b71;
  --brand-navy-section: #03407c;
  --brand-navy-subtitle: #002e5f;
  --brand-red: #f42534;
  --brand-green-wp: #00b53b;
  --brand-text: #231f20;
  --brand-page: #fcfcfc;
  --brand-surface-soft: #f2f4f7;

  --brand-radius-action: 8px;
  --brand-radius-card: 15px;

  --brand-line-width: 100px;
  --brand-line-height: 2px;

  --brand-hero-size: 64px;
  --brand-hero-line: 83.2px;
  --brand-hero-weight: 600;

  --brand-section-size: 32px;
  --brand-section-line: 35.2px;
  --brand-section-weight: 600;
}

@media (max-width: 767px) {
  :root {
    --brand-hero-size: 42px;
    --brand-hero-line: 54.6px;
    --brand-section-size: 28px;
    --brand-section-line: 30.8px;
  }
}

Do společných WP tokenů záměrně nezařazuji input border, selected/disabled, focus ring, nabídkový card shadow ani modal radius. Tyto role WordPressové vzorky nedokládají. Prototypy je mohou sdílet až jako vlastní calculator-adaptation vrstvu, nikoli vydávat za WordPress pravidlo. Stejně tak --action-primary-accessible: #00852c je doporučená přístupnostní adaptace, ne naměřený WP token.

Implementační pořadí — úraz

1. P0: akční role. Převést hlavní „Vybrat/Pokračovat/Uložit“ z navy na společnou zelenou primary roli; r8; odstranit navy→světle zelený hover skok. Zároveň zavést přístupnou tmavší zelenou pro malé bílé texty.
2. P0: typografie a linka. Krokové h1 32/35,2/600 desktop a 28/30,8/600 mobil; červená linka 100×2 #f42534; sekční h2 přestat vizuálně vydávat za 14px label.
3. P0: focus. Zachovat již dobrý 3px focus u nabídky a rozšířit jej na všechny buttony, inputy, selecty, dialogové akce a zavírání.
4. P1: geometrie. Akce r8, input/select r8, jednoduché soft karty r15. Porovnávací řádky a selected karty ponechat jako calculator adaptation.
5. P1: povrchy a border noise. Dlouhé texty a hlavní povrch přiblížit WP; u jednoduchých voleb použít #f2f4f7 bez stínu, ale zachovat hranice tam, kde pomáhají srovnání.
6. P1: stavy. U disabled zachovat existující slovní důvod i nativní stav; selected sjednotit na jeden povrch + border + ikona/text. Modal měnit až po rozhodnutí calculator-adaptation tokenů.
7. Regrese: bez změny rozložení/výpočtů ověřit nabídky, rizikový popup, doladění, osobní formulář, review a celé demo na 1440×900/375×812, klávesnici, focus a reduced motion.

Implementační pořadí — cesta

1. P0: jedna primary role. Zrušit tmavý gradient na nabídkovém „Vybrat“ a použít stejnou zelenou primary roli jako „Porovnat nabídky“; sekundární „Detail“ ponechat outline r8.
2. P0: výsledková hierarchie. #results-count-heading stáhnout z 50/59 na 32/35,2/600; mobil 28/30,8/600. Formulářový h2 28/30,8/600. Hero naopak zvětšit na WP 64/83,2/600 a mobil 42/54,6/600.
3. P0: linky a focus. Existující výsledkovou .page-heading::after 100×2 zachovat a pouze sjednotit její červenou na #f42534; nepřidávat druhou linku k h1. Plné 2px hrany ponechat jen jako strukturální oddělovač. Zavést viditelný focus pro všechny buttony, ne jen pro pole.
4. P1: karty. R14 sjednotit na WP card r15 a výrazný nabídkový stín ztlumit/odstranit. Nezměnit kartový flow na úrazovou tabulku.
5. P1: typ a body. Dlouhý text zvednout, metadata ponechat kompaktní. Sjednotit #f42434/#00b53c na přesné WP tokeny, ale primary text řešit přístupnou adaptací.
6. P2: modal a selected/disabled. Modal a bottom sheet zachovat jako adaptační komponentu; desktop r15, mobil horní r18. Selected/disabled definovat ve vlastní calculator vrstvě a neodvozovat z úrazu.
7. Regrese: bez změny výpočtů ověřit vstupní formulář, nabídky, detail nabídky, compare/select stavy a celé demo na obou rozměrech; síťové POST dál nesmí být součástí vizuálního testu.

Kontrolní závěr

Oba prototypy mohou působit jako jedna značka bez vzájemného kopírování layoutu: sdílet naměřený WordPress font, přesné navy/red/green tokeny, hierarchii nadpisů, krátkou 100×2 linku a akční/card radius 8/15. Úraz potřebuje hlavně přestat skrývat primary zelenou až do hoveru a zmenšit váhu nadpisů; cesta potřebuje odstranit gradient z výběru nabídky, srovnat hero/výsledkovou typografii a ztišit stíny. Form fields, nabídky, selected/disabled a modaly zůstávají přiznanou calculator adaptací, protože WordPressová prezentace pro ně neposkytuje autoritativní vzor.

Původní Markdown

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.

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, cíleném měření WordPressu, přehledu povrchů a ověřených odkazech menu.

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í); 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í). Č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í.

Návrh tokenů pro implementační iteraci

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.

Původní Markdown

Nezávislý audit GPT-6.1 Sol — oba prototypy vůči živému WordPressu

Datum: 28. 10. 2026. Model a úsilí: GPT-6.1 Sol, Velmi vysoká. Rozsah: vizuální analýza, bez implementace. Jedinou autoritou pro cílový vzhled je živá prezentace České pojištění. Úraz v0.11.1 i cestovní V19 jsou posuzované prototypy. Doména ani část cesty z cestovního prototypu nedělá stylovou autoritu.

Výsledek

Oba prototypy správně navazují na značku použitím Montserratu, tmavé modré, červených akcentů a maskota. Cestovní prototyp však není hotovým přepisem vzhledu WordPressu. Jeho lehké titulky 500, tmavý gradient tlačítek Vybrat, silné stíny karet a část modrých povrchů se od živého webu liší. Úrazový prototyp má navíc jiné pozadí stránky, modré hlavní CTA s proměnou na zelenou při hoveru, velmi drobné sekční nadpisy a linku pod h1 v jiném rozměru i roli.

Největší společný přínos mají: pojmenovat role CTA a titulků, zavést z WordPressu správné váhy písma a role barev, odstranit zbytečné stíny a sjednotit povrchy. Není vhodné slepě převést marketingovou velikost CTA 84 px do každé cenové buňky nebo nastavit všem nadpisům 64 px. Takové zmenšení pro hustou kalkulačku je adaptace, kterou je potřeba uvést zvlášť od naměřeného pravidla.

Za zvlášť důležité považuji dva detaily: zelená hlavního produktového CTA je na WordPressu #00b53b, zatímco zelená v produktové dlaždici při hoveru je #51b24e; nejde o výchozí a hover stav stejného tlačítka. Sekundární tlačítko „Navštívit blog“ maluje rodič .moreBlogInside, nikoli jeho prázdný překryvný odkaz. Měření samotného anchoru by vedlo k chybným závěrům o barvě, borderu i rohu.

Metodika, rozsah a omezení

Použil jsem dovednost ui-visual-composition: nejprve hierarchie a úloha komponenty, potom typografie, barvy, seskupení, plochy a stavy. Četl jsem projektové pokyny a aktuální zadání v PROJECT.md; starý report reports/stylopis-2026-10-28/ ani cizí nové reporty či evidenci jsem neotevřel. Starší závěry uvedené v projektovém zápisníku nejsou podkladem cílových hodnot tohoto posudku.

Vlastní proces Playwrightu používá Chrome headless a vlastní kontext bez sdílení CUA, profilu nebo relace s jiným auditorem. Ještě před prvním goto je na celém kontextu zablokována každá HTTP metoda mimo GET, HEAD a OPTIONS. U WordPressu jsem zvolil pouze nezbytné cookies. Nic jsem neodesílal do skutečného formuláře, nesjednával, neplatil a neotevíral chat ani AI poradenství.

Veřejné podstránky byly nejprve objeveny v odkazech živé home: záznam objevení. Poté jsem prohlédl home, povinné ručení, pojištění cizinců a kontakt, desktop 1440 × 900 a mobilní viewport 375 × 812. Produkt povinného ručení zobrazuje neúplný obsah; produkt cizinců poskytuje použitelný opakovaný vzor hlavního CTA, obsahových nadpisů a rozbalovacích bloků. Kontaktní stránka poskytuje vnitřní h1 a informační plochu. Nenašel jsem na těchto stránkách odpovídající veřejný vstupní formulář, kalkulační tabulku, výběr frekvence placení ani pojistný detailový modal.

Úraz jsem prohlédl v profilu s ukázkovými daty, ve výběru krytí a cen, v editoru rizika a v doladění nabídky PVZP včetně frekvencí. Cestovní prototyp jsem prohlédl na vstupu, ve výsledcích s nabídkami, v detailu nabídky, v údajích pro smlouvu a v rekapitulaci. K dalším obrazovkám cestovního prototypu jsem přešel jeho vlastním „Přehledem obrazovek“; nevyvolával jsem reálné odeslání. Přepnutí obrazovek samo zkouší API POST, které bylo zablokováno: záznam. Zablokované požadavky WordPressu jsou převážně analytické. Síťové blokace znamenají, že audit netestuje backend a platnost obchodních dat.

Computed styles zahrnují backgroundImage, backgroundSize, backgroundPosition, všechny jednotlivé bordery, stíny, outline, typografii a pseudo-elementy ::before/::after. Hover je měřen po 550 ms. Fokus se ověřuje klávesnicovým Tab/Shift+Tab a zaznamenává se také skutečné focused a focusVisible; neoznačuji za fokus stav, kdy ovládací prvek klávesnicí fokus nedostal. U finálních cílených měření CDP CSS.getPlatformFontsForNode používá přesně měřený viditelný uzel, včetně skutečných použitých vah. Nezaměňuji CSS deklaraci font-family za potvrzení vykresleného fontu.

Mobil znamená emulovaný viewport Chromu s myší a klávesnicí, nikoli fyzický telefon či Safari. Fullpage snímky dlouhých výsledků jsou pro celkovou kompozici; pro rozměry fixních dialogů rozhodují JSON geometrie a příslušný viewport. Nejde o úplný funkční či regresní test kalkulaček. Všechny browser procesy byly po měření uzavřeny v finally. Uloženy jsou jen vlastní měřicí skripty, popisná data/computed JSON a snímky; žádné celé cizí HTML, CSS ani JS.

Živý WordPress: doložené role

Značení dále: F = naměřená fakta, N = doporučení, A = adaptace bez stejné role ve WordPressu. Priorita P1 má největší dopad na podobnost, P2 sjednocuje komponenty, P3 řeší detaily. Přesné hodnoty uvádím v CSS px.

Fonty F: na WP CDP potvrzuje vlastní Montserrat. Interní familyName z fontových souborů je „Montserrat Thin“, ale postScriptName rozlišuje Montserrat-Thin, ...-Medium, ...-SemiBold, ...-Bold a ...-ExtraBold. To neznamená, že všechny texty mají váhu Thin. Na WP jsou skutečně vykreslené váhy 400, 600, 700 a 800 podle role; na cestovním hero skutečně Medium/500. Úrazové 650 se v měřených CTA vykresluje názvem Bold. Oba prototypy u samostatného znaku šipky místy používají Arial s jediným glyph; český text je Montserrat. Není podklad pro tvrzení, že některá celá kalkulačka padá na Arial. Důkaz například cestovní cílený vstup, nabídky, úrazové CTA.

Co upravit v každém prototypu

V buňkách „změna“ jde o doporučení N; písmeno A výslovně označuje chybějící odpovídající roli. Zdrojové selektory jsou vždy z konkrétní živé stránky. Tabulka nevyvozuje pravidla z cestovního prototypu.

WordPress dokládá hlavní vstup do kalkulace, nikoli tlačítko dalšího kroku průvodce. Přenos stejné vizuální akční rodiny na „Pokračovat“ je také adaptace role. Je to nejbližší doložený hlavní vzor značky, nikoli důkaz existence oficiálního WordPress wizardu.

Aktuální hodnoty obou prototypů v tabulce jsou podloženy úrazovými stavy, úrazovým mobilem, povrchy profilu, doladěním, úrazovým dialogem desktop / mobil, cestovními stavy, vstupem, nabídkami, nabídkami mobil, údaji, rekapitulací a cestovním dialogem desktop / mobil.

Společné cílové tokeny — pouze hodnoty doložené na WP

Názvy tokenů jsou návrh pro budoucí implementaci; hodnoty pocházejí z WP. Nejde o kopii jeho CSS. Pozor na různé modré a červené role: živý web není dokonale sjednocený. Níže zachovávám rozdíly místo předstírání jednoho univerzálního odstínu.

Záměrně chybí: oficiální token vstupního borderu, focus-ringu, validační červené, povrchu vybraného stavu, opacity zakázaného stavu, rohu modalu, výšky tabů, cenového fontu a frekvenčního badge. Stejné role ve zkoumaném WordPressu nejsou doložené. Není správné tyto mezery vyplnit hodnotami z cestovního prototypu a nazvat výsledek stylopisem WP.

Stavy a přístupnost: kde zdroj nekopírovat doslova

F — hlavní CTA: backgroundColor #00b53b a bílý text se po 550 ms nemění; backgroundImage odkazuje na ikonu kalkulačky. Samotné „backgroundImage není none“ tedy nedokazuje gradient. Spodní .calculate-button používá stejnou zelenou, ale na mobilu se kvůli paddingu a zalomení zvětší na 112 px; není správné z toho odvodit obecný mobilní button token 112.

F — secondary: .moreBlogInside má gradient to top, #f2f4f7 50%, transparent 50%, background-size:100% 200%. Hover mění background-position z 50 % 0 % na 50 % 100 %, proto je optickým výsledkem jednolitá světle šedá výplň. Modrý text/border a r15 zůstávají. Link přes celou plochu má prázdný text, vlastní červenou barvu a r0; vizuální text a box dědí rodič. Adaptace má vytvořit normální sémantické tlačítko/odkaz s těmito vizuálními vlastnostmi, nemusí kopírovat podivnou překryvnou konstrukci.

F — navigační dlaždice: .hp-links .body má podobný posuvný mechanismus, ale druhá polovina je #002e5f. Hover rodiče přebarví plochu a název na bílou a ukáže zelené CTA #51b24e,18/400, r8. To je jiný vzor než produktové zelené CTA a jiný než šikmý tmavý gradient cestovního Vybrat. Důkaz desktop / mobil.

F — fokus a klávesnice: produktové CTA sice dostává focusVisible:true, ale outline má none 0 a nezískává viditelný alternativní ring. Spodní CTA při fokusu dokonce změní text na #f42434 na zelené ploše. Rozbalovací .open-blocks .name je h3 a skutečný klávesnicový fokus během měření nedostalo. Toto nejsou vhodná pravidla pro funkční kalkulačku. N/A: zachovat sémantické button/summary a viditelný ring zlepšený oproti zdroji; jeho přesná šířka/barva není doložena WP.

F — kontrast: z naměřených sRGB barev vychází bílá/#00b53b přibližně 2,74:1 a bílá/#003b71 přibližně 11,27:1. Výchozí WP zelená s bílou nesplní ani 3:1 pro velký text. N/A: pro věrnou vizuální kopii uvést tento dluh; pro použitelnou produkční adaptaci vybrat a znovu změřit tmavší akční zelenou nebo jinou vyhovující kombinaci. Žádný vlastní tmavší odstín nezařazuji do tabulky „tokeny z WP“. Červenou #f42534 na bílém lze při malém textu také posoudit zvlášť (přibližně 4,07:1); není automaticky univerzální textovou chybovou barvou.

Pořadí implementace

Úraz

1. Zavést oddělené role cta-main, cta-secondary, title-inner, title-section, surface-info; neprovádět globální změnu .button a všech h2 jedním pravidlem. Hlavní postupové CTA sjednotit se zeleným WP vzorem, kompaktní nabídky výslovně řešit jako A.
2. Sjednotit pozadí stránky #fcfcfc a šedé informační plochy #f2f4f7/r15. Zachovat bílé vstupy a čitelné seskupení formuláře; odstranit jen nadbytečné vnořené bordery.
3. Povýšit pracovní titulky a skutečné sekce podle odpovídajících WP rolí; odstranit univerzální linku 88 × 1 pod h1. Nezaměnit popisek data či frekvence za velký sekční titul.
4. Sjednotit secondary, typografii detailů a lokální ikonky. U dialogu aplikovat barvy/textové role; spodní panel, fokus, Escape a vnitřní scroll ponechat funkční. Vybraná frekvence, zámky, připojištění a jejich data musí zůstat zřetelná.
5. Znovu ověřit 1440/375, dlouhé české názvy, pět nabídek, výběr rizika, zavření popupu, klávesnici a celý stávající demonstrační průchod. Flow a cenové výpočty nezměnit.

Cestovní

1. Rozlišit vstupní hero od vnitřních titulků: hero 600 / 800 akcent, vnitřní 800, sekce 600. Neaplikovat dnešní 500 jako globální styl značky. Odstranit vlastní záporný tracking vnitřních h1.
2. Sjednotit hlavní CTA na zdrojové #00b53b/600/r8, odstranit nedoložený navy gradient a zdvihy při hoveru/stíny. Secondary přiblížit skutečně malované WP ploše #002e5f/r15/600.
3. Odstranit dlouhou červenou linku za vstupním formulářovým titulkem; krátké 100 × 2 používat u příslušných sekcí. Interní nadpisový blok s krátkou linkou uvést jako A, protože vnitřní h1 na WP ji nemá.
4. Zploštit hlavní formulářovou kartu a trvalé stíny všech nabídek. Modré plochy pozvánky, tabů a toolbaru sjednotit na neutrální barevnou rodinu WP; vybrané a doporučené stavy zachovat explicitně.
5. Sjednotit detail nabídky, údaje a rekapitulaci stejnými rolemi. Přitom opravit vlastní mobilní nesymetrii detailu, ponechat sémantické ovládání a viditelný fokus. Ověřit vstup → výsledky → detail → údaje → rekapitulaci bez reálného sjednání či platby.

Společná knihovna má sdílet měřené barvy a role, nikoli WordPress runtime, pluginy ani zkopírované zdrojové soubory. Zavedení nových vzhledových pravidel nesmí měnit výpočty, formulářová data ani současnou posloupnost kroků.

Výběr vizuálních důkazů

• WP home desktop, produkt desktop, kontakt desktop.
• WP produkt mobil, hlavní CTA a klávesnicový fokus desktop.
• Úraz profil desktop, úraz profil mobil, doladění desktop, mobilní editor rizika.
• Cestovní vstup desktop, mobil, výběrové CTA se skutečným gradientem, údaje, rekapitulace.

Měřicí základ je reprodukovatelný vlastními skripty measure.cjs, wp.cjs, wp-detail.cjs, wp-controls-final.cjs, prototypes.cjs, travel-stages.cjs a final-measure.cjs. Starší discovery snímky zobrazují i cookie lištu; pro cílová pravidla mají přednost přesná cílená měření. Vedlejší měřicí omyly selektorů byly opraveny ve vlastních skriptech; report nepoužívá chybné chybějící selektory jako důkaz absence vizuálního vzoru.

Místní odkazy, parsování celé vlastní JSON evidence a syntaxe vlastních skriptů byly ověřeny: výsledek kontroly.

Původní Markdown

Nezávislý posudek vizuálního stylu: WordPress → úraz a cesta

Autor: GPT-6.1 Terra, xhigh · Datum měření: 28. 10. 2026 · Rozsah: vizuální analýza, nikoli úprava kalkulaček.

Výsledek

Oba prototypy už používají Montserrat a modrou blízkou WordPressu, ale přímé sjednocení všech prvků na jediný styl by neodpovídalo skutečnosti. Na živém WordPressu se liší role hero, článkového titulku, sekce, karty i odkazu. Primární cíl je přiblížit rozpoznatelnou typografii, modrou/červenou a střídmou práci s linkou; ovládací prvky specifické pro kalkulačky přizpůsobit samostatně, protože na prohlédnutých stránkách nemají přímý ekvivalent.

Největší praktický rozdíl je v primárních akcích: úraz má modrý základ, cesta zelený základ, zatímco jediná zde doložená zelená WP akce Srovnat pojištění je odkaz v marketingové kartě zobrazený při hoveru. Neprokazuje univerzální tlačítko pro celý formulář. Přímé převzetí bílé na změřené zelené má navíc nízký kontrast. Navrhuji oddělit naměřený vzor od přístupné adaptace a nerozbít existující průchod ani výpočty.

Metodika a hranice

• Živá autorita: domovská stránka WordPressu, z jejích skutečných odkazů objevené povinné ručení a článek. Seznam objevených odkazů. Posuzované weby: úraz v0.11.1 a cestovní V19.
• Samostatný headless Chrome/Playwright, desktop 1440 × 900 a emulovaný mobil 375 × 812 CSS px. Po načtení document.fonts.ready; snímky celé stránky a computed styly prvků, rodičů a ::before/::after, včetně backgroundImage, hran, stínu a outline. Snímky jsou vizuální doklad, JSON obsahuje hodnoty a selektory. Hover byl odečten po nejméně 800 ms; pro fokus se používalo Tab/Shift+Tab a zvláštní klávesnicový průchod. Stav _focus u WP CTA neprokazuje fokus CTA: v pokusu po odjezdu myši aktivním prvkem zůstalo body, takže ho jako důkaz fokusu CTA nepoužívám.
• WP: pouze nezbytné cookies. Před první navigací každého kontextu byla routou blokována každá metoda kromě GET, HEAD a OPTIONS. Neodesílal jsem smlouvy, platby ani chat. Úraz: profil s ukázkou, výběr rizik, editor trvalých následků, konfigurace vybrané nabídky. Cesta: vstupní formulář, navigace na výsledky, porovnání a rekapitulaci, ukázkový detail nabídky. Skoky na obrazovky jsou vizuální inspekce, nikoli důkaz celého skutečného průchodu nebo správnosti dat.
• Selektory níže identifikují konkrétní změřený prvek, ne obecnou specifikaci WordPressu. „Měření“ je odečet computed CSS; „interpretace“ je srovnání role; „návrh“ je nová implementační volba. Plošné přenášení CSS nebo běhového prostředí WordPressu není součástí zadání. Přechodové a personalizované stavy, další stránky, fyzický telefon, Safari a produkční workflow nebyly plošně testovány.

Porovnání podle role

Hodnoty se vztahují k uvedeným příkladům. P1 = nejvyšší dopad na čitelnost a konzistenci, P2 = důležité doladění, P3 = následná úprava. Odkazy na data a obrázky jsou níže.

Přístupnost a interpretace

Kontrast bílá / WP zelená #51b24e je vypočten přibližně 2,68 : 1, bílá / cestovní #00b53c 2,74 : 1. U běžného textu jsou pod obvyklým cílem 4,5 : 1; samotná velikost odkazu 18 px při váze 400 není dostatečným důvodem jej považovat za velký tučný text. Návrh, nikoli WP token: tmavší zelená #00852c s bílou má přibližně 4,78 : 1; alternativou je tmavé písmo na značkové zelené. Otestovat kontrast i skutečný hover, disabled a fokus na konkrétním podkladu. Červená #f42534 na bílé má přibližně 4,07 : 1, proto ji nevolit automaticky pro drobné běžné texty.

Na WP a.link v kartě bývá prázdná překryvná kotva: viditelný rám a barvu maluje rodič. Podobně sekundární blogový odkaz sám nemá hranu ani pozadí; obojí má rodič. To je důvod, proč se hodnota backgroundColor samotné kotvy nemá vydávat za barvu výsledného tlačítka. Zachovat skutečný klávesnicový fokus prototypů je přístupnější než kopírovat změřené chybějící WP outline.

Návrh tokenů odvozených pouze z WP

Jde o inventář naměřených hodnot a jejich navržené názvy, nikoli tvrzení, že WP tyto proměnné sám používá. Pro prvky bez ekvivalentu nové tokeny níže nevymýšlím.

/* Přiřazení podle konkrétní role; nikoli globální přepsání všech prvků. */
--wp-hero-ink: #003b71;
--wp-section-ink: #03407c;
--wp-card-ink: #002e5f;
--wp-section-accent: #f42534;
--wp-card-surface: #f2f4f7;
--wp-card-radius: 15px;
--wp-secondary-border: #002e5f;
--wp-card-cta-hover-surface: #51b24e;
--wp-card-cta-radius: 8px;
--wp-section-rule-width: 100px;
--wp-section-rule-height: 2px;
--wp-family: Montserrat, sans-serif;

Hero 64/42 px a 600; článek 50 px/800 v obou měřených velikostech; sekce 32 desktop a 24 nebo 28 mobil / 700; název článkové karty 24 / 600. Nesjednocovat tyto naměřené role do jednoho h1/h2 tokenu. Tmavší zelená #00852c a úprava fokusu jsou výslovně návrhy přístupné adaptace, ne hodnoty WordPressu.

Ověřitelné důkazy

• WP domov desktop data, desktop obraz, mobil data, mobil obraz; produkt desktop, mobil; článek desktop, mobil.
• WP hover CTA a 100 × 2 pseudo-linka data, obraz; sekundární rodič při hoveru data. Skutečný klávesnicový průchod desktop, mobil; jednotlivé CTA nebylo při tomto průchodu doloženo jako aktivní prvek.
• Úraz profil desktop, mobil, obraz mobil; hover, fokus; rizika desktop, mobil; popup desktop, mobil; konfigurace desktop, mobil.
• Cesta vstup desktop, mobil; hover, fokus; výsledky desktop, mobil; porovnání desktop, mobil; rekapitulace desktop, mobil; detail desktop data, mobil data, mobil obraz.
• Reprodukovatelnost: měřicí skript, doplňkové stavy, klávesnice, popup cesty; soubory *_blocked.json zaznamenávají pokusy o blokované metody. Prohlížeče skripty ukončily.

Pořadí případné implementace

1. Nejprve vytvořit mapu rolí a textových vah pro oba weby; ověřit, že dlouhé nadpisy zůstávají čitelné na 375 px a že jejich zvětšení neposouvá hlavní akci mimo rozumný dosah.
2. Sjednotit značkové odstíny a vybrat kontrastní podobu primárních akcí. Zkontrolovat výběr nabídky jako samostatnou adaptaci a ověřit skutečné hover/fokus/disabled.
3. Krátké červené linky a hrany aplikovat jen podle hierarchie; porovnat přítomnost a rozměry na konkrétních obrazovkách obou webů.
4. Doladit karty, formulářová pole a dialogy jako adaptace, se zachováním označení výběru, scrollu a fokusu.
5. Opětovně ověřit desktop a mobil, dostupné kroky, dlouhé texty, popupy, klávesnici a úplné modelové průchody. Nedotýkat se výpočtů, údajů ani pořadí kroků.