Projekt graficzny

System projektowy

Wszystko w tej witrynie sprowadza się do dwóch kolorów, dwóch krojów pisma i garści liczb, powtarzanych wszędzie zamiast improwizowanych. Ta strona pokazuje je na żywo, z tych samych wartości, których używa kod, a nie przepisanych ze specyfikacji.

Kolor

Dwa kolory, nie trzy. Carbon i White zamieniają się rolami zależnie od motywu — ink to tekst i linie, ground to tło — dzięki czemu nic nie jest przypisane na stałe do żadnego z nich.

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.

Specyfikacja pisemna wspomina też o trzecim kolorze, błękicie Blueprint, jako akcencie dodatkowym. Nic w tej witrynie obecnie go nie używa — tu pokazano to, co faktycznie jest publikowane.

Skala przezroczystości

Każdy odcień poniżej pełnego ink to jeden z dwóch kolorów o zmniejszonej nieprzezroczystości, nigdy osobny szary.

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

Jedyny wyjątek: grupy polityczne

Hemicykl Parlamentu używa koloru do przekazania znaczenia, bo czerwień po lewej, żółć pośrodku i błękit po prawej to konwencja, którą czytelnik już zna. To jedyne miejsce, w którym odcień do czegoś służy.

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

Referencyjne odcienie niebieskiego

Trzy odcienie niebieskiego do prac poza tą witryną — prezentacji, druku, postów w mediach społecznościowych — gdy potrzebny jest europejski błękit. #003399 to błękit flagi europejskiej. Żaden z nich nie jest używany w tym interfejsie, który pozostaje dwukolorowy. Liczba na każdej próbce to jej kontrast z białym tekstem.

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

Typografia

Dwie rodziny. Inter to kreska: etykiety, nawigacja, tytuły, wszystko, co identyfikuje lub mierzy. Tinos to lektura: wszystko, co ma przyciągnąć uwagę na dłużej niż minutę.

Inter is the drawing. Tinos is the reading.

Skala typograficzna

Baza 16px, proporcja 1,25 (tercja wielka).

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

Znak

Koło w budowie. Dwanaście znaczników promienistych, rozmieszczonych co 30°, przywołuje dwanaście europejskich gwiazd bez ich cytowania. Koło wewnętrzne to plan; ciągły łuk to część już zbudowana.

Zapisany jako jasny i ciemny PNG. CSS wyświetla ten, który pasuje do motywu, tak jak każda ikona zależna od motywu w tej witrynie.
Pole ochronne: co najmniej promień koła wewnętrznego z każdej strony. Nic w nie nie wchodzi.
Minimalny rozmiar: 32px na ekranie.

Siatka i odstępy

Bazowa skala 8px. Każdy odstęp, dopełnienie i margines w tej witrynie to jedna z tych dziewięciu wartości.

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

Narożniki

Małe, spójne promienie. Bez kształtu pigułki i bez zaokrąglonych narożników na krawędzi z jednej strony.

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

Linie

Cienkie linie mają domyślnie 0,5px. 1px i 2px są w tym systemie zbyt ciężkie.

Ikony

Każda ikona w tej witrynie jest rysowana ręcznie jako wbudowany SVG, o tej samej grubości kreski i w tym samym kolorze co otaczający tekst — bez biblioteki ikon, z tego samego powodu, dla którego nie ma zestawu komponentów.

Sun
Moon
Panel
Avatar
Instagram
X

Jedyny wyjątek to znaki innych firm: Instagram i X w stopce pochodzą z simple-icons, biblioteki open source oficjalnych znaków, ponieważ nie nam je przerysowywać.

Pełną specyfikację pisemną stanowi plik DESIGN.md w repozytorium tego projektu.