Dealyo — style guide v0.4

Zakres i pierwszeństwo zasad

System opiera się na projektach wymienionych w REFERENCES.md. Rozróżniamy decyzje Daniela, elementy obecne w źródłach i różnice między projektami. Szablony social w katalogu social/ są propozycjami do oceny; nie mają jeszcze statusu zatwierdzonych układów.

Decyzje Daniela z 19.10.2026: pomarańcz wyróżnień #FE4A23; boxy bez zaokrągleń (radius 0). Mają pierwszeństwo przed historycznymi wartościami w CSS.

Paleta

#C53716 występuje lokalnie w kalkulatorze; nie jest drugim kolorem wyróżnień marki. Nie używać go zamiast podstawowego pomarańczu w nagłówkach. Inne szarości i kolory statusów pozostają lokalnymi rozwiązaniami projektów. Czytelność sprawdzać w konkretnym układzie; w razie problemu użyć grafitowego tekstu na jasnym tle, zamiast dodawać nowy kolor marki.

Typografia

General Sans jest głównym krojem. Treść: 400, nagłówki: 500, lokalne wyróżnienia: 600. W projektach obecna jest także waga 700; nie należy z niej robić domyślnej wagi nagłówków.

Techniczne etykiety i numeracja: systemowy monospace. W audycie --fc-mono to SFMono-Regular, Consolas, Liberation Mono, monospace; w prezentacji closerów --mono ma podobną rolę. Wersja 0.1 błędnie sugerowała wyłączność jednej rodziny.

Poniżej odczyt tokenów z dealyo-audyt-cloudflare/public/typography.css, nie uniwersalna skala wszystkich projektów. Przed wdrożeniem sprawdzić kaskadę CSS docelowej strony.

Tracking H1 −0,055 em; nagłówków −0,045 em; lead 0 (mobile −0,005 em); treści 0,01 em. Rozmiary ze strony nie są rozmiarami dla eksportu grafiki social.

Logo, narożniki, odstępy

Używać oryginalnych plików SVG. Nie przerysowywać znaku ani zmieniać proporcji. Nie ustanowiono liczbowego pola ochronnego — wcześniejsza reguła „wysokość D” była niepotwierdzonym dodatkiem.

Boxy: proste narożniki. To nie oznacza prostowania kół w ikonach, portretów ani zmiany gotowych ilustracji. W źródłach występują historyczne promienie 6/8/10 px; nie przenosić ich do systemu.

Nie ustanowiono wspólnej skali odstępów. Czerpać proporcje z konkretnego projektu referencyjnego i dopasować do formatu. Wcześniejsza skala 4–64 px była propozycją agenta, a nie zinwentaryzowanym standardem.

Grafiki i układ

Źródło: landing-usluga-1na1/references/graphics-style-2026-10-06/brief.md oraz istniejące ilustracje diagram-*.webp. Cienki grafitowy kontur, pomarańczowe akcenty, jasne wypełnienia, białe tło i delikatna zanikająca siatka. Formularze, rozmowy, kalendarze i przepływy mają wyjaśniać treść.

Cienkie ramki, linie podziału, duża typografia i jasne tło powtarzają się między projektami. Numeracja i monospace występują w audycie i prezentacji. Nie ustanowiono liczby węzłów diagramu, obowiązkowego kwadracika przy każdej etykiecie ani stałego zestawu kart.

Ciemne panele występują lokalnie na stronie głównej. Nie jest to dowód na zatwierdzony ciemny szablon publikacji. Usunięto taki szablon ze wzornika. Subtelne gradienty występują w źródłach — wcześniejszy bezwzględny zakaz też był nadinterpretacją. Stosować tylko na podstawie konkretnej referencji, nie jako nowy motyw.

Publikacje i język

Formaty, marginesy i skala typografii social pozostają do opracowania dla wybranych kanałów. Wersja 0.1 zawierała nowe propozycje kompozycji, a nie istniejące publikacje Dealyo; usunięto je z części referencyjnej.

