Přeskočit na hlavní obsah

Designový systém

Scoutello by mělo působit přívětivě, kompetentně a zaměřeně na produkt. Preferovaný vzhled je světlý, vzdušný, zaoblený a redakční: nejprve přehledný obsah, poté decentní barvy značky, jemné povrchy a klidné animace, díky nimž produkt působí responsivně, aniž by vznikal rušivý dekorativní šum.

Marketingová landing page je nejjasnějším veřejným vzorem současného vizuálního směru. Produktové plochy by měly podle možností znovu využívat sdílené designové tokeny a stát se výraznějšími pouze tehdy, když jsou výslovně zaměřené na značku nebo marketing.

Logo a prvky značky​

Pokud agent, integrace nebo generovaná stránka potřebuje opakovaně použitelný prvek značky, použijte logo Scoutello z veřejné URL s assetem v dokumentaci:

Pro ostré vykreslení na různých velikostech obrazovky preferujte verzi SVG. Verzi PNG použijte v případě, že nástroj nebo cílové prostředí SVG nepodporuje. Kolem prvku ponechte dostatek volného prostoru, nenatahujte jej ani neměňte jeho barvu a umisťujte jej na bílé, teplé krémové nebo jiné klidné povrchy, které zachovají dostatečný kontrast.

Barvy značky​

Primární barva: #ff8d49

Primární oranžovou používejte jako akcentní barvu Scoutello: pro hlavní výzvy k akci, stavy fokusu, aktivní navigaci, pozadí malých ikon, zvýrazněný text, jemné záře a teplé přechody. V produktovém kódu odpovídá --primary: 24 100% 64% a třídám Tailwind, jako jsou bg-primary, text-primary, border-primary/15 a shadow-primary/10.

Sekundární barva: #145466

Sekundární tmavě tyrkysovou používejte jako uzemňující barvu. Nejlépe funguje v přechodech s primární oranžovou, na tmavých panelech s výzvou k akci, pro vizuální hloubku a při příležitostných výrazných momentech značky. Neměla by nahrazovat primární oranžovou jako výchozí barvu akcí.

Podpůrné barvy:

  • Teplá krémová pozadí: #fff8f1, #fff4ea, #fcf6f1 a jemné povrchy orange-50 / amber-50.
  • Produktové neutrální barvy: bílé karty, tmavý text v popředí, tlumený text s přibližně 70–75% krytím a světlé okraje.
  • Třetí modrá: hsl(205 100% 51%) je k dispozici jako podpůrný token, ale měla by se používat střídmě, aby oranžová a tyrkysová zůstaly rozpoznatelnou dvojicí značky.

Vizuální styl​

Preferujte čistý, prémiový vzhled SaaS s dostatkem tepla, aby nepůsobil genericky. Landing page kombinuje krémová síťovaná pozadí, bílé karty, velké screenshoty produktu, zaoblené rohy a střídmé přechody.

Používejte:

  • Zaoblené karty a panely, často od rounded-2xl do rounded-[2rem].
  • Jemné okraje, například border-primary/10, border-primary/15, ring-black/5 a světlé neutrální okraje.
  • Vrstvené bílé nebo krémové povrchy namísto velkých výrazně barevných bloků.
  • Jemné stíny, například shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, případně vlastní stíny s nízkým krytím.
  • Velké screenshoty produktu nebo makety UI jako důkaz, zejména v marketingu a při představování funkcí.
  • Drobné prvky značky, například oranžově zvýrazněný text, odznaky s ikonami, prstence, záře a přechodové CTA.

Vyhněte se:

  • Výrazně oranžovým pozadím přes celou stránku.
  • Nadměrnému používání tyrkysové u běžných ovládacích prvků.
  • Hustým a stísněným rozvržením.
  • Tvrdým stínům, ostrým obdélníkům nebo chladným monochromatickým dashboardům.
  • Dekorativním animacím, které konkurují čtení nebo dokončení úkolu.

Typografie​

Marketingový web používá:

  • Space Grotesk pro hlavní nadpisy prostřednictvím třídy landing-display.
  • Manrope pro text marketingového obsahu.

Sdílené plochy aplikace a dokumentace používají typografii uživatelského rozhraní sladěnou se systémem, aktuálně bližší písmu Inter. Cíl je na všech plochách stejný: sebejisté nadpisy, těsné proklady hlavních nadpisů, dobře čitelný text a velkorysá výška řádků.

Pokyny pro nadpisy:

  • Na marketingových stránkách používejte velké a vyvážené nadpisy.
  • Primární oranžovou zvýrazňujte pouze důležitou frázi.
  • Pokud je to možné, kontrolujte délku řádku pomocí max-w-* a text-balance.

