Księga marki

Paleta, typografia i zasady

Wszystkie wartości poniżej pochodzą wprost z pliku src/app/globals.css. Materiały marketingowe i produkt używają jednej palety — zmiana tokenu w aplikacji musi trafić także tutaj, inaczej marka zacznie się rozjeżdżać.

Punkt wyjścia

Skąd te barwy

Paleta jest zdjęta z pola w porze żniw, a nie z generatora. Podłożem jest kość słoniowa, nie czysta biel — ekran telefonu czytany w pełnym słońcu mniej razi i dłużej się na niego patrzy. Atrament jest ciepłą czernią z domieszką brązu, bo czysta szarość obok złota kłosa wygląda jak pomyłka drukarni.

Kolorem podstawowym jest zieleń oziminy. Akcentem — złoto dojrzałego kłosa, używane oszczędnie i tylko tam, gdzie coś naprawdę wymaga uwagi. Trzy barwy ról odpowiadają trzem stronom handlu: zieleń pola, błękit Wisły i ochra traktu.

Kolory marki

Podstawa

#1E6626
Żyto oklch(0.45 0.12 145) Kolor podstawowy. Przyciski akcji, logotyp, linki, stany powodzenia.
#FADB90
Kłos oklch(0.9 0.1 88) Akcent. Wyróżnione oferty, zaznaczenie tekstu, podkreślenia. Nigdy jako tło całej sekcji.
#FCFAF6
Kość słoniowa oklch(0.985 0.006 90) Podłoże strony. Mniej odbić w słońcu niż czysta biel.
#221811
Atrament oklch(0.22 0.02 60) Tekst podstawowy. Ciepła czerń, nie szarość.
#5E534A
Atrament wyblakły oklch(0.45 0.02 60) Tekst drugorzędny, opisy, podpisy.
#DCD7CF
Linia oklch(0.88 0.012 80) Obramowania, linie włosowe, podziały tabel.

Barwy ról

Jedna barwa na uprawnienie

Barwa roli niesie informację, nie ozdobę. Ta sama zieleń oznacza rolnika w nawigacji, na odznace roli i na górnej krawędzi bloku. Konto z trzema uprawnieniami zawsze wie, w jakim kapeluszu stoi.

#1E6626
Rolnik oklch(0.45 0.12 145) Zieleń pola. Ten, kto zasiał.
#065DA0
Kupujący oklch(0.47 0.13 250) Błękit Wisły. Ten, kto kupuje i odbiera.
#964E00
Przewoźnik oklch(0.5 0.13 62) Ochra traktu. Ten, kto wiezie.
#4B4B5D
Administrator oklch(0.42 0.03 285) Przywilej platformy, nie rola handlowa. Celowo bez barwy pola.

Znaczenie

Stany

Barwy znaczeniowe są oddzielone od akcentu. Złoto kłosa nigdy nie oznacza powodzenia ani błędu.

#005E26
Powodzenie oklch(0.42 0.12 150) Potwierdzona sprzedaż, zaakceptowany przewoźnik.
#8A4C00
Uwaga oklch(0.48 0.13 70) Rezerwacja czekająca na odpowiedź, dokument po terminie.
#C2181D
Zatrzymanie oklch(0.52 0.2 27) Odrzucenie, wycofanie oferty, błąd operacji.

Tryb ciemny

Ta sama paleta po zmroku

Tryb ciemny nie odwraca barw, tylko przesuwa je tak, żeby kontrast został. Zieleń rozjaśnia się do #68C36D, podłoże schodzi do #15140E.

#15140E
Podłoże nocne oklch(0.19 0.012 100) Tło strony w trybie ciemnym.
#1F1E17
Karta nocna oklch(0.235 0.014 100) Bloki i kolumny na ciemnym podłożu.
#68C36D
Żyto nocne oklch(0.74 0.15 145) Kolor podstawowy w trybie ciemnym.
#F3F2ED
Atrament nocny oklch(0.96 0.006 90) Tekst podstawowy na ciemnym podłożu.

