Σχεδιασμός

Σύστημα σχεδιασμού

Όλα σε αυτόν τον ιστότοπο ανάγονται σε δύο χρώματα, δύο γραμματοσειρές και μια χούφτα αριθμούς, που επαναλαμβάνονται παντού αντί να αυτοσχεδιάζονται. Αυτή η σελίδα τα δείχνει ζωντανά, από τις ίδιες τιμές που χρησιμοποιεί ο κώδικας, όχι αντιγραμμένα από τη γραπτή προδιαγραφή.

Χρώμα

Δύο χρώματα, όχι τρία. Τα Carbon και White ανταλλάσσουν ρόλους με το θέμα — το ink είναι το κείμενο και οι γραμμές, το ground είναι το φόντο — ώστε τίποτα να μη δένεται με το ένα ή το άλλο.

Carbon

#0D0F12

White

#FFFFFF

ink / ground — Text, lines and marks. White in dark mode, Carbon in light mode. The background. Carbon in dark mode, White in light mode.

Η γραπτή προδιαγραφή αναφέρει και ένα τρίτο χρώμα, το μπλε Blueprint, ως δευτερεύουσα έμφαση. Τίποτα σε αυτόν τον ιστότοπο δεν το χρησιμοποιεί σήμερα — αυτό που φαίνεται εδώ είναι αυτό που πραγματικά δημοσιεύεται.

Η κλίμακα αδιαφάνειας

Κάθε τόνος κάτω από το πλήρες ink είναι ένα από τα δύο χρώματα με μειωμένη αδιαφάνεια, ποτέ ένα ξεχωριστό γκρι.

Primary text100%
Secondary text72%
Disabled / faint45%
Hairline15%
Fill8%

Η μόνη εξαίρεση: οι πολιτικές ομάδες

Το ημικύκλιο του Κοινοβουλίου χρησιμοποιεί χρώμα για να μεταφέρει νόημα, επειδή το κόκκινο αριστερά, το κίτρινο στο κέντρο και το μπλε δεξιά είναι μια σύμβαση που ο αναγνώστης ήδη γνωρίζει. Είναι το μόνο σημείο όπου η απόχρωση σημαίνει κάτι.

The Left
S&D
Verts/ALE
Renew
PPE
ECR
PfE
ESN
NI

Μπλε αναφοράς

Τρεις αποχρώσεις του μπλε για δουλειά εκτός αυτού του ιστότοπου — παρουσιάσεις, έντυπα, αναρτήσεις στα μέσα κοινωνικής δικτύωσης — όπου χρειάζεται ένα ευρωπαϊκό μπλε. Το #003399 είναι το μπλε της ευρωπαϊκής σημαίας. Καμία δεν χρησιμοποιείται σε αυτή τη διεπαφή, η οποία μένει στα δύο χρώματα. Ο αριθμός σε κάθε δείγμα είναι η αντίθεσή του με λευκό κείμενο.

Aa6.2:1
HEX
#006796
RGB
0, 103, 150
Carbon
3.1:1
Aa10.9:1
HEX
#003399
RGB
0, 51, 153
Carbon
1.8:1
Aa8.6:1
HEX
#0000FF
RGB
0, 0, 255
Carbon
2.2:1

Τυπογραφία

Δύο οικογένειες. Η Inter είναι το σχέδιο: ετικέτες, πλοήγηση, τίτλοι, ό,τι αναγνωρίζει ή μετρά. Η Tinos είναι η ανάγνωση: ό,τι προορίζεται να κρατήσει την προσοχή για περισσότερο από ένα λεπτό.

Inter is the drawing. Tinos is the reading.

Τυπογραφική κλίμακα

Βάση 16px, λόγος 1,25 (μεγάλη τρίτη).

Blueprint EuropeDisplay · 48px · 1.1 · 500 · −0.02em
Blueprint EuropeH1 · 39px · 1.15 · 500 · −0.02em
Blueprint EuropeH2 · 31px · 1.2 · 500 · −0.01em
Blueprint EuropeH3 · 25px · 1.3 · 500 · 0
Blueprint EuropeH4 · 20px · 1.4 · 500 · 0
Blueprint EuropeBody (interface) · 16px · 1.5 · 400 · 0
Blueprint EuropeBody (reading) · 21px · 1.7 · 400 · 0
Blueprint EuropeSmall · 14px · 1.5 · 400 · 0
Blueprint EuropeAnnotation · 12px · 1.4 · 400 · +0.08em

Το σήμα

Ένας κύκλος υπό κατασκευή. Δώδεκα ακτινικές γραμμές, τοποθετημένες ανά 30°, παραπέμπουν στα δώδεκα ευρωπαϊκά αστέρια χωρίς να τα παραθέτουν. Ο εσωτερικός κύκλος είναι το σχέδιο· το συνεχές τόξο είναι το κομμάτι που έχει ήδη χτιστεί.

Αποθηκευμένο ως φωτεινό και σκούρο PNG. Το CSS εμφανίζει αυτό που ταιριάζει στο θέμα, όπως κάθε εικονίδιο του ιστότοπου που εξαρτάται από το θέμα.
Ελεύθερος χώρος: τουλάχιστον η ακτίνα του εσωτερικού κύκλου σε κάθε πλευρά. Τίποτα δεν μπαίνει μέσα του.
Ελάχιστο μέγεθος: 32px στην οθόνη.

Πλέγμα και αποστάσεις

Μια βασική κλίμακα 8px. Κάθε κενό, εσωτερικό περιθώριο και περιθώριο σε αυτόν τον ιστότοπο είναι μία από αυτές τις εννέα τιμές.

4px
8px
12px
16px
24px
32px
48px
64px
96px

Γωνίες

Μικρές, συνεπείς ακτίνες. Χωρίς σχήματα κάψουλας και χωρίς στρογγυλεμένες γωνίες σε περίγραμμα μίας πλευράς.

Controls, fields, buttons4px
Cards and containers8px
Solid fields and covers2px

Γραμμές

Οι γραμμές είναι εξ ορισμού 0,5px. Το 1px και το 2px μοιάζουν βαριά σε αυτό το σύστημα.

Εικονίδια

Κάθε εικονίδιο σε αυτόν τον ιστότοπο είναι σχεδιασμένο με το χέρι ως ενσωματωμένο SVG, με το ίδιο πάχος γραμμής και το ίδιο χρώμα με το κείμενο γύρω του — χωρίς βιβλιοθήκη εικονιδίων, για τον ίδιο λόγο που δεν υπάρχει κιτ στοιχείων.

Sun
Moon
Panel
Avatar
Instagram
X

Η μόνη εξαίρεση είναι τα σήματα άλλων εταιρειών: το Instagram και το X στο υποσέλιδο προέρχονται από το simple-icons, μια βιβλιοθήκη ανοιχτού κώδικα με επίσημα σήματα, επειδή δεν είναι δικά μας για να τα ξανασχεδιάσουμε.

Η πλήρης γραπτή προδιαγραφή είναι το DESIGN.md, στο αποθετήριο αυτού του έργου.