# Przepis na styl KOLOR

Styl do marek, które mają kilka wariantów: smaków, zapachów, kolorów albo kolekcji. Każdy wariant dostaje pełną sekcję w swoim nasyconym kolorze, wziętym z jego zdjęcia (z tła albo z samego produktu), a sekcje łączą krótkie przejścia gradientem.

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

Głośno i soczyście, ale porządnie. Każdy wariant ma sekcję na cały ekran w kolorze wziętym z jego zdjęcia. Zdjęcie na kolorowym tle zlewa się z sekcją, wycięty przedmiot stoi wprost na kolorze, a zdjęcie, którego nie da się wtopić (biały packshot, wnętrze, plener), stoi jako wyraźny blok przy krawędzi ekranu. Nagłówki są grube i szerokie, tekst prosty, a poza kolorem nie ma ozdób.

## Kroje

- Nagłówki, nazwy wariantów i ceny: **Unbounded**, wagi 700 i 900.
- Tekst i przyciski: **Onest**, 400 i 600.

## Kolory

Kolor sekcji wariantu bierze się z jego zdjęcia (część „Zdjęcia”). Różnice kolorów liczysz w OKLab razy 100 (ΔE): przy 2 kolory obok siebie ledwo da się odróżnić, przy 10 to wyraźnie inny odcień.

- Tekst: biały albo ciemny w barwie sekcji (OKLCH L 0,25, chroma 0,04–0,09, w razie potrzeby L 0,20), ten, który ma kontrast co najmniej 4,5:1.
- Kolor wzięty z przedmiotu ma jasność L 0,70–0,85 pod ciemny tekst albo 0,35–0,50 pod biały.
- Sąsiednie warianty różnią się co najmniej o ΔE 10. Gdy wypadają bliżej, zmieniasz jasność jednego o 0,06–0,10 i wyrównujesz jego zdjęcie do nowego koloru, bez zmiany kolejności sekcji.
- `--ciemny` (o marce, stopka): OKLCH L 0,20, chroma 0,05, barwa pierwszego wariantu.

```css
:root {
  --wariant-1: #f99aa7;  /* róż z tła zdjęcia 1 */
  --wariant-2: #e35b04;
  --wariant-3: #d5bea3;
  --wariant-4: #79bbbc;
  --ciemny: #2a0a10;
}
```

Strona nie ma białego tła. Hero stoi na kolorze pierwszego wariantu, a inne sekcje bez zdjęcia (zestawy, opinie, miejsca sprzedaży) na kolorze jednego z wariantów albo na `--ciemny`.

## Siatka i odstępy

- Treść najwyżej 1440 px, margines boczny 40 px na laptopie i 18 px na telefonie.
- Sekcja wariantu ma `min-height: 100svh`.
- Między wariantami stoi pas przejścia wysoki na 28vh: `linear-gradient(in oklch, …)` od koloru jednej sekcji do następnej, z punktami na 30% (18% drugiego koloru) i 70% (82%). Pas stawiasz tylko, gdy barwy różnią się o mniej niż około 120°, bo inaczej gradient przechodzi przez fiolet albo zieleń. Odleglejsze barwy (turkus i róż, turkus i pomarańcz) i sekcje, które nie są wariantami, łączy twarde cięcie.
- Przy ponad 6 wariantach sekcja ma `min-height: 75svh`, a pas 16vh. Przy ponad 10 warianty stoją na laptopie parami: dwie sekcje po pół szerokości, każda w swoim kolorze, bez pasa między nimi.

## Typografia

- Nazwa marki w hero: Unbounded 900 na całą szerokość treści, interlinia 0.85, około 0.3em zapasu pod spodem na ogonek Ą i kropkę Ż.
- Nazwa wariantu: Unbounded 900 wersalikami, `clamp(56px, 10vw, 180px)`, interlinia 0.88, odstęp liter −0.02em, nigdy szersza niż miejsce na nią. Kontener ma `overflow: clip` i zapas na przesuw o 8%.
- H2: Unbounded 700, `clamp(32px, 4vw, 64px)`. Tekst: Onest 18 px, interlinia 1.5.
- Cena: Unbounded 900. Skład i pojemność: Onest 600 wersalikami 13 px, odstęp liter 0.08em.

