Přeskočit na hlavní obsah

Design system

Scoutello by mělo působit vřele, schopně a zaměřeně na produkt. Preferovaný vzhled je světlý, velkorysý, zaoblený a redakční: nejprve jasný obsah, poté jemná barva značky, měkké povrchy a klidný pohyb, díky kterému produkt působí responzivně, aniž by se stal dekorativním šumem.

Marketingová vstupní stránka je nejjasnějším veřejným odkazem na současný vizuální směr. Povrchy produktu by měly v maximální možné míře znovu používat sdílené designové tokeny a stát se expresivnějšími pouze tehdy, když je povrch explicitně orientován na značku nebo marketing.

Logo a firemní aktiva​

Použijte logo Scoutello z adresy URL veřejných dokumentů s aktivy, pokud agent, integrace nebo vygenerovaná stránka potřebuje opakovaně použitelnou značku:

Preferujte verzi SVG pro ostré vykreslování napříč velikostmi obrazovky. Použijte verzi PNG, pokud nástroj nebo cíl nemůže zpracovat SVG. Udržujte dostatek volného prostoru kolem značky, vyhněte se jejímu natahování nebo přebarvování a umisťujte ji na bílé, teplé krémové nebo jiné klidné povrchy, které zachovávají kontrast.

Barvy značky​

Primární barva: #ff8d49

Použijte primární oranžovou jako akcentovou barvu Scoutello: primární výzvy k akci, zaostřené stavy, aktivní navigace, pozadí malých ikon, zvýraznění textu, jemné záře a teplé přechody. V kódu produktu se mapuje na --primary: 24 100% 64% a třídy Tailwind, jako jsou bg-primary, text-primary, border-primary/15 a shadow-primary/10.

Sekundární barva: #145466

Použijte sekundární tmavou tealkovou jako uzemňující barvu. Nejlépe funguje v přechodech s primární oranžovou, tmavými panely s výzvou k akci, vizuální hloubkou a příležitostnými momenty značky s vysokým důrazem. Neměla by nahrazovat primární oranžovou jako výchozí barvu akce.

Podpůrné barvy:

  • Teplé krémové pozadí: #fff8f1, #fff4ea, #fcf6f1 a jemné povrchy orange-50 / amber-50.
  • Neutrální barvy produktu: bílé karty, tmavý text popředí, tlumený text s krytím přibližně 70-75 % a světlé okraje.
  • Terciární 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 tealková zůstaly rozpoznatelné jako pár značky.

Vizuální styl​

Preferujte čistý, prémiový vzhled SaaS s dostatkem tepla, aby nepůsobil genericky. Vstupní stránka kombinuje krémové síťované pozadí, bílé karty, velké snímky obrazovky produktu, zaoblené rohy a omezené přechody.

Použijte:

  • Zaoblené karty a panely, často od rounded-2xl do rounded-[2rem].
  • Jemné okraje, jako jsou border-primary/10, border-primary/15, ring-black/5 a světlé neutrální okraje.
  • Vrstvené bílé nebo krémové povrchy místo těžkých barevných bloků.
  • Jemné stíny, jako jsou shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 nebo vlastní stíny s nízkou krycí schopností.
  • Velké snímky obrazovky produktu nebo makety uživatelského rozhraní jako důkaz, zejména pro marketing a vyprávění příběhů o funkcích.
  • Malé momenty značky, jako je zvýraznění textu oranžovou barvou, ikonové čipy, kroužky, záře a přechodové CTA.

Vyhněte se:

  • Hlasitým oranžovým pozadím přes celou stránku.
  • Nadměrnému používání tealkové pro běžné ovládací prvky.
  • Hustým, stísněným rozvržením.
  • Drsným stínům, ostrým obdélníkům nebo chladným monochromatickým dashboardům.
  • Dekorativnímu pohybu, který konkuruje čtení nebo dokončování úkolů.

Typografie​

Marketingové stránky používají:

  • Space Grotesk pro nadpisy v nadpisech prostřednictvím třídy landing-display.
  • Manrope pro text marketingových těles.

Sdílené povrchy aplikací a dokumentů používají typografii uživatelského rozhraní zarovnanou se systémem, která je aktuálně blíže k Inter. Cílem stylu je konzistence napříč povrchy: sebevědomé nadpisy, těsné sledování nadpisů, čitelný text těla a velkorysá výška řádku.

Pokyny pro nadpisy:

  • Používejte velké, vyvážené nadpisy na marketingových stránkách.
  • Zvýrazněte pouze důležitou frázi primární oranžovou barvou.
  • Udržujte délku řádku pod kontrolou pomocí max-w-* a text-balance, pokud je k dispozici.