Pokyny pro hlavní text:

  • Odstavce udržujte klidné a přímé.
  • Pro popisy používejte tlumený text v popředí, obvykle text-foreground/70 nebo text-foreground/75.
  • Preferujte snadno skenovatelné sekce, krátké odstavce a jasné popisky.

Rozvržení a mezery​

Rozvržení by mělo působit vzdušně a stabilně. Landing page používá kontejner max-w-7xl s responzivním vodorovným odsazením a velkými svislými sekcemi.

Obvyklé vzory:

  • Odsazení sekcí kolem py-16, py-20 nebo větší u hlavních marketingových sekcí.
  • Karty uspořádané v responzivních mřížkách s konzistentními mezerami.
  • Hero sekce s výrazným levým sloupcem obsahu a screenshoty produktu nebo kompozicemi zařízení vpravo.
  • Zarovnané nadpisy sekcí u obecných příslibů produktu; nadpisy zarovnané vlevo u příběhových nebo pracovních sekcí.
  • Rozvržení navržená nejprve pro mobilní zařízení, která se před přechodem na více sloupců na větších obrazovkách přehledně skládají pod sebe.

Prázdný prostor používejte jako součást designu. Pokud sekce působí nejasně, nejprve zjednodušte obsah a přidejte více prostoru, než začnete přidávat další dekorace.

Komponenty a povrchy​

Povrchy Scoutello by měly působit hmatatelně, ale lehce:

  • Tlačítka: pro výrazná marketingová CTA používejte zaoblené pilulky; jinde standardní produktová tlačítka.
  • Karty: bílé nebo krémové, zaoblené, s okrajem a lehkým vystoupením.
  • Ikony: malé, jednoduché liniové ikony v oranžově tónovaných odznacích.
  • Statistiky a prvky důvěry: střídmé karty s oranžově tónovanými okraji nebo přechody.
  • Formuláře: jasné popisky, přímý pomocný text a dostatek prostoru pro použití na mobilních zařízeních.
  • Screenshoty: velké, ostré a mírně vystouplé. Používejte je jako konkrétní důkaz funkcí produktu.

Při tvorbě produktového rozhraní vycházejte z existujících sdílených komponent a tokenů UI namísto jednorázových vlastních stylů. Při tvorbě marketingového rozhraní používejte landingové primitivy a landingové třídy, pokud se pro daný účel hodí.

Animace​

Animace by měly rozhraní zpřehlednit a dodat mu propracovaný vzhled, ne je zahlcovat. Landingová stránka používá krátké animace odhalení, efekty zvedání zařízení, efekty rozkvětu záře a drobné nadzvednutí při najetí kurzorem.

Preferované animace:

  • Odhalení posunem nahoru o 12–24 px s jemným zobrazením.
  • Karty při najetí kurzorem zvednuté pouze o několik pixelů.
  • Stavy CTA při najetí kurzorem, které prvek mírně nadzvednou a prohloubí stín.
  • Postupné zobrazování sekcí, pokud podporuje skenování obsahu a příběhovou strukturu.

Vždy respektujte nastavení omezení pohybu. Vyhněte se animacím, které mohou skrýt obsah, blokovat interakci nebo působit jako nezbytné pro pochopení stránky.

Hlas značky a návrh obsahu​

Vizuální systém funguje nejlépe s přímým a konkrétním textem. Upřednostňujte formulace, které vysvětlují, co lze v Scoutello publikovat, spravovat nebo automatizovat.

Používejte:

  • Názvy specifické pro produkt: landingové stránky, dlaždice, prohlídky, události, organizace, dashboard, hosté, QR kódy, překlady.
  • Popisy zaměřené na výsledky, které propojují zkušenosti hostů s pracovními postupy obsluhy.
  • Rodově neutrální jazyk v němčině a dalších lokalizovaných textech.

Vyhněte se:

  • Vágnímu platformovému jazyku bez příkladů.
  • Přehnaně formálnímu podnikovému žargonu.
  • Dlouhým odstavcům tam, kde by lépe fungovala snadno skenovatelná sekce.

Praktická pravidla​

  • Používejte #ff8d49 jako hlavní akcent značky a #145466 jako sekundární základní barvu.
  • V produktových plochách upřednostňujte třídy s tokeny (primary, secondary, foreground, muted, border) před pevně zadanými barvami.
  • Marketingové stránky udržujte teplé, vzdušné, zaoblené, založené na screenshotech a jemně animované.
  • Dashboard a provozní plochy udržujte klidnější, podle potřeby hustší a více zaměřené na úkoly.
  • Umožněte zákaznickým prostředím pro hosty využívat branding organizace tam, kde produkt nabízí příslušné možnosti nastavení brandingu, ale plochy vlastněné Scoutello udržujte v souladu s tímto systémem.

Související koncepty: Trasy a plochy, Landingové stránky a dlaždice, Prostředí pro hosty v prohlížeči.