# RentFriends – zasady marki dla agentów AI

Wersja 2.1 (2026-10-20). Źródło: https://brand.rentfriends.app (brand book) i ten plik. Przy rozbieżności wygrywa brand book.

## Nazwa
- Zawsze `RentFriends`, jednym słowem, bez spacji. Tylko w logo słowo łamie się na dwie linie („Rent” / „Friends”).

## Logo
- Sygnet: dach z uśmiechem; wierzchołek dachu zaokrąglony z obu stron linii (łuk ≈ grubość linii). Napis: Nunito Light 300, dwie linie.
- Linia sygnetu = kreska litery w „Rent” = 4,2% szerokości sygnetu (4,4 j. w siatce logo, w wersji pionowej 4,0 j.). Skaluje się razem z sygnetem.
- Wersje: poziome (podstawowe), pionowe, sam sygnet.
- Tła: jasne → sygnet z gradientem + napis `#0F0F0F`; Ink → sygnet z gradientem + napis `#F4F2EE`; gradient → całe białe; żółty → całe `#0F0F0F`. Na innych tłach logo stoi na pasku lub plakietce w jednym z tych kolorów.
- Minimum: poziome 120 px / 30 mm, pionowe 64 px / 18 mm, sygnet 32 px / 8 mm.
- Pole ochronne: połowa wysokości sygnetu.
- Ikona appki: białe tło, sygnet z gradientem na 72% boku, w pionie wyśrodkowany optycznie: w połowie między środkiem obrysu a środkiem ciężkości (ok. 2,4% wysokości sygnetu wyżej niż środek obrysu). Wariant ciemny: tło `#0F0F0F`. Do sklepów plik kwadratowy; wersje zaokrąglone (promień 22,37% boku) do prezentacji i grafik.
- Favicon: jak ikona appki, sygnet na 80% szerokości; `favicon.svg`, PNG 32 i 180 px.
- Nie wolno: żółtego logo, gradientu na żółtym, innej grubości napisu, rozciągania, obracania, cieni, obrysów, pszczoły (stare logo).

## Kolory
| Nazwa | HEX | Rola |
|---|---|---|
| Yellow | `#FFD93D` | jedna główna akcja na ekranie, to co łączy ludzi (match, wspólne zainteresowania) |
| Purple | `#A247E3` | marka, wypełnienia z białym tekstem |
| Pink | `#E95BD2` | tylko w gradiencie i małych akcentach (serce polubienia) |
| Warm White | `#F4F2EE` | domyślne tło |
| Ink | `#0F0F0F` | tekst, ikony, wybrane elementy |
| Deep Purple | `#7A2BB8` | linki i fioletowy tekst na jasnym tle |
| Grey Text | `#595959` | tekst drugorzędny |
| White | `#FFFFFF` | karty, pola |
| Line | `#DEDAD4` | obramowania (dekoracyjne) |

- Gradient: `linear-gradient(135deg, #A247E3 0%, #E95BD2 100%)`. Bez trzeciego koloru.
- Proporcje: ok. 60% Warm White, 20% Ink, 12% fiolet i gradient, 8% żółty.
- Stany (tekst / tło): sukces `#17663A` / `#E1F1E7`, ostrzeżenie `#8A4A00` / `#FCEBD6`, błąd `#B42318` / `#F7E1DF`. Zawsze z ikoną albo słowem.
- Chip wspólnego zainteresowania: tło żółte, tekst Ink. Pozostałe zainteresowania w kolorze swojej kategorii (sekcja „Kategorie zainteresowań”).

## Kontrast (WCAG 2.1)
- Zwykły tekst ≥ 4,5:1; duży tekst (≥ 24 px albo ≥ 19 px bold) i ikony ≥ 3:1.
- Dozwolone dla każdego tekstu: Ink na Warm White / White / Yellow; biały na Ink / Purple; żółty na Ink; Deep Purple i Grey Text na jasnym tle.
- Tylko duży tekst: biały i Ink na gradiencie, żółty na fiolecie, Purple na Warm White.
- Zakazane: żółty na jasnym tle, różowy tekst na jasnym tle, Deep Purple i Grey Text na Ink, tekst wypełniony gradientem.

