Slash
Μεσονύχτιο θησαυροφυλάκιο με επιχρυσωμένα καθολικά βιβλία
Το Slash λειτουργεί σε λειτουργία γκαλερί τα μεσάνυχτα: ένας σχεδόν μαύρος καμβάς, λευκά γράμματα και μια ενιαία ζεστή χάλκινη προφορά που χρησιμεύει ως στίξη. Οι τίτλοι εμφανίζονται σε Ivy Presto, μια γραμματοσειρά didone serif υψηλής αντίθεσης που χρησιμοποιείται σε ακραία μεγέθη (έως 88px) - αυτή η σύγκρουση γραμματοσειρών serif και sans-serif είναι η υπογραφή του συστήματος, προσδίδοντάς του μια οικονομική βαρύτητα χωρίς τη μεσιτική βαρύτητα των παραδοσιακών τραπεζικών εργασιών. Το υπόλοιπο περιβάλλον χρήστη είναι σκόπιμα διακριτικό: λεπτά περιγράμματα, χειριστήρια σε σχήμα χαπιού, συμπαγές κείμενο σώματος 16px και μια διακριτική ανοδική κίνηση για να επιτρέπει στην γραμματοσειρά να αναπνέει. Μια ενιαία χρυσή διαβάθμιση (γραμμή γραφήματος, μικροπροφορές) προσθέτει ζεστασιά στο μονόχρωμο σύστημα, θυμίζοντας τη ζεστή λάμψη ενός τερματικού Bloomberg που έχει κατασκευαστεί για ένα κοινό design.
Το περιεχόμενο έχει πλάτος 1216px, στο κέντρο, με κατακόρυφα κενά 160px. Η αρχική οθόνη είναι ένας σκούρος καμβάς πλήρους πλάτους με διαιρεμένη σύνθεση: μια κεφαλίδα serif με αριστερή ευθυγράμμιση (πλάτος 64–88px) με ένα πεδίο διεύθυνσης email από κάτω και μια μεγάλη κάρτα UI προϊόντος (ένα στιγμιότυπο οθόνης πίνακα ελέγχου) στα δεξιά με πλάτος 50%. Οι επόμενες ενότητες χρησιμοποιούν μια κεφαλίδα μίας στήλης με κέντρο (serif, πλάτος 44–64px) με μια υποκεφαλίδα στο Inter, ακολουθούμενη από πλέγματα τριών στηλών καρτών για περιγραφές λειτουργιών/μαρτυρίες/ιστολόγια. Η πλοήγηση είναι μια σταθερή επάνω γραμμή: λογότυπο στα αριστερά, κεντρικό μενού (Εταιρεία, Προϊόντα, Λύσεις, Πελάτες, Τιμολόγηση, Συχνές Ερωτήσεις), σύνδεση με δεξιά ευθυγράμμιση (μη εμφανές) και έναρξη (στοιχείο με λευκό γέμισμα). Το υποσέλιδο διαθέτει ένα πυκνό πλέγμα πέντε στηλών με συνδέσμους με πληροφορίες εταιρείας και νομικές ειδοποιήσεις. Η σελίδα εναλλάσσεται μεταξύ ενοτήτων πλέγματος πλούσιων σε περιεχόμενο και στατιστικών πλήρους οθόνης—ο ρυθμός καθορίζεται από τον γενναιόδωρο λευκό χώρο μεταξύ των στηλών και όχι από την εναλλαγή χρωμάτων φόντου (ολόκληρη η σελίδα παρουσιάζεται ως ένας ενιαίος καμβάς).
Η φωτογραφία είναι εκδοτική και νατουραλιστική: ζεστά πορτρέτα των ιδρυτών και των μελών της ομάδας στα πραγματικά περιβάλλοντα εργασίας τους (γραφεία, σαλόνια, εργοτάξια). Οι εικόνες γεμίζουν τα πλαίσια των καρτών από άκρη σε άκρη, χωρίς επένδυση. Μια σκούρα διαβάθμιση χρησιμοποιείται στο κάτω μέρος των καρτών μαρτυριών για να βελτιώσει την αναγνωσιμότητα του κειμένου. Η αισθητική - "Το LinkedIn συναντά το εκδοτικό περιοδικό" - είναι ανεπίσημη, ανθρώπινη και ελαφρώς απαλή, ποτέ δεν έχει τελειοποιηθεί με φωτογραφίες αρχείου. Οι μικρογραφίες των άρθρων συνδυάζουν φωτογραφίες με εικονογραφημένες έννοιες (ένα άτομο που στέκεται σε έναν λαβύρινθο, ένα τζάκι με σακούλες με χρήματα). Το περιβάλλον χρήστη του προϊόντος εμφανίζεται σε σκοτεινή λειτουργία με πλήρη αδιαφάνεια, τοποθετημένο πάνω από τη σελίδα σε ανεπαίσθητες σκοτεινές επιφάνειες - ένα κεντρικό στοιχείο. Τα εικονίδια είναι μονόχρωμα με γραμμές 1px σε #2e3038 ή #777a88, ποτέ δεν γεμίζουν με το χρώμα της επωνυμίας.
Παλέτα
Ουδέτερος
- Bone
#e2e3e9— Μεγάλο μέγεθος γραμματοσειράς για το κύριο κείμενο, λεπτομερείς ετικέτες δεδομένων και τυπικός τόνος κειμένου στα περισσότερα στοιχεία του περιβάλλοντος εργασίας χρήστη. - Obsidian
#08080a— Ο καμβάς της σελίδας, το φόντο του υποσέλιδου, η πιο σκούρα επιφάνεια είναι σχεδόν μαύρα με μια διακριτική μπλε απόχρωση. - Onyx
#040406— Η επιφάνεια της κάρτας, το πρόσθετο φόντο, είναι ένα βήμα βαθύτερα από τη σελίδα για οπτικό εφέ. - Carbon
#121317— Υπερυψωμένα πάνελ, διακριτικό γέμισμα UI - το πρώτο αισθητά ελαφρύτερο βήμα στην εξέλιξη του Surface Stack - Graphite
#1c1d22— Περιγράμματα, διαχωριστικά, κοντέινερ εικονιδίων, ρυθμιστικά ελέγχου—η πιο ανεπαίσθητη απόχρωση χρώματος που ορίζει τη δομή. - Slate
#2e3038— Επιπλέον περιγράμματα, σιωπηλές γραμμές εικονιδίων, ανεπαίσθητα διαχωριστικά μεταξύ των μπλοκ περιεχομένου.
Τυπογραφία
από 13 έως 88px · 9 βήματα
- Ivy Presto — αντικατάσταση: Playfair Display · περιγράμματα 400, 500 · Μια γραμματοσειρά serif για επικεφαλίδες και υποεπικεφαλίδες—χρησιμοποιείται αποκλειστικά για επικεφαλίδες και τίτλους ενοτήτων μεγέθους 28px και άνω. Οι γραμμές υψηλής αντίθεσης didone με λεπτές γραμματοσειρές serif δημιουργούν μια αίσθηση εκδοτικής πολυτέλειας. Η μικρή θετική απόσταση γραμμάτων 0,01em είναι ασυνήθιστη και δίνει στη γραμματοσειρά μια τυπωμένη, λογιστική εμφάνιση. Αυτή η γραμματοσειρά serif είναι το βασικό σήμα κατατεθέν της μάρκας—διακρίνει το Slash από όλες τις άλλες εταιρείες SaaS fintech που χρησιμοποιούν ως προεπιλογή γεωμετρικές γραμματοσειρές sans-serif.
- Inter — αντικατάσταση: Inter (self-hosted via Google Fonts) · περιγράμματα 300, 400, 500, 600, 700 · UI Sans—κύριο κείμενο, πλοήγηση, κουμπιά, ετικέτες, σύνδεσμοι, πεδία φόρμας και υποεπικεφαλίδες. Το κύριο κείμενο χρησιμοποιεί γραμματοσειρά 300 για διακριτικό δευτερεύον κείμενο. Η γραμματοσειρά 500 χρησιμοποιείται για κείμενο μεσαίας έμφασης και ετικέτες κουμπιών. Η γραμματοσειρά 600 προορίζεται για ετικέτες κατηγοριών γραμμένες με μικρά κεφαλαία. Η αρνητική απόσταση μεταξύ των γραμμάτων μειώνεται από 2 (-3) και μειώνεται καθώς μειώνεται το μέγεθος, κάτι που είναι τυπικό για την οπτική κλιμάκωση της γραμματοσειράς Inter.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | ευρύχωρος |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 9999px |
| Ακτίνα κάρτας | 10px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 160px |
| Πλάτος σελίδας | 1216px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Slash και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Modal — Ένα φωσφορίζον τερματικό σε ένα σκοτεινό δωμάτιο διακομιστή - η μόνη πηγή φωτός είναι ένα φωτεινό πράσινο χρώμα
- AgentQL — Βόρειο Σέλας πάνω από τον τερματικό σταθμό τη νύχτα
- GitHub — Ένας πίνακας εντολών διαστήματος με βιοφωταυγή σημεία ελέγχου—ένας σκοτεινός, ατμοσφαιρικός χώρος εργασίας όπου μια μοναδική πράσινη λάμψη δείχνει τον δρόμο προς τα εμπρός.
- Doppler — Ο μωβ φωτισμός του θησαυροφυλακίου τα μεσάνυχτα. Ο σχεδόν μαύρος καμβάς λάμπει με ένα μόνο σήμα λεβάντας και ένα πράσινο φως επιβεβαίωσης, με κάθε επιφάνεια αρκετά καμπυλωμένη ώστε να πιαστεί.
- Basedash — Ένα τερματικό δεδομένων μεσονυχτίου με ματ γραμματοσειρά. Ένα σκοτεινό παρατηρητήριο όπου οι μετρήσεις λάμπουν μωβ και πράσινο, οι τίτλοι σε σχήμα serif αιωρούνται πάνω από τον θόρυβο και τα λευκά κουμπιά σε σχήμα χαπιού είναι τα μόνα φωτεινά αντικείμενα σε ένα δωμάτιο με απαλές μαύρες επιφάνειες.
- Superwhisper — Το βόρειο σέλας διαλύεται πάνω από το μεσονύχτιο γυαλί
- Better Stack — Κονσόλα Midnight SRE
- Langbase — Κονσόλα Midnight Northern Lights
- Astro — Σύστημα Ελέγχου Αποστολών Βαθύ Διαστήματος με μία μόνο μωβ λάμψη από ένα νεφέλωμα
- Wayfinder — Μια μαύρη οθόνη ταινίας με έναν μόλις ακουστό τίτλο να αιωρείται πάνω από μια ζωντανή εικόνα. Η διεπαφή είναι ένα ρυθμιστικό φωτεινότητας και όχι ένας πίνακας ελέγχου.
- HashiCorp — Το δωμάτιο ελέγχου τα μεσάνυχτα με μωβ νέον είναι μια σκοτεινή τεχνική επιφάνεια όπου ένας λαμπερός εξαγωνικός κύβος χρησιμεύει ως η μόνη χρωματική αναφορά.
- Umbrel — Ένα ζεστό τζάκι στο δωμάτιο των σερβιτόρων τη νύχτα—ένα σκοτεινό δωμάτιο όπου μια μοναδική ροδακινί λάμψη αναδεικνύει τι είναι πραγματικά σημαντικό.