Design system: Editorial
Strona jak okładka magazynu wydawcy. Czerń, biel, chłodna szarość i jeden głęboki akcent. Elegancję daje szeryfowa typografia i dużo miejsca.
Kolory
Bakłażan to kolor akcentu: linki, główny przycisk w formularzu, inicjał w case study, znaczniki list. Na czarnym tle zastępuje go jasny róż. Wszystkie pary spełniają WCAG AA.
- Czerń#000000, tekst i ciemne sekcje
- Biel#FFFFFF, tło główne
- Mgła#E6E8EA, tła sekcji
- Grafit#5E5E5E, tekst pomocniczy (6,5:1)
- Bakłażan#5B1F4A, akcent (12,1:1 na bieli)
- Róż na czerni#E9C6DE, akcent na ciemnym (13,6:1)
Kroje pisma
Szeryfowy krój prasowy do nagłówków i dłuższych wstępów oraz neutralny krój bezszeryfowy do interfejsu. To klasyczna para magazynowa.
Newsreader
Nagłówki, wstępy, cytaty, liczby. Krój zaprojektowany przez Production Type z myślą o serwisach informacyjnych. Ma optyczne rozmiary: w dużych nagłówkach jest smukły i elegancki, w mniejszych stopniach mocniejszy i czytelny. Pasuje do WCM jako wydawcy.
Hanken Grotesk
Nawigacja, przyciski, opisy, formularze. Spokojny krój geometryczny o otwartych kształtach. Nie konkuruje z szeryfem i dobrze wygląda w małych stopniach.
Skala nagłówków
Duże nagłówki w lekkiej odmianie (300), mniejsze w regularnej. Wstępy w szeryfie, większym stopniem niż tekst.
Reklama, którą się czyta.
Nasze serwisy
Klienci bezpośredni
Dom i wnętrze
Jesteśmy wydawcą i agencją.
Rekomendacje i artykuły sponsorowane, które wyglądają jak treść serwisu.
Przyciski i linki
Prostokątne, z minimalnym zaokrągleniem (2 px). Czarny przycisk jako główny, po najechaniu zmienia kolor na bakłażan.
Karty usług
Usługi jak spis treści magazynu: numer rozdziału, tytuł, opis i modele rozliczeń w jednym wierszu. Bez kart i ramek.
Mailing
Wysyłki do baz B2C i B2B z pełnymi zgodami (double opt-in, RODO).
CPC, CPM, CPL
- Zrzut ekranu serwisu
Zdrowie
Karta tytułu: okładka, nazwa kursywą, zasięg.
Ikony
W tym kierunku ikony są rzadkie: obraz niosą zdjęcia i typografia. Jeśli są potrzebne, to cienkie (1,5 px), liniowe, w kolorze tekstu.
- Native
- Display
- Mailing
- Serwisy
- Wyniki
Odstępy i siatka
Siatka 12 kolumn, odstęp 32 px. Siatka 8 px dla odstępów. Sekcje oddziela 128 px. Linie podziału 1 px, nagłówki kolumn 2 px.