Arculat
Arculati rendszer
Az oldalon minden két színre, két betűtípusra és egy maréknyi számra vezethető vissza, amelyek mindenhol ismétlődnek ahelyett, hogy rögtönöznénk. Ez az oldal élőben mutatja őket, ugyanazokból az értékekből, amelyeket a kód használ, nem az írott specifikációból átmásolva.
Szín
Két szín, nem három. A Carbon és a White a témával szerepet cserél — az ink a szöveg és a vonalak, a ground a háttér —, így semmi sincs egyikhez vagy másikhoz rögzítve.
#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.
Az írott specifikáció egy harmadik színt is említ, a Blueprint-kéket, másodlagos kiemelésként. Az oldalon jelenleg semmi sem használja — itt az látható, ami ténylegesen megjelenik.
Az átlátszatlansági skála
A teljes ink alatti minden árnyalat a két szín egyike csökkentett átlátszatlansággal, sosem külön szürke.
- Primary text100%
- Secondary text72%
- Disabled / faint45%
- Hairline15%
- Fill8%
Az egyetlen kivétel: a képviselőcsoportok
A Parlament félköre a színt jelentéshordozásra használja, mert a bal oldali piros, a középső sárga és a jobb oldali kék olyan konvenció, amelyet az olvasó már ismer. Ez az egyetlen hely, ahol az árnyalat jelent valamit.
- The Left
- S&D
- Verts/ALE
- Renew
- PPE
- ECR
- PfE
- ESN
- NI
Referenciakékek
Három kékárnyalat az oldalon kívüli munkákhoz — diákhoz, nyomtatáshoz, közösségimédia-bejegyzésekhez —, ahol európai kékre van szükség. A #003399 az európai zászló kékje. Egyiket sem használja ez a felület, amely két színnél marad. Az egyes színminták száma a fehér szöveggel mért kontrasztjuk.
- 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
Tipográfia
Két család. Az Inter a rajz: címkék, navigáció, címek, minden, ami azonosít vagy mér. A Tinos az olvasás: minden, aminek egy percnél tovább kell lekötnie a figyelmet.
Inter is the drawing. Tinos is the reading.
Betűméret-skála
16px-es alap, 1,25-ös arány (nagy terc).
- 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
A jel
Épülő kör. Tizenkét sugárirányú rovátka, 30°-onként elhelyezve, idézet nélkül utal a tizenkét európai csillagra. A belső kör a terv; a folytonos ív a már megépült rész.
- Világos és sötét PNG-ként mentve. A CSS a témához illőt jeleníti meg, mint az oldal minden témafüggő ikonját.
- Védőzóna: minden oldalon legalább a belső kör sugara. Semmi nem kerülhet bele.
- Legkisebb méret: 32px a képernyőn.
Rács és térközök
8px-es alapskála. Az oldal minden hézaga, belső margója és margója e kilenc érték egyike.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Sarkok
Kis, egységes lekerekítések. Nincs kapszulaforma, és nincs lekerekített sarok egyoldali szegélyen.
- Controls, fields, buttons4px
- Cards and containers8px
- Solid fields and covers2px
Vonalak
A vonalak alapértelmezetten 0,5px-esek. Az 1px és a 2px ebben a rendszerben nehéznek hat.
Ikonok
Az oldal minden ikonja kézzel rajzolt, beágyazott SVG, ugyanolyan vonalvastagsággal és színnel, mint a körülötte lévő szöveg — ikonkönyvtár nélkül, ugyanazért, amiért komponenskészlet sincs.
- Sun
- Moon
- Panel
- Avatar
- X
Az egyetlen kivétel más cégek saját jelei: a láblécben az Instagram és az X a simple-icons nyílt forráskódú hivatalos logókönyvtárból származik, mert nem a mi dolgunk újrarajzolni őket.
A teljes írott specifikáció a DESIGN.md, a projekt tárolójában.