# Piotrków.org — paczka identyfikacji wizualnej (dla grafika)

Wygenerowana 23.08.2026 na podstawie produkcyjnego design-systemu portalu
piotrkow.org (estetyka „gazeta miejska”: papier + atrament + crimson).
Brandbook online: **https://piotrkow.org/brand/**

## Zawartość

```
logo/
  sygnet/     znak sam (kwadrat)          — light / dark / mono-black / mono-white (+ png/)
  wordmark/   sam napis „Piotrków.”       — j.w.
  poziome/    sygnet + wordmark           — j.w.
  pionowe/    sygnet nad wordmarkiem + podpis PORTAL MIEJSKI — j.w.
  masthead/   pełna winieta jak na stronie głównej (metalinia + tytuł + podtytuł)
favicon/    favicon.svg / .ico (16+32+48), favicon-16…256.png,
            apple-touch-icon.png (180), icon-192/512.png, maskable-512.png,
            manifest.webmanifest
og/         og-default (1200×630) — domyślna grafika Open Graph, SVG + PNG
social/     avatar-1024 (profil FB/X/IG), cover-fb-1640x624
paleta/     piotrkow-org.ase (Adobe), piotrkow-org.gpl (GIMP/Inkscape/Krita), tokens.css
fonty/      Newsreader (variable), Space Mono, Inter — z licencjami OFL
```

Wszystkie SVG mają litery **zamienione na krzywe** (żadnych elementów `<text>`
— pliki są niezależne od zainstalowanych fontów). Import do Illustratora /
Affinity / Figmy jest bezstratny.

## Konstrukcja logo

- **Wordmark:** „Piotrków” złożony Newsreaderem (oś optyczna 72 pt, grubość
  SemiBold 600, tracking −2%), zakończony **crimsonową kropką** — to kluczowy
  motyw marki (jak na produkcyjnym masthead).
- **Sygnet:** crimsonowy kafel z serifowym „P” (prawdziwy glif Newsreadera)
  — szczegóły konstrukcji w brandbooku online.
- **Podpis:** „PORTAL MIEJSKI” — Space Mono Regular, wersaliki, tracking +26%.

## Kolory

| Rola | Light | Dark |
|---|---|---|
| Akcent (primary) | `#A4232A` crimson | `#E8837E` łosoś |
| Akcent hover | `#82171D` | `#F0A5A1` |
| Tło „papier” | `#F4EEE2` | `#1A1613` |
| Tło wtórne | `#E9E1D0` | `#241E19` |
| Tekst „atrament” | `#16130F` | `#EDE6D8` |
| Tekst soft / mute | `#57514A` / `#6E655B` | `#CBC2B4` / `#A2988A` |
| Linie | `#E2D9C8` | `#37302A` |
| Powierzchnie zawsze-ciemne | `#14110E` (board) | — bez zmian |
| Akcent uzupełniający | `#17726B` teal | `#5FB3AA` |

Zasady: crimson `#A4232A` to kolor akcentu — nigdy kolor długiego tekstu.
Na ciemnych tłach akcentem jest łosoś `#E8837E` (crimson ma za mały kontrast).
Duża wypełniona powierzchnia z białym tekstem = zawsze `#A4232A` (nie łosoś).

## Typografia

- **Newsreader** (variable, opsz 6–72) — nagłówki, tytuły, wordmark. W dużych
  stopniach używać wysokiej osi optycznej (opsz 60–72).
- **Inter** — tekst i UI.
- **Space Mono** — etykiety, eyebrow, metadane; wersaliki + szeroki tracking.

Wszystkie na licencji SIL OFL 1.1 (pliki OFL.txt w `fonty/`) — można je
osadzać, modyfikować i używać komercyjnie; nie wolno ich sprzedawać solo.

## Zasady użycia logo

- **Pole ochronne:** wokół logo zostaw odstęp równy wysokości kropki wordmarku
  (≈ ¼ wysokości wersalika) z każdej strony.
- **Minimalne rozmiary:** sygnet 16 px; logo poziome 120 px szerokości;
  pionowe 80 px szerokości; masthead tylko ≥ 480 px.
- **Tła:** wersja `light` na papierze/jasnych tłach; `dark` na ciemnych;
  mono do druku jednobarwnego / grawerów. Sygnet (crimsonowy kafel) działa na
  obu rodzajach tła bez zmian.
- **Nie wolno:** zmieniać koloru kropki na inny niż crimson/łosoś, rozciągać,
  dodawać cieni/gradientów/obrysów, składać wordmarku innym fontem,
  umieszczać wersji `light` na ciemnym tle.
- Prawdziwy knockout (wycięcie litery z kafla zamiast białego wypełnienia)
  można uzyskać boolean-em w Illustratorze — ścieżki są czyste.

## Techniczne

- `favicon/` jest wdrożony na produkcji (piotrkow.org) — edge nginx.
- `paleta/tokens.css` = 1:1 tokeny z produkcyjnego `globals.css`.
- Źródłem prawdy dla kolorów jest produkcyjny design-system portalu;
  w razie rozbieżności wygrywa `globals.css` w repo.
