Column
ένα σκούρο μπλε βιβλίο καταγραφής κάτω από την δροσερή αυγή
Το Column χρησιμοποιεί ένα βαθύ, θεσμικό μπλε σκούρο σε σχεδόν λευκό φόντο: η σελίδα δίνει την αίσθηση μιας ισχυρής επιφάνειας τραπεζικού προϊόντος πρώτα και μιας παιδικής χαράς για προγραμματιστές στη συνέχεια. Το χρώμα της επωνυμίας δεν είναι ένα μόνο, αλλά ένα συνδυασμένο ζευγάρι - μπλε σκούρο #111a4a για σοβαρή δομή, πράσινο μέντας #44b48b για δεδομένα και κώδικα - με ένα μόνο ζεστό πορτοκαλί (#ec652b) που προορίζεται για επιφάνειες υψηλής έντασης όπως η κάρτα Brex. Η τυπογραφία κυριαρχείται από το SuisseIntl, ένα γεωμετρικό sans serif που χρησιμοποιείται σε ολόκληρο το εύρος βάρους από 300 (σύνδεσμοι) έως 600 (εμφάνιση), δίνοντας στο σύστημα ένα εκλεπτυσμένο, συντακτικό στυλ που δεν υπάρχει στις περισσότερες εταιρείες fintech. Οι κάρτες επιπλέουν σε μεγάλες λευκές επιφάνειες με διακριτικές, πολυεπίπεδες σκιές. Τα περισσότερα στοιχεία διεπαφής είναι επίπεδα, με το βάθος να εμφανίζεται μόνο εκεί που η κάρτα θα έπρεπε να δίνει την αίσθηση ενός φυσικού αντικειμένου (widgets συναλλαγών, mockups προϊόντων). Ο κώδικας και τα οικονομικά δεδομένα παρουσιάζονται σε μονόχρωμο, χρώμα θαλασσί - ένα οπτικό σήμα ότι πρόκειται για μια τράπεζα που κατασκευάστηκε από μηχανικούς για μηχανικούς.
Η δομή της σελίδας είναι πλήρους πλάτους, στο κέντρο με μεγάλα πλευρικά περιθώρια (64–15 cm σε υπολογιστή). Η κύρια οθόνη έχει διαιρεμένη διάταξη: ο τίτλος και οι παροτρύνσεις για δράση είναι ευθυγραμμισμένες αριστερά στα 25 cm, ενώ ένα αιωρούμενο γραφικό στοιχείο συναλλαγών βρίσκεται στα δεξιά στα 55 cm σε φόντο χάρτη ημίτονου. Κάτω από την κύρια οθόνη, οι ενότητες εναλλάσσονται μεταξύ λευκού (4 cm) και ανοιχτόχρωμου καμβά (5 cm) με κάθετες υδρορροές 6 cm. Το περιεχόμενο είναι διατεταγμένο σύμφωνα με ένα μόνο πλέγμα 6 στηλών: τα μπλοκ κειμένου καταλαμβάνουν 4 στήλες (7 cm), οι κάρτες εικόνας/προϊόντος καταλαμβάνουν 5–6 στήλες, με σκόπιμη μετατόπιση από το πλέγμα. Οι ενότητες που περιγράφουν χαρακτηριστικά χρησιμοποιούν διάταξη 2 στηλών: κείμενο στα αριστερά, προϊόν στα δεξιά. Η ενότητα στατιστικών στοιχείων εμπιστοσύνης χωρίζεται σε ένα πλέγμα 4 στηλών σε όλο το πλάτος της σελίδας. Τα λογότυπα πελατών βρίσκονται σε μία μόνο κεντραρισμένη σειρά με υδρορροές 48px. Το υποσέλιδο έχει μια συμπαγή διάταξη δύο στηλών. Η πλοήγηση είναι μια σταθερή, διαφανής μπάρα ύψους 62px στην κορυφή της κύριας οθόνης με θολό φόντο που ξεθωριάζει και γίνεται λευκό καθώς κάνετε κύλιση. Δεν υπάρχει πλαϊνή μπάρα ή mega-μενού—τα αναπτυσσόμενα μενού είναι απλά μενού σε στυλ βέλους.
Το οπτικό στυλ είναι μινιμαλιστικό και λειτουργικό—η στήλη αποφεύγει εντελώς τις φωτογραφίες αρχείου. Η οπτική γλώσσα βασίζεται σε τρεις πηγές: (1) εικονογραφήσεις δεδομένων SVG, συγκεκριμένα έναν διακεκομμένο παγκόσμιο χάρτη ημιτονίων, που αποδίδεται με διαβάθμιση από ινδικό σε πορτοκαλί και τυρκουάζ, δημιουργώντας μια ατμόσφαιρα παγκόσμιας κλίμακας πίσω από το κύριο στοιχείο· (2) διατάξεις καρτών προϊόντων—αιωρούμενα γραφικά στοιχεία που εμφανίζουν υπόλοιπα λογαριασμών, λεπτομέρειες μεταφοράς και αποσπάσματα κώδικα JSON σε λευκές κάρτες με εντυπωσιακές σκιές· (3) απεικονίσεις γραφημάτων—τυρκουάζ κηροπήγια ή ραβδογράμματα με λεπτές γραμμές σύνδεσης που χρησιμοποιούνται στην ενότητα εμπιστοσύνης/στατιστικών. Ο χάρτης ημιτονίων είναι ένα χαρακτηριστικό οπτικό στοιχείο—η διαβάθμισή του μεταβαίνει από #d65620 (πορτοκαλί) σε βιολετί, μπλε, γαλάζιο, τυρκουάζ και κίτρινο, δημιουργώντας ένα φάσμα που ενώνει ολόκληρη την παλέτα της επωνυμίας σε μια ενιαία διακοσμητική επιφάνεια. Τα εικονίδια έχουν ομοιόμορφο πάχος περιγράμματος 1,5–2px στις παραλλαγές #232730 ή #a9acb6, με γέμισμα για ενεργές καταστάσεις. Χωρίς φωτογραφίες τρόπου ζωής, χωρίς αφηρημένες τρισδιάστατες απεικονίσεις—ο περιορισμός γίνεται σκόπιμα για να εστιάσει την προσοχή στο προϊόν και τα δεδομένα.
Παλέτα
Μάρκα
- Indigo Navy
#111a4a— Το κύριο χρώμα της επωνυμίας χρησιμοποιείται για γεμάτες παροτρύνσεις για δράση, ενεργές καταστάσεις πλοήγησης, την κεφαλίδα και το λογότυπο. Το βαθύ βιολετί-μπλε χρώμα δίνει στον ιστότοπο μια συμπαγή αλλά πλούσια μαύρη απόχρωση. Σε συνδυασμό με λευκό κείμενο, δημιουργεί το πιο δυναμικό κουμπί στον ιστότοπο. - Seafoam 600
#44b48b— Το χρώμα κώδικα και δεδομένων είναι το χρώμα επωνυμίας για κλειδιά JSON, αναγνωριστικά και οικονομικές τιμές σε τμήματα κώδικα. Χρησιμοποιείται επίσης για σημεία δεδομένων σε γραφήματα και απεικονίσεις ανάπτυξης. - Seafoam 700
#167e6c— Μια πιο σκούρα απόχρωση αφρού θάλασσας για το περίγραμμα, τις γραμμές του γραφήματος και τις λεπτομέρειες των εικονιδίων εντός του περιβάλλοντος δεδομένων. Αυτό αγκυρώνει την κλίμακα αφρού θάλασσας στο πιο σκούρο φόντο. - Seafoam 400
#94efb7— Το επισημασμένο τμήμα κώδικα περιέχει τιμές συμβολοσειράς, URL και τελικά σημεία API μέσα σε μπλοκ κώδικα. Το πιο ανοιχτό χρώμα seafoam διαβάζεται ως γραμματοσειρά monospaced με πρασινωπή απόχρωση. - Deep Sea
#023247— Το διακοσμητικό περίγραμμα και το χρώμα έμφασης του γραφήματος είναι ένα πλούσιο τιρκουάζ χρώμα που χρησιμοποιείται σε εικονογραφήσεις SVG και οπτικοποιήσεις δεδομένων, μαζί με την κλίμακα χρώματος seafoam.
Ουδέτερος
- Midnight Ink
#011821— Σκούρα επιφάνεια και επισημασμένο κείμενο – φόντο κάρτας προϊόντος, κύριο κείμενο υψηλής αντίθεσης. Πιο κοντά στο γκρι με μια ψυχρή μπλε-πράσινη απόχρωση. Χρησιμοποιείται ως βάση για σκοτεινή λειτουργία όταν μια ενότητα χρειάζεται να αντιστραφεί. - Slate Ink
#3b3e47— Ο δευτερεύων τίτλος και το κύριο κείμενο είναι λίγο πιο θερμά από το Midnight Ink, που χρησιμοποιείται εκεί που το καθαρό μαύρο θα φαινόταν πολύ σκληρό στον ανοιχτόχρωμο καμβά. - Steel
#7c7f88— Το κύριο κείμενο και το κείμενο του συνδέσμου κυριαρχούνται από ένα απαλό χρώμα (χρησιμοποιείται 245 φορές στο κύριο κείμενο). Ένα ουδέτερο γκριζομπλε χρώμα που γίνεται αντιληπτό ως ήρεμο, ποτέ ως μια ξεθωριασμένη εικόνα. - Fog
#a9acb6— Περιγράμματα εικονιδίων, τριτεύοντα περιγράμματα και κείμενο κράτησης θέσης. Ένα μεσαίο γκρι χρώμα που διαχωρίζει το κείμενο χωρίς να ανταγωνίζεται με αυτό. - Mist
#cbcccf— Το κύριο κείμενο—υπογραφές, δηλώσεις αποποίησης ευθύνης και ψιλά γράμματα—είναι ευανάγνωστο σε λευκό φόντο, αλλά οπτικά λιγότερο αισθητό. - Silver Lining
#e3e4e8— Περιγράμματα καρτών, περιγράμματα πεδίων εισαγωγής, διαχωριστικές γραμμές. Αυτό το δομικό, διακριτικό χρώμα χρησιμοποιείται όπου δύο επιφάνειες πρέπει να διαχωριστούν χωρίς σκιές.
Τυπογραφία
από 10 έως 60px · 10 βήματα
- SuisseIntl — αντικατάσταση: Inter · περιγράμματα 300, 400, 500, 600 · Κύρια γραμματοσειρά – χρησιμοποιείται για όλες τις επικεφαλίδες, το κυρίως κείμενο, τα κουμπιά, την πλοήγηση, τους συνδέσμους και το κείμενο της κάρτας. Η μοναδική γεωμετρική sans serif δίνει στο Column ένα ξεχωριστό συντακτικό στυλ, διαφοροποιώντας το από άλλες εταιρείες fintech που συνεργάζονται αποκλειστικά με το Inter-only. Το βάρος είναι 600 στα 52–60px για τις επικεφαλίδες, 500 για τις υποεπικεφαλίδες, 400 για το κυρίως κείμενο και 300 για τους συνδέσμους χαμηλής έμφασης.
- SuisseIntlMono — αντικατάσταση: JetBrains Mono · περιγράμματα 400 · Μια γραμματοσειρά monospaced παρόμοια με την SuisseIntl, που χρησιμοποιείται για τεχνικές ετικέτες, αναγνωριστικά API και ενσωματωμένα δεδομένα σε στοιχεία UI. Διατηρεί τις ίδιες αναλογίες με την SuisseIntl, έτσι ώστε το κείμενο monospaced και το αναλογικό κείμενο να ευθυγραμμίζονται σωστά σε μικτά περιβάλλοντα.
- SFMono — αντικατάσταση: Fira Code · περιγράμματα 400 · Εμφάνιση αποσπασμάτων κώδικα – εμφανίζεται σε παραδείγματα JSON και μπλοκ τεκμηρίωσης API. Χρησιμοποιείται μια σκίαση σε χρώμα seafoam για την οπτική διάκριση του κώδικα από το κείμενο του UI.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 8px |
| Ακτίνα κάρτας | 8px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 72px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Column και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- dope.security — Μεσονύκτιος τερματικός σταθμός με μωβ φάρους
- Leonardo — Μια ανεστραμμένη εκδοτική γκαλερί. Ένα μουσείο με μαύρους τοίχους όπου οι μωβ τίτλοι λειτουργούν ως εγκαταστάσεις τοίχου και πορτρέτα που δημιουργούνται από τεχνητή νοημοσύνη κρέμονται σε ένα πυκνό πλέγμα από κάτω.
- VEED — Λευκός τοίχος γκαλερί με κουμπιά με πράσινο νέον φως
- Craft Docs — Ένα ψηφιακό κολάζ για scrapbooking. Ο σχεδιασμός μοιάζει με ένα προσεγμένο, απτό scrapbooking, όπου οι δομημένες ψηφιακές σημειώσεις συνδυάζονται με απαλές, οργανικές υφές.
- Letter — Μια ιδιωτική γκαλερί με λαμπερά αντικείμενα από αποθήκες. Ένας εκθεσιακός χώρος με μαύρους τοίχους όπου οι τίτλοι με σαφείς επιγραφές αιωρούνται πάνω από χρωμιωμένα γλυπτά στους φιμέ τοίχους της γκαλερί.
- Railway — Το Κοσμικό Εξπρές του Μεσονυχτίου. Ένα ήρεμο, συναρπαστικό ταξίδι μέσα στο σκοτεινό, έναστρο διάστημα, καθοδηγούμενο από καθαρά σήματα.
- Garden Eight — Ένα μνημειώδες κύριο άρθρο σε χαρτί κρεμ χρώματος. Ο τίτλος serif των 215px βρίσκεται μόνος του σε ζεστή περγαμηνή, περιτριγυρισμένος από αιωρούμενες γλυπτικές μορφές και αρνητικό χώρο που θυμίζει θαλασσινό αέρα—η σελίδα μοιάζει περισσότερο με εξώφυλλο μιας μονογραφίας τέχνης παρά με ένα ταμπλό.
- Steep — Ανάλυση γραμματοσειρών Serif σε ζεστό χαρτί
- ElevenLabs — Ένα φωτογραφικό δοκίμιο σε ζεστές κρεμ αποχρώσεις με διακριτικούς τίτλους. Ένα σημειωματάριο σε στιλ Bauhaus—χαρτί στο χρώμα του κελύφους του αυγού, μαύρο μελάνι και μία μόνο μωβ και πορτοκαλί πινελιά για την προβολή του προϊόντος.
- Awesomic — Συντακτικό πλέγμα ψευδαργύρου με πορτοκαλί σημεία στίξης που θυμίζουν κομφετί
- Monad — συντακτικό τεχνικό περιοδικό σε θερμή περγαμηνή
- AI for Business — Εκθεσιακός χώρος Brutalist σε ζεστούς γκρι τόνους