# Przepis na styl STARTUP Styl do stron aplikacji i usług internetowych. Cała strona stoi na jednej żywej, ciemnej zieleni, na niej jasne okno produktu z danymi, które zmieniają się na oczach odwiedzającego, jeden jaskrawy zielony sygnał i czarno-białe zdjęcia z prawdziwych miejsc pracy, jak u startupów ze Sztokholmu. Ten plik to przepis na wygląd strony internetowej dla agenta, który pisze kod: Claude Code'a, Codexa, Cursora albo podobnego. Nie ma w nim treści, tylko wygląd: kroje, kolory, siatka, elementy, zdjęcia i ruch. ## Jak z niego korzystasz Przeczytaj cały przepis, zanim cokolwiek zmienisz. Potem sprawdź, w której sytuacji jesteś: - **Strona już istnieje.** Zmieniasz wyłącznie wygląd. Treść i działanie strony zostają nietknięte, a zasady są niżej, w części „Treść zostaje”. - **Strony jeszcze nie ma.** Budujesz ją od razu w tym stylu. Teksty, zdjęcia, ceny i dane kontaktowe bierzesz od użytkownika. Jeśli czegoś brakuje, wstawiasz tekst zastępczy w nawiasie kwadratowym, na przykład [adres], i nie zmyślasz faktów. Zanim zaczniesz, napisz użytkownikowi w kilku krótkich punktach, co zmienisz, i poczekaj na zgodę. Liczby w przepisie (stopnie pisma, odstępy, czasy ruchu) są ustawione pod typowy landing. Przy bardzo długich tekstach albo nietypowych sekcjach dopasuj je tak, żeby styl dalej był rozpoznawalny. Przepis to szkic stylu, a nie sztywna instrukcja: jeśli użytkownik chce innych kolorów albo innego kroju, zmieniasz je tak, jak prosi, a resztę przepisu stosujesz dalej. ## Treść zostaje Te zasady obowiązują zawsze, kiedy przebudowujesz stronę, która już istnieje. - Każde słowo zostaje takie samo: nagłówki, akapity, ceny, przyciski, menu, stopka, teksty alternatywne zdjęć, tytuł strony i opisy dla wyszukiwarek. Nie poprawiasz, nie skracasz, nie tłumaczysz i niczego nie dopisujesz. - Sekcje zostają w tej samej kolejności. Linki, formularze, koszyk, skrypty analityczne, piksele reklamowe i wtyczki działają tak samo jak wcześniej. - Zdjęcia zostają te same. Wolno je przyciąć, zmienić proporcje kadru i nałożyć traktowanie opisane w tym przepisie, ale nie podmieniasz ich na inne i nie generujesz nowych. - Zmieniasz krój, kolory, odstępy, rozmieszczenie elementów wewnątrz sekcji, wygląd przycisków, kart i pól formularzy oraz ruch. - Jeśli jakiś element stylu wymaga treści, której na stronie nie ma (na przykład styl przewiduje liczby w nagłówku, a strona ich nie ma), pomijasz ten element zamiast dopisywać treść. Treści nie przenosisz też między sekcjami, żeby wypełnić element stylu. - Jeśli na stronie jest coś, czego styl zakazuje (na przykład emoji albo strzałki w przyciskach), to zostaje, bo jest treścią. Możesz to wyciszyć wyglądem, a o usunięcie pytasz użytkownika. - Numery porządkowe sekcji (01, 02…) wolno dodać jako element wyglądu, w CSS (licznik i `::before`), a nie w HTML. Wolno też dodać napisy sterujące, których wymaga obsługa strony na telefonie, na przykład „Menu” i „Zamknij”. Nazw sekcji, etykiet pól ani innych słów, których na stronie nie było, nie dodajesz. - Działanie strony też zostaje: rozwijane pytania startują w tym samym stanie co wcześniej, formularz wysyła się tak samo i pokazuje te same komunikaty. Opisane w przepisie komunikaty i stany startowe stosujesz tylko przy nowej stronie. - Przed zmianami zrób kopię plików strony obok jej folderu, a nie w nim, żeby nie zepsuć ścieżek względnych. Po zmianach wyciągnij cały widoczny tekst z wersji przed i po (najprościej skryptem, który zbiera tekst ze wszystkich podstron) i porównaj obie wersje. Przy porównaniu wyłącz `text-transform`, zamień twarde spacje na zwykłe i zwiń wszystkie odstępy do pojedynczych spacji, bo inaczej wersaliki i spacje z przepisu wyjdą jako fałszywe różnice. Różnica ma wynosić zero znaków, a wynik porównania pokazujesz użytkownikowi. ## Kroje: skąd je wziąć Wszystkie kroje z tego przepisu są darmowe, także do użytku komercyjnego, i mają polskie znaki. Pobierz je z Google Fonts w formacie WOFF2, razem z zestawem znaków latin-ext, i podepnij z serwera strony zamiast ładować z serwerów Google. Strona otwiera się wtedy szybciej, a przeglądarka odwiedzającego nie wysyła jego adresu IP do Google, co w Unii bywa problemem przy RODO. Przy krojach ze zmienną wagą albo szerokością pobierz plik zmienny, a przy krojach z rozmiarem optycznym wariant z osią opsz, bo inaczej część wag i ustawień z przepisu nie zadziała. ## Charakter To strona firmy, która robi konkretną robotę w prawdziwym świecie, a nie strona kolejnego asystenta do wszystkiego. Od góry do stopki jest jedna płaszczyzna ciemnej zieleni, wyraźnie zielonej, a nie czarnej, więc strona nie wygląda jak ciemny tryb edytora kodu. Na niej stoją cztery rzeczy: duży, ciasno złożony nagłówek w jednym kroju bezszeryfowym, jasne okno produktu narysowane w HTML z danymi, które żyją, czarno-białe zdjęcia dokumentalne z miejsca, w którym produkt pracuje, i jeden kolor sygnałowy, jaskrawa zieleń jak lampka „wolne” przy bramie. Sygnał oznacza tylko to, co żyje, co zrobił produkt albo co jest najważniejsze do kliknięcia. Drobny krój maszynowy niesie etykiety, godziny i dane, nigdy nagłówki. Strukturę budują odstępy i linie 1 px, bez kart, ikon i cieni. ## Kroje - Nagłówki, tekst, przyciski i menu: **Radio Canada Big** (plik zmienny 400–700). Nagłówki i przyciski mają wagę 600, duże zdanie z liczbami i pytania 500, tekst 400. Grubszej wagi niż 600 nie używasz, poza znakiem firmy. Krój jest zwarty, więc nagłówki składasz ciasno, ale bez stykania się liter. - Etykiety sekcji, godziny, dane w oknie produktu, miary przy funkcjach i drobna linijka pod przyciskami: **Spline Sans Mono** (plik zmienny 300–700), wagi 400, 500 i 600. Ten krój nie wchodzi do nagłówków ani akapitów. - Znak firmy, kiedy strona nie ma logo w pliku: nazwa małymi literami w Radio Canada Big 700, 25 px (23 px na telefonie), odstęp liter −0.045em, a przed nią kwadrat 10 × 10 px w kolorze `--sygnal`. Logo z pliku zostaje bez zmian i bez kwadratu. Jeśli znak to litera w HTML (monogram w kółku albo kwadracie), litera zostaje, a jej tło zmienia się w kwadrat 22 × 22 px w kolorze `--sygnal`, bez zaokrągleń, z literą w kolorze `--tusz`. Kwadratu 10 px wtedy już nie dodajesz. - Cyfry tabelaryczne (`font-variant-numeric: tabular-nums`) mają tylko dane w oknie produktu i ceny. W dużym zdaniu, w rzędzie liczb i w zwykłym tekście cyfry zostają proporcjonalne, bo w Radio Canada Big kropka i przecinek przy cyfrach tabelarycznych odstają od nich („1,2” wygląda jak „1 ,2”, a „6 godz.” jak „6 godz .”). ## Kolory ```css :root { --zielen: #0b4f36; /* tło całej strony */ --zielen-ciemna: #073d29; /* pasek nad nawigacją, menu na telefonie, stopka, tło pól formularza */ --linia: #2e6a52; /* linie 1 px na zieleni */ --tekst: #eef5ef; /* tekst na zieleni (8,7:1) */ --tekst-2: #a8c9b6; /* drugorzędny tekst na zieleni (5,3:1) */ --sygnal: #4cf59a; /* jedyny akcent */ --okno: #f5f7f2; /* tło okna produktu i wyróżnionego planu w cenniku */ --okno-2: #e4ebe5; /* zakończone pozycje i wybrana zakładka w oknie */ --okno-linia: #d5ded7; /* linie w oknie */ --tusz: #0a2a1d; /* tekst na jasnym i na sygnale */ --tusz-2: #55695f; /* drugorzędny tekst w oknie (5,4:1) */ --blad: #ffb199; /* tylko komunikat błędu pola formularza (5,5:1) */ } ``` Sygnał pojawia się wyłącznie w tych miejscach: kwadrat znaku firmy, pulsujący kwadrat przy etykiecie „na żywo” i przy stanie usługi w stopce, numery sekcji w etykietach, liczby w dużym zdaniu, godziny, kwadraty i linia postępu na osi „jak to działa”, miary przy funkcjach, kwadraciki w listach cennika, przycisk główny, duże linki w stopce po najechaniu, obwódka fokusu i zaznaczenie tekstu, w oknie produktu jako wypełnienie pozycji zmienionej przez produkt albo napis na pozycji wymagającej uwagi, i jako tło pasa z wezwaniem na końcu strony. Na jasnym tle (okno, wyróżniony plan) sygnał nigdy nie jest kolorem tekstu, bo ma tam za mały kontrast: tekst na nim zawsze ma kolor `--tusz`. Wszystkie zdjęcia są czarno-białe, więc sygnał zostaje jedynym kolorem na stronie. Bez gradientów i bez poświaty wokół sygnału. ## Siatka i odstępy - 12 kolumn, treść najwyżej 1600 px szerokości, margines boczny `clamp(20px, 4.4vw, 64px)`, odstęp między kolumnami 30 px (24 px na tablecie, 16 px na telefonie). - Sekcje nie mają własnych teł. Oddziela je odstęp 150 px u góry (120 px na tablecie, 88 px na telefonie), a wewnątrz sekcji linie 1 px `--linia`. Własne tło mają tylko pasek nad nawigacją, okno produktu, pas wezwania i stopka. - Każda sekcja zaczyna się etykietą, pod nią stoi H2 (odstęp 26 px), a treść sekcji zaczyna się 64–80 px niżej. - Wszystko jest wyrównane do lewej. Wyśrodkowanych sekcji nie ma. ## Typografia - H1: `clamp(46px, 7.4vw, 112px)`, waga 600, interlinia 0.95, odstęp liter −0.04em. Dzielisz go na wiersze w miejscu przecinka albo naturalnej pauzy (każdy wiersz w osobnym elemencie, do animacji), bez zmiany słów. Na laptopie ma dwa, najwyżej trzy wiersze. H1 dłuższy niż około 35 znaków zmniejszasz tak, żeby na szerokości 1440 px stał w dwóch wierszach (zwykle 80–90 px), dzielisz go w pauzie i dodajesz `text-wrap: balance`. - H2: `clamp(36px, 4.6vw, 70px)`, waga 600, interlinia 1, odstęp liter −0.035em, najwyżej 13em szerokości, `text-wrap: balance`. - Duże zdanie z liczbami: `clamp(30px, 3.75vw, 56px)`, waga 500, interlinia 1.1, odstęp liter −0.025em, najwyżej 23.5em szerokości. - H3: 22–24 px, waga 600, odstęp liter −0.02em. - Tekst: 18 px, interlinia 1.5, akapit najwyżej 34em szerokości. Akapit w hero 19 px. - Etykieta sekcji: Spline Sans Mono 500, 12 px, wersaliki, odstęp liter 0.08em, kolor `--tekst-2`, numer sekcji przed nazwą w `--sygnal` („01 Jak działa”). Numer dodajesz tylko przed nazwami sekcji, które strona już ma, a przy przebudowie wstawiasz go w CSS (licznik i `::before`), zgodnie z częścią „Treść zostaje”. - Drobna linijka pod przyciskami i podpisy danych: Spline Sans Mono 400, 12,5 px, `--tekst-2`, bez wersalików. - Twarde spacje po jednoliterowych słowach (w, z, i, a, o, u) i między liczbą a jednostką. ## Elementy - **Pasek nad nawigacją:** tylko jeśli strona ma krótką wiadomość albo nowość. Tło `--zielen-ciemna`, 14 px, wyśrodkowany, tekst `--tekst-2`, link podkreślony w `--tekst`. Przewija się razem ze stroną. - **Nawigacja:** wysokość 72 px, tło `--zielen`, przyklejona do góry (`position: sticky`). Po przewinięciu dostaje linię 1 px `--linia` na dole. Po lewej znak firmy, zaraz za nim (56 px dalej) linki 15 px, waga 500, co 32 px. Po prawej link tekstowy (logowanie) i mały przycisk główny (40 px wysokości). Podkreślenie linku rośnie od lewej po najechaniu. - **Hero:** etykieta, H1, a 40 px niżej rząd: akapit w kolumnach 1–6 (najwyżej 32em), przyciski w kolumnach 7–12 wyrównane do dołu akapitu, odstęp 12 px między przyciskami, pod nimi (16 px) drobna linijka. Pulsujący kwadrat 8 px w `--sygnal` stoi przed etykietą tylko wtedy, gdy etykieta mówi o stanie (na żywo, działa, dostępne teraz), a nie przy zwykłym opisie produktu. Kolejność słów i elementów w kodzie zostaje taka jak na stronie. - **Okno produktu:** najważniejszy element stylu. Stoi 56 px pod hero, na całą szerokość treści: jasny prostokąt `--okno` bez zaokrągleń, cienia i ramki przeglądarki. U góry pasek 52 px z linią 1 px na dole: znak produktu, nazwa konta albo miejsca, zakładki (wybrana na `--okno-2`), data, a po prawej napis „na żywo” i zegar w kroju maszynowym. Środek: główny widok produktu (tablica, tabela, lista) i kolumna 30% szerokości z dziennikiem zdarzeń, najnowsze na górze. Dół: trzy liczby w równych komórkach, podpis 13 px `--tusz-2`, liczba 26 px 600. Stany pozycji pokazujesz wypełnieniem: zakończone `--okno-2` z tekstem `--tusz-2`, trwające `--zielen` z tekstem `--tekst`, nadchodzące białe z linią 1 px `--zielen`, oczekujące na ruch użytkownika białe z linią 2 px `--tusz`, opóźnione białe z przerywaną linią 1 px `--tusz`, zmienione przez produkt `--sygnal` z tekstem `--tusz`, wymagające uwagi `--tusz` z tekstem `--sygnal`. Numery, godziny i stany piszesz krojem maszynowym 11–13 px, a zdania w dzienniku krojem głównym 13–14 px. Żaden napis nie może się uciąć wielokropkiem. - Nową stronę budujesz z przykładowymi danymi od użytkownika i ożywiasz je (opis w „Ruchu”), z dopiskiem przy oknie albo w stopce, że dane są przykładowe. - Przy przebudowie okno dostaje tylko to, co strona już ma: zrzut ekranu albo film produktu stoi w oknie na tle `--okno`, bez dorysowanego paska i bez wymyślonych danych. Jeśli strona nie ma żadnego obrazu produktu, okna nie ma, a hero kończy się przyciskami. - Zrzut z własnymi mocnymi kolorami (fiolet, gradienty, kolorowe karty) gryzie się z zielenią, więc dostaje filtr dwutonowy: cienie w kolorze `--tusz`, światła w kolorze `--okno`. Filtr wstawiasz raz w HTML jako SVG i podpinasz w CSS (`filter: url(#dwuton)`). W planie dla użytkownika pytasz, czy woli zostawić zrzut w oryginalnych kolorach. ```html ``` - Na telefonie zrzut przycinasz do najważniejszego fragmentu (ten sam obraz, inny kadr przez `object-fit: cover` i `object-position`), tak żeby najmniejszy napis na zrzucie miał na ekranie co najmniej 9 px. - Pętla, zegar i zatrzymywanie animacji z części „Ruch” dotyczą tylko okna w HTML. Zrzut wchodzi razem z oknem po 400 ms i dalej stoi. - Przepisanie zrzutu na okno w HTML z tymi samymi danymi możesz zaproponować w planie, ale robisz je tylko za zgodą użytkownika. - **Duże zdanie z liczbami:** jeśli strona ma akapit z liczbami o firmie albo produkcie, stoi on sam w sekcji jako duże zdanie, a liczby są w `--sygnal`. Jeśli liczby stoją osobno (liczba i podpis), układasz je w rzędzie po trzy albo cztery: liczba Radio Canada Big 500 `clamp(44px, 5vw, 76px)` w `--sygnal`, podpis 15 px `--tekst-2` pod nią, linia 1 px `--linia` nad rzędem. - **Mozaika zdjęć:** trzy zdjęcia w rzędzie: kwadrat w kolumnach 1–4, pion 3:4 w kolumnach 5–9 i pion 3:4 w kolumnach 10–12, obniżony o 240 px. Podpis pod każdym zdjęciem 15 px `--tekst-2`, 14 px odstępu. Przy dwóch zdjęciach kwadrat stoi w kolumnach 1–5, a pion 3:4 w kolumnach 7–12, obniżony o 120 px. Przy jednym zdjęcie stoi w kolumnach 5–12. Kolejne zdjęcia powtarzają ten układ w następnym rzędzie. - **Oś „jak to działa”:** kroki stoją obok siebie na poziomej linii 1 px `--linia` (najwyżej pięć w rzędzie). Nad każdym krokiem na linii kwadrat 10 px z obwódką `--tekst-2`, pod linią godzina albo numer kroku (Spline Sans Mono 500 13 px w `--sygnal`), H3 22 px i opis 16 px `--tekst-2`. Linia postępu 2 px w `--sygnal` wypełnia oś przy przewijaniu, a kwadraty, do których doszła, zmieniają się na pełne w `--sygnal`. Godziny wstawiasz tylko wtedy, gdy kroki je mają, inaczej numery 01, 02… Poniżej 1100 px oś staje pionowo: linia po lewej, kwadraty na niej, kroki jeden pod drugim (najwyżej 40em szerokości), linia postępu rośnie w dół. - **Zdjęcie na całą szerokość okna:** bez marginesów, w proporcji 12:5 (4:3 na telefonie), podpis pod nim w kroju maszynowym 12 px wersalikami `--tekst-2`. - **Funkcje:** wiersze zamiast kart. Wiersz ma linię 1 px `--linia` u góry (ostatni także na dole) i 28 px odstępu: nazwa H3 w kolumnach 1–4, opis 18 px w kolumnach 5–9, a w kolumnach 10–12 miara w kroju maszynowym 13 px w `--sygnal` (liczba, zasięg, limit). Bez ikon. Jeśli funkcja nie ma miary, opis zajmuje kolumny 5–12. - **Opinia:** zdjęcie 3:4 w kolumnach 1–5, cytat w kolumnach 7–12 wyrównany do dołu zdjęcia: Radio Canada Big 500 `clamp(26px, 2.65vw, 40px)`, interlinia 1.18, cudzysłów otwierający wysunięty na margines (`text-indent: -0.42em`). Oba cudzysłowy owijasz w osobny element (tekst się nie zmienia) i składasz krojem Spline Sans Mono 500 z marginesem −0.16em z obu stron, bo zamykający cudzysłów w Radio Canada Big w dużym stopniu wygląda jak znak cala. Pod cytatem imię i nazwisko 600 16 px, niżej funkcja w `--tekst-2`. Bez zdjęcia cytat zajmuje kolumny 1–9. Klienci: etykieta i nazwy jako zwykły tekst 21 px 500 w jednym rzędzie, z linią 1 px nad rzędem. Jeśli etykieta jest całym zdaniem, a nie dwoma, trzema słowami, stoi nad rzędem nazw, a nie w nim. Logotypy z plików zostają, ale w jednym kolorze `--tekst` (`filter: brightness(0) invert(1)` i przejrzystość .85), w tym samym rzędzie. - **Cennik:** plany jako kolumny oddzielone pionowymi liniami 1 px, z liniami nad i pod całym cennikiem. Nazwa planu 20 px 600, cena 600 `clamp(46px, 4.8vw, 72px)`, odstęp liter −0.05em, pod ceną jednostka w kroju maszynowym 12,5 px. Lista zawartości z kwadracikami 6 px w `--sygnal` i liniami 1 px między pozycjami, przycisk przyklejony do dołu kolumny. Wyróżniony plan stoi na jasnym tle `--okno` z tekstem `--tusz` (kwadraciki w `--zielen`, przycisk ciemny) i to jest całe wyróżnienie. Napis typu „Najpopularniejszy”, jeśli strona go ma, zostaje jako mała etykieta w górnym odstępie kolumny, nad nazwą planu, a nazwy, ceny i listy wszystkich planów i tak zaczynają się na tej samej wysokości (miejsce na etykietę zarezerwowane w każdej kolumnie albo `subgrid`). Cena bez liczby (na przykład „Indywidualnie”) dostaje stopień dobrany do szerokości kolumny: kolumna ma `container-type: inline-size`, cena `font-size: min(clamp(46px, 4.8vw, 72px), 15cqi)`, a jej dół stoi na tej samej linii co dół cen z liczbami (blok ceny o wysokości ceny liczbowej, wyrównany do dołu). - **Pytania:** H2 w kolumnach 1–4, przyklejony przy przewijaniu (`position: sticky`, 112 px od góry), lista w kolumnach 6–12. Pytanie to przycisk 22 px 500 z `aria-expanded`, a obok cienki plus 18 px z kresek 1,5 px. Otwarte jest jedno pytanie naraz, a pionowa kreska plusa znika. Na nowej stronie na starcie otwarte jest pierwsze, przy przebudowie stan startowy zostaje taki, jak był. Linia 1 px między pytaniami. Bez JavaScriptu wszystkie odpowiedzi są widoczne. - **Wezwanie na końcu:** pas na całą szerokość okna w kolorze `--sygnal` z tekstem `--tusz`, 150 px odstępu u góry. H2 600 `clamp(44px, 6.6vw, 104px)`, interlinia 0.95, odstęp liter −0.04em, pod nim akapit 20 px w kolumnach 1–5 i przycisk ciemny w kolumnach 7–12. To jedyne miejsce, gdzie sygnał jest płaszczyzną. Jeśli strona nie ma sekcji z wezwaniem, pasa nie ma. - **Przyciski:** prostokąt bez zaokrągleń, wysokość 52 px, odstęp 0 22 px, Radio Canada Big 600 16 px. Główny: tło `--sygnal`, napis `--tusz`, po najechaniu biała warstwa o przejrzystości .35. Drugi: przezroczysty z wewnętrzną linią 1 px `--tekst-2`, po najechaniu linia `--tekst`. Ciemny (na sygnale i na jasnym planie): tło `--tusz`, napis `--okno`, po najechaniu warstwa `--zielen`. Bez strzałek dorysowanych w przyciskach. - **Pola formularza:** etykieta nad polem w kroju maszynowym 12 px wersalikami, pole 52 px na tle `--zielen-ciemna` z dolną linią 1 px `--tekst-2`, wpisany tekst 18 px. Aktywne pole dostaje dolną linię 2 px `--sygnal`. Błąd: linia i komunikat w `--blad`. Na pasie wezwania (tło `--sygnal`) pole jest przezroczyste, z dolną linią 1 px `--tusz`, a wpisany tekst, etykieta i podpowiedź mają kolor `--tusz`. Na nowej stronie odpowiedź po wysłaniu stoi w miejscu przycisku, przy przebudowie formularz zostawia swoje komunikaty. - **Emoji i znaki używane jak ikony** (iskierki, gwiazdki, strzałki, ptaszki, plusy): jeśli strona je ma, zostają w kodzie, ale wyciszone: `filter: grayscale(1)`, przejrzystość .5, wielkość 0.9em. Plus albo strzałka przy pytaniach, które są znakiem w tekście, zostają w kodzie, ale są przezroczyste (`color: transparent`), a widać plus rysowany kreskami. W planie dla użytkownika pytasz, czy usunąć emoji. - **Stopka:** tło `--zielen-ciemna`. Po lewej duże linki do sekcji (Radio Canada Big 500 `clamp(32px, 3.4vw, 50px)`, interlinia 1.12), po prawej trzy kolumny z etykietami w kroju maszynowym i listami 15 px. Na dole, za linią 1 px, stan usługi z kwadratem w `--sygnal` (jeśli strona go ma), prawa autorskie i drobny druk 13 px `--tekst-2`. ## Zdjęcia - Czarno-białe zdjęcia dokumentalne w płaskim, pochmurnym świetle: miejsca i przedmioty z branży produktu (rampa, magazyn, gabinet, plac budowy, dokument na biurku), najlepiej z góry albo prosto z przodu, symetrycznie. Bez ludzi przy laptopach, bez uśmiechów ze stocku, bez renderów 3D, mózgów, robotów, sieci neuronowych i świecących kul. - Na wszystkie zdjęcia nakładasz `filter: grayscale(1) contrast(1.04)`, żeby obrazy z różnych źródeł wyglądały jak jedna seria. Zrzuty ekranu produktu dostają zamiast niego filtr dwutonowy opisany przy oknie produktu, a logotypy klientów jednolity kolor `--tekst`. - Zdjęcia bez zaokrągleń i ramek, przycięte `object-fit: cover`. W miejscu brakującego zdjęcia nie stawiasz pustej ramki: układ przechodzi na wariant z mniejszą liczbą zdjęć. ## Ruch Ruch ma pokazywać, że produkt pracuje, a nie ozdabiać stronę. - Hero przy wejściu: wiersze H1 wysuwają się z maski od dołu (`translateY(105%)` do 0, 1000 ms, `cubic-bezier(.2, .7, .2, 1)`, drugi wiersz 80 ms później). Etykieta wchodzi razem z nagłówkiem z 18 px niżej i od przejrzystości 0, akapit i przyciski tak samo po 250 ms, okno produktu po 400 ms. Całość kończy się przed upływem 1,5 s. - Etykiety sekcji przy pierwszym pojawieniu się składają się jak na terminalu: znaki od lewej zamieniają się z przypadkowych liter i cyfr na właściwe w 620 ms. Na końcu tekst jest identyczny z oryginałem. - Pozostałe elementy wchodzą z 22 px niżej i od przejrzystości 0, 800 ms, ta sama krzywa, kolejne w tym samym rzędzie co 70 ms (najwyżej sześć opóźnień). - Zdjęcia odsłaniają się od dołu (`clip-path: inset(100% 0 0 0)` do `inset(0)`, 1100 ms), a obraz w środku przechodzi ze skali 1.08 do 1 w 1500 ms. Podpis pojawia się 400 ms później. - Liczby w dużym zdaniu odliczają od zera w 1100 ms, z hamowaniem na końcu. Lata nie odliczają. - Linia postępu na osi „jak to działa” idzie za przewijaniem strony, bez opóźnienia. - Okno produktu zbudowane w HTML żyje w pętli: zegar i pionowa linia „teraz” idą szybciej niż czas prawdziwy (minuta symulacji na około sekundę), co kilka sekund dzieje się jedno zdarzenie: w dzienniku pojawia się wpis (z 10 px wyżej, 600 ms), pozycje zmieniają stan przenikaniem koloru w 400 ms, a pozycja przestawiona przez produkt przelatuje na nowe miejsce w 900 ms i świeci w `--sygnal` przez kilka sekund. Pierwsze takie zdarzenie dzieje się w ciągu 2 sekund od wejścia na stronę. Po ostatnim zdarzeniu jest 3 s przerwy, okno gaśnie na 350 ms i scenariusz rusza od początku. Pętla stoi, kiedy okno jest poza ekranem albo karta jest ukryta. - Kwadrat „na żywo” pulsuje (przejrzystość od 1 do .3 i z powrotem, 1,6 s). - Zmiany po najechaniu mają tylko przyciski i linki. Animujesz `transform`, `opacity`, `clip-path`, kolory tła i wysokość odpowiedzi w pytaniach. - Przy ograniczonym ruchu wszystko jest widoczne od razu, kwadrat nie pulsuje, a okno produktu w HTML pokazuje jeden stały kadr zaraz po pierwszym zdarzeniu (z pozycją w `--sygnal` i wpisem w dzienniku). ## Telefon - Nawigacja 60 px: znak po lewej, po prawej napis „Menu”. Menu otwiera się na cały ekran na tle `--zielen-ciemna`, linki 38 px 500 z liniami między nimi, na dole logowanie i przycisk główny. Escape i wybór linku zamykają menu. Linki i przyciski z nawigacji chowają się już poniżej 900 px. - H1 `clamp(40px, 11.6vw, 58px)`, interlinia 0.98. Okno produktu stoi zaraz pod H1, przed akapitem i przyciskami, na całą szerokość ekranu bez marginesów, tak żeby żywe dane było widać na pierwszym ekranie (kolejność w kodzie się nie zmienia, przestawia ją CSS). - W oknie zostają: znak, nazwa miejsca i zegar u góry, cztery wiersze głównego widoku z wycinkiem około dwóch godzin wokół linii „teraz”, dziennik pod spodem (trzy wpisy) i trzy liczby w rzędzie. - Przyciski jeden pod drugim na całą szerokość. - Mozaika: pierwsze zdjęcie na całą szerokość, dwa następne obok siebie. Na tablecie (761–900 px) dwie kolumny: kwadrat i pod nim trzecie zdjęcie po lewej, wysokie zdjęcie po prawej. - Funkcje, opinia, cennik i pytania w jednej kolumnie. Wyróżniony plan sięga do krawędzi ekranu. ## Czego nie robić - Fioletu, gradientów, poświaty wokół jaskrawej zieleni, szkła i rozmytych teł. - Czarnego, grafitowego albo granatowego tła strony. Zieleń ma być wyraźnie widoczna jako kolor. - Kafelków z ikonami w siatce trzech kolumn, zaokrąglonych rogów, cieni pod kartami i przycisków w kształcie pastylki. - Ramki przeglądarki z trzema kropkami, makiet laptopów i telefonów, przechylonych w 3D zrzutów interfejsu. - Ilustracji robotów, mózgów, sieci neuronowych, ikonek iskierek przy słowie „AI” i emoji. - Kroju maszynowego w nagłówkach i akapitach. - Ściany szarych logotypów, karuzeli opinii, gwiazdek ocen. - Przekreślonych cen i plakietek z rabatem. - Drugiego mocnego koloru obok sygnału. ## Kontrola na koniec - Obejrzyj stronę na szerokości 390 px (telefon) i 1440 px (laptop), od góry do dołu, z przewijaniem. Nic nie wystaje poza ekran w poziomie, a żaden tekst nie nachodzi na inny. - Polskie znaki w nagłówkach są w tym samym kroju co reszta słowa. Jeśli „ą” albo „ł” wygląda inaczej, plik kroju nie ma zestawu latin-ext. - Przy systemowym ustawieniu „ogranicz ruch” animacje się wyłączają, a cała treść jest widoczna od razu. - Zwykły tekst ma kontrast co najmniej 4,5:1 do tła, a duże nagłówki co najmniej 3:1. Kolory z przepisu są dobrane pod te progi, ale jeśli na stronie stoją na innym tle niż w przepisie, sprawdź je jeszcze raz. - Nawigacja, która stoi nad treścią, nie liczy się jako tekst nachodzący na inny, o ile w każdym miejscu jest czytelna. - Na zrzucie górnego ekranu laptopa (1440 × 900) widać H1 i co najmniej górną część okna produktu z danymi, a na telefonie okno stoi na pierwszym ekranie. - Każde użycie `--sygnal` na stronie należy do listy z części „Kolory”. - Wszystkie zdjęcia poza zrzutami produktu i logotypami są czarno-białe. - W oknie produktu na szerokości 1440 px i 390 px żaden napis nie jest ucięty wielokropkiem ani nie wychodzi poza swoją pozycję. - Okno produktu w HTML zatrzymuje animację, kiedy jest poza ekranem, a przy ograniczonym ruchu pokazuje jeden stały kadr. Zrzut w oknie ma filtr dwutonowy (albo zgodę użytkownika na oryginalne kolory), a na telefonie najmniejszy napis na nim ma co najmniej 9 px. - Przy przebudowie porównanie tekstu przed i po daje zero różnic.