## Elementy

- **Nawigacja:** pełne tło w kolorze sekcji pod nią, w pasach przejścia mieszane na bieżąco (`color-mix(in oklch, …)`). Marka Unbounded 900 20 px, linki Onest 15 px, po prawej licznik koszyka w kółku z obramowaniem 1.5 px.
- **Hero:** na całą szerokość nazwa marki, a gdy jej nie ma, główny nagłówek hero w tym samym kroju. Pod nim pas kolorów wariantów jako menu: pionowe paski z nazwą wariantu u dołu, kliknięcie przewija do sekcji. Bez nazw wariantów w hero paski mają numery 01, 02…, a nazwę dla czytników ekranu dostają przez `aria-labelledby` z nagłówka sekcji wariantu. Pasek w kolorze hero ma u góry linię 1.5 px. Ponad 8 wariantów: dwa rzędy.
- **Nagłówek nad listą wariantów** („Nasze kremy”): krótki pas na kolorze pierwszego wariantu.
- **Sekcja wariantu:** numer i ogromna nazwa, zdjęcie według jego drogi, skład, pojemność, cena i przycisk, a zdjęcie co sekcję zmienia stronę. Przy bloku nazwa stoi na laptopie nad nim na całą szerokość treści albo w kolumnie tekstu, najwyżej na 84% jej szerokości.
- **Przyciski:** zaokrąglenie 999 px, tło w kolorze tekstu sekcji, napis w kolorze sekcji, wysokość 54 px, Onest 600 16 px.
- **O marce:** sekcja na `--ciemny` z tekstem w kolorze pierwszego wariantu.
- **Listy:** linie 1.5 px w kolorze tekstu sekcji.

## Zdjęcia

Każde zdjęcie mierzysz na pasie szerokim na 5% krótszego boku wzdłuż krawędzi i przypisujesz do drogi. Pierwszy spełniony warunek rozstrzyga:

| Warunek | Droga |
|---|---|
| Plik ma kanał alfa, a co najmniej 5% pikseli pasa ma krycie poniżej 250 | wycięty przedmiot |
| Szczegóły zajmują ponad 8% pasa albo na zdjęciu widać miejsce, a nie przedmiot na tle | scena |
| Mediana pasa ma chromę poniżej 0,03 (biel, szarość, czerń) | białe tło |
| Wszystko inne | kolorowe tło |

Szczegóły to piksele pasa, w których rozmycie gaussem o sigmie 1,5 px różni się od rozmycia o sigmie 8 px o więcej niż 4 (w skali 0–255) w którymkolwiek kanale. Rozrzut to największa różnica ΔE między medianami 16 odcinków pasa (po 4 na krawędź, bez przeciętych przez przedmiot); powyżej 15 tło ma gradient albo linię stołu i wyrównanie wymaga maski z modelu. W planie podajesz przy każdym wariancie drogę, kolor sekcji i to, co zrobisz ze zdjęciem.

### Kolorowe tło

- Kolor sekcji to mediana całego pasa.
- Tło zdjęcia wyrównujesz do koloru sekcji według dodatku. Przedmiot zostaje bez zmian, a oryginał w kopii; to traktowanie dopuszcza część „Treść zostaje”.
- Zdjęcie stoi bez ramki i bez maski. Maskę 6–12% dostaje tylko bok, przez który przedmiot wychodzi z kadru (ręka z boku, podstawka ucięta dołem). Zdjęcia poziome dochodzą do krawędzi ekranu, pionowe stoją w siatce.
- Odmiana: gdy barwa każdej mediany odcinka różni się od barwy sekcji najwyżej o 30°, wolno zostawić gradient tła. Zdjęcie dochodzi wtedy do krawędzi ekranu bokiem, na którym tło najbardziej odbiega od sekcji, a pozostałe boki wtapiasz maską 10–26%.

### Białe tło

