Przejdź do głównej zawartości

System projektowy

Scoutello powinno sprawiać wrażenie ciepłego, kompetentnego i skoncentrowanego na produkcie. Preferowany wygląd jest jasny, przestronny, zaokrąglony i redakcyjny: najpierw czytelna treść, a następnie subtelny kolor marki, delikatne powierzchnie i spokojne animacje, które sprawiają, że produkt reaguje płynnie, bez zbędnych ozdobników.

Marketingowa strona docelowa jest najczytelniejszym publicznym punktem odniesienia dla obecnego kierunku wizualnego. Powierzchnie produktu powinny w miarę możliwości korzystać ze wspólnych tokenów projektowych i stawać się bardziej ekspresyjne tylko wtedy, gdy dana powierzchnia jest wyraźnie związana z marką lub marketingiem.

Logo i zasoby marki​

Gdy agent, integracja lub generowana strona potrzebuje wielokrotnego użytku oznaczenia marki, użyj logo Scoutello z publicznego adresu URL zasobu dokumentacji:

Preferuj wersję SVG, aby zachować ostrość na ekranach o różnych rozmiarach. Wersji PNG używaj, gdy dane narzędzie lub miejsce docelowe nie obsługuje formatu SVG. Zachowaj wystarczająco dużo wolnej przestrzeni wokół oznaczenia, nie rozciągaj go ani nie zmieniaj jego kolorów. Umieszczaj je na białych, ciepłokremowych lub innych spokojnych powierzchniach, które zapewniają odpowiedni kontrast.

Kolory marki​

Kolor podstawowy: #ff8d49

Używaj podstawowego pomarańczowego jako akcentu kolorystycznego Scoutello: w głównych wezwaniach do działania, stanach fokusu, aktywnej nawigacji, małych tłach ikon, wyróżnionym tekście, delikatnych poświatach i ciepłych gradientach. W kodzie produktu odpowiada mu --primary: 24 100% 64% oraz klasy Tailwind, takie jak bg-primary, text-primary, border-primary/15 i shadow-primary/10.

Kolor dodatkowy: #145466

Używaj głębokiego turkusu jako koloru równoważącego. Najlepiej sprawdza się w gradientach z podstawowym pomarańczowym, na ciemnych panelach wezwania do działania, do budowania głębi wizualnej oraz w wybranych momentach o wysokim znaczeniu dla marki. Nie powinien zastępować podstawowego pomarańczowego jako domyślnego koloru działań.

Kolory uzupełniające:

  • Ciepłokremowe tła: #fff8f1, #fff4ea, #fcf6f1 oraz delikatne powierzchnie orange-50 / amber-50.
  • Neutralne kolory produktu: białe karty, ciemny tekst pierwszoplanowy, przygaszony tekst o kryciu około 70–75% oraz jasne obramowania.
  • Niebieski trzeciorzędowy: hsl(205 100% 51%) jest dostępny jako token uzupełniający, ale należy używać go oszczędnie, aby pomarańczowy i turkus pozostały rozpoznawalną parą marki.

Styl wizualny​

Preferuj czysty, wysokiej jakości wygląd SaaS, z odpowiednią dozą ciepła, aby uniknąć wrażenia generyczności. Strona docelowa łączy kremowe tła z siatką delikatnych przejść tonalnych, białe karty, duże zrzuty ekranu produktu, zaokrąglone narożniki i powściągliwe gradienty.

Używaj:

  • Zaokrąglonych kart i paneli, często od rounded-2xl do rounded-[2rem].
  • Delikatnych obramowań, takich jak border-primary/10, border-primary/15, ring-black/5, oraz jasnych neutralnych obramowań.
  • Warstwowych białych lub kremowych powierzchni zamiast dużych bloków w intensywnych kolorach.
  • Subtelnych cieni, takich jak shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, lub niestandardowych cieni o niskim kryciu.
  • Dużych zrzutów ekranu produktu lub makiet interfejsu jako dowodu działania, szczególnie w materiałach marketingowych i opowieściach o funkcjach.
  • Małych akcentów marki, takich jak pomarańczowy wyróżniony tekst, kapsułki z ikonami, obwódki, poświaty i gradientowe wezwania do działania.

Unikaj:

  • Intensywnie pomarańczowych teł na całej stronie.
  • Nadmiernego używania turkusu w zwykłych elementach sterujących.
  • Gęstych, przeładowanych układów.
  • Ostrej geometrii, mocnych cieni i chłodnych, monochromatycznych pulpitów.
  • Dekoracyjnych animacji, które konkurują z czytaniem lub realizacją zadania.

Typografia​

Witryna marketingowa używa:

  • Space Grotesk w nagłówkach ekspozycyjnych za pośrednictwem klasy landing-display.
  • Manrope w głównym tekście marketingowym.

Wspólne powierzchnie aplikacji i dokumentacji korzystają z typografii interfejsu dopasowanej do systemu, obecnie bliższej krojowi Inter. Cel stylistyczny pozostaje spójny na wszystkich powierzchniach: wyraziste nagłówki, zwarte odstępy między znakami w nagłówkach, czytelny tekst główny i duża wysokość wiersza.

Wytyczne dotyczące nagłówków:

  • Na stronach marketingowych używaj dużych, wyważonych nagłówków.
  • Wyróżniaj podstawowym pomarańczowym tylko najważniejszą frazę.
  • Kontroluj długość wiersza za pomocą max-w-* i text-balance, gdy są dostępne.

