Wytyczne marki · Podstawy

Wersja 1.0 · wrzesień 2026

Wytyczne markiPodstawy

Logo, kolorystyka i typografia. Wszystko, czego potrzebujesz, aby poprawnie używać marki vignetim.

Pobierz PDF Pobierz logo

01 · LogoUkłady i kolory

Logo

Układy i warianty kolorystyczne

Cztery zatwierdzone układy

Poziomy · symbol

Domyślny. Strony internetowe, dokumenty, prezentacje, stopki e-mail.

PNG

Pionowy · symbol

Formaty kwadratowe i pionowe, media społecznościowe, roll-upy.

PNG

Poziomy · znak w kafelku

Nagłówki w aplikacji, grafiki do sklepów z aplikacjami.

PNG

Pionowy · znak w kafelku

Ekrany startowe, kreacje reklamowe.

PNG

Trzy wersje kolorystyczne

Teal / jasne tło

Biel, Neutral 50, Teal 50.

PNG

Biały / tło teal

Teal 500 do 800.

PNG

Biały / ciemne tło

Neutral 800 do 900, na zdjęciach.

PNG

Dostępne również

Do druku jednobarwnego służy jednobarwna ciemna wersja. Używaj tego pliku zamiast konwertować logo do skali szarości.

Jednobarwny ciemny

PNG

Logotyp zawsze zapisujemy małymi literami, z kropką: vignetim. Nigdy nie zaczynaj go wielką literą i nie dodawaj rozstrzelenia.
Nigdy nie umieszczaj znaku w kafelku teal na tle teal. Znika. Na tle teal używaj samego białego symbolu.
Używaj samego symbolu lub znaku w kafelku tylko wtedy, gdy nazwa marki pojawia się w innym miejscu tej samej powierzchni: ikona aplikacji, favicon, zdjęcie profilowe.
Nigdy nie składaj układów ręcznie. Zawsze używaj dostarczonego pliku; nigdy nie przestawiaj jego elementów.

01 · LogoPole ochronne i rozmiar

Pole ochronne i minimalny rozmiar

Przestrzeń wokół logo, rozmiary zachowujące czytelność

Zostaw co najmniej 0.5 X wolnej przestrzeni z każdej strony logo. X to wysokość symbolu (lub znaku w kafelku) w danym układzie. W tym obszarze nie może znaleźć się żaden tekst, obraz, linia, inne logo ani krawędź strony.

Linia przerywana = granica logo · Zacieniony obszar = pole ochronne

Minimalne rozmiary

Element	Cyfrowo	Druk
Układ poziomy · symbol	140 px	30 mm
Układ poziomy · znak w kafelku	160 px	34 mm
Układ pionowy · symbol	72 px	16 mm
Układ pionowy · znak w kafelku	80 px	18 mm
Symbol (samodzielnie)	20 px	5 mm
Znak w kafelku (samodzielnie)	44 px	8 mm

Wartości oznaczają szerokość. Poniżej tych rozmiarów zamiast układu używaj samego symbolu lub znaku w kafelku.

Dwa wyjątki

Ikona aplikacji: zasada pola ochronnego nie obowiązuje. Znak w kafelku wypełnia cały kadr, a platforma zaokrągla rogi.
Favicon (16 do 32 px): znak w kafelku staje się nieczytelny; użyj samego symbolu teal na przezroczystym tle.

Obok innych logo

Zachowaj co najmniej 1 X odstępu między dwoma logo i wyrównaj je do tej samej wysokości optycznej.

02 · KolorystykaPaleta kolorów

Kolorystyka

Jeden kolor marki, jedna skala neutralna

Kolor marki to Teal 500 · #049CB9. Nie ma drugiego koloru marki; głębię uzyskujemy odcieniami skali teal i neutralnymi szarościami.

Vignetim teal

Kolory neutralne

Wartości techniczne

HEX: #049CB9
RGB: 4 · 156 · 185
CMYK (ref.): 98 · 16 · 0 · 27
PANTONE (ok.): 313 C do 314 C

CMYK to wartość referencyjna wyliczona; konwertuj ją za pomocą profilu ICC drukarni.

Proporcje użycia

70%

20%

10%

Biel / Neutral 50: Przestrzeń
Neutral 600 do 900: Tekst i struktura
Teal: Akcent i działanie

Każdy ekran ma dokładnie jedno główne działanie w kolorze teal.

Stany przycisków

Domyślny · Teal 500

Najechanie · Teal 600

Wciśnięty · Teal 700

Drugorzędny

Trzy zasady kontrastu

Teal 500 nie jest kolorem tekstu (3.25:1 na białym). Do tekstu i linków używaj Teal 700.
Biały tekst na Teal 500 musi mieć co najmniej 18 px / 14 pt i być pogrubiony; przy mniejszym tekście użyj tła Teal 700.
W trybie ciemnym akcentem jest Teal 300 do 400; Teal 500 nie wystarcza na ciemnym tle.

03 · TypografiaInter

Typografia

Inter, jeden krój, cztery grubości

Inter to jedyny krój pisma marki. Używamy wyłącznie grubości 400, 500, 600 i 700. Jeśli nie można załadować Inter, użyj czcionki systemowej, a następnie Arial.

Aa Bb Cc Çç Ğğ Iı İi Şş Öö Üü 0123456789

Regular · 400

Tekst główny, dłuższe treści.

Medium · 500

Etykiety, nagłówki tabel, wyróżnienia.

SemiBold · 600

Nagłówki, przyciski, nadtytuły.

Bold · 700

Tylko nagłówki kampanii.

H1 32 / 38 px · 600 · -0.020em

