# Brandbook GSI — system wizualny

Wygenerowane z dokumentów brandbooka. Źródło: https://gsi-platform.pl/brandbook/
Wartości liczbowe (barwy, skala pisma) w postaci do odczytu maszynowego: https://gsi-platform.pl/brandbook/ai/system.json

Zakładka Znak wymienia pliki logotypów — ich adresy są w `system.json`, bo lista powstaje z katalogu, nie z treści dokumentu.

# Znak

Znak

## Komplet znaków do materiałów i dokumentów

Logotypy i sygnety w czterech wariantach na markę, favikony, manifest aplikacji. Obok pola organizations.logo_url, nie zamiast: tamto wskazuje JEDEN plik używany przez aplikację, tutaj leży komplet do dokumentów, okładek i materiałów — żeby nikt nie wyciągał znaku ze zrzutu ekranu ani z cudzej prezentacji.

---

# Kolor

Gradienty

## Dwanaście meshy

Dziewięć przyjętych — sześć na czarnym tle, trzy na białym. Wspólny parametr: rozmycie 89. Ziarno nie siedzi w plikach, tylko w arkuszu, warstwą nad nimi: 21% w trybie luminosity, kafelek o stałym rozmiarze w pikselach.
Paleta

## Piątka marki

Kanały chodzą po jednym zbiorze liczb — 8, 21, 55, 89, 144, 233. Stąd granat i niebieski są z jednej rodziny mimo różnego wrażenia.

### Rdzeń

Niebieski i czarny zmierzone na żywej gsi-podklucz.pl 2 sierpnia 2026, nie przepisane z pamięci. Opisy mówią, gdzie kolor stoi na stronie.
Akcent: odnośniki, przyciski akcji, obwódki. Jedyny mocny kolor na białym.
Nagłówki, nawigacja, ciemne sekcje. Nie czyste #000 — to byłoby twarde.
Tło sekcji przemiennych, oddziela bloki bez rysowania linii.
Drugi zestaw

## Drabiny rozjaśnień i gradienty liniowe

Ze screenshotu wyszły dwie rzeczy, których meshe nie dają: rozjaśnienia każdego koloru i trzy dwustopniowe gradienty do zapisania w CSS. Bazy screenshotu były przesunięte względem piątki — poniżej wszystko przeliczone na kanoniczne hexy przez color-mix, krokami 20 / 40 / 60 procent bieli.

### Pięć par

Pięć kolorów daje dziesięć kombinacji, ale tylko połowa nadaje się do użycia. Kryterium jest mierzalne: ile nasycenia gubi się w połowie przebiegu. linear-gradient interpoluje po linii prostej między dwoma punktami, więc im dalej od siebie leżą barwy, tym bliżej osi neutralnej ta linia przechodzi — i tym bardziej środek siwieje. Poniżej pięć par, które ten test przechodzą, uszeregowanych od najczystszej.
róż → pomarańcz
środek #e96475 · spadek 4%
fiolet → róż
środek #a13790 · spadek 21%
turkus → fiolet
środek #5990bd · spadek 29%
granat → turkus
środek #3190a1 · spadek 33%
granat → fiolet
środek #313775 · spadek 36%
Generator

## Nowe meshe robimy tutaj

Odpowiednik generatora z learnui.design, z jedną różnicą, dla której powstał: nie da się nim wyprodukować gradientu spoza palety. Tamto narzędzie przyjmuje dowolne hexy, więc pierwszą rzeczą w pośpiechu jest wklejenie barwy „mniej więcej naszej". Tu barwy są zamknięte, a losowanie chodzi po łańcuchu sąsiedztw, więc plamy lądujące obok siebie nie robią martwej strefy w przejściu.

**Podejrzyj wynik**

---

# Typografia

Typografia

## Skala Montserrat w kierunku powściągliwym

Hierarchia budowana wagą, nie rozstrzeleniem. Ujemny tracking na dużych stopniach to korekta optyczna — Montserrat ma szerokie sidebearingi i bez niej display się rozłazi.
- H1 hero — waga 300clamp(2.5rem, 6vw, 4.25rem)letter-spacing: -.03emline-height: 1.05
- H2 statement — waga 400clamp(1.75rem, 3vw, 2.5rem)letter-spacing: -.02emline-height: 1.15
- H3 label sekcji — waga 500 · 1,25remletter-spacing: -.01emsentence case
- Eyebrow / nav — waga 400 · 0,75remletter-spacing: .09emUPPERCASE — jedyne miejsce z rozstrzeleniem
- Body marketing — waga 400 · 1remline-height: 1.7miara 62ch
- Body Platform — waga 400 · 0,875remline-height: 1.5gęściej — narzędzie pracy
- Small / meta — waga 400 · 0,8125remkolor #8a8a8a

---

# Obraz

Zdjęcia

## Welon wchodzi od krawędzi

