--- id: zastosowania-kompozycja title: "Kompozycja" section: zastosowania language: pl version: "2026.1" status: approved updated_at: "2026-10-06" url: https://refindi-guidelines.pages.dev/pl/guidelines/zastosowania/kompozycja markdown_url: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md --- # Kompozycja > Jak budować układy Refindi: elementy systemu, ramki i narożniki, kolor w tekście, siatka modułowa oraz wzorce kompozycji jedno- i dwumodułowych dla reklam, social mediów, prezentacji i druku. Kompozycje Refindi są spokojne, modułowe i przewidywalne: jedna siatka, wyraźna hierarchia tekstu, kształt sygnetu jako powracający motyw i kolor używany punktowo. Ten temat opisuje wzorce układów dla reklam, social mediów, prezentacji, okładek i plakatów. Kroje, kolory i narożniki stosujesz według obecnego systemu (Satoshi, paleta z witryny, squircle); układy z PDF są wzorcami kompozycyjnymi, a nie gotowymi plikami. ## Siatka modułowa Siatka 6–12 kolumn jest szkieletem każdej kreacji: porządkuje treść, ustala rytm i pozwala przenosić projekt między digitalem a drukiem. Obsługuje formaty A4, 1:1, 4:5, 9:16 i 16:9. | Siatka | Zastosowanie | |---|---| | 6 kolumn | proste kreacje reklamowe, posty social media, inserty | | 12 kolumn | layouty PDF, plakaty, banery, strony, aplikacje, prezentacje | Szczegóły siatki stron internetowych (kontenery, breakpointy, marginesy) opisuje temat Interfejsy. Tekst osadzony w siatce wyrównujemy do lewej (zob. [Typografia](https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/typografia.md#wyrownanie)). Logo stawiamy w jednym z trzech położeń: lewy róg (domyślny, formalny), prawy róg (podpis równoważący blok tekstu po lewej) albo środek (materiały prestiżowe) — zasady szczegółowe: [Logo → Umiejscowienie](https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md#umiejscowienie). Obowiązujące reguły: - **[MUSI]** Każdą kompozycję buduj na siatce modułowej 6–12 kolumn — dotyczy formatów A4, 1:1, 4:5, 9:16 i 16:9. _Zakres: wszystkie media._ `kompozycja-siatka-01` (źródło: PDF s. 146) - **[POWINNO]** Siatkę 6-kolumnową stosuj w prostych kreacjach (reklamy, posty social media, inserty), 12-kolumnową w złożonych układach (PDF, plakaty, banery, strony, aplikacje, prezentacje). _Zakres: wszystkie media._ `kompozycja-siatka-02` (źródło: PDF s. 146) - **[MUSI]** Zachowuj minimalne marginesy wewnętrzne: 40 px w digitalu i 15 mm w druku. _Zakres: wszystkie media._ `kompozycja-siatka-03` (źródło: PDF s. 146) **Przykład: Siatki dla różnych formatów.** Zestaw siatek kolumnowych z liniami bazowymi dla formatów pionowych (A4, 4:5, 9:16), kwadratu i formatów poziomych (16:9); kolumny zaznaczone pionowymi liniami, marginesy jako pasy przy krawędziach. ## Elementy systemu Oprócz logo i typografii system korzysta z trzech grup elementów: - **Kształt sygnetu** — dwa zachodzące koła ze strzałką. Służy jako wzór, cienki obrys w tle, wypełnienie albo kadr, w który wpisuje się zdjęcie. Zwykle jest duży i częściowo ucięty przez krawędź formatu. - **Przezroczystość i światło** — miękkie, rozmyte plamy w kolorze brzoskwiniowym, które budują głębię za tekstem, przy CTA lub w grafice hero. - **Elementy wspierające przekaz** — ikony, gwiazdki ocen, znaki statusów, mikrohasła, grafiki CSR i dymki powiadomień aplikacji. Ich użycie wynika z treści komunikatu (zob. tematy o grafice, tonie i social mediach). Obowiązujące reguły: - **[MOŻNA]** Kształt sygnetu możesz stosować jako wzór, obrys, wypełnienie lub kadr dla zdjęcia — zawsze w oryginalnych proporcjach; wolno go skalować i obracać. _Zakres: wszystkie media._ `kompozycja-elementy-01` (źródło: PDF s. 140) - **[NIE WOLNO]** Nie zniekształcaj kształtu sygnetu użytego jako element graficzny (rozciąganie, zmiana proporcji, przerysowywanie). _Zakres: wszystkie media._ `kompozycja-elementy-02` (źródło: PDF s. 140) - **[POWINNO]** Elementy ozdobne stosuj minimalistycznie — jako tło, wzór lub akcent wzmacniający spójność, nie jako główną treść. _Zakres: wszystkie media._ `kompozycja-elementy-03` (źródło: PDF s. 140) - **[MOŻNA]** Miękkie blendy (rozmyte plamy koloru brzoskwiniowego) stosuj do budowania głębi — za tekstem, przy CTA lub w grafice hero — tak, by nie obniżały czytelności tekstu. _Zakres: wszystkie media._ `kompozycja-elementy-04` (źródło: PDF s. 140) - **[MUSI]** Ikony, gwiazdki ocen, znaki statusowe, mikrohasła i grafiki CSR umieszczaj celowo — każdy element musi nieść znaczenie, a nie tylko dekorować. _Zakres: wszystkie media._ `kompozycja-elementy-05` (źródło: PDF s. 140) **Przykład: Trzy rodzaje elementów systemu.** Trzy karty: (1) duży obrys sygnetu i ten sam kształt wypełniony szarością, w który wpisano zdjęcie dłoni z telefonem; (2) rozmyta brzoskwiniowa plama światła jako blenda; (3) elementy wspierające: chmurka z pięcioma gwiazdkami i mikrohasłem, rząd gwiazdek, ikona kiełka z hasłem CSR, ekran aplikacji. ## Ramki i narożniki Ramki są miękkie i lekkie: otaczają zdjęcia, statusy, bloki tekstu i CTA. Mają jasne lub pastelowe wypełnienie (np. tło systemu #F5F4F2 lub ciepłą biel), nie mają cienia albo mają bardzo delikatny cień. **Digital.** Obecny system rysuje narożniki jako squircle — superelipsę z pełnym wygładzeniem (na witrynie komponent `SquircleBox`, biblioteka `@squircle-js/react`, `cornerSmoothing = 1`, domyślny promień 24 px). Squircle wygląda łagodniej niż zwykły łuk o tym samym promieniu. Gdzie technika nie pozwala na squircle (np. przeglądarka bez `corner-shape`), witryna zmniejsza promień zwykłego łuku, żeby zachować podobny optyczny efekt. **Druk.** Parametry z PDF obowiązują bez zmian: | Format | Promień narożnika | |---|---| | A5 i mniejsze | 4 mm | | A4 i większe | 6 mm | Obowiązujące reguły: - **[POWINNO]** Ramki stosuj do wydzielania zdjęć, statusów, bloków tekstu i CTA; styl lekki — bez cienia lub z delikatnym cieniem, jasne lub pastelowe wypełnienie. _Zakres: wszystkie media._ `kompozycja-ramki-01` (źródło: PDF s. 141) - **[MUSI]** W mediach cyfrowych narożniki kart, kafli i paneli rysuj jako squircle (superelipsa, pełne wygładzenie), a nie zwykły łuk border-radius. _Zakres: digital._ `kompozycja-ramki-02` (źródło: witryna (repo)) - **[POWINNO]** W druku stosuj promień narożników ramek 4 mm dla formatów A5 i mniejszych oraz 6 mm dla formatów A4 i większych. _Zakres: druk._ `kompozycja-ramki-04` (źródło: PDF s. 141) ## Kolor w tekście Kolor w tekście wspiera przekaz i nie odwraca od niego uwagi. Są trzy warianty: - **Podstawowy** — tekst bez akcentu: ciemny (#151515) na jasnym tle lub jasny na ciemnym panelu (#00111F). Wystarcza w większości materiałów. - **Dodatkowy** — akcent brzoskwiniowy (#FFAE84 / #FF9F6B) w całym haśle albo w wybranych słowach; na tle brzoskwiniowym hasło jest białe z akcentem w czerni. Do budowania hierarchii i emocji, z umiarem. - **Specjalny** — niebieski CTA (#53BDF6) tylko w wezwaniach do działania i linkach. Wartości kolorów pochodzą z obecnej witryny; nazwy i HEX-y z PDF są historyczne (zob. temat Kolory). Obowiązujące reguły: - **[MUSI]** Kolor w tekście ma funkcję informacyjną lub akcentującą, nigdy dekoracyjną — wyróżniaj nim punktowo słowa kluczowe, linki, statusy lub CTA. _Zakres: wszystkie media._ `kompozycja-kolor-tekstu-01` (źródło: PDF s. 142) - **[POWINNO]** Wariant podstawowy: ciemny tekst (#151515) na jasnym tle lub jasny tekst na ciemnym panelu (#00111F); bez dodatkowego koloru w tekście. _Zakres: wszystkie media._ `kompozycja-kolor-tekstu-02` (źródło: PDF s. 142; kolory: witryna (repo)) - **[MOŻNA]** Wariant dodatkowy: kolor brzoskwiniowy możesz zastosować w całym haśle lub w wybranych słowach (np. naprzemiennie z bielą lub czernią), z umiarem i tylko gdy buduje hierarchię. _Zakres: wszystkie media._ `kompozycja-kolor-tekstu-03` (źródło: PDF s. 143) - **[NIE WOLNO]** Niebieski CTA (#53BDF6) w tekście stosuj wyłącznie do wyróżnienia wezwań do działania i linków; nie jako kolor dominujący nagłówków ani haseł. _Zakres: wszystkie media._ `kompozycja-kolor-tekstu-04` (źródło: PDF s. 144; kolor: witryna (repo)) - **[MUSI]** Kolor nie może obniżać czytelności — sprawdzaj kontrast tekstu z tłem, zwłaszcza brzoskwiniowego i niebieskiego na jasnych tłach. _Zakres: wszystkie media._ `kompozycja-kolor-tekstu-05` (źródło: PDF s. 142) **Przykład: Kolor w haśle — wariant dodatkowy.** Sześć kart: hasło białe na brzoskwiniowym, brzoskwiniowe na ciemnym granacie i brzoskwiniowe na jasnym tle; w dolnym rzędzie te same tła z hasłem dwukolorowym — wybrane słowa w akcencie, reszta w bieli lub czerni. Krój w podglądzie (Kumbh Sans) jest historyczny. **Przykład: Niebieski tylko jako wyróżnik.** Karty z hasłem, w którym tylko ostatnie słowo (odpowiednik linku/CTA) jest niebieskie, na tle białym, jasnym i ciemnym; logo pod hasłem. Karta z niebieskim tłem i karta z gradientem brzoskwinia–niebieski to warianty do weryfikacji, nie wzorzec. ## Układy jednomodułowe Jeden moduł treści na tle z motywem sygnetu. Stała kolejność: mikrohasło z gwiazdkami i logo w górnym pasie, pod nimi nagłówek (ok. 3 wiersze), krótki podtytuł. - **Same teksty** — typografia plus duży obrys sygnetu w tle. Pion: obrys w dolnej połowie, ucięty przez krawędź. Poziom (prezentacje, display, okładki PDF): tekst po lewej, obrys po prawej. - **Z fotografią** — zdjęcie wpisane w kształt sygnetu (okrągła część kadruje postać, strzałka zostaje widoczna) albo dłoń z telefonem na tle obrysu. Wersja pozioma (prezentacje, display, slidery, grafiki eventowe) ma tekst po lewej i zdjęcie po prawej. Każdy wzorzec ma wersję ciemną (granatowy panel) i jasną (jasne tło, opcjonalnie z brzoskwiniowymi blendami). Obowiązujące reguły: - **[POWINNO]** W układach jednomodułowych zachowaj stałą hierarchię: logo, nagłówek (maks. ok. 3 wiersze), podtytuł; opcjonalnie mikrohasło nad nagłówkiem lub w narożniku. _Zakres: reklamy, social media, prezentacje, okładki._ `kompozycja-wzorce-01` (źródło: PDF s. 148-151) - **[POWINNO]** Zdjęcie w układzie jednomodułowym osadzaj w kształcie sygnetu (kadr w formie sygnetu), a nie w przypadkowej masce. _Zakres: reklamy, social media, prezentacje, plakaty._ `kompozycja-wzorce-02` (źródło: PDF s. 150-151) - **[POWINNO]** Wersje pozioma i pionowa tej samej kreacji korzystają z tych samych elementów, kolejności treści i siatki — zmienia się tylko rozkład modułów. _Zakres: wszystkie media._ `kompozycja-wzorce-06` (źródło: PDF s. 149, 151) **Poprawnie: Jednomodułowy pion — same teksty.** Cztery plakaty pionowe: u góry mikrohasło z gwiazdkami po lewej i logo po prawej, pod nimi trzywierszowy nagłówek i krótki podtytuł; w dolnej połowie duży obrys sygnetu ucięty przez prawą krawędź. Wersje: ciemna z widoczną siatką, jasna, ciemna i jasna z brzoskwiniowymi blendami. **Poprawnie: Jednomodułowy poziom — same teksty.** Cztery poziome kreacje (prezentacja, display, okładka PDF): logo w górnym rogu, nagłówek i podtytuł w lewej części, obrys sygnetu jako tło po prawej. Dwie wersje pokazują konstrukcję na siatce. **Poprawnie: Zdjęcie w kształcie sygnetu — pion.** Plakaty pionowe z tekstem u góry; w dolnej części zdjęcie mężczyzny z telefonem wpisane w okrągłą część sygnetu, obok strzałka sygnetu; nad zdjęciem dymek powiadomienia aplikacji. Wariant czwarty: dłoń z telefonem na tle obrysu sygnetu. **Poprawnie: Zdjęcie w kształcie sygnetu — poziom.** Poziome wersje tej samej kreacji: logo i tekst w lewej połowie, zdjęcie w kształcie sygnetu lub dłoń z telefonem w prawej; warianty ciemne i jasne, jeden z siatką. ## Układy dwumodułowe bez ramek Zdjęcie jest jednocześnie tłem i głównym nośnikiem emocji. Moduł tekstowy i obrazowy dzieli sama kompozycja kadru — postać po jednej stronie, tekst i logo po drugiej — bez ramek i bloków. Przekaz opiera się na kontraście tekstu ze spokojnym fragmentem zdjęcia; obrys sygnetu może przechodzić przez tło. Obowiązujące reguły: - **[MUSI]** Gdy zdjęcie jest tłem (układ dwumodułowy bez ramek), umieść tekst na spokojnej, kontrastowej części kadru, wykorzystując siatkę i marginesy. _Zakres: wszystkie media._ `kompozycja-wzorce-03` (źródło: PDF s. 152-153) **Poprawnie: Zdjęcie jako tło — poziom.** Zdjęcie wypełnia cały kadr; postać po jednej stronie, logo i tekst po drugiej, na spokojnym, ciemnym fragmencie tła. Bez ramek i bloków — podział na moduły wynika z kompozycji zdjęcia. **Poprawnie: Zdjęcie jako tło — pion.** Dwa plakaty: telefon z aplikacją w kieszeni koszuli oraz mężczyzna z telefonem; tekst w górnej, spokojnej części zdjęcia, logo w prawym górnym rogu. Jeden wariant z nałożoną siatką. ## Układy dwumodułowe z ramkami Przestrzeń dzielą wyraźne ramki: jedna na tekst (nadtytuł, nagłówek, lead), druga na zdjęcie, ekran aplikacji lub grafikę. Proporcje ramek są elastyczne. W poziomie ramki stoją obok siebie, a postać może lekko wychodzić poza ramkę i łączyć moduły. W pionie ramki układa się jedna nad drugą lub ramka treści zajmuje większość formatu pod paskiem z logo. Ramka tekstowa może mieć pełne wypełnienie brzoskwiniowe albo ciemne. Obowiązujące reguły: - **[POWINNO]** W układzie dwumodułowym z ramkami jedna ramka niesie przekaz tekstowy (nadtytuł, nagłówek, lead), druga — treść wizualną (zdjęcie, ekran aplikacji, grafika); proporcje ramek dopasuj do formatu. _Zakres: wszystkie media._ `kompozycja-wzorce-04` (źródło: PDF s. 154-155) - **[NIE WOLNO]** Ramki w układzie dwumodułowym mają porządkować treść i hierarchię — nie dodawaj ramek wyłącznie dla ozdoby. _Zakres: wszystkie media._ `kompozycja-wzorce-05` (źródło: PDF s. 154) **Poprawnie: Dwie ramki — poziom.** Lewa ramka z logo, nadtytułem, nagłówkiem i leadem; prawa ramka ze zdjęciem lub ekranem aplikacji. Postać może lekko wychodzić poza ramkę, łącząc oba moduły. Proporcje ramek różne w zależności od wariantu. **Poprawnie: Dwie ramki — pion.** Plakat z brzoskwiniową ramką treści (nagłówek, podtytuł, dłoń z telefonem) pod paskiem z mikrohasłem i logo; obok mniejsze formaty, w których ramka ze zdjęciem i ramka z tekstem są ułożone jedna nad drugą. ## Historia PDF z 2025 r. zawierał elementy zastąpione obecnym systemem i nie są one normą: - stałe promienie digital: 8 / 10 / 20 px dla szerokości do 1200 px oraz 10 / 14 / 20 px powyżej, z 20 px dla dużych kart i pełnoekranowych CTA — dziś narożniki to squircle; - krój Kumbh Sans w przykładach — dziś Satoshi (logo zostaje w Mazzard H); - nazwy kolorów „Refined Peach”, „Primary Blue”, „eko beige / off white” — dziś paleta z witryny. ## Pliki do pobrania Brak zatwierdzonych plików dla tego tematu. ## Powiązane tematy - Logo: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md - Kolory: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/kolory.md - Typografia: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/typografia.md - Grafika i ikony: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/grafika-i-ikony.md - Fotografia: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/fotografia.md - Interfejsy: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md - Oznakowanie i przestrzeń: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/oznakowanie-i-przestrzen.md - Social media i kampanie: https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/social-media-i-kampanie.md ## Źródła i historia zmian - Brandbook PDF (06.06.2025), s. 138-140 — Tworzenie kompozycji — elementy ozdobne systemu - Brandbook PDF (06.06.2025), s. 141 — Ramki i zaokrąglenia (promienie historyczne) - Brandbook PDF (06.06.2025), s. 142-144 — Kolor w tekście — warianty podstawowy, dodatkowy, specjalny - Brandbook PDF (06.06.2025), s. 145-146 — Siatka modułowa - Brandbook PDF (06.06.2025), s. 147-155 — Layouty jedno- i dwumodułowe - refindi-concierge-web, s. - — src/components/ui/squircle-box.tsx, src/index.css, tailwind.config.ts @e7d7db44 — squircle, kontenery, tokeny - Wersja treści 2026.1, aktualizacja 2026-10-06. - 2 reguł(y) w statusie roboczym lub do przeglądu nie są częścią tego eksportu.