Teza
Katalog tego sklepu jest ułożony po kolorze: rodziny odcieni, gotowe zestawienia, Próbnik jako osobny produkt. Klientka dekoratorki wskazuje kolor, nie nazwę produktu. Układ wyciąga tę logikę na wierzch: kolor jest nawigacją, a nie atrybutem.
Z tezy wynika podział ról, który obowiązuje na wszystkich widokach. Towar ma kolor. Interfejs go nie ma. Mech i ametyst wracają tam, gdzie nie leży żaden produkt: w pasie kontaktowym, w stopce, na powierzchniach akcyjnych.
Podłoże treści ma chroma dokładnie zero, czyli jest czystą bielą. To nie jest domyślne ustawienie, tylko warunek wierności barwy: kremowe tło dokłada żółć każdemu odcieniowi, który na nim leży, a dekoratorka porównuje na ekranie „Śmietankę" z „Jasnym beżem". Ceną jest chłodniejsze pierwsze wrażenie, które odrabiamy typografią i zdjęciami realizacji.
Paleta
Marka dostaje dwie barwy i obie stoją poza towarem: głęboki mech na strefy, w których nic się nie sprzedaje, i ametyst na to, co ma zostać zauważone — cenę, Próbnik, wybraną próbkę. Mech pochodzi z magazynu, nie z branży imprezowej: lakier na regale, karton, taśma. Ametyst jest jedynym akcentem i dlatego wolno go użyć rzadko. Przy każdej barwie podany jest współczynnik kontrastu dla pary, w której faktycznie występuje. Podstawa: WCAG 2.2, kryterium 1.4.3 (tekst 4,5:1; duży tekst 3:1) oraz 1.4.11 (grafika niosąca informację i granice kontrolek 3:1).
- Arkusz#FFFFFF · podłoże treści i próbek
- Arkusz spód#F3F5F2 · pole pod siatką
- Mech głębia#1E2D12 · 14,59:1 pod bielą
- Atrament#171B13 · 17,46:1 na arkuszu
- Atrament słaby#595D55 · 6,73:1 na arkuszu
- Mech#3B5C1E · 7,68:1 na arkuszu
- Mech akcja#325018 · 9,15:1 pod bielą
- Ametyst#764AA2 · 6,42:1 na arkuszu
- Ametyst pole#EEE5FB · 14,33:1 z atramentem
- Ametyst jasny#C5A6E9 · 6,95:1 na mchu głębi
- Kreska kontrolka#7D8278 · 3,94:1 — granice pól
| Tło | Tekst dowolnej wielkości | Tylko od 24 px albo grafika |
|---|---|---|
| Arkusz | atrament, atrament słaby, mech, mech akcja, ametyst, stany magazynowe | kreska kontrolka jako obrys |
| Mech głębia | arkusz, atrament odwrotny, atrament odwrotny słaby, ametyst pole, ametyst jasny | kreska kontrolka (3,71:1) |
| Mech akcja | arkusz, atrament odwrotny, ametyst pole | ametyst jasny (4,36:1) |
| Ametyst pole | atrament, mech, mech akcja, ametyst, stany magazynowe | — |
Stan magazynowy nigdy nie jest samym kolorem. Kropka barwna zawsze idzie razem z etykietą: na stanie, ostatnie opakowania, brak na stanie. Ten sam wymóg obowiązuje próbki: każda ma nazwę, numer producenta i wykończenie, bo część dekoratorów pracuje z zaburzeniem rozpoznawania barw, a wszyscy pracują przy różnym świetle ekranu.
Typografia
Dwie rodziny na osi kontrastu, z podziałem funkcjonalnym: grotesk mówi dane, antykwa mówi zdania.
Bricolage Grotesque · nagłówki, metryki, liczby, interfejs
Śmietanka 101 · 12″ · 100 szt.
Grotesk o nierównym rytmie, wywiedziony z druku przemysłowego. Oś szerokości pozwala ścisnąć etykiety próbek bez sięgania po trzeci krój.
Faustina · tekst ciągły, opisy, poradnik
Girlanda organiczna trzyma się wtedy, gdy w palecie jest jeden odcień dominujący, dwa wspierające i jeden kontrastowy w mniejszej ilości.
Antykwa tekstowa o niskim kontraście kresek, czytelna od 15 px. Miara wiersza ograniczona do 68 znaków.
| Rola | Rozmiar | Krój | Zastosowanie |
|---|---|---|---|
| Nagłówek strony | 32–56 px | Bricolage 700 | jeden na widok |
| Nagłówek sekcji | 26–36 px | Bricolage 700 | otwarcie bloku |
| Nagłówek bloku | 20–24 px | Bricolage 700 | karta, zestaw, wiersz |
| Lead | 17–20 px | Faustina 400 | zdanie pod nagłówkiem |
| Treść | 16 px | Faustina 400 | opisy, poradnik |
| Metryka | 14 px | Bricolage 500–700 | dane, ceny, etykiety |
| Numer katalogowy | 14 px, szerokość 88% | Bricolage 500 | numery przy próbkach; hierarchię niesie szerokość i barwa, nie mniejszy stopień |
Czternaście pikseli jest dolną granicą dla całego serwisu, także dla numerów katalogowych. Mniejszy stopień odpada; różnicę w hierarchii bierze na siebie oś szerokości kroju i słabszy odcień atramentu.
Siatka i powierzchnie
Powierzchnie oddziela linia i odstęp, nie warstwa. Karton próbnika nie ma cienia, ma krawędź; ta zasada obowiązuje cały interfejs.
- Promień narożnika: 2 px dla pól barwy i kontrolek, zero dla bloków. Nigdy pigułki.
- Cień: brak, poza jednym przesunięciem 3 px pod próbką w stanie najechania, które udaje uniesienie kartonika.
- Odstępy z podstawy 4 pt: 4, 8, 12, 16, 24, 32, 48, 64 px oraz człon płynny od 56 do 96 px między sekcjami.
- Siatki próbek bez punktów granicznych:
repeat(auto-fill, minmax(…)). Kolumny same dobierają liczbę. - Szerokość treści: 84 rem dla widoków sklepowych, 72 znaki dla tekstu ciągłego.
Kadrowanie zdjęć
Fotografia i pole barwy mają rozdzielne zadania i nie zastępują się nawzajem.
- Pole barwy odpowiada na pytanie „jaki to dokładnie odcień". Zdjęcie balonu na to pytanie kłamie: odbija światło sali, sąsiednie balony i skórę osoby trzymającej.
- Zdjęcie odpowiada na pytanie „jak to wygląda po zmontowaniu". Kadr pokazuje całą konstrukcję albo detal połączenia, nigdy pojedynczy balon w studio.
- Proporcje: 4:5 dla realizacji pionowej przy próbniku, 16:10 dla zestawów, 16:11 dla kafli asortymentu, 4:3 dla pasm.
- Opis alternatywny mówi, co widać i po co: „Girlanda balonowa w odcieniach pudrowego różu, beżu i chromu różowego złota, rozpięta nad stołem z tortem", nie „zdjęcie balonów".
Komponenty
| Komponent | Z czego się składa | Reguła |
|---|---|---|
| Próbka | pole barwy, nazwa, numer, wykończenie | obrys 1 px; stan wybrany to obrys 2 px w mchu, nigdy sam cień |
| Arkusz metryki | tabela klucz–wartość | klucz groteskiem 500, wartość 700 z cyframi tabelarycznymi |
| Zestaw | zdjęcie, pasek barw, spis odcieni, cena, przycisk | pasek barw ma opis dla czytnika z nazwami odcieni |
| Wiersz towaru | miniatura, nazwa, cechy, stan, cena, przycisk | format arkusza, nie kafla; na wąskim ekranie zwija się do dwóch kolumn |
| Punkt na zdjęciu | kółko w barwie odcienia | cel dotykowy 44 × 44 px, sama kropka 26 px; podwójny obrys, żeby był widoczny na każdym tle |
| Podręczna paleta | pasek u dołu z przypiętymi próbkami | pojawia się dopiero po przypięciu pierwszego odcienia; odstęp pod treścią bierze się z pomiaru wysokości paska |
| Stan magazynowy | kropka i etykieta | kolor nigdy sam |
Ruch
Ruch obsługuje jedną rzecz: potwierdzenie wyboru koloru. Próbka pod kursorem unosi się o 3 px, wybrana dostaje podwójny obrys, arkusz metryki wysuwa się pod siatką. Krzywa cubic-bezier(0.16, 1, 0.3, 1), czas 180–260 ms.
Sekcje nie mają animacji wejścia przy przewijaniu. Katalog nie robi przedstawienia, tylko podaje towar; treść jest widoczna od pierwszej klatki i nigdy nie zależy od tego, czy animacja się odpaliła. Ustawienie prefers-reduced-motion: reduce skraca przejścia do 1 ms i wyłącza unoszenie, zostawiając identyczny stan końcowy.
Ton treści
Odbiorcą jest osoba, która zna swoją branżę i liczy koszt materiału. Perswazja wynika z informacji.
| Odruch | Zamiast tego |
|---|---|
| „Najwyższa jakość balonów" | „Lateks Lateva, 12″, 100 szt. w opakowaniu" |
| „Kompleksowo zadbamy o Twoją dekorację" | „Wysyłka tego samego dnia przy zamówieniu do 15:00" |
| „Idealny do girland!" | „Około 16 szt. na metr girlandy gęstej" |
| „Czy zastanawiałaś się kiedyś…" | teza albo liczba w pierwszym zdaniu |
Jedna nazwa dla jednej rzeczy na wszystkich widokach: rodzina koloru, odcień, wykończenie, opakowanie, zestaw. Nie „kolekcja" raz i „paleta" innym razem.
Zasięg tych reguł
Dokument opisuje trzy zbudowane widoki: stronę główną z próbnikiem, listę odcieni i kartę odcienia. Pozostałe widoki sklepu, czyli koszyk, kasa, konto i blog, powstają z tych samych tokenów i komponentów, więc żadna z powyższych decyzji nie zapada tam drugi raz inaczej.
Reguły siedzą w kodzie, nie tylko w tym opisie: barwy w jednym pliku tokenów, progi kontrastu policzone przed pierwszą linią arkusza, komponenty złożone z tych samych funkcji po stronie budowania i przeglądarki. Jak ten układ przekłada się na moduły gotowego szablonu sklepowego, pokazuje mapa wdrożenia.