Z instrukcji Daniela: prosty język odbiorcy, bez wymyślonych statystyk, opinii i obietnic. Zachować źródło i kontekst danych. Archiwalne hasło na stronie nie stanowi automatycznie aktualnej obietnicy oferty.

Brief dla agenta

Cel: [...]. Odbiorca: [...]. Kanał i format: [...]. Główna myśl: [...]. Potwierdzone materiały: [...]. Projekt referencyjny z REFERENCES.md: [...].

Przeczytaj ten plik i otwórz projekt referencyjny. Użyj oryginalnego logo, General Sans, pomarańczu #FE4A23 i boxów bez radius. Odtwarzaj rozwiązania, które rzeczywiście występują w referencji. Jeśli nowy format wymaga nowego rozwiązania, oznacz je jako propozycję. Sprawdź czytelność po pomniejszeniu i zgodność faktów ze źródłem.

Raporty i dalszy rozwój

Audyt ICD dodano jako referencję raportów klienta w REFERENCES.md. Zieleń widoczna w wynikach jest lokalnym kolorem znaczeniowym, nie nowym kolorem marki. Nie przenosić liczb klienta do szablonów. Lista brakujących modułów i proponowana kolejność: ROADMAP.md.

Biblioteka implementacyjna v0.3

Komponenty w components.html i szablony w templates/ są adaptacjami opisanych referencji. Wspólny library.css upraszcza ponowne użycie; jego odstępy służą temu zestawowi, nie ustanawiają uniwersalnej skali wszystkich materiałów. Decyzja Daniela: CTA na pomarańczowym tle #FE4A23 mają biały tekst i białą strzałkę. Dotyczy komponentów, szablonów stron oraz grafik reklamowych. Strzałka dziedziczy kolor tekstu; przyciski drugorzędne na jasnym tle zachowują grafitowy napis.

Pliki źródłowe i ich zastosowania: ASSETS.md oraz assets/manifest.json. Instrukcja kopiowania szablonu do samodzielnego projektu: START.md.

Publikacje v0.4

Na polecenie Daniela dodano trzy posty, karuzelę pięcioslajdową i trzy reklamy. Galeria: social/index.html. To nowe adaptacje stylu Dealyo, jawnie oznaczone jako propozycje. Status ten dotyczy kompozycji i przykładowych treści. Wymiary robocze i zasady edycji: social/EDITING.md.

Kontrola zgodności — CTA, ikony i linie

• CTA: biały napis na #FE4A23; strzałka to inline SVG Lucide ArrowUpRight z aktualnego audytu i landingu 1na1. viewBox="0 0 24 24", ścieżki M7 7h10v10 i M7 17 17 7, fill="none", stroke="currentColor", grubość 2, zaokrąglone końce i łączenia. W przycisku web ikona ma 24 × 24 px. Nie zastępować znakiem z fontu ani dodatkową strzałką z pseudoelementu.
• Kierunek ikony wynika z działania: CTA ukośnie w prawo, kolejny krok w prawo, pobranie w dół. Ta sama rodzina SVG; w grafikach skala odpowiada płótnu, bez zmiany geometrii.
• Obramowania kart i separatory: cienkie, jasnoszare 1 px #E7E7E7, tam gdzie występują w odpowiedniej referencji. Nie dodawać ciemnego obrysu na hover CTA, grubych ramek i pomarańczowych kresek jako ozdobników. Kontury oryginalnych ilustracji nie są obramowaniem karty.
• Usunięto dodane grube paski wyróżnień z landingu, raportu i karuzeli oraz obrysy checkboxów rysowane CSS. Pola formularzy mają jasne obramowania. Fokus klawiatury pozostaje widoczny.

Źródła: dealyo-audyt-cloudflare/public/index.html (CTA), hero-update.css (ikona 24 px), końcowa kaskada landing.css, firecrawl-ui.css (jasne karty i linie), typography.css (CTA 14/20 desktop, 16/24 mobile). Wcześniejsze stwierdzenie o grafitowym CTA w katalogu komponentów było błędem i zostało usunięte.

