Design
Système de design
Tout sur ce site se ramène à deux couleurs, deux polices, et une poignée de nombres, répétés partout plutôt qu'improvisés. Cette page les rend en direct, à partir des mêmes valeurs que celles utilisées par le code — pas retapées depuis la spécification écrite.
Couleur
Deux couleurs, pas trois. Carbon et White échangent leurs rôles selon le thème — ink est le texte et les traits, ground est l'arrière-plan — de sorte que rien n'est jamais figé sur l'une ou l'autre.
#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 spécification écrite mentionne aussi une troisième couleur, le bleu Blueprint, comme accent secondaire. Rien sur ce site ne l'utilise actuellement — ce qui est montré ici correspond à ce qui est réellement publié.
L'échelle d'opacité
Chaque teinte en dessous de l'ink plein est l'une des deux couleurs à opacité réduite, jamais un gris à part.
- Primary text100%
- Secondary text72%
- Disabled / faint45%
- Hairline15%
- Fill8%
La seule exception : les groupes politiques
L'hémicycle du Parlement utilise la couleur pour porter du sens, car rouge à gauche, jaune au centre, bleu à droite est une convention que les lecteurs connaissent déjà. C'est le seul endroit où la teinte sert à quelque chose.
- The Left
- S&D
- Verts/ALE
- Renew
- PPE
- ECR
- PfE
- ESN
- NI
Bleus de référence
Trois bleus pour les travaux en dehors de ce site — présentations, impression, publications sur les réseaux sociaux — lorsqu'un bleu européen est souhaité. #003399 est le bleu du drapeau européen. Aucun n'est utilisé dans cette interface, qui reste à deux couleurs. Le chiffre sur chaque nuancier est son contraste avec un texte blanc.
- 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
Typographie
Deux familles. Inter est le dessin : libellés, navigation, titres, tout ce qui identifie ou mesure. Tinos est la lecture : tout ce qui est destiné à retenir l'attention plus d'une minute.
Inter is the drawing. Tinos is the reading.
Échelle typographique
Base 16px, ratio 1,25 (tierce majeure).
- 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
Le logo
Un cercle en construction. Douze graduations radiales, disposées tous les 30°, font écho aux douze étoiles européennes sans les citer. Le cercle intérieur est le plan ; l'arc plein est la partie déjà construite.
- Stocké en PNG clair et sombre. Le CSS affiche celui qui correspond au thème, de la même manière que toute icône sensible au thème sur ce site.
- Espace de protection : au moins le rayon du cercle intérieur de chaque côté. Rien n'y entre.
- Taille minimale : 32px à l'écran.
Grille et espacements
Une échelle de base à 8px. Chaque interstice, marge intérieure et marge extérieure de ce site est l'une de ces neuf valeurs.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Angles
Des rayons petits et cohérents. Pas de forme en pilule, et pas de coins arrondis sur une bordure à un seul côté.
- Controls, fields, buttons4px
- Cards and containers8px
- Solid fields and covers2px
Traits
Les filets sont à 0,5px par défaut. 1px et 2px paraissent lourds dans ce système.
Icônes
Chaque icône de ce site est dessinée à la main en SVG intégré, avec la même épaisseur de trait et la même couleur que le texte environnant — pas de bibliothèque d'icônes, pour la même raison qu'il n'y a pas de kit de composants.
- Sun
- Moon
- Panel
- Avatar
- X
La seule exception concerne les marques propres à d'autres entreprises : Instagram et X dans le pied de page proviennent de simple-icons, une bibliothèque open source de marques officielles, parce que ce ne sont pas les nôtres à redessiner.
La spécification écrite complète est DESIGN.md, dans le dépôt de ce projet.