Sistema de diseño

Pantalla 11

Los valores exactos para construir el resto del sitio. Todo par de color de esta tabla se ha medido: ninguno baja de 4,9 veces de diferencia con su fondo, el mínimo para que un texto se lea con luz de día. El cian de marca (#53C8EC) se conserva tal cual, pero solo donde funciona: como filete, como pestaña activa, como fondo de banda y sobre navy, donde llega a 7,5:1. Sobre blanco mide 1,94:1, así que ahí lo sustituye #0B6E8F —el mismo cian oscurecido que ya usa el prototipo de Málaga.

Color · tema claro

#53C8ECCian de marca · sin tocar

#0B6E8FCian de trabajo · 5,8:1

#085876Botones y enlaces · 7,9:1

#064459Botón hover · 10,6:1

#E2F2F8Tinte cian · bandas

#1D2A3CNavy · tinta 14,5:1

#4A5A70Tinta 2 · 7,0:1

#F2F6F8Papel · fondo

#FFFFFFSuperficie · tarjetas

#E6EEF3Hundido

#D8E1E8Filete 1px

#FBF3E0Sello · fondo

#7A5406Sello · texto 6,1:1

Color · tema oscuro

#111823Fondo

#18212ESuperficie

#E6ECF2Tinta · 15,0:1

#98A8B8Tinta 2 · 7,3:1

#283444Filete

#53C8ECCian de marca · 9,2:1

#E0B45CSello · 9,2:1

Dónde va cada cian

#53C8ECFilete de cabecera · 4px

#53C8ECPestaña activa del menú

#53C8ECGuion de rótulo de sección

#53C8ECBotón sobre navy · 7,5:1

#E2F2F8Banda de certificación

#085876Todo texto y todo botón claro

#0B6E8FIconos y contorno de foco

Escala tipográfica

Archivo 800 · 52/1,02~~Titular~~

Archivo 700 · 34/1,12~~Sección~~

Archivo 700 · 17/1,2~~Tarjeta~~

Plex Sans 400 · 17/1,62Entradilla

Plex Sans 400 · 15/1,6Texto corrido

Plex Mono 500 · 131,36 m · 27,21 m²

Plex Mono 500 · 11 · .15emRótulo

Forma y espacio

4 pxRadio de botones y campos

5 pxRadio de tarjetas y paneles

1 pxÚnico grosor de filete

ningunaSombras · la jerarquía la hace el filete

4 8 12 16 24 32 44 64Escala de espaciado en px

1140 pxAncho máximo de contenido

46 pxAlto de botón · 44 px mínimo táctil

2 pxContorno de foco de teclado

Lo que rompería el diseño

Poner #53C8EC debajo de texto blanco. Es lo que hace la web actual en cabecera y pie: mide 1,94:1 y no se lee. Sobre claro, todo texto va en #085876.
Añadir un tercer color. Solo hay dos: el cian para lo interactivo y el ámbar reservado a certificación. El resto del color lo ponen los renders de producto.
Poner sombras y radios grandes en las tarjetas. La separación la hace el filete de 1 px. Un radio de 16 px convierte la ficha técnica en una tarjeta de marketing.
Publicar un producto sin sus tres datos. Edad, altura de caída y área de seguridad van en la tarjeta. Si faltan, la tarjeta dice «pendiente», no los esconde.
Recortar los renders con proporciones distintas. Todos cuadrados sobre blanco puro. Hoy conviven 600×600 y 300×369 y la rejilla baila.
Recuperar barras de habilidad, contadores o iconos de clipart. La confianza la dan las normas, la obra ejecutada y los datos, no un «Calidad 100%».
Dejar el nombre del producto por debajo de 28 px. Es el elemento más importante de la página; hoy está a 20 px, más pequeño que un subtítulo.

Sobre las imágenes. Todo lo que se ve es de Restaupark. Los renders son los del catálogo (T001, T004, T009, TB003, CP001, CP002, MDP001, MDP003, B002, C004, TI02, TIR01 y las cuatro cabeceras de familia). Las fotos de obra —el parque con pavimento continuo y el circuito canino del refugio de «Volando Voy»— están publicadas hoy en su blog. Los paneles con textura en diagonal y el mapa cuadriculado son marcadores de posición: señalan dónde falta material, y no son fotos de Restaupark ni de terceros.

Sobre las cifras. Los recuentos por familia (117 / 23 / 15 / 21, total 176), las subfamilias, las fechas del blog y los datos técnicos de cada producto se han contado uno a uno en restaupark.com. Dirección, teléfono, horario y correo de RR. HH. son los que publica hoy la propia web.

Qué está marcado como pendiente. Código CPV, plazo de entrega y garantía en la ficha de producto; el buzón licitaciones@, que habría que crear; el municipio de los dos proyectos fotografiados, que el blog no dice; y el tercer caso de obra ejecutada, que está citado en un artículo pero todavía no tiene foto publicada.

Qué no ha cambiado desde la versión anterior. Solo el color. La tipografía (Archivo + IBM Plex Sans / Mono), los radios, los filetes, la ausencia de sombras y el espaciado son idénticos. Si se prefiere además una forma algo más amable —radios de 8-10 px en vez de 4-5— es un ajuste de diez minutos que no toca nada más.

Sobre los datos marcados en ámbar. Código CPV, plazo de entrega y garantía aparecen como «a confirmar»: son los que Restaupark tiene que aportar para dejar completa la sección de licitación que hoy existe vacía en su web.