Design System
Jeden spójny język wizualny TeamBudget — kolory, typografia, logo, kształty i komponenty wyprowadzone 1:1 z Brand Booka. Według tego budujemy stronę i każdy kolejny materiał.
Zasada koloru
Hierarchia kolorów nie jest dowolna. Każdy kolor ma przypisaną rolę — i tylko w tej roli się go używa.
Niebieski jest kolorem wiodącym — dla dekoracji i typografii. Pomarańczowy to wyłącznie dodatek / akcent. Biel (Pale White) to tło, czerń i niebieski pełnią na przemian funkcję typografii. Żółty i zielony stosujemy WYŁĄCZNIE na naklejkach. Sunny White służy jako tło pod key visual.
Kolory
Paleta podstawowa (4) + dodatkowa (3). Wartości HEX i Pantone z Brand Booka (s. 9–10).
Paleta podstawowa
Paleta dodatkowa
Typografia
Trzy kroje, trzy role. Pangram Sans buduje głos marki w nagłówkach, DM Sans niesie treść, DM Mono oznacza warstwę techniczną.
Logo & sygnet
Sygnet = przecięty okrąg (wykres kołowy budżetu + zespół jednostek + przecięta pomarańcza). Logo łączy sygnet z wordmarkiem „TeamBudget". Pole ochronne = ¼ wysokości sygnetu.
Logo stosujemy przede wszystkim w Blue Sky i Orange (gdy typografia jest w tych kolorach), oraz w Pale Black / Pale White. Zawsze zachowujemy wystarczający kontrast logo do tła.
System naklejkowy
Sygnaturowy element marki — cztery wymiary dobrostanu zespołu jako die-cut naklejki o stałych kolorach. Pływają wokół fotografii cutout i kluczowych komunikatów.
Kształty & Key Visual
Motywy graficzne oscylują wokół sygnetu. Sylwetki naklejek (chmurka, zygzak) i organiczne bloby działają jako tło; cutout-fotografia i typografia jako pierwszy plan.
Sylwetki kształtów
Organiczne bloby (tło pod cutout)
Fotografia (cutout na blobach)
Motywy graficzne (BB s.17)
Komponenty
Bazowe elementy UI zbudowane na tokenach. Te same prymitywy napędzają landing.
Przyciski
Chipy / etykiety
Karta
Magnes do biura
Realny powód, by przychodzić — wspólne śniadania i eventy on-site.
Statystyka (hairline)
Pole formularza
Ruch
Jeden język ruchu (Lenis + GSAP). Bez bouncy-easingu na warstwie B2B; reveal z budżetem; reduced-motion przez crossfade.
cubic-bezier(.16,1,.3,1)
cubic-bezier(.4,0,.2,1)
hover, focus, kolor
reveal, transformy
line-reveal, składanie sygnetu
kształty tła, sygnet w hero
Do & Don't
✓ Rób
- Niebieski jako wiodący kolor dekoracji i nagłówków.
- Pomarańcz jako akcent — punktowo.
- Żółty i zielony tylko na naklejkach.
- Pangram w nagłówkach, DM Sans w treści, DM Mono w etykietach.
- Sunny White jako tło pod key visual / cutout.
- Zachowuj pole ochronne logo (¼ sygnetu).
✕ Nie rób
- Nie rób pomarańczu kolorem dominującym.
- Nie używaj żółtego/zielonego poza naklejkami.
- Nie mieszaj gradientów blue→orange w typografii.
- Nie zmieniaj kolorów ani proporcji naklejek.
- Nie stosuj logo na tle o niskim kontraście.
- Nie dodawaj krojów spoza systemu.