Przejdź do treści

2026

Jak składać markę w całość: interfejsy, kompozycje, materiały firmowe i oznakowanie przestrzeni.

4.2 · Zastosowania

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.

Wersja 2026.1Aktualizacja 2026-10-06 Markdown

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). 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.

  • 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.

  • Musi

    Zachowuj minimalne marginesy wewnętrzne: 40 px w digitalu i 15 mm w druku.

  • 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).

Refindi Guidelinesv2026.1

4.2.b

Siatka 6–12 kolumn

Każdy układ stoi na siatce: 12 kolumn dla złożonych layoutów (strony, prezentacje, PDF), 6 dla prostych kreacji (posty, reklamy). Treść dzielimy w proporcjach 8/4 albo 6/6, margines wewnętrzny w digitalu to co najmniej 40 px. Na telefonie — jedna kolumna.

Siatka
Podział

Tekst: 8 kolumn · obraz: 4 kolumny

Przykład 16:9 · margines 40 px (minimum w digitalu) · odstęp międzykolumnowy rysunkowy — wartość nie jest określona w treści.

Ta sama siatka w formatach z treści

  • A4
  • 4:5
  • 9:16
  • 1:1
  • 16:9
  • 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).
  • Musi

    Ikony, gwiazdki ocen, znaki statusowe, mikrohasła i grafiki CSR umieszczaj celowo — każdy element musi nieść znaczenie, a nie tylko dekorować.

  • Nie wolno

    Nie zniekształcaj kształtu sygnetu użytego jako element graficzny (rozciąganie, zmiana proporcji, przerysowywanie).

  • Powinno

    Elementy ozdobne stosuj minimalistycznie — jako tło, wzór lub akcent wzmacniający spójność, nie jako główną treść.

  • 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ć.

  • 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.

  • 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
  • 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.

  • 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.

  • 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.

  • Nie wolnoPropozycja

    Nie mieszaj w jednej kompozycji ramek o przypadkowych promieniach — elementy tej samej skali mają ten sam narożnik.

  • PowinnoPropozycja

    Promień squircle dobieraj do skali elementu: mniejszy dla małych elementów, większy dla dużych kart i paneli; na witrynie najczęściej 20–28 px, a pigułki (przyciski, przełączniki) mają pełne zaokrąglenie.

Refindi Guidelinesv2026.1

4.2.a

Narożnik zależy od medium i skali

W digitalu ramki mają narożniki squircle z promieniem dobranym do skali elementu (na witrynie najczęściej 20–28 px, pigułki w pełni zaokrąglone). W druku obowiązują stałe promienie z PDF: 4 mm do A5, 6 mm od A4 wzwyż.

Digital · squircle, skala 1:1

Elementy tej samej skali mają ten sam narożnik. Promienie z kodu witryny (tokens: card-hero, search-bar, pill).

Druk · skala formatów zachowana

kształt narożnika: do ustalenia

Ramka rysowana na minimalnym marginesie 15 mm. Czy narożniki w druku mają być squircle, czy zwykłym łukiem — nieustalone (rysunek: łuk).

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).

  • Musi

    Kolor w tekście ma funkcję informacyjną lub akcentującą, nigdy dekoracyjną — wyróżniaj nim punktowo słowa kluczowe, linki, statusy lub CTA.

  • Musi

    Kolor nie może obniżać czytelności — sprawdzaj kontrast tekstu z tłem, zwłaszcza brzoskwiniowego i niebieskiego na jasnych tłach.

  • 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ł.

  • Powinno

    Wariant podstawowy: ciemny tekst (#151515) na jasnym tle lub jasny tekst na ciemnym panelu (#00111F); bez dodatkowego koloru w tekście.

  • 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ę.

  • 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).

  • 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.

  • Powinno

    Zdjęcie w układzie jednomodułowym osadzaj w kształcie sygnetu (kadr w formie sygnetu), a nie w przypadkowej masce.

  • 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.

Refindi Guidelinesv2026.1

4.2.c

Jeden moduł treści, motyw sygnetu

Stała kolejność: mikrohasło z gwiazdkami i logo w górnym pasie, nagłówek (ok. 3 wiersze), krótki podtytuł. Tło buduje duży obrys sygnetu ucięty krawędzią — albo zdjęcie wpisane w kształt sygnetu. Pion i poziom używają tych samych elementów, zmienia się tylko rozkład.

