Design

Designsystem

Allt på den här webbplatsen kokar ner till två färger, två typsnitt och en handfull siffror, som upprepas överallt i stället för att improviseras. Den här sidan visar dem live, från samma värden som koden använder, inte avskrivna från den skrivna specifikationen.

Färg

Två färger, inte tre. Carbon och White byter roller med temat — ink är text och linjer, ground är bakgrunden — så att inget är låst till den ena eller den andra.

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.

Den skrivna specifikationen nämner också en tredje färg, Blueprint-blått, som sekundär accent. Inget på webbplatsen använder den i dag — det som visas här är det som faktiskt publiceras.

Opacitetsskalan

Varje ton under full ink är en av de två färgerna med lägre opacitet, aldrig en separat grå.

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

Det enda undantaget: politiska grupper

Parlamentets halvcirkel använder färg för att bära betydelse, eftersom rött till vänster, gult i mitten och blått till höger är en konvention som läsaren redan känner till. Det är det enda stället där en kulör betyder något.

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

Referensblått

Tre blå nyanser för arbete utanför den här webbplatsen — presentationer, tryck, inlägg i sociala medier — där ett europeiskt blått behövs. #003399 är blått i Europaflaggan. Ingen av dem används i det här gränssnittet, som håller sig till två färger. Siffran på varje färgprov är dess kontrast mot vit 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

Typografi

Två familjer. Inter är ritningen: etiketter, navigering, rubriker, allt som identifierar eller mäter. Tinos är läsningen: allt som ska hålla kvar uppmärksamheten längre än en minut.

Inter is the drawing. Tinos is the reading.

Typskala

Bas 16px, förhållande 1,25 (stor ters).

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

Märket

En cirkel under uppbyggnad. Tolv radiella streck, placerade med 30° mellanrum, anspelar på de tolv europeiska stjärnorna utan att citera dem. Den inre cirkeln är planen; den sammanhängande bågen är den del som redan är byggd.

Sparat som ljus och mörk PNG. CSS visar den som passar temat, precis som varje temaberoende ikon på webbplatsen.
Frizon: minst den inre cirkelns radie på varje sida. Inget får komma in i den.
Minsta storlek: 32px på skärmen.

Rutnät och avstånd

En basskala på 8px. Varje mellanrum, utfyllnad och marginal på webbplatsen är ett av dessa nio värden.

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

Hörn

Små, konsekventa radier. Inga pillerformer och inga rundade hörn på en kantlinje på bara en sida.

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

Linjer

Linjer är 0,5px som standard. 1px och 2px känns tunga i det här systemet.

Ikoner

Varje ikon på webbplatsen är handritad som inbäddad SVG, med samma linjetjocklek och samma färg som texten runt den — inget ikonbibliotek, av samma skäl som det inte finns något komponentpaket.

Sun
Moon
Panel
Avatar
Instagram
X

Det enda undantaget är andra företags egna märken: Instagram och X i sidfoten kommer från simple-icons, ett bibliotek med öppen källkod för officiella varumärken, eftersom de inte är våra att rita om.

Den fullständiga skrivna specifikationen är DESIGN.md, i projektets kodförråd.