Logotypy i pole ochronne

Logotyp to lew i nazwa w jednym pliku. Własny ma każda z sześciu marek: insurance, home, health, moto, travel i monochrome, a każda z nich w wersji na jasne i na ciemne tło. Pliki wydaje paczka @polisoteka/design-brand. Znaku nie rysujemy, nie poprawiamy i nie trzymamy w drugim miejscu.

Który plik wziąć

Wybór rozstrzygają trzy pytania. Na żadne nie trzeba pytać grafika.

Mieści się nazwa? Tak: logotyp. Nie, bo miejsce jest małe i kwadratowe: sygnet.

Układ wnosi dość odstępu? Pole ochronne rośnie razem ze znakiem, a padding z tokenów jest stały. -trim wystarcza, gdy padding układu ma co najmniej h/5, gdzie h to wysokość znaku w tym układzie. Poniżej tego progu bierz plik z polem ochronnym w środku. Materiał, który wychodzi poza nasz kod (druk, plik dla partnera, media kit), bierze wersję z polem zawsze, bo po drugiej stronie nikt nie zna naszej skali odstępów.

Wysokość znaku	Padding co najmniej	Krok skali, który to daje
32 px	6,4 px	8 px (space.inline-sm, space.stack-sm)
40 px	8 px	8 px (space.inline-sm, space.stack-sm)
80 px	16 px	16 px (space.inline-lg, space.page-gutter, space.stack-md)
120 px	24 px	24 px (space.stack-lg)
160 px	32 px	32 px (space.stack-xl)

Powyżej 160 px nie wystarcza już żaden token odstępu: największy padding w skali, space.stack-xl, ma 32 px. Znak większy od tego progu bierze plik z polem ochronnym w środku.

Jakie jest tło? Jasne: plik bez sufiksu. Ciemne: -dark. Wariantu nie robimy filtrem z drugiego pliku.

Plik	Postać	Tło
logo.svg	pole ochronne w pliku	jasne
logo-dark.svg	pole ochronne w pliku	ciemne
logo-trim.svg	przycięty do rysunku	jasne
logo-trim-dark.svg	przycięty do rysunku	ciemne

Portal pokazuje wyłącznie swój logotyp: insurance nie sięga po znak home. monochrome jest pełnoprawnym zestawem do panelu operatora, druku jednokolorowego i zestawień z cudzym znakiem. Nie jest zamiennikiem logotypu portalu, gdy kolor jest dostępny.

Warianty

insurance — przedsiębiorca i pracodawca

home — dom i mieszkanie

health — zdrowie

moto — pojazd

travel — podróż

monochrome — wersja jednobarwna

Kolory w znaku są ustalone. Napis „Polisoteka” razem z ® niesie color.text.primary: #0B1326 na jasnym tle i #F8F9FB na ciemnym. Druga linia ze słowem portalu ma stopień 500 rampy swojej marki, w obu wersjach ten sam. insurance i monochrome drugiej linii nie mają.

Pole ochronne

Jednostką odstępów znaku jest x. Liczy się z wysokości lwa h: x = h/5. Dziś h ma 130 px, więc x to 26 px. Lew jest jedynym elementem wspólnym dla wszystkich sześciu marek, więc odstęp liczony z jego wysokości zostaje ten sam także wtedy, gdy zmieni się napis.

Tą jedną jednostką idą wszystkie odstępy znaku:

• pole ochronne wokół logotypu: x z każdej strony;
• odstęp lwa od słowa „Polisoteka”: x;
• pole ochronne wokół sygnetu: x;
• zestawienie ze znakiem partnera: 2x między znakami.

W polu ochronnym nie stoi nic: ani tekst, ani krawędź kontenera, ani obrazek, ani drugi znak.

logo.svg i logo-dark.svg niosą to pole w środku pliku. Nie dokładaj do nich paddingu: wyjdzie 2x i znak zacznie pływać w swoim kontenerze. Odstęp z tokenów dokładasz wyłącznie do plików -trim.

Rozmiar w układzie

Pliki mają we wszystkich sześciu markach te same wymiary: logo.svg 461 × 182 px, logo-trim.svg 409 × 130 px. Wysokość jest wspólna, bo wyznacza ją lew. W układzie ustawiasz wysokość, szerokość wynika z proporcji.

Minimalna wysokość logotypu to 32 px na ekranie (size.logo-sm) i 12 mm w druku (size.logo-print-min). Minimum druku ma jednostkę fizyczną, bo arkusz nie ma piksela CSS. Sygnet schodzi do 16 px na ekranie — poniżej tej wielkości idzie favicon, nie sygnet — i do 6 mm w druku (size.mark-print-min). Tak wygląda jedno i drugie w minimalnej wielkości na ekranie:

logotyp 32 px

sygnet 16 px

logotyp 32 px

sygnet 16 px

Przykład i kontrprzykład

// Tak: plik przycięty, odstęp z tokenów, wysokość steruje skalą.
// Wysokość idzie przez var(), nie przez klasę: Tailwind czyta `--size-*`
// wyłącznie w narzędziu `size-*`, które ustawia SZEROKOŚĆ RAZEM Z WYSOKOŚCIĄ.
// `size-logo-sm` skompiluje się i wciśnie znak w kwadrat — a to jest właśnie
// rozciągnięcie, którego zabrania ta strona. Klasy `h-logo-sm` nie ma.
<header className="flex items-center gap-inline-md px-page-gutter py-stack-md">
  <a href="/" aria-label="Polisoteka, strona główna">
    <img
      src="/brand/insurance/logo-trim.svg"
      alt="Polisoteka®"
      style={{ height: "var(--size-logo-sm)", width: "auto" }}
    />
  </a>
</header>

// Nie
<header className="flex items-center gap-inline-md px-page-gutter py-stack-md">
  <img
    src="/brand/logo.svg"
    alt="Polisoteka®"
    style={{ height: "40px", width: "120px", filter: "brightness(0) invert(1)" }}
  />
</header>

Kontrprzykład ma trzy błędy:

• Plik z polem ochronnym w układzie, który sam wnosi padding: odstęp robi się podwójny i niesymetryczny wobec reszty nagłówka. Tu należy -trim.
• Wymiary wpisane z ręki: wysokość przychodzi z tokenu size.logo-*, a szerokość z proporcji pliku. Wpisana liczba rozciąga znak. Ten sam błąd robi klasa size-logo-sm, która zadaje oba wymiary naraz.
• filter zamiast logo-dark.svg: wersja ciemna zrobiona z jasnego pliku gubi kolor marki i brudzi krawędzie.

Czego nie robimy

Nie robimy	Tak to wygląda	Dlaczego
Rozciągania i spłaszczania		Znak skaluje się wyłącznie proporcjonalnie
Przerysowywania, obracania, przycinania rysunku		Geometria jest wspólna dla wszystkich plików znaku; zmiana w jednym rozjeżdża całą paczkę
Zmiany koloru znaku		Kolor znaku ma własną wartość i nie jest rolą semantyczną do przemapowania
Cienia, obrysu, poświaty i gradientu spoza pliku		Znak jest płaski
Tła bez kontrastu i tła ze zdjęciem pod znakiem		Wariant wybieramy do faktycznego tła, nie na oko
Wstawiania czegokolwiek w pole ochronne		Pole istnieje po to, żeby znak stał sam
Składania naszego znaku z cudzym w jeden rysunek		Dwa znaki stoją obok siebie, nienaruszone
Własnego pliku znaku gdziekolwiek w repozytorium	—	Znak ma jedno źródło; nowy plik czerwieni bramkę paczki

Kolor znaku ma osobną stronę: Kolor. Znak obok znaku partnera ma własne reguły kolejności i odstępu: co-branding.

Nazwa w prozie rządzi się osobną regułą: „Polisoteka®” jest nieodmienne i zawsze nosi ®. Zapis i przykłady: słownik.

Weryfikacja

Na gotowym materiale sprawdź pięć rzeczy:

1. Plik pasuje do układu: znak w naszym komponencie jest -trim, znak w materiale wychodzącym na zewnątrz ma pole ochronne w środku.
2. Wokół znaku nie ma drugiego odstępu ani żadnej treści bliżej niż x.
3. Wariant pasuje do tła, a znak nie jest przefiltrowany z drugiego wariantu.
4. Proporcje zgadzają się z plikiem: szerokość wynika z wysokości, nie z wpisanej liczby.
5. Znak nie jest mniejszy niż minimum: 32 px logotyp, 16 px sygnet, a na wydruku 12 mm logotyp i 6 mm sygnet.

Bramka pnpm -F @polisoteka/design-brand run check:brand pilnuje samych plików: skrótów dostawy, odtwarzalności pochodnych i tego, że żaden plik znaku nie żyje w repozytorium poza paczką. Tego, czy znak jest dobrze użyty na stronie, nie zmierzy. To zostaje przy review.

Źródła

Jedna marka, pięć portali, Sygnet, favicon i awatary, Co-branding i oznaczenie TU, Kolor, Odstępy i rytm, paczka znaku — źródło w repo: packages/design/brand/README.md.