Typografia

Trzy kroje, trzy zadania

Każdy krój ma pełny zestaw polskich znaków diakrytycznych. To nie jest drobiazg — nazwy odmian, miejscowości i dokumentów bez ogonków wyglądają na niedokończone.

Nagłówki

Bitter — szeryf blokowy

Solidny, lekko przemysłowy. Pasuje do tablicy giełdowej i do napisu na spichlerzu. Używany w wadze 800 do nagłówków i 400 kursywą do cytatów.

Tekst

IBM Plex Sans — tekst ciągły

Neutralny, ale nie bezosobowy. Dobrze znosi długie akapity i małe rozmiary na telefonie.

Liczby

IBM Plex Mono — 1 234,56 zł/t

Ceny, tonaże, numery transakcji, nadtytuły i zmiany statusu. Zawsze z cyframi tabelarycznymi, żeby kolumny się zgadzały.

Polskie znaki

ĄĆĘŁŃÓŚŹŻ ąćęłńóśźż

Pszenżyto, jęczmień browarny, Środa Wielkopolska, wilgotność, liczba opadania

0123456789 · 45,50 t · 2 150 zł/t · OF-2026-0004

Skala

Hasło

Od pola do młyna

Sekcja

Jedna transakcja, sześć kroków

Blok

Dokumenty partii

Wprowadzenie

Zlecenia powstają automatycznie z potwierdzonych transakcji.

Tekst

Rolnik wystawia partię z parametrami i dokumentami, a kupujący widzi ją obok innych ofert.

Nadtytuł

Model przychodowy

Logotyp

Znak słowny

Logotyp jest zapisem adresu, a nie osobnym symbolem. Zieleń pada na człon boze, końcówka domeny zostaje wyblakła. Wszystko małymi literami, bez odstępu, jak wpisuje się adres w przeglądarce.

na podłożu strony
na karcie
na ciemnym
na akcencie

Znak graficzny

Znak otozboze.pl: kłos zboża

Kłos

Pięć ziaren i źdźbło. Używany samodzielnie tylko tam, gdzie nie mieści się znak słowny: ikona karty przeglądarki, awatar konta, znacznik na mapie. Zawsze w zieleni żyta na jasnym podłożu.

Zasady

Tak

Zieleń wyłącznie na członie boze, reszta atramentem.

Nie

Nie rozbijaj logotypu na dwie linie ani nie dodawaj odstępów między członami.

Tak

Na ciemnym podłożu użyj rozjaśnionej zieleni #68C36D.

Nie

Nie kładź logotypu na zdjęciu pola ani na gradiencie. Podłoże ma być jednolite.

Tak

Zostaw wokół znaku wolną przestrzeń równą wysokości litery o.

Nie

Nie zmieniaj kroju na inny szeryf ani nie pochylaj znaku słownego.

Rytm

Odstępy i narożniki

Jeden promień zaokrąglenia dla wszystkiego — 4 px w materiałach, 0.625 rem jako podstawa w aplikacji. Blok ma wyglądać jak wpis w księdze, nie jak pływający kafelek.

0,5 rem
0,875 rem
1,5 rem
2,5 rem
4 rem

Język

Jak piszemy

Tak

Cały interfejs po polsku. Kod, komentarze i nazwy w repozytorium po angielsku.

Tak

Przycisk mówi, co się stanie: „Potwierdź sprzedaż”, nie „Zatwierdź”.

Tak

Nazywamy rzeczy językiem wsi i skupu: partia, tonaż, odbiór, kurs, fracht.

Nie

Bez żargonu systemowego w interfejsie. Użytkownik widzi rezerwację, nie rekord.

Nie

Bez obietnic, których produkt nie dotrzymuje. Symulacja jest nazywana symulacją.

Nie

Bez przepraszania w komunikatach błędu. Piszemy, co poszło źle i co z tym zrobić.