Design
Designový systém
Vše na tomto webu se dá shrnout do dvou barev, dvou písem a hrstky čísel, opakovaných všude místo improvizace. Tato stránka je ukazuje živě, ze stejných hodnot, které používá kód, ne přepsané z písemné specifikace.
Barva
Dvě barvy, ne tři. Carbon a White si podle motivu vyměňují role — ink je text a čáry, ground je pozadí — takže nic není napevno svázáno s jednou nebo druhou.
#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.
Písemná specifikace uvádí i třetí barvu, modrou Blueprint, jako doplňkový akcent. Nic na tomto webu ji v současnosti nepoužívá — zde je zobrazeno to, co se skutečně publikuje.
Stupnice krytí
Každý odstín pod plnou ink je jedna ze dvou barev se sníženým krytím, nikdy samostatná šedá.
- Primary text100%
- Secondary text72%
- Disabled / faint45%
- Hairline15%
- Fill8%
Jediná výjimka: politické skupiny
Půlkruh Parlamentu používá barvu k vyjádření významu, protože červená vlevo, žlutá uprostřed a modrá vpravo je konvence, kterou čtenář už zná. Je to jediné místo, kde odstín něco znamená.
- The Left
- S&D
- Verts/ALE
- Renew
- PPE
- ECR
- PfE
- ESN
- NI
Referenční odstíny modré
Tři odstíny modré pro práci mimo tento web — prezentace, tisk, příspěvky na sociálních sítích — tam, kde je potřeba evropská modrá. #003399 je modrá evropské vlajky. Žádný z nich se v tomto rozhraní nepoužívá; zůstává u dvou barev. Číslo na každém vzorku je jeho kontrast s bílým textem.
- 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
Dvě rodiny. Inter je kresba: popisky, navigace, nadpisy, vše, co označuje nebo měří. Tinos je čtení: vše, co má udržet pozornost déle než minutu.
Inter is the drawing. Tinos is the reading.
Typografická stupnice
Základ 16px, poměr 1,25 (velká tercie).
- 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
Značka
Kruh ve výstavbě. Dvanáct paprskových rysek, rozmístěných po 30°, připomíná dvanáct evropských hvězd, aniž by je citovalo. Vnitřní kruh je plán; souvislý oblouk je část, která už je postavená.
- Uloženo jako světlé a tmavé PNG. CSS zobrazí to, které odpovídá motivu, stejně jako každou ikonu na tomto webu závislou na motivu.
- Ochranná zóna: z každé strany alespoň poloměr vnitřního kruhu. Nic do ní nezasahuje.
- Minimální velikost: 32px na obrazovce.
Mřížka a rozestupy
Základní stupnice 8px. Každá mezera, vnitřní okraj a okraj na tomto webu je jednou z těchto devíti hodnot.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Rohy
Malé, jednotné poloměry. Žádné tvary pilulky a žádné zaoblené rohy u okraje na jedné straně.
- Controls, fields, buttons4px
- Cards and containers8px
- Solid fields and covers2px
Čáry
Linky mají ve výchozím stavu 0,5px. 1px a 2px působí v tomto systému těžce.
Ikony
Každá ikona na tomto webu je ručně kreslená jako vložené SVG, se stejnou tloušťkou tahu a stejnou barvou jako text kolem ní — bez knihovny ikon, ze stejného důvodu, proč tu není sada komponent.
- Sun
- Moon
- Panel
- Avatar
- X
Jedinou výjimkou jsou vlastní značky jiných firem: Instagram a X v zápatí pocházejí ze simple-icons, open-source knihovny oficiálních značek, protože nám nepřísluší je překreslovat.
Úplná písemná specifikace je DESIGN.md v repozitáři tohoto projektu.