RentFriends Brand Book

Na skróty

Kolory

Yellow
#FFD93D Purple
#A247E3 Deep Purple
#7A2BB8 Pink
#E95BD2 Warm White
#F4F2EE Ink
#0F0F0F

Deep Purple tylko na tekst i linki. Gradient: #A247E3 → #E95BD2, 135°.

Pismo, logo, ikony

Nunito: tekst 400, przyciski 700, nagłówki 800, logo 300.
Nazwa jednym słowem: RentFriends.
Logo od 120 px, sygnet od 32 px.
Ikony: Phosphor Icons.

Tryb ciemny i ton

Tło Ink, karty #1A1918, linki #C88AF2.
Piszemy na „ty”, krótko i konkretnie.

Logo

Dach z uśmiechem i słowo RentFriends w dwóch liniach, krojem Nunito Light.

PoziomeWersja podstawowa.

PionowePlakaty, formaty kwadratowe.

SygnetAvatar, małe formaty.

Ikona appkiBiałe tło, sygnet z gradientem na 72% boku, wyśrodkowany optycznie. Do sklepów plik kwadratowy, zaokrąglenie nakłada system.

Grubość linii

Linia sygnetu ma grubość kreski litery w „Rent”: 4,2% szerokości sygnetu, w każdym rozmiarze.

Pole ochronne

x x x x

x to połowa wysokości sygnetu.

Minimalne rozmiary

Logo poziome

120 px, 30 mm w druku

Logo pionowe

64 px, 18 mm w druku

Sygnet

32 px, 8 mm w druku

Favicon

Jak ikona appki, ale sygnet zajmuje 80% szerokości. Pliki: favicon.svg, PNG 32 px i 180 px.

Logo na tłach

Jasne tłoSygnet z gradientem, napis Ink.

InkSygnet z gradientem, napis jasny.

GradientCałe logo białe.

ŻółtyCałe logo Ink.

Logo partnera

Z logo partnera: ta sama wysokość, między nimi linia #DEDAD4 i odstęp x.

Logo do pobrania

Wszystkie wersje w krzywych: SVG bez fontów i obrysów oraz PNG z przezroczystym tłem.

Pobierz wszystko (ZIP)

Poziome, kolorSVG PNG

Poziome na ciemne tłoSVG PNG

Poziome, białeSVG PNG

Poziome, czarneSVG PNG

Pionowe, kolorSVG PNG

Pionowe na ciemne tłoSVG PNG

Pionowe, białeSVG PNG

Pionowe, czarneSVG PNG

Sygnet, kolorSVG PNG

Sygnet, białySVG PNG

Sygnet, czarnySVG PNG

Ikona appkiSVG PNG

Ikona appki, zaokrąglonaSVG PNG

Ikona appki, ciemnaSVG PNG

Ikona appki, ciemna, zaokrąglonaSVG PNG

FaviconSVG 32 180 512

Kolory

Fiolet i gradient oznaczają markę, żółty główną akcję. Róż tylko w gradiencie i małych akcentach.

Akcja

Yellow#FFD93DRGB 255 217 61
CMYK 0 15 76 0

Marka

Purple#A247E3RGB 162 71 227
CMYK 29 69 0 11

Tekst

Deep Purple#7A2BB8RGB 122 43 184
Tylko tekst i linki

Akcent

Pink#E95BD2RGB 233 91 210
CMYK 0 61 10 9

Tło

Warm White#F4F2EERGB 244 242 238
CMYK 0 1 2 4

Tekst

Ink#0F0F0FRGB 15 15 15
CMYK 0 0 0 94

Pomocnicze

Grey Text#595959

Opisy, daty, podpisy.

White#FFFFFF

Karty i pola.

Line#DEDAD4

Obramowania i separatory.

Stany

Ogłoszenie aktywne Wygasa za 2 dni Nie udało się wysłać

Stan zawsze z ikoną albo słowem.

Proporcje

Warm White 60%

20%

12%

Żółtego najmniej: jedna główna akcja na ekranie.

CMYK orientacyjnie. Fiolet i róż przed drukiem dobieramy z drukarnią.

Kontrast

WCAG 2.1: zwykły tekst 4,5:1, duży tekst (od 24 px albo 19 px bold) i ikony 3:1.