## Tryb ciemny
| Rola | Jasny | Ciemny |
|---|---|---|
| Tło | `#F4F2EE` | `#0F0F0F` |
| Karta | `#FFFFFF` | `#1A1918` |
| Pole, chip | `#EAE7E2` | `#262422` |
| Tekst | `#0F0F0F` | `#F4F2EE` |
| Tekst drugorzędny | `#595959` | `#B3AFA9` |
| Link | `#7A2BB8` | `#C88AF2` |
| Linia | `#DEDAD4` | `#3A3734` |
| Obrys pola | `#595959` | `#6E6A65` |
| Sukces | `#17663A` / `#E1F1E7` | `#6FD39A` / `#1C3326` |
| Ostrzeżenie | `#8A4A00` / `#FCEBD6` | `#F2B46B` / `#3A2A16` |
| Błąd | `#B42318` / `#F7E1DF` | `#F2847B` / `#3D1D1A` |

- Yellow, Purple, Pink, gradient i logo bez zmian. Fiolet tylko jako wypełnienie z białym tekstem. Chip zainteresowania: tło `#33243F`, tekst `#D2A6F2`.

## Typografia
- Nunito: https://fonts.google.com/specimen/Nunito (Google Fonts, licencja OFL). Light 300 tylko w logo, 400 tekst, 700 przyciski i etykiety, 800 nagłówki, 900 hasła na plakatach.
- Skala: hasło 56–84 px / 900; H1 40 px; H2 28 px; H3 20 px (800); tekst 16 px / 1,6; drobny 14 px; etykieta 14 px / 700; etykieta w karcie 12 px / 800, wersaliki.
- Tekst od 16 px (druk 10 pt), podpisy od 12 px. Linia do 65 znaków.
- Polski skład: bez jednoliterowych wyrazów na końcu linii, cudzysłów „…”, półpauza – ze spacjami, ceny `1 600 zł / mc` (spacje nierozdzielające).
- Bez napisów wersalikami nad nagłówkami i bez numerów sekcji.

## Ikony
- Phosphor Icons: https://phosphoricons.com (MIT, https://github.com/phosphor-icons/core). Grubość ikony = grubość tekstu obok: przy tekście 400–600 Regular, przy 700–900 (przyciski, chipy, plakietki) Bold. Ikona bez tekstu: Regular do 24 px, Light od 32 px. Fill tylko dla stanu aktywnego.
- Kolor: Ink, Grey Text albo Deep Purple na jasnym; biały na Ink, fiolecie, gradiencie; Ink na żółtym. Różowe tylko polubione serce.
- Źródła: appka `@phosphor-icons/vue`; strona i agenci `@phosphor-icons/core` (SVG, `assets/<waga>/<nazwa>.svg`) albo `@phosphor-icons/web`; Canva: SVG z phosphoricons.com.
- Emoji tylko w zainteresowaniach na profilu.
- Przycisk z samą ikoną: pole dotyku ≥ 44 px i `aria-label`.

## UI
- Przyciski i chipy w pełni zaokrąglone; karty 20–28 px; pola 12 px.
- Przyciski: żółty (główny, tekst Ink), Ink (drugorzędny, tekst biały), obrys Ink (trzeciorzędny), gradient tylko przy polubieniu i matchu (biały tekst ≥ 19 px bold).
- Fokus: obrys 3 px `#7A2BB8` z odstępem 3 px.

## Ton
- Na „ty”, krótko, konkretnie: ceny, dzielnice, terminy zamiast przymiotników.
- Brak stałego hasła marki. Hasło dobieramy do kampanii (np. „Razem fajniej” na Erasmusa).
- Studenci: luźno, z humorem, emoji w postach (nie w interfejsie). Właściciele i agencje: rzeczowo, liczby, bez emoji, więcej Warm White i Ink.
- Unikać: pustych przymiotników (idealny, wyjątkowy, innowacyjny), zwrotów typowych dla AI („to nie tylko X, to Y”, „odkryj”), słów wewnętrznych (lead, konwersja), obietnic bez pokrycia.
- Błąd: co się stało i co zrobić dalej.