Konstrukcja strony i wzornika — decyzja 20.10.2026

Wzornik ma sam pokazywać architekturę stron Dealyo: jeden centralny kontener .ds-page-frame, maksymalnie 1240 px, z ciągłymi pionowymi liniami 1 px #E7E7E7 po obu bokach. W nim znajdują się nagłówek, sekcje, siatki boxów i stopka. Linie boczne pozostają także na telefonie; wnętrze dostosowuje szerokość i padding do ekranu.

Katalogi materiałów, projektów i propozycji prezentuj jako pełne prostokątne boxy: jasne tło, obramowanie ze wszystkich czterech stron, padding wewnętrzny, proste narożniki. Same kreski nad blokiem tekstu nie zastępują tej konstrukcji. Separatory mają rolę wewnątrz struktury, a nie zastępują ramek boxów.

Źródło: aktualny audyt .lp-redesign .page-frame w landing.css; strona główna dealyo.css, body #main, body > .yt-foot i padding kontenerów 40/30/20/16 px. Nie dodawaj kolejnej ramy do każdego zagnieżdżonego .ds-container. Rama prezentacji galerii nie jest częścią eksportowanej grafiki social.

Komponenty źródłowe — 20.10.2026

Katalog components.html zastępuje poprzednie uproszczone przykłady samodzielnymi dokumentami z reference-components/. Każdy używa klas i kaskady konkretnego projektu, a nie wspólnego CSS galerii. Manifesty w ui/, content/ i data/ wskazują selektory, zależności, zachowanie i pochodzenie.

Nie używaj dawnych przykładów ds-card/ds-faq jako dowodu identyczności z projektem źródłowym. library.css pozostaje arkuszem interfejsu wzornika oraz dotychczasowych roboczych szablonów; dokładne komponenty wymagają swoich źródłowych arkuszy i kontekstu rodziców.

Animacje kopiujemy wraz z rzeczywiście uruchamianym skryptem i obsługą prefers-reduced-motion. Obecność starych keyframes w CSS nie oznacza, że strona ich używa. Nagłówki i kroki aktualnego audytu są statyczne; FAQ korzysta z disclosure-motion, ilustracja procesu z process-motion, a karta strony głównej z jej mechanizmu reveal. Raport ICD nie animuje wskaźników ani tabel.

Formularz zachowuje układ i cztery kroki źródłowego formularza, ale działa jako lokalny podgląd bez wysyłki danych. Treści i wyniki klientów zastąpiono polami do uzupełnienia. Zmiany wrapperów służą jedynie osadzeniu podglądu; decyzje Daniela o kolorze i prostych narożnikach nadal mają pierwszeństwo.

Rozszerzenie biblioteki i propozycje — 20.10.2026

Katalog komponentów obejmuje również istniejące sekcje i sceny ze źródeł. Manifest każdego podglądu rozróżnia oryginalną konstrukcję, neutralizację treści, zachowanie oraz zmiany konieczne do osadzenia. Układ wyników może mieć pola do uzupełnienia; wizualizacja kampanii i kalkulator są demonstracjami/scenariuszami, nie obietnicami wyniku.

Nowe układy i animacje inspirowane Firecrawl są oznaczane jako propozycje. Na późniejsze polecenie Daniela mogą być stosowane również w prezentacji strony głównej i katalogów komponentów, zasobów oraz szablonów, poza galerią propozycji. Nie zmieniają oryginalnych komponentów źródłowych ani plików do pobrania i nie ustanawiają nowej globalnej skali odstępów ani nowych zasad marki. Rama 1240 px, General Sans, #FE4A23, białe CTA i proste narożniki pozostają. Research opisuje źródła pomysłów. Nowe animacje mają sterowanie odtwarzaniem, statyczny wariant ograniczonego ruchu oraz zatrzymanie w ukrytej karcie i poza ekranem.