Kolor tekstu / tło	Warm White	White	Ink	Yellow	Purple
Ink	Aa17,1:1Każdy tekst	Aa19,2:1Każdy tekst	–	Aa13,9:1Każdy tekst	Aa4,2:1Tylko duży
White	Aa1,1:1Nie	–	Aa19,2:1Każdy tekst	Aa1,4:1Nie	Aa4,6:1Każdy tekst
Yellow	Aa1,2:1Nie	Aa1,4:1Nie	Aa13,9:1Każdy tekst	–	Aa3,4:1Tylko duży
Purple	Aa4,1:1Tylko duży	Aa4,6:1Każdy tekst	Aa4,2:1Tylko duży	Aa3,4:1Tylko duży	–
Pink	Aa2,7:1Nie	Aa3,0:1Tylko duży	Aa6,3:1Każdy tekst	Aa2,2:1Nie	Aa1,5:1Nie
Purple Text	Aa6,6:1Każdy tekst	Aa7,3:1Każdy tekst	Aa2,6:1Nie	Aa5,3:1Każdy tekst	Aa1,6:1Nie
Grey Text	Aa6,3:1Każdy tekst	Aa7,0:1Każdy tekst	Aa2,7:1Nie	Aa5,1:1Każdy tekst	Aa1,5:1Nie

Każdy tekst od 4,5:1 Tylko duży 3–4,5:1 Nie poniżej 3:1

Tryb ciemny

Appka przełącza się razem z telefonem. Kolory marki i logo zostają te same.

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

Kontrast tekstu liczony na karcie #1A1918, stanów na ich własnym tle.

Zuzia, 20Wrocław · pokój do 1 600 zł

Cisza po 22Pracuję zdalnieJoga

Hej! Też jedziesz do Lizbony?

NapiszZobacz profil

Ogłoszenie aktywne

Fiolet #A247E3 tylko jako wypełnienie z białym tekstem.
Karty odróżnia jaśniejsza powierzchnia i linia, nie cień.

Mapa

Jasna, ciepła mapa w tonie Warm White. Pinezki i dzielnice to elementy interfejsu na wierzchu mapy.

31 Szczepin 48 Stare Miasto 1 450 1 850 1 600 2 100 © OpenFreeMap © OpenMapTiles © OpenStreetMap

Kolory mapy

Ląd #F1EFEA Zabudowa #ECEAE5 Budynki #E4E1DB Drogi #E3E0DA Obrys dróg #D3CFC8 Parki #7FCF92 Woda #6BB0F0 Etykiety #4A4744

Pinezka z ceną: biała z tekstem Ink, wybrana Ink z białym tekstem.
Dzielnica: miękkie pole fioletu, wybrana fiolet w róż.
Lokalizacja zawsze przybliżona. Atrybucja zawsze widoczna.
W trybie ciemnym mapa zostaje jasna.

Styl MapLibre: mapa/rentfriends-map-style.json (OpenFreeMap, MapLibre, bez klucza API).

Gradient

Fiolet w róż, 135°. Bez trzeciego koloru.

Duży biały tekst
na gradiencie