- Kolor sekcji bierzesz z przedmiotu.
- Zdjęcie stoi jako blok: ostre krawędzie, bez maski i zaokrągleń, proporcja 4:5 albo 1:1, przy krawędzi ekranu, na całą wysokość sekcji.
- Czyste tło (rozrzut poniżej 3, szczegóły poniżej 1%) zostawiasz bez zmian, a winietę, szare rogi albo blat wyrównujesz do mediany tła według dodatku.
- Przemalowanie tła na kolor sekcji albo wycięcie przedmiotu tylko za zgodą użytkownika, po pokazaniu jednego zdjęcia przed i po.

### Wycięty przedmiot

- Stoi wprost na kolorze sekcji, bez ramki i dorysowanego cienia (cień z pliku zostaje).
- Kolor sekcji z przedmiotu. Gdy jego największa grupa różni się od sekcji o mniej niż ΔE 12, przesuwasz jasność sekcji co 0,04 w zakresie 0,70–0,85 (w dół przy jasnym przedmiocie, w górę przy ciemnym), a gdy to nie wystarcza, bierzesz L 0,50 pod biały tekst.

### Scena

- Zdjęcia nie wtapiasz, a kolor sekcji bierzesz z przedmiotu albo głównej rzeczy w kadrze.
- Zdjęcie stoi jako blok: na laptopie pełna połowa sekcji od krawędzi ekranu, na całą wysokość (`object-fit: cover`), na telefonie cała szerokość w proporcji 4:5. Krawędź od strony treści jest ostra.

### Kolor z przedmiotu

Piksele przedmiotu (alfa maski albo pliku co najmniej 0,98, w scenie bez maski środkowe 60% kadru) przeliczasz na OKLab i dzielisz metodą k-średnich na 5 grup. Odrzucasz grupy o chromie poniżej 0,02 i mniejsze niż 10% pikseli przedmiotu, z reszty bierzesz największą (przy różnicy wielkości poniżej 25% bardziej nasyconą). Sekcja dostaje jej barwę, L 0,78 i chromę co najmniej 0,10 albo najwyższą możliwą w sRGB, także gdy grupa jest pastelowa (chroma 0,02–0,04). Gdy żadna grupa nie zostaje (biały kubek, czarne słuchawki), kolor podaje użytkownik albo proponujesz go z nazwy wariantu.

### Brak zdjęcia i mieszane drogi

- Bez zdjęcia w sekcji stoi sama nazwa wariantu, jeszcze większa. Przy nowej stronie możesz zaproponować opis do generatora: „[przedmiot] na gładkim tle studyjnym w kolorze #F99AA7, ten sam kolor na ścianie i blacie, bez linii horyzontu, miękkie światło z boku, miękki cień kontaktowy, bez gradientu i winiety, przedmiot na najwyżej 60% kadru, kadr 4:5”. Bez zgody niczego nie generujesz.
- Gdy co najmniej połowa zdjęć to bloki (białe tło, scena), blokami stoją wszystkie, żeby warianty wyglądały jak jedna seria.

## Ruch

- Nazwa wariantu przesuwa się z przewijaniem sekcji od `translateX(8%)` do `translateX(-8%)` (procent jej szerokości), a w połowie sekcji stoi w spoczynku.
- Zdjęcie wtopione i wycięty przedmiot przy wejściu obracają się z −3° do 0° i rosną ze skali 0.94 do 1.0, 900 ms, `cubic-bezier(.2, .8, .2, 1)`. Blok się nie obraca, tylko odsłania od krawędzi ekranu (`clip-path` od `inset(0 0 0 100%)` albo z drugiej strony do `inset(0)`).
- Nawigacja przejmuje kolory sekcji pod sobą w 300 ms.
- Pasek w hero najechany albo dotknięty rozszerza się kosztem pozostałych (`flex-grow` z 1 do 2.2, 450 ms).

## Telefon

- Nawigacja w dwóch wierszach: marka i koszyk, pod nimi linki.
- Hero: pas kolorów jako poziome paski jeden pod drugim.
- Sekcja wariantu: nazwa, zdjęcie, skład, cena i przycisk jeden pod drugim. Zdjęcie na całą szerokość, blok 4:5. Linia przycięcia kadru wypada na wyrównanym tle, nie na przedmiocie ani cieniu.
- Pasy przejścia na 18vh.

## Czego nie robić

