Diseño
Sistema de diseño
Todo en este sitio se reduce a dos colores, dos tipografías y un puñado de números, repetidos en todas partes en lugar de improvisados. Esta página los muestra en vivo, a partir de los mismos valores que usa el código, no copiados de la especificación escrita.
Color
Dos colores, no tres. Carbon y White intercambian su papel según el tema — ink es el texto y las líneas, ground es el fondo — de modo que nada queda fijado a uno u otro.
#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.
La especificación escrita también menciona un tercer color, el azul Blueprint, como acento secundario. Nada en este sitio lo usa actualmente — lo que se muestra aquí es lo que realmente se publica.
La escala de opacidad
Cada tono por debajo del ink completo es uno de los dos colores con opacidad reducida, nunca un gris aparte.
- Primary text100%
- Secondary text72%
- Disabled / faint45%
- Hairline15%
- Fill8%
La única excepción: los grupos políticos
El hemiciclo del Parlamento usa el color para transmitir significado, porque rojo a la izquierda, amarillo en el centro, azul a la derecha es una convención que el lector ya conoce. Es el único lugar donde el tono se usa para algo.
- The Left
- S&D
- Verts/ALE
- Renew
- PPE
- ECR
- PfE
- ESN
- NI
Azules de referencia
Tres azules para trabajos fuera de este sitio — presentaciones, impresión, publicaciones en redes sociales — cuando se necesita un azul europeo. #003399 es el azul de la bandera europea. Ninguno se usa en esta interfaz, que sigue siendo de dos colores. La cifra de cada muestra es su contraste con texto blanco.
- 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
Tipografía
Dos familias. Inter es el trazo: etiquetas, navegación, títulos, todo lo que identifica o mide. Tinos es la lectura: todo lo que está pensado para retener la atención más de un minuto.
Inter is the drawing. Tinos is the reading.
Escala tipográfica
Base de 16px, proporción 1,25 (tercera mayor).
- 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
El logotipo
Un círculo en construcción. Doce marcas radiales, colocadas cada 30°, evocan las doce estrellas europeas sin citarlas. El círculo interior es el plan; el arco continuo es la parte ya construida.
- Guardado como PNG claro y oscuro. El CSS muestra el que corresponde al tema, igual que cualquier icono sensible al tema en este sitio.
- Espacio de protección: al menos el radio del círculo interior por cada lado. Nada entra en él.
- Tamaño mínimo: 32px en pantalla.
Cuadrícula y espaciado
Una escala base de 8px. Cada separación, relleno y margen de este sitio es uno de estos nueve valores.
- 4px
- 8px
- 12px
- 16px
- 24px
- 32px
- 48px
- 64px
- 96px
Esquinas
Radios pequeños y coherentes. Sin forma de píldora, y sin esquinas redondeadas en un borde de un solo lado.
- Controls, fields, buttons4px
- Cards and containers8px
- Solid fields and covers2px
Líneas
Los filetes son de 0,5px por defecto. 1px y 2px resultan pesados en este sistema.
Iconos
Cada icono de este sitio está dibujado a mano como SVG incorporado, con el mismo grosor de trazo y el mismo color que el texto que lo rodea — sin biblioteca de iconos, por la misma razón que no hay un kit de componentes.
- Sun
- Moon
- Panel
- Avatar
- X
La única excepción son las marcas propias de otras empresas: Instagram y X en el pie de página proceden de simple-icons, una biblioteca de código abierto de marcas oficiales, porque no son nuestras para redibujarlas.
La especificación escrita completa es DESIGN.md, en el repositorio de este proyecto.