Treść
Wersja
  1. 1Mikrohasło z gwiazdkami — górny pas (lub narożnik).
  2. 2Logo — górny róg.
  3. 3Nagłówek — maks. ok. 3 wiersze.
  4. 4Podtytuł — krótki.
  5. 5Obrys sygnetu — duży, ucięty krawędzią formatu.
  • 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.

  • 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.

Refindi Guidelinesv2026.1

4.2.d

Zdjęcie jako tło i podział kadru

Zdjęcie jest tłem i nośnikiem emocji. Moduły dzieli sama kompozycja kadru: postać po jednej stronie, tekst i logo po drugiej — na spokojnym, kontrastowym fragmencie, w obrębie siatki i marginesów.

Siatka
  1. 1Zdjęcie — tło na cały format, bez ramek.
  2. 2Postać — główny nośnik emocji.
  3. 3Spokojny, kontrastowy fragment kadru — tu stoi tekst.
  4. 4Logo.
  5. 5Obrys sygnetu przez tło — opcjonalnie.
  • 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.

  • Nie wolno

    Ramki w układzie dwumodułowym mają porządkować treść i hierarchię — nie dodawaj ramek wyłącznie dla ozdoby.

  • 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.

Refindi Guidelinesv2026.1

4.2.e

Ramka na tekst, ramka na obraz

Jedna ramka niesie przekaz (nadtytuł, nagłówek, lead), druga — zdjęcie, ekran aplikacji lub grafikę. W poziomie ramki stoją obok siebie i postać może lekko wyjść poza ramkę, łącząc moduły; w pionie układają się jedna nad drugą pod paskiem z logo. Ramki porządkują treść — nie dodajemy ich dla ozdoby.

Ramka tekstowa
  1. 1Ramka tekstowa — nadtytuł, nagłówek, lead (wypełnienie brzoskwiniowe lub ciemne).
  2. 2Ramka obrazu — zdjęcie, ekran aplikacji lub grafika.
  3. 3Postać może lekko wychodzić poza ramkę i łączyć moduły.
  4. 4Pasek z mikrohasłem i logo (pion).
  • 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.

Załączniki

Pod każdym przyciskiem pobierania — zasady użycia pliku w Markdown.

Ten temat nie ma jeszcze zatwierdzonych plików do pobrania. Pełna treść zasad jest dostępna w Markdown.

Cały temat w Markdown (.md)Wszystkie pliki
Do rozstrzygnięcia (7) — rejestr redakcyjny, nie norma
  • PDF (s. 141) podaje stałe promienie digital (8/10/20 px do 1200 px, 10/14/20 px powyżej). Witryna używa squircle z wygładzeniem 1 i promieni zwykle 20–28 px (zakres 10–90 px). Potrzebna oficjalna skala promieni squircle dla materiałów cyfrowych poza witryną (social, prezentacje). (PDF s. 141)
  • Nie ustalono, czy narożniki 4 mm / 6 mm w druku mają być rysowane jako squircle, czy jako zwykły łuk. (PDF s. 141)
  • S. 140 wskazuje blendę „Refined Peach / 80% przezroczystości” (stara nazwa koloru). Do potwierdzenia mapowanie na obecny akcent #FFAE84/#FF9F6B i to, czy 80% oznacza krycie, czy przezroczystość. (PDF s. 140)
  • S. 144 pokazuje kartę z gradientem brzoskwinia–niebieski i kartę z pełnym niebieskim tłem, co stoi w napięciu z zasadą „niebieski tylko jako wyróżnik”. Do decyzji, czy te warianty są dozwolone. (PDF s. 144)
  • Kreacje przykładowe zawierają hasła „5-gwiazdkowa obsługa rzeczy znalezionych”, „5-star service for found items”, „Zyskaj 5-gwiazdkową obsługę… oraz oceny gości” i hasło CSR „Odzyskuj rzeczy — odciążaj planetę”. To obietnice wymagające potwierdzenia biznesowego przed użyciem jako copy. (PDF s. 140, 148-155)
  • Wszystkie wzorcowe hasła („satysfakcja gości”) dotyczą hoteli. Witryna obsługuje szersze segmenty — wzorce kompozycji są uniwersalne, ale przykładowe copy wymaga uzupełnienia o inne segmenty. (PDF s. 148-155)
  • Strony 141-144 w PDF mają w nagłówku sekcji błędną etykietę „Logotyp” (treść dotyczy ramek i koloru w tekście). (PDF s. 141-144)

Powiązane tematy