Skip to main content

Design system

Leírás: A Scoutello márkaszínei, vizuális irányelvei, tipográfiája, elrendezése és interakciós útmutatója.

A Scoutellónak meleg, képzett és termékorientált benyomást kell keltenie. Az előnyben részesített megjelenés világos, bőséges, lekerekített és szerkesztői: először a tiszta tartalom, majd a finom márkaszin, a puha felületek és a nyugodt mozgás, amely a terméket reszponzívvá teszi anélkül, hogy dekoratív zajossá válna.

A marketing leszállóoldal a legtisztább nyilvános referenciája az aktuális vizuális iránynak. A termékfelületeknek újra fel kell használniuk a megosztott tervezési tokeneket, ahol lehetséges, és csak akkor válnak kifejezőbbé, ha a felület kifejezetten márkára vagy marketingre orientált.

Logó és márkaeszközök​

Használja a Scoutello logót a nyilvános dokumentáció eszköz URL-jéről, amikor egy ügynöknek, integrációnak vagy generált oldalnak újrafelhasználható márkaelemre van szüksége:

Az SVG verziót részesítse előnyben a tiszta megjelenítés érdekében minden képernyőméreten. Használja a PNG verziót, ha egy eszköz vagy célállomás nem tudja kezelni az SVG-t. Tartson elegendő szabad helyet az elem körül, kerülje annak nyújtását vagy újraszínezését, és helyezze fehér, meleg krémszínű vagy más nyugodt felületekre, amelyek megőrzik a kontrasztot.

Márka színek​

Elsődleges szín: #ff8d49

Használja az elsődleges narancsszínt a Scoutello hangsúlyszínként: elsődleges cselekvésre ösztönzők, fókuszált állapotok, aktív navigáció, kis ikon hátterek, kiemelt szöveg, puha ragyogások és meleg színátmenetek. A termékkódban ez a --primary: 24 100% 64% és olyan Tailwind osztályoknak felel meg, mint a bg-primary, text-primary, border-primary/15 és shadow-primary/10.

Másodlagos szín: #145466

Használja a másodlagos mély türkizt alapozó színként. Legjobban az elsődleges narancssárgával, sötét cselekvésre ösztönző panelekkel, vizuális mélységgel és alkalmi, nagy hangsúlyú márka pillanatokkal működik színátmenetekben. Nem szabad helyettesítenie az elsődleges narancssárgát az alapértelmezett cselekvési színként.

Támogató színek:

  • Meleg krémszínű hátterek: #fff8f1, #fff4ea, #fcf6f1 és puha orange-50 / amber-50 felületek.
  • Termék semleges színek: fehér kártyák, sötét előtér szöveg, 70-75% átlátszóság körüli tompa szöveg és világos szegélyek.
  • Harmadlagos kék: hsl(205 100% 51%) elérhető támogató tokentként, de takarékosan kell használni, hogy a narancs és a türkiz felismerhető maradjon a márkapárként.

Vizuális stílus​

A tiszta, prémium SaaS megjelenést részesítse előnyben, elegendő melegséggel ahhoz, hogy ne tűnjön általánosnak. A leszállóoldal krémszínű hálós háttereket, fehér kártyákat, nagy termék-képernyőképeket, lekerekített sarkokat és visszafogott színátmeneteket kombinál.

Használjon:

  • Lekerekített kártyákat és paneleket, gyakran rounded-2xl és rounded-[2rem] között.
  • Puha szegélyeket, mint például border-primary/10, border-primary/15, ring-black/5 és világos semleges szegélyeket.
  • Rétegezett fehér vagy krémszínű felületeket, ne nehéz színes blokkokat.
  • Finom árnyékokat, mint például shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, vagy egyedi, alacsony átlátszóságú árnyékokat.
  • Nagy termék-képernyőképeket vagy felhasználói felület-mockupokat bizonyítékként, különösen marketing és funkció-történetekhez.
  • Kis márka pillanatokat, mint például narancssárga kiemelt szöveg, ikon chipek, gyűrűk, ragyogások és színátmenetes CTA-k.

Kerülje:

  • Hangos, teljes oldalas narancssárga háttereket.
  • A türkiz túlzott használatát hétköznapi vezérlőkhöz.
  • Sűrű, szűk elrendezéseket.
  • Durva árnyékokat, éles téglalapokat vagy hideg, monokróm műszerfalakat.
  • Dekoratív mozgást, amely versenyez az olvasással vagy a feladatok elvégzésével.

Tipográfia​

A marketing webhely a következőket használja:

  • Space Grotesk a kijelző címsorokhoz a landing-display osztályon keresztül.
  • Manrope a marketing törzsszöveghez.

A megosztott alkalmazás- és dokumentációs felületek rendszer-kompatibilis UI tipográfiát használnak, jelenleg közelebb az Interhez. A stíluscél minden felületen egységes: magabiztos címsorok, szoros címsor követés, olvasható törzsszöveg és bőséges sorköz.

Címsor útmutató:

  • Használjon nagy, kiegyensúlyozott címsorokat a marketing oldalakon.
  • Csak a fontos kifejezést emelje ki elsődleges narancssárgával.
  • Tartsa a sorhosszt szabályozva max-w-* és text-balance használatával, ahol elérhető.

