# Reguly designu Profitway Jedno miejsce z zasadami. Kto projektuje, buduje albo generuje cokolwiek w identyfikacji Profitway, zaczyna tutaj. ## Zrodlo prawdy **Ta biblioteka jest zrodlem prawdy dla identyfikacji Profitway.** Kolory, typografia, odstepy, animacje, logo i reguly zyja tutaj; strona, panel i repozytoria klienckie biora je stad przez paczke `@profitwaypl/design`. Zmiana koloru czy skali zaczyna sie w `source/tokens/*.json`, nie w projekcie, ktory z nich korzysta. **Reguly w tych dokumentach pochodza z brandbooka** i z decyzji projektowych zapisanych przy makietach. Tam, gdzie brandbook i kod mowia co innego, dokument **pokazuje obie wersje i nazywa rozbieznosc** zamiast po cichu wybierac jedna. Lista otwartych spraw jest na koncu tej strony. ## Dokumenty | Dokument | O czym | |---|---| | [colors.md](colors.md) | piec kolorow marki, 63 tokeny implementacyjne i ich rodziny, tekst drugorzedny | | [typography.md](typography.md) | kroje w paczce, fonts.css, stosy fontow, skala i role stylow, rozbieznosc H1-H6 | | [logo.md](logo.md) | warianty, pole ochronne, czego nie robimy | | [icons.md](icons.md) | punktory, rejestr ikon, sprzecznosc fill kontra Lucide | | [motion.md](motion.md) | 30 tokenow animacji na 28 zestawach klatek, `prefers-reduced-motion`, Lottie | | [layout.md](layout.md) | kontener, rytm, 13 promieni, cienie, gradienty, breakpointy, okruszki | | [accessibility.md](accessibility.md) | WCAG 2.2 AA: kontrast, klawiatura, semantyka, dotyk | | [email.md](email.md) | maile transakcyjne i marketingowe - kontrakt | | [app.md](app.md) | warstwa narzedzi (shadcn/ui) | | [mcp.md](mcp.md) | zasady pisania serwerow MCP | | [claude-design-system.md](claude-design-system.md) | wyslanie biblioteki na konto Claude jako design system | ## Trzy rzeczy, ktore obowiazuja wszedzie 1. **Pomaranczowy jest akcentem, nie tlem.** Plaszczyzna pomaranczu zabija jego dzialanie. 2. **Zadne narzedzie nie jest "tylko na desktop".** 360 / 768 / 1024 / 1440 / 1920. 3. **Ruch ma cos komunikowac.** I musi dac sie wylaczyc przez `prefers-reduced-motion`. ## Otwarte rozbieznosci Zebrane w jednym miejscu, bo kazda wymaga decyzji czlowieka, nie kodu - decyduje dyrektor. Przy kazdej sa opcje i rekomendacja. **Do czasu rozstrzygniecia obowiazuje to, co robi kod** - jest wdrozone i widoczne dla klientow. ### 1. `text-h3` w kodzie to H4 z brandbooka - **Stan:** `text-h3` ma 30/38, czyli H4 z brandbooka; H3 (40/50) to w kodzie `text-h3-lg`. Kto uslyszy "uzyj H3", dostanie 30px zamiast 40px. - **Opcje:** (a) zostawic nazwy i opisywac przesuniecie w dokumentach; (b) przemianowac tokeny na poziomy z brandbooka - zmiana nazw tokenow to **wydanie major** i migracja strony oraz narzedzi; (c) dodac aliasy zgodne z brandbookiem obok starych nazw. - **Rekomendacja:** (c) teraz - aliasy bez lamania zgodnosci - i (b) przy najblizszym planowanym wydaniu major. - **Gdzie:** [typography.md](typography.md) ### 2. Tekst ponizej minimum 18px z brandbooka - **Stan:** `text-body` ma 16px, a brandbook mowi minimum 18px (maks. 23px). Ponizej 18px jest 17 z 46 stylow skali - od `text-feature` 17px do `text-spec` 9px, w tym wszystkie podpisy, etykiety i przyciski. - **Opcje:** (a) przyjac skale z kodu i poprawic brandbook (minimum dotyczy druku i prezentacji); (b) podniesc `text-body` do 18px i przeskalowac tekst strony; (c) minimum 18px tylko dla tekstu ciaglego, podpisy i etykiety ponizej. - **Rekomendacja:** (c) - brandbook dostaje osobne minimum dla podpisow i etykiet, a `text-body` zostaje przy 16px do decyzji o redesignie strony. - **Gdzie:** [typography.md](typography.md) ### 3. Ikony: "tylko fill" kontra Lucide - **Stan:** brandbook zabrania ikon obrysowych i jednoczesnie poleca Lucide, ktory jest obrysowy. Rejestr biblioteki jest wypelniony, narzedzia korzystaja z Lucide. - **Opcje:** (a) wszedzie tylko rejestr fill; (b) fill w materialach marki, Lucide dopuszczony w narzedziach wewnetrznych; (c) Lucide wszedzie. - **Rekomendacja:** (b), konsekwentnie w calej aplikacji, i poprawka brandbooka. - **Gdzie:** [icons.md](icons.md) ### 4. Napis w logo kolorowym: `#202020` czy czarny - **Stan:** tabela wariantow w brandbooku mowi "czarny", plik zrodlowy i opis koloru Gray (sekcja 1.5) maja `#202020`. Konfigurator logo w HQ podmienia napis na `#000000`. - **Opcje:** (a) `#202020` wszedzie i poprawka tabeli w brandbooku; (b) `#000000` i poprawka pliku oraz opisu Gray. - **Rekomendacja:** (a) - plik jest w obiegu od lat, a Gray jest kolorem marki opisanym wlasnie jako kolor napisu. - **Gdzie:** [logo.md](logo.md) ### 5. H1 i brakujace H5-H6 - **Stan:** `text-h1` ma 72/1.08 (~78), brandbook podaje H1 64/74. H5 (25/32) i H6 (20/27) nie maja tokenow. - **Opcje:** (a) zostawic 72 i poprawic brandbook; (b) zmienic `text-h1` na 64/74 (zmiana wygladu calej strony); (c) dodac tokeny H5 i H6 niezaleznie od decyzji o H1. - **Rekomendacja:** (a) oraz (c) - H5 i H6 przydadza sie w dokumentach i narzedziach, a zmiana H1 to decyzja o wygladzie strony, nie o tokenach. - **Gdzie:** [typography.md](typography.md) ### 6. Kolory spoza palety marki - **Stan:** z 63 tokenow kolorow tylko 3 maja wartosc z palety (`color-bg`, `color-accent`, `color-surface-glass`). Pozostale 60: 30 neutralnych szarosci wokol Dark Gray, 13 cieplych brazow powierzchni i linii, 3 odcienie akcentu (`color-accent-hover`, `-dark`, `-light`), 4 statusy i zolty srodek plomienia, oraz 9 kolorow konsoli AI (fiolety `color-ai-*`, `color-terminal-*`, `color-accent-pink`, `color-terminal-warn`). - **Opcje:** (a) wpisac rodziny do brandbooka jako paleta pomocnicza z zasadami uzycia; (b) sprowadzic szarosci i braz do kilku stopni, statusy zostawic; (c) usunac rodzine AI razem z redesignem sekcji AI. - **Rekomendacja:** (a) dla szarosci, odcieni akcentu i statusow - to role, bez ktorych interfejs nie dziala; rodzina AI i cieple brazy do przegladu przy redesignie strony. - **Gdzie:** [colors.md](colors.md) ### 7. Biala etykieta na pomaranczowym przycisku ma 3,14:1 - **Stan:** `#FFFFFF` na `#FF5900` to 3,14:1. Etykieta 16px Semibold nie jest "duzym tekstem" w rozumieniu WCAG, wiec potrzebuje 4,5:1 - glowne CTA strony i przycisk `default` w narzedziach nie spelniaja AA. - **Opcje:** (a) zostawic jako swiadomy wyjatek marki; (b) ciemna etykieta `#0E0E0E` na pomaranczowym (6,1:1); (c) etykieta od 19px Bold, czyli duzy tekst, dla ktorego wystarcza 3:1; (d) ciemniejszy pomaranczowy pod przycisk - `color-accent-dark` `#E85100` daje 3,7:1, wiec sam nie wystarcza. - **Rekomendacja:** (b) w narzedziach od razu; na stronie decyzja po porownaniu (b) i (c) na makiecie. - **Gdzie:** [accessibility.md](accessibility.md) ### 8. Jasny motyw dla narzedzi - **Stan:** tokeny i `shadcn.css` maja tylko ciemny motyw. Strona go nie potrzebuje, ale narzedzia (office, CRM) sa uzywane godzinami i drukowane; maile transakcyjne juz sa jasne. - **Opcje:** (a) zostac przy ciemnym wszedzie; (b) drugi motyw w `shadcn.css` tylko dla warstwy narzedzi; (c) jasny motyw w tokenach dla calego systemu. - **Rekomendacja:** (b), jesli zespol o niego prosi - jako drugi zestaw zmiennych w bibliotece, z kontrastem sprawdzonym dla kazdej pary, nigdy jako nadpisania w pojedynczej aplikacji. - **Gdzie:** [app.md](app.md) ### 9. Maile po angielsku i dane rejestrowe w stopce - **Stan:** szablony maili sa tylko po polsku. Stopka ma nazwe spolki, adres, e-mail i telefon, ale nie ma NIP-u (choc [email.md](email.md) go wymienia) ani danych rejestrowych (sad rejestrowy, KRS). - **Opcje:** (a) wersje angielskie szablonow dla klientow zagranicznych; (b) tylko polskie; (c) pelne dane rejestrowe w stopce kazdego maila; (d) dane rejestrowe tylko w mailach transakcyjnych. - **Rekomendacja:** (a) - klienci zagraniczni sa w portfelu. Zakres danych w stopce potwierdzic z ksiegowoscia albo kancelaria (wymogi dla korespondencji spolek handlowych), zanim trafi do szablonu. - **Gdzie:** [email.md](email.md) ### 10. Stary serwer MCP brandbooka w HQ - **Stan:** w HQ nadal dziala stary serwer MCP pod ta sama nazwa co oficjalny brandbook, ale podaje nieaktualna identyfikacje (`pw-orange`, Poppins, Lato). Agent, ktory trafi na niego, dostaje zle kroje i nazwy kolorow. - **Opcje:** (a) wylaczyc go; (b) przemianowac i oznaczyc jako archiwalny; (c) przepiac go na dane z tej biblioteki. - **Rekomendacja:** (a) po przepieciu wszystkich konfiguracji na aktualny serwer; do tego czasu (b), zeby nazwa nie mylila - dwa serwery o jednej nazwie to gwarantowany blad. - **Gdzie:** [mcp.md](mcp.md)