Modal
Ένα φωσφορίζον τερματικό σε ένα σκοτεινό δωμάτιο διακομιστή - η μόνη πηγή φωτός είναι ένα φωτεινό πράσινο χρώμα
Το Modal λειτουργεί σαν ένα φωσφορίζον τερματικό σε ένα σκοτεινό δωμάτιο διακομιστή: ένας σχεδόν μαύρος καμβάς, ανοιχτό πράσινο γράμματα και μια ενιαία φωτεινή λάιμ-πράσινη πινελιά που λειτουργεί ως ένδειξη κατάστασης LED. Η γλώσσα σχεδιασμού είναι επικεντρωμένη στον προγραμματιστή - παράθυρα κώδικα με μονοδιάστατο χώρο με κουκκίδες φαναριού, ισομετρικά τρισδιάστατα εικονίδια στο χαρακτηριστικό πράσινο χρώμα και άφθονος λευκός χώρος, επιτρέποντας σε ένα στοιχείο σε κάθε ενότητα να λάμπει. Η τυπογραφία χωρίζεται σε μια προσαρμοσμένη γραμματοσειρά (Goga) για τις επικεφαλίδες και μια μεταβλητή γραμματοσειρά (Inter) για όλα τα στοιχεία του UI, και τα δύο με στενή αρνητική παρακολούθηση. Τα χρώματα κατανέμονται ομοιόμορφα: οι περισσότερες οθόνες είναι αχρωματικές και το φωτεινό λάιμ-πράσινο χρώμα εμφανίζεται μόνο σε βασικές ενέργειες, στο λογότυπο, σε τρισδιάστατες εικόνες και σε στιγμές έμφασης. Τα στοιχεία είναι επίπεδα και χωρίς πλαίσιο, με βάθος που δημιουργείται μέσω ανεπαίσθητων πράσινων περιγραμμάτων και θολώματος φόντου αντί για σκιές.
Το modal χρησιμοποιεί μια σκούρα διάταξη πλήρους πλάτους με μέγιστο πλάτος 1280px για να φιλοξενήσει το περιεχόμενο. Το παράθυρο του ήρωα είναι κεντραρισμένο: ο τίτλος (η πρώτη πρόταση σε πράσινο lime), μια υποεπικεφαλίδα, δύο προσκλήσεις για δράση και ένα μόνο τρισδιάστατο αντικείμενο ως οπτική άγκυρα—χωρίς να διαχωρίζεται η διάταξη από την πλαϊνή μπάρα. Οι ενότητες περιεχομένου ακολουθούν έναν ομοιόμορφο ρυθμό: ετικέτα φρυδιών (κεφαλαία γράμματα, Moss 70) → τίτλος Goga → κείμενο με σίγαση σώματος, έπειτα είτε μια διάταξη δύο στηλών με περιγραφή χαρακτηριστικού (κείμενο + κωδικός/οπτική κάρτα) είτε ένα πλέγμα τριών στηλών από κάρτες. Τα κενά μεταξύ των ενοτήτων είναι γενναιόδωρα—80px. Η σελίδα εναλλάσσεται μεταξύ βαθιών κενών (#000000) και ελαφρώς πιο ανοιχτόχρωμων λωρίδων φόντου (#181818), με ένα ανοιχτόχρωμο τμήμα (#def0dd) να εμφανίζεται στη μέση της σελίδας ως οπτική ανάπαυλα. Η πλοήγηση αποτελείται από μια ενιαία, σταθερή επάνω μπάρα με θολό φόντο—χωρίς πλαϊνή μπάρα ή mega-μενού. Το υποσέλιδο είναι συμπαγές και σκούρο, με σίγαση πράσινων στήλων συνδέσμων. Η πυκνότητα του κειμένου είναι άνετη: σε κάθε ενότητα παρέχεται άφθονος χώρος και τα πλέγματα καρτών δεν χρησιμοποιούν περισσότερες από τρεις στήλες.
Η οπτική γλώσσα της Modal χωρίζεται σε δύο λειτουργίες: τρισδιάστατες απεικονίσεις προϊόντων με λάμψη και μακέτες παραθύρων με σκοτεινό κώδικα. Το κεντρικό σημείο είναι ένας ενιαίος τρισδιάστατος κύβος που αποδίδεται χρησιμοποιώντας μια διαβάθμιση μάρκετινγκ (από λαχανί σε σμαραγδί), τοποθετημένος μέσα σε ένα ακτινωτό φωτοστέφανο που λούζει τον κενό χώρο με πράσινο φως - το χαρακτηριστικό οπτικό στυλ της μάρκας. Οι κάρτες φόρτου εργασίας περιέχουν ισομετρικά τρισδιάστατα εικονίδια (ένας κύβος wireframe, μια συμπαγής σκάλα, επίπεδα) που αποδίδονται στο ίδιο λαχανί σε σκούρο φόντο. Τα αποτελέσματα κώδικα και benchmark παρουσιάζονται ως κάρτες παραθύρων τερματικού με κουκκίδες φαναριού, μονοδιάστατη επισήμανση σύνταξης σε μια φωσφορίζουσα παλέτα και ένα απαλό πράσινο περίγραμμα - μοιάζουν με στιγμιότυπα οθόνης μιας πραγματικής διεπαφής γραμμής εντολών. Τα λογότυπα των πελατών εμφανίζονται ως αποκορεσμένες ετικέτες πράσινου-γκρι σε μία μόνο σειρά χαμηλής αντίθεσης, σηματοδοτώντας εμπιστοσύνη χωρίς οπτικό ανταγωνισμό. Η συνολική πυκνότητα είναι χαμηλή - οι περισσότερες σελίδες περιέχουν κυρίως κείμενο και οι εικόνες παρουσιάζονται ως μεμονωμένα σημεία εστίασης αντί για πλέγματα φωτογραφιών. Δεν υπάρχουν φωτογραφίες. ολόκληρο το οπτικό σύστημα αποδίδεται, είναι γεωμετρικό και ακτινοβόλο.
Παλέτα
Μάρκα
- Lime Pulse
#7fee64— Τα κύρια στοιχεία της εταιρικής ταυτότητας είναι το λογότυπο, η κύρια πρόσκληση για δράση (CTA), η συμπλήρωση ετικετών, οι ενεργές καταστάσεις και το βασικό χρώμα της εικόνας.
Ουδέτερος
- Phosphor White
#ddffdc— Το κύριο κείμενο, το χρώμα τίτλου, το περίγραμμα του εικονιδίου και το κείμενο με το γεμάτο κουμπί αποτελούν την κύρια αναγνώσιμη επιφάνεια. - Void Black
#000000— Καμβάς σελίδας, το βαθύτερο στρώμα φόντου - Ground Iron
#181818— Γέμισμα κύριου κουμπιού, επιφάνειες κάρτας σε σκοτεινές περιοχές, βασική επιφάνεια της διεπαφής χρήστη. - Carbon Veil
#212525— Υπερυψωμένες επιφάνειες, φόντο πλοήγησης, ελαφρώς πιο ανοιχτόχρωμο από το έδαφος. - Circuit Border
#485346— Το πλαίσιο δράσης περιγράμματος/φάντασμα, η κύρια διαδραστική λεπτή γραμμή, έχει μια απαλή πρασινωπό-γκρι απόχρωση. - Phosphor Blue-Black
#1f2a33— Δευτερεύουσες λεπτές γραμμές σήμανσης, που χωρίζουν τις πινελιές μεταξύ των σκούρων λωρίδων.
Τυπογραφία
από 12 έως 64px · 8 βήματα
- Goga — αντικατάσταση: Inter Tight or Space Grotesk · περιγράμματα 400, 500 · Γραμματοσειρά Επικεφαλίδας και Υποεπικεφαλίδας – Χρησιμοποιείται για όλες τις επικεφαλίδες και τις κάρτες H1–H4. Η Goga είναι μια προσαρμοσμένη γεωμετρική γραμματοσειρά sans-serif με στενά ανοίγματα και ελαφρώς τετράγωνα τερματικά. Το μεσαίο βάρος (500) προορίζεται για την επισήμανση επικεφαλίδων σε επίπεδο κάρτας. Το κανονικό βάρος (400) χρησιμοποιείται για επικεφαλίδες ηρώων και ενοτήτων. Για να αποκτήσετε πρόσβαση στα εναλλακτικά σχήματα γλυφής που καθορίζουν την ταυτότητα του Modal, πρέπει να ενεργοποιηθεί το στυλιστικό σύνολο 'ss01'. Η αρνητική απόσταση μεταξύ των γραμμάτων μειώνεται σταδιακά από -0,007em στα 48px σε -0,017em στα 21px.
- Inter Variable — αντικατάσταση: Inter · περιγράμματα 400, 500 · Διεπαφή χρήστη και κείμενο σώματος – πλοήγηση, κουμπιά, κείμενο σώματος, ετικέτες, υποσέλιδο. Το μεσαίο βάρος (500) χρησιμοποιείται από προεπιλογή για διαδραστικά στοιχεία και πλοήγηση. Το κανονικό βάρος (400) χρησιμοποιείται για παραγράφους. Η απόσταση μεταξύ των γραμμάτων μειώνεται αισθητά ακόμη και σε μικρά μεγέθη (-0,026em στα 14px, -0,022em στα 16px), δίνοντας στη διεπαφή μια συμπυκνωμένη, τερματική πυκνότητα. Για εναλλακτική στίξη, θα πρέπει να συμπεριληφθεί η παραλλαγή χαρακτήρων 'cv11'. Οι ετικέτες με κεφαλαία γράμματα στα 12px χρησιμοποιούν απόσταση μεταξύ των γραμμάτων +0,05em για να αντισταθμίσουν την πυκνότητα του κειμένου σώματος.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 20px |
| Ακτίνα κουμπιού | 12px |
| Ακτίνα κάρτας | 8px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 80px |
| Πλάτος σελίδας | 1280px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Modal και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Slash — Μεσονύχτιο θησαυροφυλάκιο με επιχρυσωμένα καθολικά βιβλία
- AgentQL — Βόρειο Σέλας πάνω από τον τερματικό σταθμό τη νύχτα
- GitHub — Ένας πίνακας εντολών διαστήματος με βιοφωταυγή σημεία ελέγχου—ένας σκοτεινός, ατμοσφαιρικός χώρος εργασίας όπου μια μοναδική πράσινη λάμψη δείχνει τον δρόμο προς τα εμπρός.
- Doppler — Ο μωβ φωτισμός του θησαυροφυλακίου τα μεσάνυχτα. Ο σχεδόν μαύρος καμβάς λάμπει με ένα μόνο σήμα λεβάντας και ένα πράσινο φως επιβεβαίωσης, με κάθε επιφάνεια αρκετά καμπυλωμένη ώστε να πιαστεί.
- Basedash — Ένα τερματικό δεδομένων μεσονυχτίου με ματ γραμματοσειρά. Ένα σκοτεινό παρατηρητήριο όπου οι μετρήσεις λάμπουν μωβ και πράσινο, οι τίτλοι σε σχήμα serif αιωρούνται πάνω από τον θόρυβο και τα λευκά κουμπιά σε σχήμα χαπιού είναι τα μόνα φωτεινά αντικείμενα σε ένα δωμάτιο με απαλές μαύρες επιφάνειες.
- Superwhisper — Το βόρειο σέλας διαλύεται πάνω από το μεσονύχτιο γυαλί
- Better Stack — Κονσόλα Midnight SRE
- Langbase — Κονσόλα Midnight Northern Lights
- Astro — Σύστημα Ελέγχου Αποστολών Βαθύ Διαστήματος με μία μόνο μωβ λάμψη από ένα νεφέλωμα
- Wayfinder — Μια μαύρη οθόνη ταινίας με έναν μόλις ακουστό τίτλο να αιωρείται πάνω από μια ζωντανή εικόνα. Η διεπαφή είναι ένα ρυθμιστικό φωτεινότητας και όχι ένας πίνακας ελέγχου.
- HashiCorp — Το δωμάτιο ελέγχου τα μεσάνυχτα με μωβ νέον είναι μια σκοτεινή τεχνική επιφάνεια όπου ένας λαμπερός εξαγωνικός κύβος χρησιμεύει ως η μόνη χρωματική αναφορά.
- Umbrel — Ένα ζεστό τζάκι στο δωμάτιο των σερβιτόρων τη νύχτα—ένα σκοτεινό δωμάτιο όπου μια μοναδική ροδακινί λάμψη αναδεικνύει τι είναι πραγματικά σημαντικό.