Design
Sistema di design
Tutto su questo sito si riduce a due colori, due caratteri e una manciata di numeri, ripetuti ovunque anziché improvvisati. Questa pagina li mostra dal vivo, con gli stessi valori usati dal codice — non ricopiati dalla specifica scritta.
Colore
Due colori, non tre. Carbon e White scambiano il proprio ruolo con il tema — ink è testo e linee, ground è lo sfondo — così nulla è mai fissato sull'uno o sull'altro.
#0D0F12
#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.
La specifica scritta indica anche un terzo colore, il blu Blueprint, come accento secondario. Nulla su questo sito lo usa attualmente — ciò che è mostrato qui è ciò che è realmente pubblicato.
La scala di opacità
Ogni tono sotto l'ink pieno è uno dei due colori a opacità ridotta, mai un grigio a sé.
- Primary text100%
- Secondary text72%
- Disabled / faint45%
- Hairline15%
- Fill8%
L'unica eccezione: i gruppi politici
L'emiciclo del Parlamento usa il colore per veicolare significato, perché rosso a sinistra, giallo al centro, blu a destra è una convenzione che chi legge già conosce. È l'unico punto in cui la tonalità viene usata per qualcosa.
- The Left
- S&D
- Verts/ALE
- Renew
- PPE
- ECR
- PfE
- ESN
- NI
Blu di riferimento
Tre blu per i lavori fuori da questo sito — presentazioni, stampa, post sui social — quando serve un blu europeo. #003399 è il blu della bandiera europea. Nessuno è usato in questa interfaccia, che resta a due colori. Il numero su ogni campione è il suo contrasto con il testo bianco.
- 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
Tipografia
Due famiglie. Inter è il disegno: etichette, navigazione, titoli, tutto ciò che identifica o misura. Tinos è la lettura: tutto ciò che è pensato per trattenere l'attenzione per più di un minuto.
Inter is the drawing. Tinos is the reading.
Scala tipografica
Base 16px, rapporto 1,25 (terza maggiore).
- 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
Il marchio
Un cerchio in costruzione. Dodici tacche radiali, poste ogni 30°, richiamano le dodici stelle europee senza citarle. Il cerchio interno è il progetto; l'arco pieno è la parte già costruita.
- Salvato come PNG chiaro e scuro. Il CSS mostra quello coerente con il tema, come per qualsiasi icona sensibile al tema su questo sito.
- Spazio di rispetto: almeno il raggio del cerchio interno su ogni lato. Nulla vi entra.
- Dimensione minima: 32px a schermo.
Griglia e spaziature
Una scala di base a 8px. Ogni spazio, padding e margine su questo sito è uno di questi nove valori.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Angoli
Raggi piccoli e coerenti. Nessuna forma a pillola, e nessun angolo arrotondato su un bordo a un solo lato.
- Controls, fields, buttons4px
- Cards and containers8px
- Solid fields and covers2px
Linee
I filetti sono di 0,5px per impostazione predefinita. 1px e 2px risultano pesanti in questo sistema.
Icone
Ogni icona su questo sito è disegnata a mano come SVG incorporato, con lo stesso spessore del tratto e lo stesso colore del testo circostante — nessuna libreria di icone, per lo stesso motivo per cui non c'è un kit di componenti.
- Sun
- Moon
- Panel
- Avatar
- X
L'unica eccezione sono i marchi propri di altre aziende: Instagram e X nel footer provengono da simple-icons, una libreria open source di marchi ufficiali, perché non sono nostri da ridisegnare.
La specifica scritta completa è DESIGN.md, nel repository di questo progetto.