Σύστημα σχεδιασμού

Το Scoutello πρέπει να αποπνέει ζεστασιά, ικανότητα και προσήλωση στο προϊόν. Η προτιμώμενη αισθητική είναι φωτεινή, ευρύχωρη, με στρογγυλεμένες γραμμές και editorial χαρακτήρα: πρώτα το σαφές περιεχόμενο και έπειτα τα διακριτικά χρώματα της επωνυμίας, οι απαλές επιφάνειες και η ήρεμη κίνηση που κάνει το προϊόν να ανταποκρίνεται χωρίς να γίνεται διακοσμητικός θόρυβος.

Η landing page του marketing αποτελεί την πιο σαφή δημόσια αναφορά για την τρέχουσα οπτική κατεύθυνση. Οι επιφάνειες του προϊόντος πρέπει, όπου είναι δυνατό, να επαναχρησιμοποιούν τα κοινά design tokens και να γίνονται πιο εκφραστικές μόνο όταν η επιφάνεια έχει σαφή προσανατολισμό προς την επωνυμία ή το marketing.

Λογότυπο και στοιχεία επωνυμίας

Χρησιμοποιήστε το λογότυπο Scoutello από το URL του asset στα δημόσια docs όταν ένας agent, μια ενσωμάτωση ή μια παραγόμενη σελίδα χρειάζεται ένα επαναχρησιμοποιήσιμο στοιχείο επωνυμίας:

• Λογότυπο SVG: https://docs.scoutello.com/img/scoutello-logo.svg
• Λογότυπο PNG: https://docs.scoutello.com/img/scoutello-logo.png

Προτιμήστε την έκδοση SVG για καθαρή απόδοση σε όλες τις διαστάσεις οθόνης. Χρησιμοποιήστε την έκδοση PNG όταν ένα εργαλείο ή προορισμός δεν υποστηρίζει SVG. Αφήστε αρκετό ελεύθερο χώρο γύρω από το σήμα, μην το παραμορφώνετε ή αλλάζετε το χρώμα του και τοποθετήστε το σε λευκές, θερμές κρεμ ή άλλες ήρεμες επιφάνειες που διατηρούν την αντίθεση.

Χρώματα επωνυμίας

Κύριο χρώμα: #ff8d49

Χρησιμοποιήστε το κύριο πορτοκαλί ως χρώμα έμφασης του Scoutello: για κύριες παροτρύνσεις ενεργειών, καταστάσεις εστίασης, ενεργή πλοήγηση, φόντα μικρών εικονιδίων, κείμενο επισήμανσης, απαλές λάμψεις και θερμές διαβαθμίσεις. Στον κώδικα του προϊόντος αντιστοιχεί στο --primary: 24 100% 64% και σε κλάσεις Tailwind όπως οι bg-primary, text-primary, border-primary/15 και shadow-primary/10.

Δευτερεύον χρώμα: #145466

Χρησιμοποιήστε το βαθύ πετρόλ ως χρώμα που προσδίδει σταθερότητα. Λειτουργεί καλύτερα σε διαβαθμίσεις με το κύριο πορτοκαλί, σε σκούρα πλαίσια παροτρύνσεων ενεργειών, για οπτικό βάθος και σε επιλεγμένες στιγμές έντονης προβολής της επωνυμίας. Δεν πρέπει να αντικαθιστά το κύριο πορτοκαλί ως προεπιλεγμένο χρώμα ενεργειών.

Υποστηρικτικά χρώματα:

• Θερμά κρεμ φόντα: #fff8f1, #fff4ea, #fcf6f1 και απαλές επιφάνειες orange-50 / amber-50.
• Ουδέτερα χρώματα προϊόντος: λευκές κάρτες, σκούρο κείμενο προσκηνίου, muted κείμενο με αδιαφάνεια περίπου 70–75% και ανοιχτά περιγράμματα.
• Τριτογενές μπλε: Το hsl(205 100% 51%) διατίθεται ως υποστηρικτικό token, αλλά πρέπει να χρησιμοποιείται με φειδώ, ώστε το πορτοκαλί και το πετρόλ να παραμένουν αναγνωρίσιμα ως ζεύγος χρωμάτων της επωνυμίας.

Οπτικό στυλ

Προτιμήστε μια καθαρή, premium αισθητική SaaS με αρκετή ζεστασιά, ώστε να μην φαίνεται γενική. Η landing page συνδυάζει φόντα με κρεμ mesh, λευκές κάρτες, μεγάλα screenshots του προϊόντος, στρογγυλεμένες γωνίες και διακριτικές διαβαθμίσεις.

Χρησιμοποιήστε:

• Στρογγυλεμένες κάρτες και πλαίσια, συνήθως από rounded-2xl έως rounded-[2rem].
• Απαλά περιγράμματα όπως τα border-primary/10, border-primary/15, ring-black/5 και ανοιχτά ουδέτερα περιγράμματα.
• Πολυεπίπεδες λευκές ή κρεμ επιφάνειες αντί για βαριά χρωματιστά πλαίσια.
• Διακριτικές σκιές όπως οι shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 ή προσαρμοσμένες σκιές χαμηλής αδιαφάνειας.
• Μεγάλα screenshots του προϊόντος ή mockups UI ως τεκμήρια, ιδιαίτερα στο marketing και στην παρουσίαση λειτουργιών.
• Μικρές πινελιές της επωνυμίας, όπως πορτοκαλί κείμενο επισήμανσης, chips εικονιδίων, δακτύλιοι, λάμψεις και διαβαθμισμένα CTA.

Αποφύγετε:

• Έντονα πορτοκαλί φόντα σε ολόκληρη τη σελίδα.
• Υπερβολική χρήση πετρόλ για συνηθισμένα στοιχεία ελέγχου.
• Πυκνές, ασφυκτικές διατάξεις.
• Σκληρές σκιές, αιχμηρά ορθογώνια ή ψυχρούς μονόχρωμους πίνακες ελέγχου.
• Διακοσμητική κίνηση που ανταγωνίζεται την ανάγνωση ή την ολοκλήρωση εργασιών.

Τυπογραφία

Ο ιστότοπος marketing χρησιμοποιεί:

• Space Grotesk για μεγάλους τίτλους μέσω της κλάσης landing-display.
• Manrope για το κείμενο σώματος του marketing.

Οι κοινόχρηστες επιφάνειες της εφαρμογής και των docs χρησιμοποιούν τυπογραφία UI ευθυγραμμισμένη με το σύστημα, σήμερα πιο κοντά στην Inter. Ο στόχος του στυλ είναι η συνέπεια σε όλες τις επιφάνειες: δυναμικοί τίτλοι, σφιχτό tracking στους μεγάλους τίτλους, ευανάγνωστο κείμενο σώματος και γενναιόδωρο διάστιχο.

Οδηγίες για τίτλους:

• Χρησιμοποιήστε μεγάλους, ισορροπημένους τίτλους στις σελίδες marketing.
• Επισημάνετε μόνο τη σημαντική φράση με το κύριο πορτοκαλί.
• Διατηρήστε ελεγχόμενο μήκος γραμμής με τα max-w-* και text-balance, όπου είναι διαθέσιμα.

Οδηγίες για το κείμενο σώματος:

• Διατηρήστε τις παραγράφους ήρεμες και άμεσες.
• Χρησιμοποιήστε muted χρώμα κειμένου προσκηνίου για τις περιγραφές, συνήθως text-foreground/70 ή text-foreground/75.
• Προτιμήστε ενότητες που διαβάζονται γρήγορα, σύντομες παραγράφους και σαφείς ετικέτες.

Διάταξη και αποστάσεις

Οι διατάξεις πρέπει να αποπνέουν ευρυχωρία και σταθερότητα. Η landing page χρησιμοποιεί ένα container max-w-7xl με αποκριτική οριζόντια εσωτερική απόσταση και μεγάλες κατακόρυφες ενότητες.

Συνηθισμένα μοτίβα:

• Εσωτερική απόσταση ενότητας περίπου py-16, py-20 ή μεγαλύτερη για βασικές ενότητες marketing.
• Κάρτες τοποθετημένες σε αποκριτικά grid με συνεπή κενά.
• Hero sections με ισχυρή στήλη περιεχομένου στα αριστερά και screenshots προϊόντος ή συνθέσεις συσκευών στα δεξιά.
• Κεντραρισμένες κεφαλίδες ενοτήτων για ευρείες υποσχέσεις προϊόντος· αριστερά στοιχισμένες κεφαλίδες για ενότητες αφήγησης ή ροής εργασίας.
• Διατάξεις με προτεραιότητα στα κινητά, οι οποίες στοιβάζονται καθαρά πριν μετατραπούν σε πολλαπλές στήλες σε μεγαλύτερες οθόνες.

Χρησιμοποιήστε τον κενό χώρο ως μέρος του σχεδιασμού. Αν μια ενότητα δεν είναι σαφής, απλοποιήστε το περιεχόμενο και αυξήστε τον χώρο αναπνοής πριν προσθέσετε περισσότερη διακόσμηση.

Στοιχεία και επιφάνειες

Οι επιφάνειες του Scoutello πρέπει να είναι απτές αλλά ανάλαφρες:

• Κουμπιά: στρογγυλεμένα pills για εμφανή CTA marketing· τυπικά κουμπιά προϊόντος στις υπόλοιπες περιπτώσεις.
• Κάρτες: λευκές ή κρεμ, στρογγυλεμένες, με περίγραμμα και διακριτική ανύψωση.
• Εικονίδια: μικρά, απλά εικονίδια γραμμής σε chips με πορτοκαλί απόχρωση.
• Στατιστικά και στοιχεία εμπιστοσύνης: διακριτικές κάρτες με πορτοκαλί περιγράμματα ή διαβαθμίσεις.
• Φόρμες: σαφείς ετικέτες, άμεσο βοηθητικό κείμενο και επαρκείς αποστάσεις για χρήση σε κινητά.
• Screenshots: μεγάλα, καθαρά και ελαφρώς υπερυψωμένα. Χρησιμοποιήστε τα ως απτά τεκμήρια του προϊόντος.

Κατά την ανάπτυξη του UI του προϊόντος, ξεκινήστε από τα υπάρχοντα κοινόχρηστα στοιχεία UI και τα tokens αντί να δημιουργείτε εξατομικευμένο styling για μεμονωμένες περιπτώσεις. Κατά την ανάπτυξη UI για marketing, χρησιμοποιήστε τα landing primitives και τις landing classes όπου ταιριάζουν.

Κίνηση

Η κίνηση πρέπει να κάνει το περιβάλλον να δείχνει προσεγμένο, όχι φορτωμένο. Η landing page χρησιμοποιεί σύντομες animat​​ions εμφάνισης, εφέ ανύψωσης συσκευών, εφέ διάχυσης λάμψης και μικρές ανυψώσεις κατά την αιώρηση.

Προτιμώμενη κίνηση:

• Εμφάνιση από 12–24 px προς τα πάνω με διακριτική αδιαφάνεια.
• Κάρτες που ανυψώνονται μόνο κατά λίγα pixel κατά την αιώρηση.
• Καταστάσεις αιώρησης για CTA που ανυψώνονται ελαφρώς και κάνουν τη σκιά πιο έντονη.
• Σταδιακή εμφάνιση ενοτήτων, όταν υποστηρίζει τη γρήγορη κατανόηση της αφήγησης.

Να σέβεστε πάντα τις προτιμήσεις για μειωμένη κίνηση. Αποφύγετε animations που μπορούν να κρύψουν περιεχόμενο, να εμποδίσουν την αλληλεπίδραση ή να κάνουν την κατανόηση της σελίδας να φαίνεται απαραίτητη.

Σχεδιασμός ύφους και περιεχομένου

Το οπτικό σύστημα λειτουργεί καλύτερα με άμεσο και συγκεκριμένο κείμενο. Προτιμήστε διατύπωση που εξηγεί τι μπορεί να δημοσιεύσει, να διαχειριστεί ή να αυτοματοποιήσει ένας οργανισμός στο Scoutello.

Χρησιμοποιήστε:

• Ουσιαστικά συγκεκριμένα για το προϊόν: landing pages, πλακίδια, tours, events, οργανισμούς, dashboard, επισκέπτες, κωδικούς QR, μεταφράσεις.
• Περιγραφές προσανατολισμένες στα αποτελέσματα, που συνδέουν τις εμπειρίες επισκεπτών με τις ροές εργασίας των operators.
• Γλώσσα ουδέτερη ως προς το φύλο στα γερμανικά και σε άλλο μεταφρασμένο περιεχόμενο.

Αποφύγετε:

• Αόριστη γλώσσα για πλατφόρμες χωρίς παραδείγματα.
• Υπερβολικά επίσημη ορολογία enterprise.
• Μεγάλες παραγράφους, όταν θα λειτουργούσε καλύτερα μια ενότητα που διαβάζεται γρήγορα.

Πρακτικοί κανόνες

• Χρησιμοποιήστε το #ff8d49 ως βασικό χρώμα έμφασης της επωνυμίας και το #145466 ως δευτερεύον χρώμα ισορροπίας.
• Προτιμήστε κλάσεις με tokens (primary, secondary, foreground, muted, border) αντί για hard-coded χρώματα στις επιφάνειες του προϊόντος.
• Διατηρήστε τις σελίδες marketing ζεστές, ευρύχωρες, με στρογγυλεμένες γωνίες, βασισμένες σε screenshots και με διακριτική κίνηση.
• Διατηρήστε το dashboard και τις λειτουργικές επιφάνειες πιο ήρεμες, πιο πυκνές μόνο όπου είναι απαραίτητο και περισσότερο εστιασμένες στις εργασίες.
• Αφήστε τις εμπειρίες επισκεπτών που ανήκουν στους πελάτες να υποστηρίζουν την επωνυμία του οργανισμού, όπου το προϊόν παρέχει ήδη στοιχεία ελέγχου επωνυμίας, αλλά διατηρήστε τις επιφάνειες που ανήκουν στο Scoutello ευθυγραμμισμένες με αυτό το σύστημα.

Σχετικές έννοιες: Routes και επιφάνειες, Landing pages και πλακίδια, Εμπειρίες επισκεπτών με προτεραιότητα στον browser.