Identidad visual

Colores

Tipografía

Familias

• --fuenteAntonio Blánquez · Todo el texto
• --fuente-firmaAntonio Blánquez · Firma de la cabecera y nombre de la tarjeta de contacto
• --fuente-codigoAntonio Blánquez · Nombres de token en esta página

Pesos

• --peso-normalTexto, menú y pie
• --peso-negritaTítulos, botones, cifras y sección actual

Tamaños

Estilos de texto

Espacios

• --espacio-1
• --espacio-2
• --espacio-3
• --espacio-4
• --espacio-5
• --espacio-6
• --espacio-7
• --espacio-8

Medidas y cortes

Medidas

• --tactilAlto y ancho mínimos de todo lo que se pulsa
• --foco-anchoGrosor del anillo de foco
• --foco-separacionSeparación del anillo de foco
• --alto-barra-inferiorAlto de la barra inferior en móvil
• --margen20 · 40 · 80 pxMargen lateral en móvil, tableta y escritorio
• ancho máximo1120pxContenido por encima de 1280 px

Cortes

Esquinas

• --radio-raya
• --radio-boton
• --radio-caja
• --radio-telefono
• --radio-pildora
• --radio-circulo

Sombras

• --sombra-tarjetaClaro:
  Oscuro:
• --sombra-tarjeta-hoverClaro:
  Oscuro:
• --sombra-telefonoClaro:
  Oscuro:
• --sombra-fotoClaro:
  Oscuro:
• --sombra-boton-flotanteClaro:
  Oscuro:

Movimiento

Duraciones

• --duracion-rapidaHover y foco de enlaces y botones
• --duracion-mediaTarjetas y botón Arriba
• --duracion-zoomZoom de las capturas
• --duracion-aparicionAparición al hacer scroll
• --escalon-aparicionRetraso entre tarjetas
• --duracion-flotarFoto que flota

Curvas

• ease-outAparición al hacer scroll, despliegue de fichas, elevación de tarjetas y zoom de capturas
• ease-in-outFoto que flota
• ease (por defecto)Cambios de color de enlaces y botones

Con «reducir movimiento» activado en el sistema no hay desplazamientos ni apariciones: solo cambian colores y sombras.

Iconos

Trazo de 2 px con extremos redondeados (juego equivalente a lucide), en currentColor y con aria-hidden: van siempre junto a su texto.

• ProyectosBarra inferior (24 px)
• Cómo trabajoBarra inferior (24 px)
• Sobre míBarra inferior (24 px)
• ContactoBarra inferior (24 px)
• LupaPaso «Entender el problema» (24 px)
• Pantalla y móvilPaso «Diseñar en tres tamaños» (24 px)
• CódigoPaso «Construir por tandas» (24 px)
• Paquete con marcaPaso «Cerrar» (24 px)
• Escudo con marcaPaso «Mantener» (24 px)
• LunaBotón de tema en claro (20 px)
• SolBotón de tema en oscuro (20 px)
• Flecha arribaBotón «Arriba» (20 px)
• Flecha atrás«Volver a proyectos» (20 y 24 px)
• Flecha a fueraNombre de la tarjeta de proyecto (18-20 px)
• FechaLínea de datos del proyecto (18 px)
• EstadoLínea de datos del proyecto (18 px)
• AnteriorCaja del proyecto anterior (16 px)
• SiguienteCaja del proyecto siguiente (16 px)
• GloboBotón «En vivo» (18 px)
• Sobre«Escríbeme» y fila de correo (18-20 px)
• Descarga«Descargar CV (PDF)» (18 px)
• Enlace externoFilas de LinkedIn y GitHub (20 px)

Logotipos de terceros

Color oficial, nunca recoloreado: --color-logo-terceros.

• GitHubBotón «Código» y contacto
• LinkedInContacto

Iconos de proyecto

Cada proyecto conserva su icono, a 24, 32 o 48 px; en oscuro van sobre la placa --color-placa-icono.

• RadiografIATarjeta, página y cajas
• DesplázameTarjeta, página y cajas
• ZetaBusTarjeta, página y cajas
• LinajeTarjeta, página y cajas
• Icono de la webPestaña del navegador y pantalla de inicio

Piezas

• .boton-primario
  En vivo
• .boton-secundario
  Código
• .boton-cuadrado
  LinkedIn
• .boton-copiar
  Copiar
• .etiquetas li
  • TypeScript
• .menu a · reposo
  Proyectos
• .menu a · hover
  Proyectos
• .menu a · foco
  Proyectos
• .menu a · sección actual
  Proyectos
• .barra-inferior .pastilla · reposo
  ProyectosCómo trabajoSobre míContacto
• .barra-inferior .pastilla · sección actual
  ProyectosCómo trabajoSobre míContacto
• .paso-icono
• .tarjeta-nohace

  [texto pendiente]

• .tarjeta-resultado

  [texto pendiente]

• h2 · raya

  Título de sección

• .decision-numero
  1
• .boton-tema
• .arriba a · hover y foco
  Arriba
• :focus-visible
  Código