Welon niesie całą parę gradientową marki, nie jeden kolor gasnący w przezroczystość. Barwa i zasięg są rozdzielone na dwie własności: background trzyma pełny gradient, mask-image decyduje gdzie ląduje. Tryb screen dodaje światło zamiast dokładać pigment, więc czyta się jak refleks, nie jak warstwa lakieru.
Dwa traktowania. Poświata narożna siedzi w rogu i zanika przed środkiem — wnętrze zostaje widoczne w całości. Pasmo zimne ma osie prostopadłe: ramp biegnie pionowo, zanik poziomo, dzięki czemu w widocznym pasie czytelny jest cały przebieg pary. Oba na czterech kadrach, bo to od kadru zależy, które zadziała.
Bez nakładki — Realizacja jako dowód. Reguła z § 2.4 zostaje nietknięta.
Poświata narożna, ciepła — Fiolet → róż → pomarańcz, maska promienista z lewego dolnego.
Pasmo zimne — Granat → fiolet → turkus w tym samym zapisie.
Bez nakładki — Kadr chłodniejszy i o wyższym kluczu — więcej bieli, mniej średnich tonów.
Poświata narożna, ciepła — Ten sam zapis. Na chłodnej szarości ściany kolor wychodzi czyściej niż na beżu.
Pasmo zimne — Najspokojniejsze z czterech. Kandydat pod nagłówek po prawej stronie.
Bez nakładki — Kadr gęsty i kontrastowy: ciepłe drewno, czerń okapu, firany w prześwietleniu.
Poświata narożna, ciepła — Ląduje na podłodze i froncie wyspy — najciemniejszej partii kadru.
Pasmo zimne — Zimna para kontra ciepłe drewno — sprawdzian, czy welon nie walczy z kadrem.
Bez nakładki — Jedyny ciemny kadr w zestawie. Granit i lakobel dają duże partie w cieniu.
Poświata narożna, ciepła — Tu screen pracuje pełną parą — na ciemnym blacie kolor wchodzi jak światło.
Pasmo zimne — Granat na granicie znika, turkus u dołu wychodzi — pokazuje, gdzie para ma siłę.

---

# Powierzchnie

Brandbook · część 12

## Powierzchnie

Tło hero nie jest obrazkiem ani gradientem. To parametryczna powierzchnia liczona w WebGL2 — jeden czworokąt i shader. Marki różni forma, nie technika.
Zasada

## Jedna maszyneria, wiele form

Wstęga powstała jako tło jednej strony. Gdy stron zrobiło się siedem, kuszące było napisanie siedmiu efektów. Zamiast tego rozdzielono to, co wspólne, od tego, co różni.
- Wspólne — materiał marki
Rampa po łańcuchu pięciu stopów z interpolacją wyłącznie między sąsiadami. Krycie od ustawienia płata — krawędzią jaśniej, płasko bledziej. Prążkowanie włókna. Maska chroniąca nagłówek. Zatrzymanie pętli poza widokiem i poszanowanie „ogranicz ruch”.
- Różne — trzy funkcje i trzy liczby
Ścieżka środka płata, prawo skręcenia, prawo szerokości — plus krycie, udział cieniowania i miękkość brzegu. Nowa forma to tyle i nic więcej.
Przypisanie

## Siedem serwisów, siedem powierzchni

Powierzchnia jest znakiem marki, nie ozdobnikiem. Dwie marki z tą samą formą to dwie marki bez rozpoznawalnego tła.
- Serwis
- Forma
- Dlaczego ta
- gsi-platform.pl
- Wstęga
- Skręcony płat biegnący łukiem. Powstała pierwsza i zostaje wyróżnikiem Platformy — jedynego serwisu, który działa, a nie mówi.
- gsi-podklucz.pl
- Kolumna
- Wszystko nawinięte na jedną oś. To jest wprost claim marki: jeden kosztorys, jeden harmonogram, jedna osoba do kontaktu.
- gsi-dom.pl
- Żagiel
- Jednostronne wybrzuszenie czyta się jak połać. Spokojniejsza od serpentyny, a nagłówek tej marki jeszcze urośnie.
- pfm-kuchnie.pl
- Tafla
- Tafla to płyta — materiał, z którego marka robi meble. Przy okazji najcichsza forma zestawu, więc nie konkuruje z produktem.
- gsi-grupa.pl
- Rzeka
- Kilka szerokich pasm płynących jednym nurtem.
- gsi-market.pl
- Serpentyna
- Sklep żyje z ruchu i promocji. Ostre nawroty dają energię, której nie ma żadna forma z rodziny spokojnej.
- pfm-smart.pl
- Klepsydra
- Sklep PFM ma zostać w rodzinie tafli: przewężenie w połowie wysokości jest równie ciche, a odróżnia go od strony marki.
Podgląd

## Siedem form na żywo