Törzsszöveg útmutató:

  • Tartsa a bekezdéseket nyugodtnak és közvetlennek.
  • Használjon tompa előtér szöveget a leírásokhoz, általában text-foreground/70 vagy text-foreground/75.
  • Részesítse előnyben a szkennelhető szakaszokat, rövid bekezdéseket és tiszta címkéket.

Elrendezés és Térköz​

Az elrendezéseknek tágasnak és stabilnak kell lenniük. A leszállóoldal egy max-w-7xl konténert használ, reszponzív vízszintes párnázással és nagy függőleges szakaszokkal.

Gyakori minták:

  • Szakasz párnázás py-16, py-20 vagy nagyobb körül a fő marketing szakaszokhoz.
  • Kártyák elrendezve reszponzív rácsokban, egyenletes távolságokkal.
  • Hős szakaszok erős bal oldali tartalom oszloppal és termék-képernyőképekkel vagy eszközkompozíciókkal a jobb oldalon.
  • Központosított szakaszfejlécek széleskörű termékígéretekhez; balra igazított fejlécek történet- vagy munkafolyamat szakaszokhoz.
  • Mobil-első elrendezések, amelyek tisztán egymásra rakódnak, mielőtt több oszlopossá válnának nagyobb képernyőkön.

Használja a fehér teret a dizájn részeként. Ha egy szakasz tisztázatlan, egyszerűsítse a tartalmat és növelje a légteret, mielőtt több díszítést adna hozzá.

Komponensek és Felületek​

A Scoutello felületeknek tapinthatónak, de könnyűnek kell lenniük:

  • Gombok: lekerekített pirulák kiemelkedő marketing CTA-khoz; standard termék gombok máshol.
  • Kártyák: fehér vagy krémszínű, lekerekített, szegélyezett és enyhén kiemelt.
  • Ikonok: kicsi, egyszerű vonal ikonok narancssárga árnyalatú chipekben.
  • Statisztikák és bizalmi elemek: visszafogott kártyák narancssárga árnyalatú szegélyekkel vagy színátmenetekkel.
  • Űrlapok: tiszta címkék, közvetlen súgószöveg és elegendő hely mobil használatra.
  • Képernyőképek: nagy, éles és enyhén kiemelt. Használja őket a termék konkrét bizonyítékaként.

Termék UI építésekor a meglévő megosztott UI komponensekből és tokenekből induljon ki, ne pedig egyedi, egyszeri stílusokból. Marketing UI építésekor használja a leszálló primitíveket és a leszálló osztályokat, ahol azok illeszkednek.

Mozgás​

A mozgásnak polírozottá kell tennie a felületet, nem pedig zsúfolttá. A leszállóoldal rövid megjelenítési animációkat, eszközemelési effektusokat, ragyogás-bloom effektusokat és kis lebegő emeléseket használ.

Előnyben részesített mozgás:

  • Megjelenés 12-24px-ről puha átlátszósággal.
  • Lebegő kártyák csak néhány pixellel emelkednek.
  • CTA lebegő állapotok, amelyek kissé megemelik és mélyítik az árnyékot.
  • Lépcsőzetes szakaszbejáratok, ahol támogatják a narratív szkennelést.

Mindig tartsa tiszteletben a csökkentett mozgás preferenciákat. Kerülje az animációkat, amelyek elrejthetik a tartalmat, blokkolhatják az interakciót, vagy a lap megértéséhez szükségesnek tűnhetnek.

Hangnem és Tartalomtervezés​

A vizuális rendszer a közvetlen, konkrét szöveggel működik a legjobban. Részesítse előnyben azokat a kifejezéseket, amelyek elmagyarázzák, mit tehet közzé, kezelhet vagy automatizálhat egy szervezet a Scoutellóban.

Használjon:

  • Termékspecifikus főneveket: leszállóoldalak, csempék, túrák, események, szervezetek, irányítópult, vendégek, QR-kódok, fordítások.
  • Eredményorientált leírásokat, amelyek összekapcsolják a vendégélményeket a kezelői munkafolyamatokkal.
  • Nemen semleges nyelvezetet német és más lokalizált szövegekben.

Kerülje:

  • Homályos platformnyelvezetet példák nélkül.
  • Túl formális vállalati zsargont.
  • Hosszú bekezdéseket, ahol egy szkennelhető szakasz jobban működne.

Gyakorlati Szabályok​

  • Használja a #ff8d49 színt a fő márka hangsúlyszínként és a #145466 színt a másodlagos alapozó színként.
  • Részesítse előnyben a tokenizált osztályokat (primary, secondary, foreground, muted, border) a keményen kódolt színek helyett a termékfelületeken.
  • Tartsa a marketing oldalakat melegnek, tágasnak, lekerekítettnek, képernyőképekkel vezetettnek és enyhén animáltnak.
  • Tartsa a műszerfal és az operatív felületeket nyugodtabbnak, csak ahol szükséges, sűrűbbnek és feladatközpontúbbnak.
  • Hagyja, hogy az ügyféltulajdonban lévő vendégélmények támogassák a szervezet márkázását, ahol a termék már kitárja a márkázási vezérlőket, de tartsa a Scoutello-tulajdonban lévő felületeket összhangban ezzel a rendszerrel.

Kapcsolódó koncepciók: Útvonalak és felületek, Leszállóoldalak és csempék, Böngésző-alapú vendégélmények.