Przeprojektowaliśmy siebie.
Studio designu, które projektuje marki dla innych, w końcu musiało zaprojektować najważniejszą z nich — swoją własną. Od metafory architektonicznej monografii po żywy design system.
Szewc w nowych butach. Tym razem naprawdę.
Projektowaliśmy marki dla fintechów, platform SaaS, firm konsultingowych. Każdy klient dostawał przemyślany system wizualny, spójny brand book, dopracowaną stronę. A my? Pracowaliśmy z prowizorycznym logo, przypadkową paletą kolorów i stroną, która powstawała "przy okazji".
W pewnym momencie stało się jasne: nie możemy dłużej mówić klientom, że marka to fundament, a jednocześnie nie mieć własnego. Postanowiliśmy potraktować siebie jak najważniejszego klienta — z tym samym rygorem, tym samym procesem i tą samą ambicją, co każdy projekt zewnętrzny.
The Architectural Monograph.
Każdy design system potrzebuje metafory, która trzyma go w ryzach. Naszą gwiazdą północną stała się monografia architektoniczna — te ciężkie, pięknie wydane książki, w których każda rozkładówka jest zaprojektowana z chirurgiczną precyzją. Szerokie marginesy. Cisza między elementami. Typografia, która mówi sama za siebie.
Odrzuciliśmy estetykę "web-as-an-app" — neonowe gradienty, zaokrąglone karty, UI-kitową powtarzalność. Zamiast tego wybraliśmy podejście edytorskie: interfejs jako galeria, w której praca mówi sama za siebie, a sam interfejs schodzi na dalszy plan. Nie generator. Kurator.
Kompletny
System Projektowy
Od gwiazdy północnej po każdy piksel implementacji — spójny system, który łączy strategię, estetykę i kod w jeden organizm.
Zakres prac.
Tożsamość wizualna — logo, warianty, system znaku
Zaprojektowaliśmy trzy warianty logotypu: wertykalny (primary) z "praktyka" i "projektowa" wyróżnionym kolorem akcentowym, horyzontalny (negative) do użycia na ciemnych tłach ze znakiem "praktyka." w bieli, oraz geometryczny brandmark — ikonowy symbol "P" do użycia jako favicon, awatar i skrócony identyfikator.
Każdy wariant ma zdefiniowane safe zones, minimalne rozmiary i zasady stosowania. System jest na tyle elastyczny, żeby działać od wizytówki po billboard, ale na tyle rygorystyczny, żeby nie dało się go użyć źle. Logo nie krzyczy — mówi cichym, pewnym głosem.
System kolorów — tonal depth zamiast płaskich kolorów
Paleta kolorów to nie pięć kwadratów w PDF. Zbudowaliśmy tonalny system z ponad 30 tokenami — od deep charcoal (#222f30) przez ciepłe piaskowe powierzchnie (#f9f9f7, #f4f4f2, #eeeeec) po limonkowy akcent (#cef79e), którego używamy jak highlightera: oszczędnie i celowo.
Wprowadziliśmy zasadę "No-Line Rule" — granice między sekcjami definiujemy wyłącznie zmianą odcienia tła, nigdy 1px borderami. Powstał system surface hierarchy: base canvas, container-low, container, container-high, container-highest. Każda warstwa to jak kolejna kartka drobnego papieru położona na poprzedniej — subtelna, ale wyczuwalna zmiana głębi.
Typografia — precyzja edytorska
Wybraliśmy parę fontów, która odzwierciedla dwa bieguny naszej pracy: Space Grotesk (geometryczny, techniczny, precyzyjny) do nagłówków i display, oraz Inter (humanistyczny, czytelny, ciepły) do body i treści. Space Grotesk to głos studia — autorytet edytorski. Inter to neutralne tło, które pozwala treści oddychać.
Hierarchia obejmuje 8 poziomów — od display-lg (3.5rem, -0.02em tracking) przez headline-02, headline-03, headline-04 po body-lg, body-md, label-md i label-sm. Kluczowa zasada: używaj ekstremalnego kontrastu skali. Monumentalny nagłówek obok mikro-typografii tworzy rytmiczne napięcie, które definiuje charakter strony.
Grid i layout — architektura przestrzeni
12-kolumnowa siatka fluid z gutterem 24px i marginesem minimum 48px. Główna treść zajmuje 8 kolumn — optymalny zakres dla czytelności tekstu. Pozostałe 4 kolumny to przestrzeń na elementy wspierające, metadata, marginalia. Jak w tradycji szwajcarskiej typografii — margines to nie strata miejsca, to aktywny element projektu.
Wszystko opiera się na 8-pikselowej siatce bazowej. Intentional asymmetry — celowo łamiemy linie gridu, żeby nadać edytorialny charakter. Bento composition do modularnego stakowania komponentów. Do tego standardy printowe: minimalne marginesy zewnętrzne 25mm, gutter 15mm — bo system musi działać zarówno na ekranie jak i w druku offsetowym.
System komponentów — minimalistyczne prymitywy
Trzy typy buttonów: primary z gradientem od #466820 do #cef79e, secondary z surface-container-highest, i ghost — sam tekst z rozszerzającym się underline na hover. Karty z asymetrycznym wyrównaniem tekstu do bottom-left i 32px wewnętrznym paddingiem. Inputy z underline-only (2px outline-variant), które na focus przechodzą w kolor primary.
Sygnaturowy komponent — Project Reveal: element listy portfolio, w którym duży obraz pojawia się dopiero na hover, podążając za kursorem. Nawigacja z glassmorphism: surface-container-lowest przy 70% opacity z 12px blur. Każdy komponent zaprojektowany tak, żeby czuć się jak element monografii architektonicznej — premiumowo, cicho, precyzyjnie.
Strona internetowa — od systemu do żywego produktu
Design system to dokumentacja. Strona to dowód, że ta dokumentacja działa. Przełożyliśmy cały system na żywą stronę internetową — hero z wideo, sekcje usług, portfolio z case studies, manifesto i formularz kontaktowy. Wszystko w Tailwind CSS, z własnymi tokenami kolorów, fontami i animacjami.
Scroll reveal z IntersectionObserver i staggered delays. Animacje CTA ze slide-up text replacement. Glassmorphic navigation z backdrop-blur. Każdy piksel implementacji wynika z design systemu — nie ma ani jednego elementu, który "dodaliśmy na oko". Strona jest żywym dowodem na to, że system działa.
Każda decyzja projektowa wynika z systemu. Każdy piksel ma swoje miejsce w hierarchii. Nic nie jest przypadkowe — bo przypadkowość to wizualny dług.
Mniej znaczy precyzyjniej.
Jeśli sekcja wydaje się ciasna, podwój padding. Pusta przestrzeń to aktywny element projektu, nie marnotrawstwo.
Wewnętrzny kontener powinien być zawsze odrobinę jaśniejszy lub ciemniejszy od rodzica. Tworzy to naturalną, premiumową głębię.
Limonkowy akcent (#466820) używaj jak zakreślacza — tylko na najważniejszą akcję na ekranie. Reszta musi obejść się bez niego.
Bordery do sekcjonowania łamią flow monografii architektonicznej. Granice definiuj zmianą tonalną tła, nie linią.
Zawsze on-surface (#1A1C1B), nigdy #000000. Czysty czarny jest zbyt agresywny i łamie tonalną miękkość systemu.
Jeśli cień wygląda jak z domyślnego UI kitu — zwiększ blur, zmniejsz opacity aż stanie się niemal niewidoczny. Ambient, nie "box-shadow".
Trzy filary. Wszystko inne z nich wynika.
Precyzja w minimalizmie
Każdy element ma powód. Każdy piksel ma funkcję. Minimalizm to nie mało — to dokładnie tyle, ile trzeba.
Kontekst ponad dekorację
Nie dodajemy elementów, bo "wyglądają fajnie". Każda decyzja wizualna wynika z kontekstu marki, branży i odbiorcy.
Edytorska dyscyplina
Podchodzimy do każdego interfejsu jak redaktor do rozkładówki. Hierarchia, rytm, oddech. Co zbędne — usuwamy.
Tworzymy przestrzenie, które oddychają. Naszą misją jest przekładanie złożonych założeń na zrozumiały, edytorski język wizualny.
Jak budowaliśmy
system od zera
Audyt i analiza
- Przegląd istniejących materiałów i identyfikacja luk
- Analiza konkurencji i inspiracji z branży architektonicznej
- Definicja wartości, misji i voice marki
Metafora i strategia
- Wypracowanie Creative North Star — monografia architektoniczna
- Wybór par fontów i strategii typograficznej
- Konstrukcja tonalnej palety kolorów z Material Design 3
System i implementacja
- Budowa design systemu w Figmie z komponentami
- Dokumentacja DESIGN.md z zasadami i tokenami
- Implementacja strony w Tailwind CSS z żywym kodem