Vercel
Τερματικό τυπωμένο σε λευκό χαρτί
Το σύστημα σχεδιασμού Vercel είναι μια άσκηση πειθαρχημένης μονόχρωμης γραφής: ένας σχεδόν λευκός καμβάς (#fafafa), μαύρα γράμματα, λεπτά περιγράμματα και πλήρης απουσία διακοσμητικού χρώματος. Η οπτική γλώσσα θυμίζει ένα τερματικό προγραμματιστή που αποδίδεται σε έντυπη μορφή—το Geist Sans είναι μόλις ευανάγνωστο στην «ηρωική» κλίμακα με βάρος 400-450 και απόσταση γραμμάτων -0,06em, ενώ το Geist Mono εφαρμόζει ετικέτες, μεταδεδομένα και δείγματα κώδικα σε κεφαλαία γράμματα 11-13px. Τα κουμπιά είναι ευκρινή ακτίνα 6px ή ορθογώνια καθαρού μαύρου σε λευκό ή άσπρου σε μαύρο. Το σύστημα βασίζεται στην αντίθεση και την τυπογραφική ιεραρχία αντί για το χρώμα, χρησιμοποιώντας το τριγωνικό σύμβολο (▲) και ένα λεκτικό σήμα δύο γραμμών ως τα μόνα στοιχεία επωνυμίας. Οι επιφάνειες στοιβάζονται η μία πάνω στην άλλη με τη σειρά #fafafa → #ebebeb → #171717, δημιουργώντας βάθος μέσω της αλλαγής των τονικών τιμών αντί για σκιά ή χρώμα. Κάθε στοιχείο είναι χτισμένο σε ένα πλέγμα 4px με συμπαγή πυκνότητα, με αποτέλεσμα μια διεπαφή που θυμίζει σημειωματάριο μηχανικού - ακριβής, λειτουργική και χωρίς φόβο λευκού χώρου.
Το κοντέινερ έχει πλάτος 1280px, είναι κεντραρισμένο, με γενναιόδωρη οριζόντια επένδυση (24-48px). Το κύριο μπλοκ χρησιμοποιεί μια ασύμμετρη σύνθεση τριών ζωνών: μια μεγάλη επικεφαλίδα στα αριστερά, ένα σύμβολο μάρκας στο κέντρο και ένα μπλοκ "φρυδιού" στα δεξιά. Κάτω από το κύριο μπλοκ, το περιεχόμενο είναι διατεταγμένο σε εναλλασσόμενες λωρίδες: μια λωρίδα πλήρους πλάτους με το λογότυπο του πελάτη, ακολουθούμενη από μια ενότητα δύο στηλών "Δημιουργοί πρακτόρων" με την επικεφαλίδα στα αριστερά και μια διάταξη προϊόντος στα δεξιά, ακολουθούμενη από ένα πλέγμα τριών καρτών με χαρακτηριστικά. Οι ενότητες χωρίζονται από κάθετες υδρορροές 96-128px χωρίς διαχωριστικά ή μετατοπίσεις φόντου. Η πλοήγηση είναι ένα ενιαίο σταθερό πλαίσιο 64px με θολό φόντο. Τα πλέγματα καρτών χρησιμοποιούν σταθερά μια διάταξη δύο ή τριών στηλών με υδρορροές 16-24px. Η συνολική πυκνότητα είναι συμπαγής - το κείμενο είναι ευανάγνωστο, υπάρχει άφθονος λευκός χώρος, αλλά το μέγεθος της γραμματοσειράς και τα μεγέθη των στοιχείων εμποδίζουν τη σελίδα να φαίνεται ευάερη.
Οι εικόνες είναι αραιές και πάντα λειτουργικές. Το κύριο οπτικό στοιχείο είναι το μαύρο τρίγωνο (▲)—ένα γεωμετρικό σήμα επωνυμίας που εμφανίζεται ως αιωρούμενη σιλουέτα σε κλίμακα "κεφαλαίου". Τα λογότυπα των πελατών στη λωρίδα απόδειξης ιδέας χρησιμοποιούν τα πραγματικά λεκτικά σήματα κάθε επωνυμίας σε κλίμακα του γκρι. Τα μακέτα προϊόντων (διεπαφή συνομιλίας της Notion, έξοδος τερματικού CLI, κάρτα διαβατηρίου) ενσωματώνονται ως στιγμιότυπα οθόνης φωτεινής λειτουργίας μέσα σε πλαισιωμένες κάρτες. Δεν υπάρχουν φωτογραφίες, εικονογραφήσεις ή τρισδιάστατα στοιχεία—το σύστημα είναι καθαρή τυπογραφία και γεωμετρικά σχήματα σε λευκό χαρτί.
Παλέτα
Ουδέτερος
- Obsidian
#171717— Οι κύριες επικεφαλίδες, τα περιγράμματα πλοήγησης, το σκούρο γέμισμα κουμπιών και οι δείκτες λίστας είναι σχεδόν μαύρα, αποφεύγοντας την τραχύτητα και τον κραυγαλέο κορεσμό. - Paper White
#fafafa— Ο καμβάς της σελίδας, οι επιφάνειες των καρτών, τα φωτεινά γεμίσματα των κουμπιών—αυτό είναι το τυπικό φόντο στο οποίο βρίσκονται όλα τα άλλα. - Pure White
#ffffff— Υπερυψωμένες επιφάνειες καρτών, ένθετα, πεδία εισαγωγής. - Hairline
#ebebeb— Τα περιγράμματα 1px σε κουμπιά, συνδέσμους και κάρτες είναι ορατά σε υψηλά επίπεδα ζουμ, αλλά αόρατα σε χαμηλά επίπεδα ζουμ. - Ash
#c9c9c9— Απενεργοποιημένο κείμενο, ετικέτες σε σίγαση, υδατογραφήματα επωνυμίας σε λογότυπα πελατών. - Smoke
#a8a8a8— Δευτερεύον κείμενο, κείμενο κράτησης θέσης, διακριτικό γέμισμα εικονιδίων.
Τυπογραφία
από 11 έως 64px · 6 βήματα
- Geist Sans — αντικατάσταση: Inter · περιγράμματα 400, 450, 500 · Η κύρια γραμματοσειρά για τη διεπαφή και τις επικεφαλίδες είναι μια ειδικά σχεδιασμένη γεωμετρική sans-serif από την Vercel με μικρή απόσταση μεταξύ των γραμμάτων σε μεγάλα μεγέθη (-0,06em στα 56-64px, -0,05em στα 30px). Για τις επικεφαλίδες στο επάνω μέρος της σελίδας, επιλέχθηκε πάχος 450: παχύτερο από το Light αλλά ελαφρύτερο από το Semi-Bold, δημιουργώντας έναν σίγουρο, αλλά όχι υπερβολικό, τόνο.
- Geist Mono — αντικατάσταση: JetBrains Mono · περιγράμματα 400, 500, 600 · Μια δευτερεύουσα γραμματοσειρά μονόχωρης γραφής για λεζάντες, μπλοκ κώδικα, πίνακες εξόδου CLI, μεταδεδομένα και κεφαλαίο κείμενο. Ο συνδυασμός 8px/600px/κεφαλαίων γραμμάτων επιτρέπει την ακριβή τοποθέτηση μικροσκοπικών λέξεων. Η μεγάλη απόσταση μεταξύ των γραμμάτων (0,071em) στην έκδοση μονόχωρης γραφής παρέχει άφθονο χώρο για κεφαλαίο κείμενο.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | πυκνός |
| Βασικό βήμα | 12px |
| Ακτίνα κουμπιού | 6px |
| Ακτίνα κάρτας | 6px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 96-128px |
| Πλάτος σελίδας | 1280px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Vercel και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Headspace — Μια ηλιόλουστη γωνιά ευεξίας σε ζεστό χαρτί
- WHOOP — Εργαστήριο παραστάσεων τα μεσάνυχτα - λευκά τραπέζια κλινικού εργαστηρίου κάτω από ένα μαύρο θεατρικό κενό, ένας μοναδικός μωβ παλμός ηλεκτρισμού
- Together AI — Κονσόλα έρευνας σε παγετώδες χαρτί
- v0 by Vercel — Σχέδιο τόρνου. Η ακρίβεια και η λειτουργικότητα είναι υψίστης σημασίας, με κάθε στοιχείο να εξυπηρετεί έναν σαφή σκοπό σε μια καθαρή, τεχνικά άψογη επιφάνεια.
- Dovetail — Ένα σχέδιο κάτω από ένα μαύρο φεγγάρι—μόλις ορατές γραμμές γραφήματος, λευκή γραμματοσειρά, μια μωβ λάμψη
- Glideapps — μονόχρωμο τραπέζι σχεδίασης με μία ηλεκτρική τιρκουάζ λάμψη
- Timescale — Μηχανικό σχέδιο σε ζεστό χαρτί γραφικών παραστάσεων
- UGLYCASH — Ένα σημειωματάριο καλυμμένο με αυτοκόλλητα σε κρεμ χαρτί αποπνέει την ατμόσφαιρα ενός τολμηρού, μαξιμαλιστικού fintech που επιδεικνύει με υπερηφάνεια το χάος του.
- Sprout Social — Ένα πράσινο βλαστάρι σε μαύρο σχιστόλιθο. Μια φωτεινή πινελιά σε έναν αυστηρό μονόχρωμο καμβά, το χρώμα του οποίου χρησιμοποιείται μόνο για δράση, με μια σίγουρη γεωμετρική γραμματοσειρά που χρησιμεύει ως πινακίδα.
- Krea — γκαλερί νουάρ τα μεσάνυχτα
- Evergreen — Ηλιακό θερμοκήπιο σε λινό χαρτί
- Factory — Το τερματικό του «αίθουσας πολέμου» τα μεσάνυχτα. Το «εργοστάσιο» είναι ένας κατάμαυρος πίνακας ελέγχου όπου μια μόνο λευκή κάρτα προσγειώνεται σαν αποστολή φωτισμένη με φακό — το μόνο αντικείμενο στο δωμάτιο είναι η ίδια η εργασία.