Design
Sistema de design
Tudo neste sítio se reduz a duas cores, duas tipografias e um punhado de números, repetidos em toda a parte em vez de improvisados. Esta página mostra-os ao vivo, a partir dos mesmos valores que o código usa, não copiados da especificação escrita.
Cor
Duas cores, não três. Carbon e White trocam de papel consoante o tema — ink é o texto e as linhas, ground é o fundo — de modo que nada fica fixo a uma ou a outra.
#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.
A especificação escrita menciona também uma terceira cor, o azul Blueprint, como destaque secundário. Nada neste sítio a usa atualmente — o que aqui se mostra é o que realmente é publicado.
A escala de opacidade
Cada tom abaixo do ink pleno é uma das duas cores com opacidade reduzida, nunca um cinzento à parte.
- Primary text100%
- Secondary text72%
- Disabled / faint45%
- Hairline15%
- Fill8%
A única exceção: os grupos políticos
O hemiciclo do Parlamento usa a cor para transmitir significado, porque vermelho à esquerda, amarelo ao centro, azul à direita é uma convenção que o leitor já conhece. É o único lugar onde o tom serve para alguma coisa.
- The Left
- S&D
- Verts/ALE
- Renew
- PPE
- ECR
- PfE
- ESN
- NI
Azuis de referência
Três azuis para trabalhos fora deste sítio — apresentações, impressão, publicações nas redes sociais — quando se pretende um azul europeu. #003399 é o azul da bandeira europeia. Nenhum é usado nesta interface, que continua com duas cores. O número em cada amostra é o seu contraste com texto branco.
- 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
Tipografia
Duas famílias. A Inter é o traço: etiquetas, navegação, títulos, tudo o que identifica ou mede. A Tinos é a leitura: tudo o que se destina a prender a atenção mais de um minuto.
Inter is the drawing. Tinos is the reading.
Escala tipográfica
Base de 16px, proporção 1,25 (terceira maior).
- 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
O logótipo
Um círculo em construção. Doze marcas radiais, colocadas de 30° em 30°, evocam as doze estrelas europeias sem as citar. O círculo interior é o plano; o arco contínuo é a parte já construída.
- Guardado como PNG claro e escuro. O CSS mostra o que corresponde ao tema, tal como qualquer ícone sensível ao tema neste sítio.
- Espaço de proteção: pelo menos o raio do círculo interior de cada lado. Nada entra nele.
- Tamanho mínimo: 32px no ecrã.
Grelha e espaçamento
Uma escala base de 8px. Cada separação, preenchimento e margem deste sítio é um destes nove valores.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Cantos
Raios pequenos e coerentes. Sem forma de pílula, e sem cantos arredondados num rebordo de um só lado.
- Controls, fields, buttons4px
- Cards and containers8px
- Solid fields and covers2px
Linhas
Os filetes são de 0,5px por defeito. 1px e 2px ficam pesados neste sistema.
Ícones
Cada ícone deste sítio é desenhado à mão como SVG incorporado, com a mesma espessura de traço e a mesma cor do texto que o rodeia — sem biblioteca de ícones, pela mesma razão por que não há um kit de componentes.
- Sun
- Moon
- Panel
- Avatar
- X
A única exceção são as marcas próprias de outras empresas: o Instagram e o X no rodapé vêm do simple-icons, uma biblioteca de código aberto de marcas oficiais, porque não nos cabe redesenhá-las.
A especificação escrita completa é o DESIGN.md, no repositório deste projeto.