Authkit
Καθεδρικός Ναός από Γυαλί με Παγωμένο Γυαλί τα Μεσάνυχτα
Το AuthKit δημιουργεί μια αισθητική παρουσίασης προϊόντων κατά τη διάρκεια της νύχτας: έναν σχεδόν μαύρο καμβά με επιφάνειες από αδιαφανές γυαλί, ένα πλέγμα με μόλις ορατές γραμμές και λαμπερό κείμενο που εμφανίζεται φωτισμένο από ένα στρώμα γυαλιού. Η γραμματοσειρά είναι σχεδόν εξ ολοκλήρου λευκή σε σκούρο φόντο, με μια μόνο φωτεινή μωβ πινελιά ως το μόνο λειτουργικό στοιχείο - κάθε διαδραστική επιφάνεια έχει μια απαλή, λεπτή γραμμή ψυχρού μπλε-λευκού αντί για ένα άκαμπτο πλαίσιο. Τα στοιχεία είναι διατεταγμένα σε ημιδιαφανή στρώματα, τοποθετημένα πάνω σε μια ατμοσφαιρική λάμψη, και οι κάρτες εμφανίζονται ως γυάλινες πλάκες που φωτίζονται από κάτω, αντί για χάρτινα πάνελ. Το διάστιχο είναι μεγάλο και ρυθμικό. Το κύριο στοιχείο είναι ένα μόνο φωτιζόμενο λογότυπο που εκτείνεται σε όλο το πλάτος της σελίδας, περιτριγυρισμένο από αιωρούμενες γυάλινες κάρτες, αντί για μια παραδοσιακή διάταξη split-screen.
Ένας σκούρος καμβάς πλήρους πλάτους με ένα κοντέινερ περιεχομένου στο κέντρο, μέγιστο πλάτος 1200px. Το κύριο στοιχείο είναι ένα ενιαίο, κεντραρισμένο, φωτισμένο λογότυπο ("AuthKit" σε γραμματοσειρά με διαβάθμιση) κάτω από ένα μικρό κείμενο σε σχήμα φρυδιού, πίσω από το οποίο/κάτω από το οποίο τρεις αιωρούμενες γυάλινες κάρτες με μια φόρμα σύνδεσης που εκτείνεται σε φεγγίτη (αριστερή κάρτα με κλίση προς τα αριστερά, μεγιστοποιημένη κεντρική κάρτα, δεξιά κάρτα με κλίση προς τα δεξιά). Μια εναλλαγή ανοιχτόχρωμου/σκούρου θέματος βρίσκεται στο κέντρο κάτω από το κύριο στοιχείο. Η σειρά χαρακτηριστικών είναι μια οριζόντια γραμμή χρόνου 6 εικονιδίων με λεπτές γραμμές σύνδεσης μεταξύ των κυκλικών εικονιδίων. Ρυθμός ενότητας: κάθε ενότητα ξεκινά με ένα κεντραρισμένο κείμενο σε σχήμα φρυδιού πλαισιωμένο από ξεθωριασμένες οριζόντιες γραμμές, ακολουθούμενο από έναν μεγάλο, κεντραρισμένο τίτλο (44-48px), ακολουθούμενο από μία γραμμή σιωπηλού κειμένου σώματος (16-18px), μέγιστο πλάτος ~640px. Η ενότητα Προσαρμογή εμφανίζει μια μακέτα ενός παραθύρου προγράμματος περιήγησης με μια κεντρικά τοποθετημένη κάρτα σύνδεσης που περιβάλλεται από αιωρούμενα πάνελ επιθεώρησης UI (παλέτες χρωμάτων, ρυθμιστικά ακτίνας, επιλογέας εικονιδίου λογότυπου, πεδίο κειμένου κουμπιού, πεδίο φόντου σελίδας) τοποθετημένα στις γωνίες του καμβά, σαν χώρος εργασίας εργαλείων σχεδίασης.
Ο οπτικός σχεδιασμός κυριαρχείται από μακέτες φόρμας σύνδεσης, κατασκευασμένες σε στυλ "γυάλινης μορφολογίας" (πεδία εισαγωγής email/κωδικού πρόσβασης, κουμπιά σύνδεσης σε μέσα κοινωνικής δικτύωσης, εισαγωγή κωδικού χωρίς κωδικό πρόσβασης), που παρουσιάζονται ως αιωρούμενες, ημιδιαφανείς κάρτες σε έναν καμβά μεσονυχτίου. Τα εικονίδια χαρακτηριστικών είναι μονόχρωμα γραμμικά σύμβολα σε #d1e4fa μέσα σε στρογγυλά, ματ πλακίδια. Ένα διακριτικό πλέγμα (γραμμές 1px σε rgba(186,215,247,0.06)) καλύπτει ολόκληρη τη σελίδα, δημιουργώντας ατμόσφαιρα, ενώ ένας κωνικός προβολέας με διαβάθμιση αστράφτει στην κορυφή του κύριου στοιχείου. Δεν υπάρχουν φωτογραφίες, δεν υπάρχουν εικόνες lifestyle, δεν υπάρχουν στιγμιότυπα οθόνης προϊόντων - το ίδιο το προϊόν είναι το οπτικό στοιχείο: πεδία σύνδεσης διατεταγμένα σαν γυάλινα πρωτότυπα σε ένα σκοτεινό στούντιο.
Παλέτα
Μάρκα
- Void Violet
#663af3— Το κύριο χρώμα για το κουμπί παρότρυνσης για δράση (CTA) είναι το μόνο χρώμα έμφασης που χρησιμοποιείται αποκλειστικά για το κουμπί "Συνέχεια/Υποβολή" στις φόρμες σύνδεσης. Το έντονο μωβ σε αντίθεση με το σχεδόν μαύρο φόντο δημιουργεί μια αίσθηση επείγοντος χωρίς να διαταράσσει το μονοχρωματικό χρωματικό συνδυασμό.
Ουδέτερος
- Midnight Canvas
#05060f— Το φόντο της σελίδας, η βαθύτερη επιφάνεια της κάρτας, το γέμισμα του σήματος—μια σχεδόν μαύρη βάση πάνω στην οποία επιπλέουν όλα τα άλλα. - Steel Plate
#2f343e— Υπερυψωμένη επιφάνεια, κουμπιά φανταστικής/δευτερεύουσας δράσης, διακριτικό πίσω μέρος του πάνελ. - Fog Veil
#9da7ba— Το κύριο κείμενο, το κείμενο στην κάρτα, είναι ευανάγνωστο, αλλά υποβαθμισμένο στο παρασκήνιο σε σύγκριση με τις επικεφαλίδες. - Moon Mist
#c7d3ea— Κύριο κείμενο, πρόσθετες ετικέτες, βοηθητικό κείμενο σε σίγαση - Frost Glow
#d1e4fa— Το κύριο χρώμα γεμίσματος για το κείμενο του σώματος και του συνδέσμου, το κείμενο του εικονιδίου και το γέμισμα εικονιδίου είναι το προεπιλεγμένο λαμπερό προσκήνιο. - Ice Highlight
#d8ecf8— Ανοιχτόχρωμο κείμενο σε σκούρες επιφάνειες, ανεστραμμένες ετικέτες και επικεφαλίδες υψηλής αντίθεσης. Μην το χρησιμοποιείτε ως κύριο χρώμα για παροτρύνσεις για δράση. Στο λογότυπο AuthKit και στους βασικούς τίτλους χρησιμοποιείται μια διαβάθμιση επικεφαλίδας—μια ομαλή μετάβαση από ανοιχτό μπλε σε απαλό μπλε από πάνω προς τα κάτω.
Τυπογραφία
από 12 έως 48px · 8 βήματα
- Untitled Sans — αντικατάσταση: Inter · περιγράμματα 400, 500, 600, 700 · Κύριο κείμενο, διεπαφή χρήστη, κουμπιά, πεδία εισαγωγής, εικονίδια, μικρές επικεφαλίδες - μια καθολική γραμματοσειρά για όλα τα λειτουργικά στοιχεία.
- aeonikPro — αντικατάσταση: Space Grotesk · περιγράμματα 400, 500 · Εμφανίζοντας μόνο επικεφαλίδες — την επωνυμία AuthKit, τις επικεφαλίδες ενοτήτων και το κυρίως κείμενο — ένα βάρος γραμματοσειράς 500 σημείων στα 44-48px δίνει στην επωνυμία μια ευρεία, διακριτική εμφάνιση αντί για μια φανταχτερή προφορά.
- dotDigital — αντικατάσταση: JetBrains Mono · περιγράμματα 400 · Κείμενο με κεφαλαία γράμματα ("Εισαγωγή", "Επεκτάσιμη σχεδίαση", "Λάμψη φωτεινού") - το κείμενο με κεφαλαία γράμματα μονόχωρα με απόσταση 0,10 em χρησιμεύει ως διακριτικός διαχωριστής μεταξύ του κυρίως κειμένου και της επικεφαλίδας.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | ευρύχωρος |
| Βασικό βήμα | 16px |
| Ακτίνα κουμπιού | 999px |
| Ακτίνα κάρτας | 16px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 120px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Authkit και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Resend — μαύρο βελούδο με μωβ νέον χρώμα
- Gsap — Ένας κινούμενος λευκός πίνακας σε ένα στούντιο σχεδιασμού. Ένας σχεδόν μαύρος τοίχος, ζεστή κρεμ κιμωλία και πέντε χρωματιστοί μαρκαδόροι—ένας για κάθε κλάδο κινουμένων σχεδίων.
- Slash — Μεσονύχτιο θησαυροφυλάκιο με επιχρυσωμένα καθολικά βιβλία
- Raycast — Κέντρο Διοίκησης Μεσονυχτίων, Coral Neon
- Dimension — ένας σταθμός εργασίας φωτισμένος από το σούρουπο με αδιαφανή γυάλινα πάνελ
- Modal — Ένα φωσφορίζον τερματικό σε ένα σκοτεινό δωμάτιο διακομιστή - η μόνη πηγή φωτός είναι ένα φωτεινό πράσινο χρώμα
- Reflect Notes — Ο χώρος Starry Violet είναι ένα σκοτεινό παρατηρητήριο όπου οι νότες αιωρούνται σαν αστερισμοί με φόντο ένα σχεδόν μαύρο λουλακί κενό.
- LaunchDarkly — Το δωμάτιο ελέγχου με νέον είναι ένα σκοτεινό πιλοτήριο όπου μοβ σήματα πάλλονται μέσα από κατάμαυρα πάνελ.
- Ameba — Το δωμάτιο ελέγχου τα μεσάνυχτα – ένας ηλεκτρικός μπλε παλμός μέσα σε αδιαφανή γυάλινα πάνελ
- AgentQL — Βόρειο Σέλας πάνω από τον τερματικό σταθμό τη νύχτα
- Neon — Ένα δωμάτιο διακομιστή μετά το σκοτάδι. Απόλυτο σκοτάδι, όπου το μόνο φως προέρχεται από δεδομένα και αλληλεπιδράσεις χρηστών.
- N8n — Μηχανή ροής εργασίας τα μεσάνυχτα – η αίσθηση ενός καμβά αυτοματισμού σε πραγματικό χρόνο σε ένα σκοτεινό δωμάτιο διακομιστή, φωτισμένο από δείκτες κατάστασης και ροές δεδομένων