# Design · Bags to Door

Lumea vizuală aleasă de proprietar (septembrie 2026): **culorile logoului, jucăuș, dar compact**.

## Culori (roluri fixe)
- Albastru `#28a8e0` (închis `#0f7fb5`, cerneală `#07496b`, deschis `#e3f4fc`): informație, încredere, livrare, selecție (opțiunea aleasă, focus).
- Galben `#faaf42` (deschis `#fff1d3`, cerneală `#5c3a00`): atenție și ofertă. Banda de avantaje de sus, evidențierea din titlul principal, etichete „Top vânzări”.
- Roșu `#ef4137` (închis `#c8291f`): o singură acțiune, „Adaugă în coș” și butoanele de comandă, plus butonul „Produse”.
- Text `#141416` pe alb cald `#f6f4ee`; carduri albe; linii `#e6e3dc`. Fără gri pentru text.
- Bulinele logoului (albastru, galben, roșu) sunt motivul decorativ: punctul dinaintea titlurilor de raft și banda de deasupra subsolului.
- Nimic în afara paletei logoului: subsolul e albastru-cerneală (nu negru), butoanele „închise” la fel, „În stoc” albastru, „La volum” galben. Verdele rămâne doar pentru confirmări de formular.
- Administrarea și dashboardul folosesc aceeași paletă pe alb: antet alb cu banda tricoloră, meniu lateral alb cu elementul activ albastru-deschis și bară galbenă, carduri cu accent albastru/galben/roșu prin rotație, grafice doar în familiile albastru/galben/roșu.

## Formă și ritm
- Colțuri: carduri 14px, panouri mari 18px, butoane și cipuri pilulă (999px).
- Densitate: distanță de 8px între produse și câmpuri (6px pe telefon), secțiuni la 16px. Fără goluri mari; prima pagină arată produse imediat sub un erou de o singură înălțime de ecran mic.
- Grilă: 6–7 produse pe rând pe desktop (minim 160px), 2 pe telefon; rafturile pe categorii sunt un rând derulabil.
- Umbre: doar la hover (ridicare de 2px, umbră albastră difuză). Fără margini colorate groase.

## Tipografie
- Archivo (variabil, auto-găzduit). Titluri late (font-stretch 114%), greutate 800, spațiere −0.02em. Corp 15px, negru.
- Prețul: parte întreagă mare, zecimale mici ridicate (`.bp`). Unități scrise 120L / 900ml / 28mm, „50 microni” cu spațiu.

## Mișcare
- Un singur moment: cele trei carduri din erou urcă ușor la încărcare, cu o mică rotație. Restul: ridicări de 2px la hover, 180–220 ms, `prefers-reduced-motion` respectat.

## Ce nu facem
- Nu afișăm reguli de multipli pe carduri; nu inventăm recenzii sau cifre; nu folosim poze de stoc în locul fabricii.

## Kitul de design (27 sept. 2026)
- Prima pagină după „BagsToDoor-Audit-si-Directie-Design": erou neutru pe alb, titlu albastru-cerneală `#07496B` cu accentul albastru, o singură acțiune roșu-închis `#C8291F` (contrast 5,5:1), bara de avantaje albastru-deschis, butonul „Produse”, căutarea și pilula de limbă în albastru-cerneală.
- Eroul este un **slider** (7 diapozitive: gama completă, saci menajeri, flacoane, plicuri, sacoșe, folii, doze PET): fotografia din kit acoperă 64% din lățime în dreapta, textul stă pe panoul crem din stânga care se pierde în marginea pozei; rotire la 6 s, pauză la hover/focus, săgeți și puncte, swipe pe telefon, `prefers-reduced-motion` respectat. Textele și legăturile sunt în `views/catalog.py: home_slides`; `Settings.hero_image` înlocuiește poza primului diapozitiv.
- Cele 9 fotografii din kit sunt în `static/shop/img/kit/` (WebP 800/1600). Se folosesc doar la marketing: eroul, antetul discret al categoriilor (maparea în `views/catalog.py: KIT_IMAGES`). Fișele produselor păstrează pozele reale ale SKU-urilor.
- Pagina produsului: cantitatea și „Adaugă în coș” vin imediat sub preț; pragurile de volum sunt pliate (deschise doar când sunt cel mult 3).