benefity. team. balance.

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ł.

Źródło: Brand Book TeamBudget 2026 · by BetterWorkplace
01 — Fundament

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.

02 — Fundament

Kolory

Paleta podstawowa (4) + dodatkowa (3). Wartości HEX i Pantone z Brand Booka (s. 9–10).

Paleta podstawowa

Pale White
Tła
#FFFBF4
PANTONE white 000 c
tło
Pale Black
Typografia
#473A39
PANTONE Black 2 c
typografia
Blue Sky
Dekoracja + typografia
#4375FF
PANTONE 2935 C
wiodący
Orange
Akcent
#FE692B
PANTONE 1505 CV
dodatek

Paleta dodatkowa

Sunny White
Tła pod key visual
#FEF3DE
PANTONE white 000 c
tło KV
Deep Yellow
Tylko naklejki
#FDA33C
PANTONE white 000 c
naklejki
Pale Green
Tylko naklejki
#15A477
PANTONE white 000 c
naklejki
Para wiodąca
Blue + Orange w logo/typografii
#4375FF · #FE692B
 
duet
03 — Fundament

Typografia

Trzy kroje, trzy role. Pangram Sans buduje głos marki w nagłówkach, DM Sans niesie treść, DM Mono oznacza warstwę techniczną.

Pangram Sans · BoldNagłówek / Hero — H1
Benefity, które ładują energię zespołu i wzmacniają team vibe.
Pangram Sans · Bold/SemiboldNagłówek sekcji — H2
Sprzedajemy kulturę zespołu.
Pangram Sans · MediumLead text
Elastyczny budżet benefitowy 100–300 zł na pracownika, który zastępuje fasadowe karty realnym narzędziem.
DM Sans · RegularBody / caption
Dbamy o benefity, które wspierają nie tylko komfort pracy, ale i współpracę oraz zaangażowanie. Dobrze dobrane rozwiązania pomagają budować środowisko, w którym ludzie chcą pracować i działać skutecznie razem.
DM Mono · Regular · UPPERCASETechnical / eyebrow
benefity. team. balance.
05 — Marka

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.

dobra energia relacje dobrostan sprawczość
dobra energia Orange · kształt „energetyczny" (zygzak)
relacje Deep Yellow · chmurka
dobrostan Blue · chmurka
sprawczość Pale Green · chmurka
06 — Marka

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

sygnet

Organiczne bloby (tło pod cutout)

Fotografia (cutout na blobach)

Cutout zespołu na organicznych blobach

Motywy graficzne (BB s.17)

Typografia Wielkie nagłówki Pangram w niebieskim.
Fotografia Cutout ludzi (owoce, soki) na blobach.
Pattern Subtelny wzór z sygnetu.
Kształty z sygnetu Połowa / segmenty znaku.
Sygnet w użyciu Jako element dekoracyjny.
System naklejkowy Etykiety wokół cutoutów.
07 — Interfejs

Komponenty

Bazowe elementy UI zbudowane na tokenach. Te same prymitywy napędzają landing.

Przyciski

Chipy / etykiety

DailyFruits DailyFoods TeamBudget

Karta

Magnes do biura

Realny powód, by przychodzić — wspólne śniadania i eventy on-site.

Statystyka (hairline)

~90%
Wykorzystanie
100%
Inkluzywność
1
Faktura

Pole formularza

08 — Zasady

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.