Ontwerp

Ontwerpsysteem

Alles op deze site komt neer op twee kleuren, twee lettertypen en een handvol getallen, overal herhaald in plaats van geïmproviseerd. Deze pagina toont ze live, vanuit dezelfde waarden die de code gebruikt, niet overgetypt uit de geschreven specificatie.

Kleur

Twee kleuren, geen drie. Carbon en White wisselen van rol met het thema — ink is de tekst en de lijnen, ground is de achtergrond — zodat niets aan de een of de ander vastzit.

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.

De geschreven specificatie noemt ook een derde kleur, Blueprint-blauw, als secundair accent. Niets op deze site gebruikt die op dit moment — wat hier wordt getoond, is wat er werkelijk live staat.

De dekkingsladder

Elke tint onder volle ink is een van de twee kleuren met minder dekking, nooit een apart grijs.

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

De enige uitzondering: politieke fracties

Het halfrond van het Parlement gebruikt kleur om betekenis over te brengen, omdat rood links, geel in het midden en blauw rechts een conventie is die de lezer al kent. Het is de enige plek waar kleur iets betekent.

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

Referentieblauwtinten

Drie blauwtinten voor werk buiten deze site — presentaties, drukwerk, posts op sociale media — waar een Europees blauw gewenst is. #003399 is het blauw van de Europese vlag. Geen ervan wordt in deze interface gebruikt, die bij twee kleuren blijft. Het getal op elk staal is het contrast met witte tekst.

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

Twee families. Inter is de tekening: labels, navigatie, koppen, alles wat iets benoemt of meet. Tinos is het lezen: alles wat langer dan een minuut de aandacht moet vasthouden.

Inter is the drawing. Tinos is the reading.

Typografische schaal

Basis 16px, verhouding 1,25 (grote terts).

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

Het beeldmerk

Een cirkel in aanbouw. Twaalf radiale streepjes, om de 30° geplaatst, verwijzen naar de twaalf Europese sterren zonder ze te citeren. De binnenste cirkel is het plan; de doorlopende boog is het deel dat al gebouwd is.

Opgeslagen als lichte en donkere PNG. CSS toont de versie die bij het thema past, net als elk ander themagevoelig icoon op deze site.
Vrije ruimte: aan elke kant minstens de straal van de binnenste cirkel. Niets komt daarbinnen.
Minimale grootte: 32px op het scherm.

Raster en afstand

Een basisschaal van 8px. Elke tussenruimte, opvulling en marge op deze site is een van deze negen waarden.

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

Hoeken

Kleine, consistente radii. Geen pilvormen, en geen afgeronde hoeken op een rand aan één kant.

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

Lijnen

Lijnen zijn standaard 0,5px. 1px en 2px voelen in dit systeem zwaar aan.

Iconen

Elk icoon op deze site is met de hand getekend als inline SVG, met dezelfde lijndikte en dezelfde kleur als de tekst eromheen — geen iconenbibliotheek, om dezelfde reden dat er geen componentenkit is.

Sun
Moon
Panel
Avatar
Instagram
X

De enige uitzondering zijn de eigen merktekens van andere bedrijven: Instagram en X in de voettekst komen uit simple-icons, een open-sourcebibliotheek van officiële merktekens, omdat het niet aan ons is om ze opnieuw te tekenen.

De volledige geschreven specificatie is DESIGN.md, in de repository van dit project.