Wytyczne dotyczące tekstu głównego:

  • Pisz spokojnie i konkretnie.
  • W opisach używaj przygaszonego tekstu pierwszoplanowego, zwykle text-foreground/70 lub text-foreground/75.
  • Preferuj sekcje łatwe do przeskanowania wzrokiem, krótkie akapity i jasne etykiety.

Układ i odstępy​

Układy powinny sprawiać wrażenie przestronnych i stabilnych. Strona docelowa korzysta z kontenera max-w-7xl z responsywnymi poziomymi odstępami wewnętrznymi oraz dużymi sekcjami w pionie.

Typowe wzorce:

  • Odstępy wewnętrzne sekcji na poziomie py-16, py-20 lub większe w przypadku głównych sekcji marketingowych.
  • Karty ułożone w responsywnych siatkach ze spójnymi odstępami.
  • Sekcje hero z wyraźną kolumną treści po lewej oraz zrzutami ekranu produktu lub kompozycjami urządzeń po prawej.
  • Wyśrodkowane nagłówki sekcji w przypadku ogólnych obietnic produktu; nagłówki wyrównane do lewej w sekcjach opisujących historię lub przepływ pracy.
  • Układy projektowane najpierw z myślą o urządzeniach mobilnych, które przed przejściem do wielu kolumn na większych ekranach układają elementy w czytelny stos.

Wykorzystuj puste miejsce jako część projektu. Jeśli sekcja wydaje się niejasna, najpierw uprość treść i zwiększ przestrzeń, zamiast dodawać więcej ozdobników.

Komponenty i powierzchnie​

Powierzchnie Scoutello powinny sprawiać wrażenie namacalnych, ale lekkich:

  • Przyciski: zaokrąglone kapsułki w wyróżnionych marketingowych wezwaniach do działania; w pozostałych miejscach standardowe przyciski produktu.
  • Karty: białe lub kremowe, zaokrąglone, z obramowaniem i delikatnym uniesieniem.
  • Ikony: małe, proste ikony liniowe w kapsułkach z pomarańczowym zabarwieniem.
  • Statystyki i elementy budujące zaufanie: powściągliwe karty z pomarańczowymi obramowaniami lub gradientami.
  • Formularze: jasne etykiety, bezpośrednie teksty pomocnicze i wystarczające odstępy ułatwiające korzystanie na urządzeniach mobilnych.
  • Zrzuty ekranu: duże, ostre i lekko uniesione. Używaj ich jako konkretnych dowodów działania produktu.

Podczas tworzenia interfejsu produktu należy korzystać z istniejących współdzielonych komponentów UI i tokenów zamiast tworzyć niestandardowe style jednorazowego użytku. Podczas tworzenia interfejsu marketingowego należy korzystać z prymitywów landing page i klas landing page tam, gdzie pasują.

Animacje​

Animacje powinny sprawiać, że interfejs wydaje się dopracowany, a nie przeładowany. Landing page wykorzystuje krótkie animacje pojawiania się, efekty unoszenia urządzeń, rozświetlania poświaty oraz niewielkie uniesienia przy najechaniu.

Preferowane animacje:

  • Pojawianie się od 12–24 px wyżej, z łagodnym zwiększaniem krycia.
  • Unoszenie kart przy najechaniu tylko o kilka pikseli.
  • Stany przycisków CTA po najechaniu, które delikatnie unoszą element i pogłębiają cień.
  • Sekcje pojawiające się sekwencyjnie, gdy wspiera to skanowanie narracji.

Zawsze należy respektować preferencje dotyczące ograniczenia ruchu. Należy unikać animacji, które mogą ukrywać treści, blokować interakcję lub sprawiać wrażenie niezbędnych do zrozumienia strony.

Projektowanie języka i treści​

System wizualny najlepiej współgra z bezpośrednimi i konkretnymi treściami. Należy preferować język wyjaśniający, co organizacja może publikować, czym zarządzać lub co automatyzować w Scoutello.

Stosuj:

  • Nazwy związane konkretnie z produktem: landing page, kafelki, wycieczki, wydarzenia, organizacje, panel, goście, kody QR, tłumaczenia.
  • Opisy skoncentrowane na efektach, które łączą doświadczenia gości z procesami operatorów.
  • Język neutralny pod względem płci w języku niemieckim i innych wersjach lokalizacyjnych.

Unikaj:

  • Ogólnikowego języka dotyczącego platformy, pozbawionego przykładów.
  • Nadmiernie formalnego żargonu korporacyjnego.
  • Długich akapitów tam, gdzie lepiej sprawdziłaby się sekcja łatwa do przeskanowania.

Zasady praktyczne​

  • Używaj #ff8d49 jako głównego akcentu marki, a #145466 jako drugiego koloru bazowego.
  • Preferuj klasy oparte na tokenach (primary, secondary, foreground, muted, border) zamiast kolorów wpisanych na stałe w interfejsach produktu.
  • Strony marketingowe powinny być ciepłe, przestronne, zaokrąglone, oparte na zrzutach ekranu i delikatnie animowane.
  • Panele i interfejsy operacyjne powinny być spokojniejsze, bardziej zwarte tylko tam, gdzie to konieczne, oraz mocniej skoncentrowane na zadaniach.
  • Pozwól, aby doświadczenia gości należące do klientów wspierały branding organizacji tam, gdzie produkt udostępnia już elementy sterowania marką, ale zachowaj zgodność powierzchni należących do Scoutello z tym systemem.

Powiązane koncepcje: Trasy i powierzchnie, Landing page i kafelki, Doświadczenia gości oparte na przeglądarce.