Design

Sistemul de design

Tot ce vezi pe acest site se reduce la două culori, două fonturi și o mână de numere, repetate peste tot în loc să fie improvizate. Această pagină le arată în direct, din aceleași valori pe care le folosește codul, nu copiate din specificația scrisă.

Culoare

Două culori, nu trei. Carbon și White își schimbă rolul odată cu tema — ink este textul și liniile, ground este fundalul — astfel încât nimic nu rămâne legat de una sau de cealaltă.

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.

Specificația scrisă menționează și o a treia culoare, albastrul Blueprint, ca accent secundar. Nimic de pe acest site nu o folosește în prezent — ce se arată aici este ceea ce se publică de fapt.

Scara de opacitate

Fiecare ton sub ink plin este una dintre cele două culori cu opacitate redusă, niciodată un gri separat.

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

Singura excepție: grupurile politice

Hemiciclul Parlamentului folosește culoarea pentru a transmite sens, pentru că roșu în stânga, galben la centru, albastru în dreapta este o convenție pe care cititorul o cunoaște deja. Este singurul loc în care nuanța servește la ceva.

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

Nuanțe de albastru de referință

Trei nuanțe de albastru pentru lucrări din afara acestui site — prezentări, tipar, postări pe rețelele sociale — atunci când e nevoie de un albastru european. #003399 este albastrul drapelului european. Niciuna nu este folosită în această interfață, care rămâne la două culori. Cifra de pe fiecare mostră este contrastul ei cu textul alb.

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

Tipografie

Două familii. Inter este trăsătura: etichete, navigare, titluri, tot ce identifică sau măsoară. Tinos este lectura: tot ce este menit să țină atenția mai mult de un minut.

Inter is the drawing. Tinos is the reading.

Scara tipografică

Bază de 16px, raport 1,25 (terță majoră).

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

Sigla

Un cerc în construcție. Douăsprezece semne radiale, plasate din 30° în 30°, evocă cele douăsprezece stele europene fără a le cita. Cercul interior este planul; arcul continuu este partea deja construită.

Salvată ca PNG deschis și întunecat. CSS-ul o afișează pe cea potrivită temei, ca orice pictogramă sensibilă la temă de pe acest site.
Spațiu de protecție: cel puțin raza cercului interior pe fiecare parte. Nimic nu intră în el.
Dimensiune minimă: 32px pe ecran.

Grilă și spațiere

O scară de bază de 8px. Fiecare distanță, umplutură și margine de pe acest site este una dintre aceste nouă valori.

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

Colțuri

Raze mici și coerente. Fără formă de pilulă și fără colțuri rotunjite pe o margine de o singură parte.

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

Linii

Filetele sunt implicit de 0,5px. 1px și 2px par greoaie în acest sistem.

Pictograme

Fiecare pictogramă de pe acest site este desenată manual ca SVG încorporat, cu aceeași grosime a liniei și aceeași culoare ca textul care o înconjoară — fără bibliotecă de pictograme, din același motiv pentru care nu există un kit de componente.

Sun
Moon
Panel
Avatar
Instagram
X

Singura excepție sunt siglele proprii ale altor companii: Instagram și X din subsol provin din simple-icons, o bibliotecă open-source de sigle oficiale, pentru că nu ne aparține dreptul de a le redesena.

Specificația scrisă completă este DESIGN.md, în depozitul acestui proiect.