Pokyny pro text těla:

  • Udržujte odstavce klidné a přímé.
  • Používejte tlumený text popředí pro popisy, obvykle text-foreground/70 nebo text-foreground/75.
  • Preferujte skenovatelné sekce, krátké odstavce a jasné popisky.

Rozvržení a rozestupy​

Rozvržení by mělo působit prostorně a stabilně. Vstupní stránka používá kontejner max-w-7xl s responzivním horizontálním odsazením a velkými vertikálními sekcemi.

Běžné vzory:

  • Odsazení sekcí kolem py-16, py-20 nebo větší pro hlavní marketingové sekce.
  • Karty uspořádané v responzivních mřížkách s konzistentními mezerami.
  • Hero sekce se silným levým sloupcem obsahu a snímky obrazovky produktu nebo kompozicemi zařízení vpravo.
  • Vycentrované nadpisy sekcí pro široké sliby produktu; nadpisy zarovnané vlevo pro sekce příběhů nebo pracovních postupů.
  • Rozvržení primárně pro mobilní zařízení, která se čistě skládají, než se stanou víceřádkovými na větších obrazovkách.

Používejte bílý prostor jako součást designu. Pokud se sekce zdá nejasná, zjednodušte obsah a zvětšete prostor před přidáním další dekorace.

Komponenty a povrchy​

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

  • Tlačítka: zaoblené pilulky pro výrazné marketingové CTA; standardní produktová tlačítka jinde.
  • Karty: bílé nebo krémové, zaoblené, s okrajem a lehce vyvýšené.
  • Ikony: malé, jednoduché linkové ikony v čipech s oranžovým nádechem.
  • Statistiky a prvky důvěry: omezené karty s okraji s oranžovým nádechem nebo přechody.
  • Formuláře: jasné popisky, přímá pomocná textová pole a dostatek prostoru pro použití na mobilních zařízeních.
  • Snímky obrazovky: velké, ostré a mírně vyvýšené. Používejte je jako konkrétní důkaz produktu.

Při vytváření uživatelského rozhraní produktu vycházejte ze stávajících sdílených komponent uživatelského rozhraní a tokenů, nikoli z vlastních jednorázových stylů. Při vytváření marketingového uživatelského rozhraní používejte primitivy vstupní stránky a třídy vstupní stránky, pokud se hodí.

Pohyb​

Pohyb by měl zajistit, aby rozhraní působilo uhlazeně, nikoli uspěchaně. Vstupní stránka používá krátké animační efekty odhalení, efekty zvednutí zařízení, efekty rozkvětu záře a malé zvednutí při najetí myší.

Preferovaný pohyb:

  • Odhalení nahoru o 12-24 px s jemnou krycí schopností.
  • Karty při najetí myší se zvednou jen o několik pixelů.
  • Stavy CTA při najetí myší, které mírně zvednou a prohloubí stín.
  • Střídavé vstupy sekcí, kde podporují skenování příběhu.

Vždy respektujte preference sníženého pohybu. Vyhněte se animacím, které mohou skrývat obsah, blokovat interakci nebo se zdát nezbytné pro pochopení stránky.

Hlas a design obsahu​

Vizuální systém nejlépe funguje s přímým, konkrétním textem. Preferujte jazyk, který vysvětluje, co může organizace publikovat, spravovat nebo automatizovat ve Scoutello.

Použijte:

  • Názvy specifické pro produkt: vstupní stránky, dlaždice, prohlídky, události, organizace, dashboard, hosté, QR kódy, překlady.
  • Popisy zaměřené na výsledky, které spojují zážitky hostů s pracovními postupy operátorů.
  • V němčině a jiných lokalizovaných textech používejte genderově neutrální jazyk.

Vyhněte se:

  • Vágnímu jazyku platformy bez příkladů.
  • Příliš formálnímu firemnímu žargonu.
  • Dlouhým odstavcům, kde by lépe fungovala skenovatelná sekce.

Praktická pravidla​

  • Používejte #ff8d49 jako hlavní akcent značky a #145466 jako sekundární uzemňující barvu.
  • Pro povrchy produktu preferujte tokenizované třídy (primary, secondary, foreground, muted, border) před pevně zakódovanými barvami.
  • Udržujte marketingové stránky teplé, prostorné, zaoblené, vedené snímky obrazovky a lehce animované.
  • Udržujte dashboardy a operační povrchy klidnější, hustší pouze tam, kde je to nutné, a více zaměřené na úkoly.
  • Nechte zážitky hostů vlastněné zákazníky podporovat branding organizace tam, kde produkt již vystavuje ovládací prvky brandingu, ale udržujte povrchy vlastněné Scoutello v souladu s tímto systémem.

Související koncepty: Trasy a povrchy, Vstupní stránky a dlaždice, Zážitky hostů založené na prohlížeči.