Twoja winieta gotowa przed granicą

H2 24 / 30 px · 600 · -0.016em

Jak działa winieta elektroniczna?

H3 20 / 26 px · 600 · -0.012em

Wpisz numer rejestracyjny pojazdu

Body 16 / 26 px · 400

Aplikacja wyśle Ci przypomnienie, gdy będziesz 30 km od granicy.

Body S 14 / 22 px · 400

Ceny opierają się na oficjalnych stawkach winiet w każdym kraju.

Overline 11 / 14 px · 600 · +0.11em · CAPS

Kraje · Ceny · FAQ

Interlinia: 1.10 do 1.25 dla nagłówków, 1.50 do 1.65 dla tekstu głównego. Długość wiersza 60 do 75 znaków. Zawsze wyrównanie do lewej.

Nie składaj tekstu głównego wersalikami. Wersaliki są tylko dla nadtytułów i krótkich etykiet.
Nie dodawaj rozstrzelenia do tekstu głównego i nie składaj go w kolorze teal.
Nie rozciągaj ani nie pochylaj tekstu; żadnej sztucznej kursywy ani sztucznego pogrubienia.
Używaj najwyżej czterech poziomów na jednej powierzchni.

Pułapka tureckich wielkich liter

Przy automatycznej konwersji “i” musi zmienić się w İ. Ustaw lang="tr" w HTML i używaj toLocaleUpperCase('tr') w kodzie. W przeciwnym razie “istanbul” zmieni się w “ISTANBUL”.

Działa to też w drugą stronę: tekst angielski wymaga lang="en", inaczej “Size” zmieni się w “SİZE”.

Języki: podzbiory latin-ext dla TR i RO, cyrillic dla UA, latin dla DE i EN. Wszystkie są częścią Inter. Nigdy nie zmieniaj kroju pisma dla innego języka.

01 · LogoNiewłaściwe użycie

Niewłaściwe użycie

Czego nigdy nie robić z logo

Ta lista nie jest wyczerpująca: każda zmiana logo względem dostarczonego pliku jest niewłaściwym użyciem.

Niepoprawnie: Zniekształcanie proporcji — Zniekształcanie proporcji

Niepoprawnie: Zmiana koloru — Zmiana koloru

Niepoprawnie: Stosowanie gradientu — Stosowanie gradientu

Niepoprawnie: Dodawanie obrysu — Dodawanie obrysu

Niepoprawnie: Cienie i efekty — Cienie i efekty

Niepoprawnie: Przestawianie elementów — Przestawianie elementów

Niepoprawnie: Tło o niskim kontraście — Tło o niskim kontraście

Ponowne składanie logotypu

Niepoprawnie: Naruszanie pola ochronnego — Naruszanie pola ochronnego

Niepoprawnie: Umieszczanie w zbędnej ramce — Umieszczanie w zbędnej ramce

Niepoprawnie: Stosowanie przezroczystości — Stosowanie przezroczystości

Niepoprawnie: Wersaliki i rozstrzelenie — Wersaliki i rozstrzelenie

Niepoprawnie: Konwersja do skali szarości — Konwersja do skali szarości

Gdy wymagany jest druk jednobarwny, użyj zatwierdzonej jednobarwnej ciemnej wersji, a nie skali szarości.

ŚciągawkaWszystko na jednej stronie

Ściągawka

Cały przewodnik w skrócie

Karta kolorów

Teal 500 · marka#049CB9
Teal 700 · tekst / linki#046B80
Teal 300 · akcent w trybie ciemnym#5FCEE2
Neutral 900 · nagłówki#161B1E
Neutral 600 · tekst drugorzędny#565E64
Neutral 50 · powierzchnia#F7F8F9

Pięć zasad

Używaj logo z dostarczonego pliku.
Zostaw 0.5 X pola ochronnego z każdej strony.
Teal 500 nie jest kolorem tekstu. Używaj Teal 700.
Jeden krój pisma: Inter, 400 / 500 / 600 / 700.
Teal zajmuje najwyżej 10% każdej powierzchni.

Lista plików

Wszystkie logoZIP
vignetim-horizontal-tealPNG
vignetim-horizontal-whitePNG
vignetim-horizontal-single-colour-darkPNG
vignetim-vertical-tealPNG
vignetim-badge-horizontalPNG
vignetim-badge-verticalPNG
vignetim-badgePNG
vignetim-symbol-teal / whiteNa życzenie
vignetim-appicon-1024Na życzenie
vignetim-favicon-16/32/48Na życzenie

Do druku i dużych formatów poproś o pliki wektorowe (SVG lub EPS). PNG tylko tam, gdzie wektory nie są obsługiwane.

Ikona aplikacji

App Store (iOS): 1024 × 1024 px, bez przezroczystości
Google Play: 512 × 512 px, 32-bitowy PNG
Play · grafika promocyjna: 1024 × 500 px
Profil w mediach społecznościowych: 1000 × 1000 px

Prześlij kwadrat na spad, bez zaokrąglonych rogów. System operacyjny zaokrągla je sam.

Zmienne CSS

:root {
  --brand-500: #049CB9;
  --brand-600: #03849E;
  --brand-700: #046B80;
  --brand-300: #5FCEE2;
  --brand-50: #EAF8FB;
  --ink-900: #161B1E;
  --ink-600: #565E64;
  --ink-200: #DDE1E4;
  --ink-50: #F7F8F9;
  --font-sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

Pytania i akceptacje

W sprawie zastosowań nieopisanych w tym przewodniku lub aby zamówić nowy plik, skontaktuj się z opiekunem marki.

Wersja 1.0 · wrzesień 2026