Preskočiť na hlavný obsah

Dizajnový systém

Scoutello by mal pôsobiť hrejivo, kompetentne a so zameraním na produkt. Preferovaný vzhľad je svetlý, vzdušný, zaoblený a s redakčným charakterom: najprv jasný obsah, potom decentná farba značky, jemné povrchy a pokojné animácie, vďaka ktorým produkt pôsobí responzívne bez dekoratívneho vizuálneho šumu.

Marketingová vstupná stránka je najjasnejšou verejnou referenciou aktuálneho vizuálneho smerovania. Produktové rozhrania by mali podľa možností znovu používať zdieľané dizajnové tokeny a výraznejší charakter by mali mať iba vtedy, keď sú povrch alebo obrazovka vyslovene zamerané na značku či marketing.

Logo a prvky značky​

Ak agent, integrácia alebo generovaná stránka potrebuje opakovane použiteľný prvok značky, použite logo Scoutello z verejnej URL adresy s assetom v dokumentácii:

Uprednostnite SVG verziu, ktorá zostáva ostrá pri všetkých veľkostiach obrazovky. PNG verziu použite vtedy, keď nástroj alebo cieľové prostredie SVG nepodporuje. Okolo loga ponechajte dostatok voľného priestoru, nenaťahujte ho ani nemenite jeho farbu a umiestňujte ho na biele, teplé krémové alebo iné pokojné povrchy, ktoré zachovávajú dostatočný kontrast.

Farby značky​

Primárna farba: #ff8d49

Primárnu oranžovú používajte ako akcentovú farbu Scoutello: pre hlavné výzvy na akciu, stavy fokusu, aktívnu navigáciu, malé pozadia ikon, zvýraznený text, jemné žiary a teplé gradienty. V produktovom kóde zodpovedá --primary: 24 100% 64% a Tailwind triedam ako bg-primary, text-primary, border-primary/15 a shadow-primary/10.

Sekundárna farba: #145466

Sekundárnu tmavú petrolejovú používajte ako uzemňujúcu farbu. Najlepšie funguje v gradientoch s primárnou oranžovou, na tmavých paneloch s výzvou na akciu, na vytvorenie vizuálnej hĺbky a pri príležitostných výrazných momentoch značky. Nemala by nahrádzať primárnu oranžovú ako predvolenú farbu akcií.

Podporné farby:

  • Teplé krémové pozadia: #fff8f1, #fff4ea, #fcf6f1 a jemné povrchy orange-50 / amber-50.
  • Produktové neutrálne farby: biele karty, tmavý text v popredí, tlmený text s krytím približne 70–75 % a svetlé okraje.
  • Terciárna modrá: hsl(205 100% 51%) je k dispozícii ako podporný token, no mala by sa používať striedmo, aby oranžová a petrolejová zostali rozpoznateľnou dvojicou značky.

Vizuálny štýl​

Uprednostnite čistý, prémiový SaaS vzhľad s dostatkom tepla, aby nepôsobil genericky. Vstupná stránka kombinuje krémové sieťované pozadia, biele karty, veľké snímky produktu, zaoblené rohy a umiernené gradienty.

Používajte:

  • Zaoblené karty a panely, často od rounded-2xl po rounded-[2rem].
  • Jemné okraje, napríklad border-primary/10, border-primary/15, ring-black/5 a svetlé neutrálne okraje.
  • Vrstvené biele alebo krémové povrchy namiesto veľkých plôch s výraznou farbou.
  • Jemné tiene ako shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 alebo vlastné tiene s nízkym krytím.
  • Veľké snímky produktu alebo makety používateľského rozhrania ako dôkaz, najmä v marketingu a pri predstavovaní funkcií.
  • Malé momenty značky, napríklad oranžový zvýraznený text, čipové pozadia ikon, krúžky, žiary a gradientové CTA.

Vyhnite sa:

  • Výrazným oranžovým pozadiam cez celú stránku.
  • Nadmernému používaniu petrolejovej farby pri bežných ovládacích prvkoch.
  • Hustým a stiesneným rozloženiam.
  • Tvrdým tieňom, ostrým obdĺžnikom alebo chladným monochromatickým dashboardom.
  • Dekoratívnym animáciám, ktoré odvádzajú pozornosť od čítania alebo dokončenia úlohy.

Typografia​

Marketingový web používa:

  • Space Grotesk pre nadpisy v zobrazení prostredníctvom triedy landing-display.
  • Manrope pre text marketingových materiálov.

Zdieľané povrchy aplikácie a dokumentácie používajú systémovo zladenú typografiu používateľského rozhrania, ktorá sa v súčasnosti približuje písmu Inter. Cieľom je konzistentný vzhľad naprieč povrchmi: sebavedomé nadpisy, tesné vyváženie nadpisov, dobre čitateľný text a štedrá výška riadkov.

Odporúčania pre nadpisy:

  • Na marketingových stránkach používajte veľké a vyvážené nadpisy.
  • Primárnou oranžovou zvýraznite iba dôležitú frázu.
  • Dostupnými triedami max-w-* a text-balance podľa možností obmedzte dĺžku riadkov.

