01Logo
Znak zbudowany jest z trzech elementów: sygnetu (crimsonowy kafel z serifowym „P” i kropką), wordmarku „Piotrków.” złożonego Newsreaderem (SemiBold, oś optyczna 72, tracking −2%) z crimsonową kropką oraz — w wersji pionowej — podpisu PORTAL MIEJSKI (Space Mono). Wszystkie pliki SVG mają litery zamienione na krzywe. Każdy wariant istnieje w wersji light, dark, mono-black i mono-white.
Sygnet
Logo poziome
Logo pionowe
Wordmark
Warianty dodatkowe (drugorzędne)
Masthead (winieta strony głównej)
02Kolory
Paleta „gazety miejskiej”: papier + atrament + crimson. Crimson to kolor
akcentu — nigdy koloru długiego tekstu. Na ciemnych tłach akcentem jest łosoś
#E8837E. Pełne tokeny: tokens.css, palety dla
programów graficznych: ASE ·
GPL.
Tryb jasny
Tryb ciemny
03Typografia
Trzy rodziny, wszystkie na licencji SIL OFL (pliki w paczce, katalog
fonty/): Newsreader do nagłówków, Inter do tekstu i UI, Space Mono do etykiet.
| Rola | Font | Uwagi |
|---|---|---|
| Wordmark / masthead | Newsreader SemiBold 600 | oś optyczna 72, tracking −2%, kropka w kolorze akcentu |
| Nagłówki H1–H3 | Newsreader 500–600 | duże stopnie → wysoka oś optyczna (60–72) |
| Tekst, UI | Inter 400–600 | — |
| Etykiety / eyebrow / meta | Space Mono 400–700 | wersaliki, tracking +16–26% |
04Zasady użycia
Pole ochronne i minima
- Pole ochronne = wysokość kropki wordmarku (≈ ¼ wersalika) z każdej strony.
- Minimalne rozmiary: sygnet 16 px · logo poziome 120 px · pionowe 80 px · masthead ≥ 480 px szerokości.
- Wersja light na jasne tła, dark na ciemne; sygnet działa na obu bez zmian.
- Druk jednobarwny / grawer: warianty mono-black / mono-white.
Czego nie robić
- Nie zmieniać koloru kropki (dozwolone tylko: crimson, łosoś na ciemnym, mono).
- Nie rozciągać, nie pochylać, nie dodawać cieni, gradientów ani obrysów.
- Nie składać wordmarku innym fontem niż Newsreader.
- Nie używać wersji light na ciemnym tle (i odwrotnie).
- Nie umieszczać sygnetu na tle w kolorze crimson bez wersji mono.
05Favicon i ikony aplikacji
Komplet wdrożony na produkcji. favicon.svg +
favicon.ico (16/32/48) + apple-touch-icon (180, pełny kadr — iOS
sam zaokrągla rogi) + ikony PWA 192/512 oraz wariant maskable (znak w strefie bezpiecznej 72%).
Snippet HTML
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#F4EEE2">
SVG (krzywe) · PNG · ICO · ASE/GPL · tokens.css · fonty z licencjami · README
06Open Graph i social media