Saltar al contenido
Sistema de diseño

Galería de componentes

Colores, tipografía, botones, tarjetas, avisos, formularios, filtros, cifras e iconos de la web. La documentación completa está en la carpeta docs del proyecto.

Color

Valores del modo claro. Los pares que se usan y su contraste se comprueban con scripts/contraste.py.

  • --c-fondo#faf8f4
  • --c-superficie#ffffff
  • --c-superficie-2#f0ede7
  • --c-texto#1f2429
  • --c-texto-suave#4a5159
  • --c-marino#01172e
  • --c-logo#01172e
  • --c-tecno#1c5087
  • --c-tecno-hover#0e3762
  • --c-metal#7e8791
  • --c-borde#68737d
  • --c-acento#2075e9
  • --c-foco#1a69d5
  • --c-sobre-marino#ffffff
  • --c-sobre-marino-suave#c9d3de
  • --c-acento-sobre-marino#a8cdff
  • --c-sobre-tecno#ffffff
  • --c-error#b3261e
  • --c-error-fondo#fdf0ef
  • --c-ok#1e6b3a
  • --c-ok-fondo#eef7f1
  • --c-pendiente#7a4b00
  • --c-pendiente-fondo#fff4dc
  • --c-marcador#e4e0d8
  • --c-marcador-texto#3b4048

Tipografía

Source Serif 4 para titulares

Atkinson Hyperlegible Next para el texto. Diseñada para distinguir bien letras parecidas, como la I mayúscula, la l minúscula y el 1.

Botones

Botón principalBotón secundario

Tarjetas

  • Lanzadera autónoma blanca cruzando un puente metálico entre España y Portugal

    Proyecto europeo · Finalizado

    5G-MOBIX

    Pruebas de conducción conectada y automatizada sobre redes 5G en corredores que cruzan fronteras.

    Papel de AEVAC: socio del consorcio

    Corredor transfronterizo entre Vigo y Oporto (España y Portugal), más corredores y zonas de prueba en otros países de Europa, en China y en Corea del Sur

    • Vehículo autónomo
    • Infraestructura
    • Europa
    • Investigación

  • Imagen ilustrativa

    Tarjeta con marcador de imagen

    Así se ve una imagen que aún no se ha encargado.

    Cruce de calle europea con semáforo, paso de peatones y parada con pantalla
    Imagen ilustrativa generada con inteligencia artificial. No es una foto real.

Avisos y datos pendientes

Dato sin verificar dentro de una frase: [DATO PENDIENTE].

[DATO PENDIENTE] Aviso de contenido pendiente.

Ejemplo / pendiente de contenido real

Aviso informativo.

Cifras

  • 2017año de fundación de la asociación
  • [DATO PENDIENTE]cifra de ejemplo sin verificar, solo para la muestra de componentesCifra sin fuente todavía. No se publica hasta tenerla.

Formulario con validación

Envía el formulario vacío para ver el resumen de errores y el error de cada campo. No envía nada.

Por ejemplo: nombre@dominio.es

Iconos

Trazo fino de 1,5 píxeles sobre una rejilla de 24. Siempre acompañan a un texto; nunca van solos.

  • vehiculo
  • conectado
  • ruta
  • infraestructura
  • accesibilidad
  • ia
  • dron
  • escudo
  • norma
  • pista
  • lupa
  • ciudad
  • menu
  • cerrar
  • flecha
  • buscar
  • calendario
  • compartir
  • copiar
  • externo
  • lugar