linear-gradient(135deg, #A247E3 0%, #E95BD2 100%)

Tekst na gradiencie

Tylko duży: od 24 px albo 19 px bold (biały ma 3,0–4,6:1).
Drobny tekst na karcie albo na Ink.
Żółty tylko na fioletowej części.
Tekstu nie wypełniamy gradientem.

Typografia

Jeden krój: Nunito z Google Fonts (bezpłatny, licencja OFL).

AaLight 300Napis w logo.

AaRegular 400Tekst.

AaBold 700Przyciski, etykiety.

AaExtraBold 800Nagłówki. 900 w hasłach.

Hasło56–84 px · 900

Razem fajniej

H140 px · 800

Pokoje we Wrocławiu

H228 px · 800

48 osób szuka na Mokotowie

H320 px · 800

Zuzia, 20

Tekst16 px · 400 · 1,6

Pokój na Starym Mieście, 6 minut od tramwaju.

Drobny tekst14 px · 400

Pokój jednoosobowy · 2 osoby · od listopada

Etykieta14 px · 700

Budżet do 1 600 zł

Etykieta w karcie12 px · 800

Kto tu mieszka

Zasady

Tekst od 16 px (w druku 10 pt), podpisy od 12 px.
Linia tekstu do 65 znaków.
Wersaliki tylko w krótkich etykietach w kartach.

Polski skład

Bez jednoliterowych wyrazów na końcu linii (a, i, o, u, w, z).
Cudzysłów „polski”, półpauza – ze spacjami.
Ceny: 1 600 zł / mc.

Ikony

Phosphor Icons: otwarte (MIT, GitHub), 1512 ikon w sześciu grubościach. Miękka, cienka linia pasuje do sygnetu.

house

magnifying-glass

heart

chat-circle

user

users

map-pin

bed

key

calendar-blank

bell

sliders-horizontal

sparkle

arrow-right

check

x

Rozmiary

16 20 24 32 48

Regular · tekst 400Bold · tekst 800

Regular do 24 px, Light od 32 px. Obok pogrubionego tekstu (przyciski, chipy) Bold.

Kolory i stany

Ink Nieaktywna Aktywna Polubione

Wersja wypełniona tylko dla stanu aktywnego. Emoji tylko w zainteresowaniach.

Skąd brać

Canva: phosphoricons.com, pobierz SVG, wgraj w „Przesłane”.
Appka: @phosphor-icons/vue.
Strona i agenci AI: @phosphor-icons/core (SVG) albo @phosphor-icons/web.

Elementy UI

Przyciski i chipy w pełni zaokrąglone, karty 20–28 px, pola 12 px.

Przyciski

SzukajNapiszZobacz pokójPolub

Żółty: jedna główna akcja. Ink: drugorzędne. Obrys: trzeciorzędne.
Gradient tylko przy polubieniu i matchu.
Fokus: obrys 3 px #7A2BB8.

Chipy

Cisza po 22 Pracuję zdalnie Joga Pokój do 1 500 zł

Żółte: to, co macie wspólnego. Pozostałe w kolorze swojej kategorii (niżej).
Ink: wybrany filtr.

Kategorie zainteresowań

🌅 Styl życia 🐱 Zwierzęta 🧘 Sport, podróże 🍳 Jedzenie 🎲 Towarzyskie 📚 Kreatywne

Kolory tylko dla tagów zainteresowań, od 5,3:1. Na karcie najwyżej 6 tagów.

Odstępy i cienie

48121620243240

Odstępy w krokach 4 px. Margines boczny: 16 px na telefonie, 32–40 px na desktopie.
Cień tylko na elementach, które unoszą się nad treścią: wyszukiwarka, pinezki, karta podglądu na mapie.

Głos marki

Na „ty”, krótko, konkretnie. Stałego hasła nie mamy: dobieramy je do kampanii, np. „Razem fajniej” na Erasmusa.

Bezpośredni

Napisz do ZuziRozpocznij konwersację

Konkretny

Nadodrze, 1 000 zł, od listopadaWyjątkowa oferta w świetnej lokalizacji

Życzliwy

Nie udało się wysłać zdjęcia. Spróbuj jeszcze raz.Wystąpił nieoczekiwany błąd.

Ton według odbiorcy

Studenci

Luźno, z humorem. Emoji w postach tak, w interfejsie nie.

Właściciele, agencje

Rzeczowo, liczby, bez emoji. Więcej Warm White i Ink.

Unikamy

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.

Zdjęcia

Prawdziwi ludzie i mieszkania, bez stocków.

Ludzie: pionowo 4:5, w świetle dziennym.

Pokoje: poziomo 4:3, z oknem w kadrze.

Zdjęcia użytkowników tylko za zgodą.
Bez filtrów i gradientu na zdjęciu.
Tekst na zdjęciu tylko na przyciemnieniu Ink 50–60%.

Czego nie robimy

Gradient na żółtym. Róż znika (2,2:1).

Inna grubość napisu. Tylko Nunito Light 300.

Żółte logo.

Stary gradient

Niebieski w gradiencie.

Napisz do nas

Tekst w gradiencie.

Róż jako tło.

Bez cieni, obrysów, obracania i rozciągania logo. Pszczoły już nie używamy.

Key visual

Daszek z sygnetu jako duży element graficzny na gradiencie, z żółtym hasłem.

Mieszkaj z ludźmi,
których lubisz.

Post 1:1.

Zasady

Tylko na gradiencie, daszek biały.
Kształt dachu jak w sygnecie: zaokrąglony wierzchołek i końce, ta sama proporcja grubości. Może wychodzić poza krawędź.
Jeden daszek na kompozycję, bez obracania.
Hasło: biała pierwsza linia, żółta druga. Logo białe na dole.