Design
Designsystem
Alles auf dieser Website reduziert sich auf zwei Farben, zwei Schriften und eine Handvoll Zahlen, überall wiederholt statt improvisiert. Diese Seite zeigt sie live, aus denselben Werten, die der Code verwendet — nicht aus der schriftlichen Spezifikation abgetippt.
Farbe
Zwei Farben, nicht drei. Carbon und White tauschen ihre Rolle mit dem Theme — ink ist Text und Linien, ground ist der Hintergrund —, sodass nichts fest auf die eine oder andere Farbe programmiert ist.
#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.
Die schriftliche Spezifikation nennt außerdem eine dritte Farbe, Blueprint-Blau, als Sekundärakzent. Nichts auf dieser Website verwendet sie derzeit — gezeigt wird hier, was tatsächlich ausgeliefert wird.
Die Opazitätsleiter
Jeder Farbton unterhalb von vollem ink ist eine der beiden Farben mit reduzierter Deckkraft, nie ein eigenes Grau.
- Primary text100%
- Secondary text72%
- Disabled / faint45%
- Hairline15%
- Fill8%
Die eine Ausnahme: Fraktionen
Die Sitzverteilung des Parlaments nutzt Farbe, um Bedeutung zu tragen, weil Rot links, Gelb in der Mitte, Blau rechts eine Konvention ist, die Leserinnen und Leser bereits kennen. Es ist der einzige Ort, an dem Farbton für irgendetwas verwendet wird.
- The Left
- S&D
- Verts/ALE
- Renew
- PPE
- ECR
- PfE
- ESN
- NI
Referenzblautöne
Drei Blautöne für Arbeiten außerhalb dieser Website — Folien, Druck, Social-Media-Beiträge —, wenn ein europäisches Blau gefragt ist. #003399 ist das Blau der Europaflagge. Keiner davon wird in dieser Oberfläche verwendet; sie bleibt bei zwei Farben. Die Zahl auf jedem Farbfeld ist sein Kontrast zu weißem Text.
- 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
Typografie
Zwei Schriftfamilien. Inter ist das Zeichnen: Beschriftungen, Navigation, Überschriften, alles, was benennt oder misst. Tinos ist das Lesen: alles, was länger als eine Minute Aufmerksamkeit halten soll.
Inter is the drawing. Tinos is the reading.
Schriftskala
16px Basis, Verhältnis 1,25 (große Terz).
- 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
Das Zeichen
Ein Kreis im Bau. Zwölf radiale Striche, im Abstand von 30° gesetzt, greifen die zwölf europäischen Sterne auf, ohne sie zu zitieren. Der innere Kreis ist der Plan; der durchgezogene Bogen ist der bereits gebaute Teil.
- Gespeichert als helles und dunkles PNG. CSS zeigt jeweils die zum Theme passende Version — genau wie bei jedem themenabhängigen Icon dieser Website.
- Schutzraum: mindestens der Radius des inneren Kreises auf allen Seiten. Nichts dringt in diesen Bereich ein.
- Mindestgröße: 32px auf dem Bildschirm.
Raster und Abstände
Eine 8px-Basisskala. Jeder Abstand, jedes Padding und jeder Rand auf dieser Website ist einer dieser neun Werte.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Ecken
Kleine, einheitliche Radien. Keine Pillenform und keine abgerundeten Ecken bei einseitigen Rahmen.
- Controls, fields, buttons4px
- Cards and containers8px
- Solid fields and covers2px
Linien
Haarlinien sind standardmäßig 0,5px. 1px und 2px wirken in diesem System schwer.
Icons
Jedes Icon auf dieser Website ist von Hand als eingebettetes SVG gezeichnet, in derselben Strichstärke und Farbe wie der umgebende Text — keine Icon-Bibliothek, aus demselben Grund wie kein Komponenten-Kit.
- Sun
- Moon
- Panel
- Avatar
- X
Die einzige Ausnahme sind die eigenen Zeichen anderer Unternehmen: Instagram und X im Footer stammen aus simple-icons, einer Open-Source-Bibliothek offizieller Markenzeichen, weil diese nicht unsere sind, um sie neu zu zeichnen.
Die vollständige schriftliche Spezifikation ist DESIGN.md, im Repository dieses Projekts.