Superlist
Ένας νυχτερινός χώρος εργασίας με κοραλλιογενείς φλόγες—μια ήσυχη επιφάνεια εφαρμογής από μελιτζάνα όπου μια ζεστή πορτοκαλί σπίθα σηματοδοτεί κάθε ενέργεια
Το Superlist χρησιμοποιεί μια γλώσσα παραγωγικότητας σε τόνους μωβ του μεσονυχτίου: βαθύ μελιτζανί, ζεστό κοραλί ως το μοναδικό κύριο χρώμα και μεγάλοι τίτλοι sans-serif που αποτυπώνουν ολόκληρη την ατμόσφαιρα. Η διεπαφή προκαλεί την αίσθηση της εργασίας που επικεντρώνεται αργά το βράδυ - ήσυχη, πολυεπίπεδη και σίγουρη, με το χρώμα να χρησιμοποιείται μόνο ως λειτουργική στίξη σε προσκλήσεις για δράση, ενεργές καταστάσεις και βασικά σημεία. Οι επιφάνειες είναι πολυεπίπεδες σε διακριτικούς σκούρους τόνους με μωβ υποτονική (#181824 → #26253b), αποφεύγοντας το καθαρό μαύρο για να διασφαλιστεί ότι το βάθος είναι ζεστό και όχι άδειο. Τα στοιχεία διαθέτουν γενναιόδωρα στρογγυλεμένα σχήματα (κάρτες 20px, κουμπιά χάπια), απαλές σκιές και "αναπνέουν" μέσα από άνετα κενά 10-16px αντί για σφιχτά πλέγματα. Η φωνή του τίτλου είναι τα πάντα: ένα βάρος 600 σημείων στα 70-88px με μικρή απόσταση γραμμάτων -0,02em αντιμετωπίζει το κείμενο ως τυπογραφικό παρά ως UI - είναι πιο κοντά στο συντακτικό κείμενο παρά στο SaaS.
Οι σκούρες ενότητες εκτείνονται σε ολόκληρο το πλάτος της σελίδας, με κεντραρισμένα κοντέινερ περιεχομένου μέγιστου πλάτους. Η κύρια ενότητα είναι κάθετα κεντραρισμένη και περιέχει έναν τίτλο, ένα δευτερεύον κείμενο και μια παρότρυνση για δράση (CTA), ακολουθούμενη από ένα μεγάλο στιγμιότυπο οθόνης προϊόντος που επικαλύπτει την επόμενη ενότητα. Οι επόμενες ενότητες εναλλάσσονται μεταξύ κεντραρισμένων μπλοκ κειμένου και πλεγμάτων καρτών. Η ενότητα κριτικών χρησιμοποιεί ένα πλέγμα τριών στηλών με κάρτες κριτικών και 16 διαχωριστικά. Η πλοήγηση είναι μια ενιαία επάνω γραμμή με ένα λογότυπο στα αριστερά, κεντραρισμένους συνδέσμους και ενέργειες σύνδεσης στα δεξιά - χωρίς σταθερή πλαϊνή γραμμή ή mega-μενού. Τα διαχωριστικά μεταξύ των ενοτήτων είναι γενναιόδωρα (16 διαχωριστικά), δημιουργώντας έναν ευρύχωρο, συντακτικό ρυθμό αντί για ένα πυκνό πλέγμα προϊόντων.
Ο οπτικός χώρος κυριαρχείται από στιγμιότυπα οθόνης προϊόντων—ένα μεγάλο πλαίσιο με στρογγυλεμένες γωνίες, που παρουσιάζει την πραγματική διεπαφή της εφαρμογής, γεμίζει τα κύρια και δευτερεύοντα τμήματα. Οι φωτογραφίες είναι ελάχιστες, χρησιμοποιούνται μόνο ως avatar χρήστη ή προεπισκοπήσεις πολυμέσων εντός εφαρμογής (για παράδειγμα, η εικόνα της συναυλίας στο δεξί πλαίσιο του μοντέλου προϊόντος). Τα λογότυπα στη γραμμή εμπιστοσύνης είναι επίπεδα, σίγαση λευκού κειμένου. Δεν υπάρχουν διακοσμητικές εικόνες, αφηρημένα γραφικά, τρισδιάστατες απεικονίσεις. Η οπτική στρατηγική είναι να παρουσιαστεί το προϊόν σε κλίμακα, να αφεθεί η τυπογραφία να κάνει τη συναισθηματική δουλειά και να χρησιμοποιηθεί το κοραλί ως το μοναδικό χρώμα έμφασης.
Παλέτα
Μάρκα
- Coral Ember
#ff4a36— Το πορτοκαλί χρησιμοποιείται ως δευτερεύον χρώμα για διακοσμητικές λεπτομέρειες και για να τονίσει σπάνιες ενδείξεις. Δεν πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση.
Ουδέτερος
- Aubergine Canvas
#181824— Το φόντο της σελίδας, ο κύριος καμβάς, είναι μια ζεστή, σκούρα απόχρωση που αντικαθιστά το καθαρό μαύρο, κάνοντας τη διεπαφή χρήστη να φαίνεται πολυεπίπεδη και όχι επίπεδη. - Elevated Plum
#26253b— Επιφάνειες καρτών, πεδία εισαγωγής, κοντέινερ πλοήγησης—ένα βήμα πιο εύκολο από τον καμβά για να δημιουργήσετε βάθος χωρίς ορατό όριο. - Pure White
#ffffff— Κύριες επικεφαλίδες, κείμενο κουμπιών και περιγράμματα εικονιδίων—μέγιστη αντίθεση σε σκούρο καμβά. - Fog Text
#696f81— Το κύριο κείμενο, οι δευτερεύουσες επικεφαλίδες και τα σίγαση περιγραμμάτων—λόγος αντίθεσης 7:1 για άνετη ανάγνωση σε φόντο χρώματος μελιτζανιού. - Ash Text
#8e8da0— Υποστηρίζεται ένα ουδέτερο χρώμα για δευτερεύοντα στοιχεία διεπαφής χρήστη, διαχωριστικά και ετικέτες με σίγαση. Δεν θα πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση. - Mist Highlight
#a3a3a7— Τα διακριτικά περιγράμματα, τα διαχωριστικά και τα ανενεργά στοιχεία πλοήγησης δημιουργούν έναν διακριτικό ουδέτερο τόνο που εξακολουθεί να ξεχωρίζει στον καμβά.
Τυπογραφία
από 12 έως 88px · 9 βήματα
- sans-serif — αντικατάσταση: Inter · περιγράμματα 400 · sans-serif - βρίσκεται στα εξαγόμενα δεδομένα αλλά δεν περιγράφεται από την τεχνητή νοημοσύνη.
- Haffer XH SemiBold — αντικατάσταση: Inter Tight · περιγράμματα 400, 600 · Η κύρια γραμματοσειρά για την εμφάνιση και τις επικεφαλίδες. Χρησιμοποιείται σε μέγεθος 70–88px για τις επικεφαλίδες των ηρώων με απόσταση -0,02em και πάχος 600. Η στενή απόσταση μεταξύ των γραμμάτων και το μεγάλο ύψος των γραμμάτων δίνουν στις επικεφαλίδες ένα συντακτικό βάρος, κάνοντας τη σκούρα διεπαφή να μοιάζει περισσότερο με εξώφυλλο περιοδικού παρά με ταμπλό. Αντικαταστήστε την με Inter Tight ή General Sans με έντονο πάχος.
- Jersey 10 — αντικατάσταση: Anybody · περιγράμματα 400 · Μια μεγάλη, διακοσμητική γραμματοσειρά για αριθμούς και τονισμούς. Χρησιμοποιείται με φειδώ σε πολύ μεγάλα μεγέθη για τη δημιουργία τυπογραφικών τόνων. Μπορεί να αντικατασταθεί με Anybody ή Cabinet Grotesk.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 10-16px |
| Ακτίνα κουμπιού | 100px |
| Ακτίνα κάρτας | 20px |
| Σκιές | απαλές σκιές |
| Μεταξύ τμημάτων | 80px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Superlist και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- DNA — Μεσονύκτιο Παρατηρητήριο όπως φαίνεται μέσα από έναν φακό σωματιδίων
- Abetterlou — Σπίθες σε δέρμα σέλας - μια ζεστή κρεμώδης γραμματοσειρά που λάμπει σε ένα βαθύ καφέ-μαύρο φόντο, με κουμπιά σε κεχριμπαρένιο-χρυσό χρώμα που μοιάζουν με καυτό μέταλλο πιεσμένο στη σελίδα.
- Galileo-ft — Ένα κατάστρωμα εντολών βαθέος διαστήματος με ηλεκτρικά μπλε σήματα
- Decide AI — Αστεροσκοπείο τα μεσάνυχτα - σήμα νομισματοκοπείου
- Redis Agency — Το εκδοτικό εργαστήριο, ανοιχτό και μετά τις ώρες λειτουργίας, είναι ένας πίσσα σκοτεινός χώρος όπου όλη η δουλειά για το branding γίνεται με γραμματοσειρές serif και ένα μόνο κόκκινο ραπανάκι.
- Spellbook — Μια αίθουσα δικαστηρίου τα μεσάνυχτα φωτισμένη με κοραλί μελάνι—μια σκοτεινή επιφάνεια σύνταξης όπου ο μόνος ήχος είναι η ζεστή πορτοκαλί πινελιά με πένα
- Linear — όργανο ακριβείας μεσονυχτίου
- Origin Financial — Μια μεσονύκτια γκαλερί ήσυχης χλιδής. Ένα ήσυχο, σχεδόν σκοτεινό δωμάτιο όπου οι μεγάλες γραμματοσειρές serif και μερικά φωτισμένα χρωματιστά πάνελ δημιουργούν την αίσθηση ότι τα χρηματοοικονομικά είναι ένα προσεκτικά επιμελημένο έργο τέχνης.
- Hyperstudio — Το σχέδιο είναι χαραγμένο σε οψιδιανό. Το κείμενο και οι λεπτές γραμμές πλαισιώνουν έναν λευκό χώρο από καθαρό μαύρο, με περιστασιακά χρυσά σημάδια πυξίδας που υποδεικνύουν τον δρόμο.
- Air — γλυπτό "Μεσόνυχος Ουρανός Μέσα από Γυαλί"
- Raycast — Κέντρο Διοίκησης Μεσονυχτίων, Coral Neon
- dope.security — Μεσονύκτιος τερματικός σταθμός με μωβ φάρους