## Mapa
- MapLibre ze stylem `mapa/rentfriends-map-style.json` (OpenFreeMap, bez klucza API). Ten sam plik co `web/public/map-styles/rentfriends.json`.
- Kolory: ląd `#F1EFEA`, zabudowa `#ECEAE5`, budynki `#E4E1DB`, drogi `#E3E0DA` (główne białe z obrysem `#D3CFC8`), parki `#7FCF92` (trawa `#A8DDB5`, las `#6FBF82`), woda `#6BB0F0`, etykiety `#4A4744`, etykiety wody `#3D6EB5`.
- Pinezka z ceną: pigułka biała, tekst Ink 13 px / 800; wybrana: tło `#0F0F0F`, tekst biały. Cień `0 1px 2px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.14)`.
- Dzielnica: miękkie pole `radial-gradient` z fioletu `rgba(162,71,227,…)`, etykieta „48 Mokotów” na białej pigułce; wybrana: róż → fiolet, obwódka 2 px `#A247E3`, etykieta na Ink. Bez niebieskiego.
- Tło kontenera mapy `#F1EFEA` (bez białego błysku). Atrybucja OpenFreeMap / OpenMapTiles / OpenStreetMap zawsze widoczna. Lokalizacja ogłoszenia zawsze przybliżona. W trybie ciemnym mapa zostaje jasna.

## Kategorie zainteresowań
| Kategoria | Jasny (tekst / tło) | Ciemny (tekst / tło) |
|---|---|---|
| Styl życia | `#6F249F` / `#EFE3F9` | `#D2A6F2` / `#33243F` |
| Palenie i zwierzęta | `#17663A` / `#E2F1E7` | `#8FDDB0` / `#1C3326` |
| Sport i podróże | `#1F3FB8` / `#E3E8FB` | `#A5B6F7` / `#1E2540` |
| Jedzenie | `#8A4A00` / `#FCEAD3` | `#F5C27F` / `#3A2A16` |
| Ludzie i rozrywka | `#A1287F` / `#FBE3F6` | `#F2A3E4` / `#3B1E35` |
| Wiedza i kreatywność | `#006B73` / `#DCF0F1` | `#7FD3D9` / `#173234` |

- Tylko dla tagów zainteresowań. Wspólne zainteresowania z drugą osobą: żółte. Emoji z tłumaczeń appki. Na karcie najwyżej 6 tagów, reszta „+N”.

## Odstępy, promienie, cienie
- Odstępy: 4, 8, 12, 16, 20, 24, 32, 40 px. Margines boczny 16 px na telefonie, 32–40 px na desktopie.
- Promienie: 10 / 12 (pola) / 16 / 20 (zdjęcia, karty) / 24 (panele, dialogi) / 28 (główna karta strony) / 999 px (przyciski, chipy, pinezki).
- Cienie tylko dla elementów nad treścią: wyszukiwarka `0 10px 40px rgba(15,15,15,.08), 0 1px 3px rgba(15,15,15,.06)`; pływające `0 8px 24px rgba(15,15,15,.18)`; pinezki jak wyżej; główna karta `0 20px 60px rgba(0,0,0,.12)`.

## Materiały dla właścicieli
- Prezentacja 16:9 (`slajdy-wlasciciele/slajdy.html`): okładka na gradiencie z żółtą drugą linią hasła, treść na Warm White, liczby i kontakt na Ink, CTA na gradiencie z żółtym przyciskiem.
- Roll-up 85 × 200 cm (`rollup/rollup.html`): gradient u góry, korzyści z ikonami na fioletowych kafelkach, QR z UTM, żółty pas na dole.
- Liczby tylko publiczne i zawsze z datą.

## Key visual
- Daszek z sygnetu: ten sam kształt co w sygnecie (zaokrąglony wierzchołek i końce), grubość w tej samej proporcji co sygnet, może wychodzić poza format.
- Tylko na gradiencie, daszek biały. Jeden na kompozycję, bez obracania.
- Hasło: biała pierwsza linia, żółta druga (Nunito 900). Logo białe na dole.

## Zdjęcia
- Prawdziwi ludzie i mieszkania, bez stocków; zdjęcia użytkowników tylko za zgodą.
- Ludzie 4:5, pokoje 4:3, światło dzienne, bez filtrów i gradientu na zdjęciu.
- Tekst na zdjęciu tylko na przyciemnieniu Ink 50–60%.