Kadry w proporcji 16:9, czyli w zakresie, w którym powierzchnie są liczone.
Wstęga — gsi-platform.pl
Kolumna — gsi-podklucz.pl
Żagiel — gsi-dom.pl
Tafla — pfm-kuchnie.pl
Rzeka — gsi-grupa.pl
Serpentyna — gsi-market.pl
Klepsydra — pfm-smart.pl
Reguły

## Cztery rzeczy, które ograniczają każdą formę

- Barwa — tylko po łańcuchu
Rampa interpoluje wyłącznie między sąsiadami tablicy pięciu stopów: granat → turkus → fiolet → róż → pomarańcz. Para odrzucona w teście nasycenia nie może więc powstać przez przypadek — nie odradzamy jej, tylko czynimy niemożliwą.
- Kadr — pion, nie poziom
Wszystkie formy stoją pionowo. Powód jest mierzalny: shader dzieli x przez proporcję kadru, więc forma pozioma działa w zakresie 1,5–2,4, a poniżej rozdziera się na telefonie. Pionowa znosi każdą proporcję.
- Nagłówek — próg z miary, nie z oka
Maska gasi lewą stronę, bo tam stoi nagłówek. Próg liczy się z jego miary: 16 znaków przy stopniu display to około 39% szerokości kadru — do 20% czysto, do 42% ledwie muśnięte, pełne tło od 70%. Forma, która przy takiej masce znika, jest narysowana za daleko w lewo.
- Krycie — zależy od liczby pasm
Mieszanie idzie z premnożoną alfą na bieli: wynik to barwa·α + biel·(1−α). Wstęga ma dziewięć płatów przechodzących przez siebie, więc alfa się sumuje. Formy o pasmach równoległych nie nakładają się wcale — piksel dostaje alfę jednego płata, resztę dokłada biel i barwa blednie do pastelu. Dlatego krycie, udział cieniowania i miękkość brzegu są parametrami formy, nie stałymi: mniej pasm to wyższe krycie i pełniejszy brzeg.
Pułapka

## Limit kontekstów WebGL

Przeglądarki trzymają ograniczoną liczbę żywych kontekstów WebGL na dokument — Chrome około szesnastu.
Po przekroczeniu nie dostajesz błędu. Przeglądarka po cichu odbiera kontekst najstarszemu płótnu, więc pierwsze kadry na stronie gasną, a strona potrafi się zaciąć. Złapane na katalogu z dwudziestoma jeden formami naraz — na produkcji hero jest jedno, więc tam problem nie istnieje.
Skrypt tworzy kontekst dopiero, gdy płótno wchodzi w kadr, a przy przekroczeniu limitu zwalnia najdawniej oglądane jawnie, przez WEBGL_lose_context. Jawnie, bo bez tego kontekst czeka na zbieracz śmieci, czyli na nieokreślony moment — a limit obowiązuje natychmiast.
Ziarno

## Ziarno idzie na cały kadr, nie na samą powierzchnię

Zakładka Kolor opisuje ziarno jako warstwę nad meshem. Przy hero obowiązuje mocniejszy zapis: arkusz szumu kładzie się na całą wysokość kadru — także po lewej, gdzie powierzchni nie ma i zostaje samo tło.
Skutek jest widoczny natychmiast i o niego chodzi: biel przestaje być płaską bielą ekranu. Pod nagłówkiem robi się bardzo jasna, drobnoziarnista szarość, która czyta się jak papier albo tynk, a nie jak pusty prostokąt. Kadr bez ziarna po lewej stronie wygląda przy nim jak niedokończony — powierzchnia ma fakturę, tło nie ma, i widać szew między nimi.
- Wartości — bez odstępstw
Kafel 160 × 160 px, feTurbulence typu fractalNoise, baseFrequency 0.45, numOctaves 2, stitchTiles: stitch. Krycie 21%, tryb mieszania luminosity.
- Dlaczego luminosity — a nie zwykłe krycie
Ten tryb bierze z szumu jasność, a barwę zostawia podkładowi. Nad bielą, która nie ma nasycenia, zostaje więc czysta szarość — stąd ten wygląd. Nad powierzchnią barwa marki nie jest ruszona, dochodzi wyłącznie faktura. Zwykłe krycie rozjaśniłoby gradient i zabrało mu nasycenie.
- Kafel w pikselach — ekranu, nie rysunku
Szum wypalony w SVG kłamie w każdym rozmiarze poza 1:1, bo feTurbulence liczy się w jednostkach użytkownika. Dlatego ziarno jest osobnym arkuszem o stałym rozmiarze kafla, a nie częścią obrazu pod spodem. Ta sama reguła co przy meshach w zakładce Kolor i ten sam powód: przy kaflu 320 px na płótnie 1000 jednostek okres szumu wypadał na 0,32 piksela, czyli gęściej niż siatka próbkowania — i zamiast ziarna wychodził aliasing.
Kod

## Gdzie to leży