Odporúčania pre hlavný text:

  • Odseky udržiavajte pokojné a priame.
  • Na popisy používajte tlmenú farbu textu v popredí, zvyčajne text-foreground/70 alebo text-foreground/75.
  • Uprednostnite ľahko skenovateľné sekcie, krátke odseky a jasné označenia.

Rozloženie a odstupy​

Rozloženia by mali pôsobiť vzdušne a stabilne. Vstupná stránka používa kontajner max-w-7xl s responzívnym horizontálnym odsadením a veľkými vertikálnymi sekciami.

Bežné vzory:

  • Odsadenie sekcií približne py-16, py-20 alebo väčšie pri hlavných marketingových sekciách.
  • Karty usporiadané v responzívnych mriežkach s konzistentnými medzerami.
  • Hero sekcie so silným ľavým stĺpcom s obsahom a snímkami produktu alebo kompozíciami zariadení vpravo.
  • Centrované nadpisy sekcií pri všeobecných prísľuboch produktu; nadpisy zarovnané doľava pri príbehových sekciách alebo sekciách pracovných postupov.
  • Rozloženia navrhnuté najprv pre mobil, ktoré sa pred prechodom na viac stĺpcov pri väčších obrazovkách prehľadne skladajú pod seba.

Využívajte prázdny priestor ako súčasť dizajnu. Ak je sekcia nejasná, najprv zjednodušte obsah a pridajte viac priestoru, až potom ďalšiu dekoráciu.

Komponenty a povrchy​

Povrchy Scoutello by mali pôsobiť hmatateľne, no zároveň ľahko:

  • Tlačidlá: výrazné marketingové CTA používajú zaoblené pilulkové tlačidlá; inde štandardné produktové tlačidlá.
  • Karty: biele alebo krémové, zaoblené, s okrajom a miernym nadvihnutím.
  • Ikony: malé, jednoduché líniové ikony v oranžovo tónovaných čipoch.
  • Štatistiky a prvky dôvery: umiernené karty s oranžovo tónovanými okrajmi alebo gradientmi.
  • Formuláre: jasné označenia, priame pomocné texty a dostatočné odstupy pre používanie na mobile.
  • Snímky obrazovky: veľké, ostré a mierne nadvihnuté. Používajte ich ako konkrétny dôkaz hodnoty produktu.

Pri tvorbe produktového UI vychádzajte z existujúcich zdieľaných UI komponentov a tokenov namiesto vlastných jednorazových štýlov. Pri tvorbe marketingového UI používajte landing primitives a landing classes, ak sa hodia.

Pohyb​

Pohyb by mal rozhranie pôsobiť uhladene, nie preplnene. Landing page využíva krátke animácie odhalenia, efekty vynorenia zariadení, žiarivé bloom efekty a jemné nadvihnutie pri prechode kurzorom.

Preferovaný pohyb:

  • Odhalenie smerom nahor o 12 – 24 px s jemnou nepriehľadnosťou.
  • Karty pri prechode kurzorom nadvihnúť iba o niekoľko pixelov.
  • Stavy CTA pri prechode kurzorom mierne nadvihnúť a prehĺbiť tieň.
  • Postupné vstupy sekcií tam, kde podporujú skenovanie príbehu.

Vždy rešpektujte nastavenia pre obmedzenie pohybu. Vyhnite sa animáciám, ktoré môžu skryť obsah, blokovať interakciu alebo pôsobiť ako nevyhnutné na pochopenie stránky.

Hlas a obsahový dizajn​

Vizuálny systém najlepšie funguje s priamym a konkrétnym textom. Uprednostňujte jazyk, ktorý vysvetľuje, čo môže organizácia v Scoutello publikovať, spravovať alebo automatizovať.

Používajte:

  • Produktovo špecifické podstatné mená: landing pages, tiles, tours, events, organizations, dashboard, guests, QR codes, translations.
  • Opisy orientované na výsledok, ktoré prepájajú zážitky hostí s pracovnými postupmi prevádzkovateľov.
  • Rodovo neutrálne vyjadrovanie v nemčine a ďalších lokalizovaných textoch.

Vyhnite sa:

  • Vágnemu jazyku o platforme bez príkladov.
  • Príliš formálnemu podnikovému žargónu.
  • Dlhým odsekom tam, kde by lepšie fungovala ľahko skenovateľná sekcia.

Praktické pravidlá​

  • Použite #ff8d49 ako hlavný akcent značky a #145466 ako sekundárnu uzemňujúcu farbu.
  • V produktových rozhraniach uprednostňujte triedy s tokenmi (primary, secondary, foreground, muted, border) pred natvrdo zadanými farbami.
  • Marketingové stránky udržiavajte teplé, vzdušné, zaoblené, založené na screenshotoch a jemne animované.
  • Dashboardové a prevádzkové plochy udržiavajte pokojnejšie, hustejšie iba tam, kde je to potrebné, a viac zamerané na úlohy.
  • Zákaznícke zážitky hostí nech podporujú branding organizácie tam, kde produkt už poskytuje možnosti brandingu, no plochy vlastnené Scoutello udržiavajte v súlade s týmto systémom.

Súvisiace koncepty: Routes and surfaces, Landing pages and tiles, Browser-first guest experiences.