Wróć do makiety

Design system: Spokojny ekspert

Czerń i biel jako baza, jeden płaski akcent kobaltowy dla akcji i wyróżnień. Głębię budują tła sekcji i cienie pod formatami reklamowymi, a nie gradienty.

Kolory

Kobalt pojawia się tylko tam, gdzie użytkownik ma coś zrobić (przyciski, linki) albo gdzie pokazujemy reklamę. Wszystkie pary tekst/tło spełniają WCAG AA.

Kroje pisma

Para dwóch bezszeryfowych krojów o różnym charakterze: wyrazisty do nagłówków i neutralny, bardzo czytelny do tekstu i interfejsu.

Aa Ęą

Schibsted Grotesk

Nagłówki. Krój zaprojektowany dla skandynawskiej grupy medialnej Schibsted, czyli dla wydawcy prasy i serwisów. Pasuje do WCM, który też prowadzi własne serwisy. Lekko zwarty, pewny siebie, z pełnym zestawem polskich znaków.

Aa Ęą

Geist

Tekst, przyciski, formularze. Spokojny, techniczny krój z czytelnymi cyframi tabelarycznymi, dobry do liczb w case studies i modeli rozliczeń. Nie konkuruje z nagłówkami.

Skala nagłówków

Skala 1,25 od bazowego tekstu 17 px. Na telefonie największe stopnie zmniejszają się płynnie.

H1 / 80 px

Reklama jak treść

H2 / 40 px

W czym możemy pomóc

H3 / 28 px

Reklama natywna

H4 / 21 px

Własne powierzchnie reklamowe

Tekst / 17 px

Prowadzimy kampanie natywne, displayowe i mailingowe na własnych serwisach oraz w sieci zaufanych wydawców.

Mały / 15 px

Wycena briefu w 24 godziny. Rozliczenie w CPC, CPM, CPL lub CPS.

Przyciski i linki

Kształt pigułki. Kobaltowy przycisk tylko dla głównej akcji w danym widoku, czarny w nawigacji, obrysowany dla akcji drugorzędnych.

Wyceń kampanię Wyceń kampanię Zobacz formaty reklamowe Wszystkie wpisy
Wyślij zapytanie Poznaj Optymeo Link na ciemnym tle

Karty usług

Główne usługi na czarnej „scenie”: ikona, nazwa, opis i modele rozliczeń jako etykiety. Pozostałe usługi jako lista bez kart.

Mailing

Wysyłki do baz B2C i B2B z pełnymi zgodami. Targetowanie po zainteresowaniach i zachowaniach.

  • CPC
  • CPM
  • CPL

Karta jasna

Używana dla grup klientów i argumentów. Duży promień (28 px), bez cienia na szarym tle, z cieniem na białym.

  • lista z zaznaczeniem w kolorze akcentu
  • rozwijany opis „Jak to wygląda w praktyce”

Ikony

Liniowe, grubość 2 px, siatka 48 px. Kontur w kolorze tekstu, jeden element w kolorze akcentu.

Odstępy i narożniki

Siatka 8 px. Sekcje oddziela 128 px na desktopie i 96 px na telefonie. Narożniki: 6 px (pola), 14 px (formaty reklam), 28 px (duże karty), pigułka (przyciski, menu).

8 px
16 px
24 px
32 px
48 px
64 px
96 px
128 px