−15%Koc
Koc 3-warstwowy
169 zł 199 zł
Księga design systemu dla sklepu marki rodzinnej — tekstylia szyte ręcznie w Polsce.
Dokument roboczy. Zdjęcia oraz wzory ULIULI, TOLU i FILI pochodzą od marki. Brakujące dwa wzory, finalne ceny i progi rabatowe uzupełnimy z kolejnymi materiałami.
01 — Wstęp
Spokojny luksus rękodzieła
Malolo to nowa marka rodzinna: koce, hamaki, plecaki i ściereczki bezsmugowe, projektowane od zera i szyte ręcznie z certyfikowanych półproduktów. Design system tłumaczy tę wartość na język sklepu — tak, by jakość wyrobu było widać, zanim klient dotknie produktu.
Pozycja
Premium, dostępne. Wyższa półka jakościowa bez chłodu high-fashion. Najpierw rynek krajowy, architektura gotowa na skalowanie do Europy.
Osobowość
Ciepła, rzeczowa, troskliwa. Mówimy o materiałach i wykonaniu konkretnie — bez przesady i bez marketingowego patosu.
Inspiracja
Lekkość i płynność interakcji w duchu Lamillou, przełożone na własną paletę: złoto jako akcent, czerń jako struktura, biel jako oddech.
Zasady projektowe
Pięć reguł, do których wracamy przy każdej decyzji.
Złoto jest cenne
Złoto to akcent, nie tło. Pojawia się w detalu — podkreśleniu, ramce, znaku zachęty. Im rzadziej, tym mocniej działa. Główne akcje prowadzi czerń, nie złoto.
Biel jako materiał
Dużo przestrzeni i ciepła biel zamiast surowego #FFFFFF. Produkt oddycha. Ciemne kolory nigdy nie przytłaczają — pojawiają się punktowo.
Konkret zamiast obietnic
„500 kg udźwigu", „szyte w Polsce", „3 warstwy" — fakty z karty produktu są lepszą reklamą niż przymiotniki. Specyfikacja sprzedaje.
Dwa światy, jeden sklep
Detal i B2B mają czytelne rozgraniczenie wizualne, ale wspólny język. Klient hurtowy od razu wie, że jest „u siebie".
Ruch, który uspokaja
Animacje są wolne, miękkie i celowe. Mają prowadzić wzrok, nie zabawiać. Mniej, ale dopracowane.
02 — Logo
Znak marki
Logotyp Malolo to ręcznie pisany, pędzlowy wordmark w kolorze złota. To najcenniejszy zasób marki — zawsze używany z dostarczonego pliku, nigdy odtwarzany czcionką.
Oryginalny logotyp wektorowy (SVG) na trzech dopuszczonych tłach: biel, atrament i złoto. Skaluje się bezstratnie do dowolnego rozmiaru; kolor dobieramy do tła — złoto #D3C26C lub atrament na złocie.
Sygnet / godło
Marka ma też wersję emblematyczną — okrągły monogram „M" z podpisem, obecny na metkach i zdjęciach produktów. Używamy go tam, gdzie pełny logotyp jest za szeroki: awatar, favicon, pieczęć na zdjęciu, metka wszyta w produkt. Wordmark pozostaje znakiem podstawowym; sygnet jest jego uzupełnieniem, nie zamiennikiem.
Pole ochronne i minimalny rozmiar
Wokół znaku zostaw wolną przestrzeń o wysokości litery „M". Nic nie wchodzi w tę strefę — ani tekst, ani krawędź kontenera.
Minimalna szerokość: 120 px na ekranie, 30 mm w druku. Poniżej tych wartości czytelność pędzla zanika.
Czego nie robić
- Nie zmieniać koloru poza paletą (złoto / czerń / biel).
- Nie obrysowywać, nie cieniować, nie pochylać.
- Nie umieszczać złotego logo na jasnym, niespokojnym zdjęciu bez przyciemnienia.
- Nie rozciągać i nie ściskać proporcji.
03 — Kolory
Paleta
Trzy filary: złoto z logotypu (#D3C26C) jako sygnatura, ciepły atrament zamiast surowej czerni i papierowa biel jako tło. Reszta to neutralne odcienie spinające układ.
Kolory główne
Złoto Malolo
Sygnatura · akcent
#D3C26C ⧉Złoto głębokie
Tekst/linki na bieli
#A07A28 ⧉Atrament
Tekst · CTA główne
#1A1916 ⧉Biel papierowa
Tło główne
#FBFAF6 ⧉Odcienie pomocnicze
Atrament miękki
Tekst drugorzędny
#57534A ⧉Złoto miękkie
Tła akcentów
#F1E9CF ⧉Linia
Ramki · separatory
#E9E4D6 ⧉Biel czysta
Karty · zdjęcia produktów
#FFFFFF ⧉Kolory funkcjonalne
Dostępność / sukces
#4E7A4E — „Dostępny", potwierdzenia
#4E7A4E — „Dostępny", potwierdzenia
Uwaga / błąd
#9B3B36 — błędy formularza, niski stan
#9B3B36 — błędy formularza, niski stan
Promocja / rabat
#D3C26C — złoto = oszczędność detaliczna
#D3C26C — złoto = oszczędność detaliczna
Proporcje użycia
Reguła 70 / 22 / 8 chroni przed przytłoczeniem ciemnością. Biel dominuje, atrament strukturyzuje, złoto akcentuje.
04 — Typografia
Pismo
Dwa kroje. Fraunces — ciepły, „rękodzielniczy" serif do nagłówków i wypowiedzi marki. Manrope — czysty, nowoczesny grotesk do treści, UI i danych. Logotyp pozostaje jedynym elementem pisanym ręcznie.
Fraunces
Display · nagłówki · cytaty marki
AaBbCc Ąą Ćć Ęę Łł Ńń Óó Śś Żż Źż 0123
Manrope
Body · UI · ceny · etykiety
AaBbCc Ąą Ćć Ęę Łł Ńń Óó Śś Żż Źż 0123
Skala typograficzna
DisplayFraunces 300 · 49px
Hamak premium
Nagłówek H2Fraunces 400 · 34px
Trzy warstwy ciepła
Nagłówek H3Fraunces 400 · 22px
Szyte ręcznie w Polsce
TreśćManrope 400 · 16px
Warstwa bawełniana jest przewiewna i pozostaje w bezpośrednim kontakcie ze skórą, a poliester oxford daje wytrzymałość i wodoodporność.
EtykietaManrope 600 · 13px · +0.16em
Kolekcja · Tolu
05 — Przestrzeń i siatka
Rytm
Skala bazuje na 8 px. Hojny oddech między elementami jest częścią luksusu — sekcje rozdziela duży margines, karty mają wewnętrzny komfort.
Skala odstępów (8 px)
xs · 8px
sm · 16px
md · 24px
lg · 40px
xl · 64px
2xl · 96px
Układ i zaokrąglenia
- Maksymalna szerokość treści: 1120 px
- Siatka produktów: 4 kolumny desktop → 2 tablet → 1 mobile
- Odstęp między sekcjami: 80 px
- Promienie: przyciski 6px, pola 6px, karty 18px
- Hairline ramki 1px w kolorze Linia
06 — Ikony
Ikonografia
Lekka linia 1.5 px, zaokrąglone końce, w kolorze złota głębokiego. Ikony wspierają unikalne cechy produktów (USP) z kart specyfikacji — to one budują zaufanie do jakości.
Szyte w Polsce
Certyfikowane materiały
Wodoodporność
Udźwig 500 kg
Rekomendowana biblioteka bazowa: Lucide (linia 1.5 px, spójna z powyższym). Ikony nigdy nie wypełniamy złotem na płasko — pozostają liniowe.
07 — Przyciski
Akcje
Hierarchia jest jednoznaczna: czerń prowadzi do zakupu, złoto kusi przy ofertach, ghost i link obsługują akcje drugorzędne. Najedź, by zobaczyć stan hover.
Główne CTA — zawsze atramentowe
Akcent promocyjny — używaj oszczędnie
Akcja drugorzędna
Link tekstowy z animowanym podkreśleniem
08 — Formularze
Pola i wprowadzanie danych
Spokojne pola z hairline ramką; fokus podświetlamy złotem. Etykiety opisują to, czym steruje klient — językiem ludzkim, nie systemowym.
Wyślemy potwierdzenie zamówienia i status wysyłki.
Stan fokus — ramka i poświata w złocie.
Minimalne zamówienie hurtowe to 10 szt. Uzupełnij ilość, aby przejść dalej.
09 — Karta produktu
Produkt w siatce
Zdjęcie na białym tle prowadzi, kategoria i nazwa porządkują, cena i próbki wzorów domykają. Najedź na kartę — delikatne uniesienie sygnalizuje interaktywność.
−15%
NowośćHamak
Hamak · ULIULI
349 zł
DostępnyHamak
Hamak · TOLU
349 zł
Hamak
Hamak · FILI
349 zł
Kółka próbek odpowiadają 5 kolekcjom wzorów (sekcja 12). Po najechaniu wzór podświetla się; klik zmienia zdjęcie główne bez przeładowania strony.
10 — Detal i B2B
Dwa tryby cen
Jeden produkt, dwa konteksty. Detal komunikuje oszczędność złotem; B2B czarnym znacznikiem sygnalizuje cennik hurtowy z automatycznym rabatem procentowym i miejscem na rabat indywidualny. Przełącz, by porównać.
Koc · wzór Tolu
Cena detaliczna
169 zł199 zł
Cena brutto dla klienta indywidualnego. Promocja oznaczana złotym znacznikiem.
Logika rabatów
- Automatyczny rabat % — przypisany do grupy/konta firmowego, naliczany od ceny katalogowej.
- Rabat indywidualny — ręczna nadpisywalna wartość dla konkretnego klienta, nakładana ponad rabat grupowy.
- Progi ilościowe — opcjonalne, gotowe na wzrost wolumenu w przyszłości.
Wartości procentowe i progi są poglądowe — finalne ustalimy wspólnie. Tryb B2B widoczny dopiero po zalogowaniu na konto firmowe.
11 — Cross-sell i warianty
Powiązania i podpowiedzi
Sklep prowadzi klienta za rękę: dobiera worek w tym samym wzorze, podpowiada rozmiar i pozwala wybrać wariant bez opuszczania karty produktu.
Cross-sell po wzorze
Dokup worek transportowy we wzorze Tolu
Rozmiar Duży — dopasowany do tego koca · 89 zł
Mechanizm dobiera produkt powiązany w tym samym wzorze i właściwym rozmiarze.
Wariantowość + podpowiedź rozmiaru
Rozmiar
Mały · 35×45Duży · 50×60
Wzór (kolekcja)
ToluWzór 2Wzór 3Wzór 4Wzór 5
Wybierz rozmiar Duży, jeśli chcesz spakować nasz koc 160×200 cm lub hamak dwuosobowy.
12 — Kolekcje wzorów
Pięć wzorów, jeden język
Wzory są nazwane i wspólne dla hamaków, koców i worków — to one spinają cross-sell. Nazwy pełnią rolę systemowych etykiet wariantów. Trzy kolekcje — ULIULI, TOLU i FILI — mamy potwierdzone i pokazane na prawdziwej tkaninie; dwie pozostałe uzupełnimy z kolejnych zdjęć.
ULIULI
TOLU
FILI
Wzór 04
Wzór 05
ULIULI, TOLU i FILI to realne wycinki tkaniny z Waszych zdjęć. Wzory 04–05 pozostają placeholderami do czasu otrzymania grafik i nazw.
13 — Fotografia
Obraz produktu
Dwa rejestry: czyste packshoty na jasnym, jednolitym tle do siatki i kart, oraz ciepłe ujęcia lifestyle (ogród, dom, naturalne światło) do hero i opowieści o marce.
Packshot · jasne tło
Lifestyle · ogród
Detal · faktura wzoru
✓ Tak
- Jasne, jednolite, neutralne tło dla packshotów.
- Naturalne, miękkie światło — bez twardych cieni.
- Zbliżenia faktury, szwów i warstw — pokazują rękodzieło.
- Spójny kadr i proporcja 4:5 w siatce.
✕ Nie
- Niespokojne, kolorowe tła konkurujące z produktem.
- Mocne filtry zmieniające realny kolor wzoru.
- Złote logo na jasnym zdjęciu bez przyciemnienia.
- Niskiej rozdzielczości, rozjaśnione „na siłę" kadry.
14 — Ruch i interakcje
Animacja w duchu Lamillou
Ruch jest wolny, miękki i celowy. Wejścia pojawiają się subtelnym fade-up przy przewijaniu, zdjęcia powoli przybliżają się na hover, podkreślenia rosną od lewej. Najedź na próbki poniżej.
Reveal przy przewijaniu
fade + translateY 18px · 700ms
Pojawiam się delikatnie
Zoom zdjęcia na hover
scale 1.08 · 600ms · ease-out
Uniesienie karty
translateY −6px + cień · 400ms
Najedź na mnie
Podkreślenie linku
scaleX 0→1 od lewej · 350ms
Tokeny ruchu
| --ease | cubic-bezier(.16, 1, .3, 1) | Główny — miękkie wytracanie |
| micro | 150 ms | Hover przycisku, próbki |
| base | 300–400 ms | Karty, przejścia stanów |
| reveal | 600–700 ms | Wejścia przy przewijaniu, zoom |
Zasada: jeden orkiestrowany moment na sekcję działa mocniej niż wiele drobnych efektów. Zawsze respektujemy prefers-reduced-motion — przy tym ustawieniu animacje są wyłączone.
15 — Ton komunikacji
Głos marki
Ciepły, rzeczowy, troskliwy. Mówimy konkretem o materiałach i wykonaniu. Zwracamy się bezpośrednio („Ty"), bez patosu i przesadnych superlatyw. Fakt sprzedaje lepiej niż przymiotnik.
✓ Tak — konkret
Trzy warstwy: satyna bawełniana, antyalergiczna ocieplina i miękkie minky. Grzeje zimą, nie przegrzewa latem.
✕ Nie — pusty patos
Rewolucyjny, niesamowity koc, jakiego świat jeszcze nie widział — absolutny hit!
✓ Tak — akcja jasna
„Dodaj do koszyka" → potwierdzenie „Dodano do koszyka". Ta sama nazwa w całym procesie.
✕ Nie — język systemu
„Submit" / „Wystąpił błąd 422 podczas walidacji formularza".
Komunikaty błędów tłumaczą, co się stało i jak to naprawić — głosem marki, bez przepraszania i bez ogólników. Pusty ekran (np. brak wyników) zaprasza do działania.