- Białych i szarych sekcji, także pod packshoty na białym tle.
- Maski na zdjęciu, którego tło ma inny kolor niż sekcja albo jest sceną: zostaje po niej miękki prostokąt innego koloru.
- Poprawiania przedmiotu przy wyrównaniu tła, a bez zgody wycinania, przemalowywania tła i generowania zdjęć.
- Gradientów z kolorów spoza zdjęć, cieni pod zdjęciami, ramek i ilustracji owoców czy kropli.

## Dodatek: wyrównanie tła

Cel: tło ma przy krawędziach dokładnie kolor docelowy (sekcji albo bieli), a przedmiot i jego cień kontaktowy zostają bez zmian. Pracujesz na oryginale w pełnej rozdzielczości, w RGB 0–255 na liczbach zmiennoprzecinkowych (na przykład Python z numpy, scipy i Pillow). Rozmycia to gauss, podane wartości to sigma.

1. **Maska przedmiotu** z lokalnego modelu do wycinania tła (na przykład `rembg` z `birefnet-general`): sama maska z miękką krawędzią, zdjęcia nie wycinasz. Przedmiot to alfa co najmniej 0,98. Bez modelu (tylko przy rozrzucie do 15) przedmiotem jest piksel różny od pola tła (krok 2) o ponad ΔE 9, który nie jest cieniem (ciemniejszy od tła, z różnicą barwy poniżej połowy różnicy jasności plus 5); potem wypełniasz dziury i usuwasz plamki poniżej 1500 px.
2. **Pole tła:** piksele spoza maski powiększonej o 8 px rozmywasz splotem znormalizowanym (rozmyte zdjęcie razy wagi, przez rozmyte wagi) z sigmą 3% krótszego boku, a większe dziury wypełniasz tak samo z sigmą 10% i 30%. Pięć przebiegów, w każdym odrzucasz piksele różne od pola o ponad ΔE 4,5 (cienie, odbicia).
3. **Linia stołu:** pole liczysz osobno nad linią ściany i blatu (najsilniejszy poziomy skok jasności poza przedmiotem, dopasowany prostą) i pod nią, przejście bierzesz z profilu w poprzek linii, a resztkowy ślad usuwasz, uśredniając resztę wzdłuż linii (sigma 20 px, pas ±24 px).
4. **Reszta** to zdjęcie minus pole, rozmyta z sigmą 2,5 px tylko po tle: cienie i odbicia zostają, znika ziarno, z którego WebP robi w płaskim tle kratkę.
5. **Tło** to kolor docelowy plus reszta razy k. k = 1 tam, dokąd sięga cień kontaktowy (zwykle 4–8% krótszego boku), i łagodnie spada do 0 przy 15–25% od przedmiotu oraz na ostatnich 10% przy krawędziach. Reszta słabsza niż 2 poziomy dostaje 0, mocniejsza niż 6 zostaje cała. Cień rzucony daleko na ścianę usuwasz.
6. **Składanie:** do 4 px od maski wynik = zdjęcie + (1 − alfa) × (kolor docelowy − pole), więc miękka krawędź nie zostawia obwódki. Dalej bierzesz tło z kroku 5, które na ostatnich 2,5% przy krawędziach przechodzi płynnie w dokładny kolor docelowy.
7. **Sprawdzenie:** przed kompresją piksele przedmiotu są identyczne z oryginałem. Po zapisie do WebP (jakość 80) mediana pasa 2% przy każdej krawędzi różni się od koloru docelowego najwyżej o 2 w każdym kanale, poza bokiem, przez który przedmiot wychodzi z kadru. Wynik oglądasz w pełnej rozdzielczości na prostokącie w kolorze sekcji i z różnicą wzmocnioną sześć razy.

## 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.
- Każde zdjęcie ma przypisaną drogę, a użytkownik dostał ją w planie razem z kolorem sekcji.
- Na zrzutach laptopa i telefonu w pełnej rozdzielczości nie widać granicy wtopionego zdjęcia ani plamy innego koloru wokół przedmiotu, także przy przycięciu kadru. Blok ma ostre krawędzie i dochodzi do krawędzi ekranu.
- Sąsiednie warianty różnią się co najmniej o ΔE 10, a każdy tekst ma kontrast co najmniej 4,5:1 do swojej sekcji.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.