Fnac.es creció sin un sistema común: el amarillo de marca aparece en seis tonos, conviven decenas de estilos de texto y los espaciados no siguen ninguna escala. En un equipo de cuatro diseñadoras auditamos el flujo de compra de un libro y construimos Harmonie, un design system con tokens de color, tipografía, iconografía y espaciado, una librería de componentes y un prototipo navegable.
Recorrimos el flujo de compra de un libro en Fnac.es y medimos cada color, texto, icono, radio y espaciado para detectar dónde el sistema actual se contradice.
Elige una pestaña para ver cada hallazgo con ejemplos reales de Fnac.es.
Cada card define sus propios tamaños, pesos y colores. Hay textos de 7px y precios con un interlineado más bajo que la letra.
Una corte de armonía rota (Una corte de rosas y espinas 6) - Libro
Sarah J. Maas
18,95 € 19,95 €
Formato digital 10,44 €
Pasa el cursor por los textos de la tarjeta para ver su tipografía y tamaño.
Iconos del mismo nivel jerárquico con tamaños distintos, outline y relleno en la misma barra, y etiquetas en posiciones diferentes.
16 pxBúsquedaOutline
16 pxAyudaFilled
16 pxTiendaFilled
22 pxAccesibilidadFilled
24 pxMi cuentaOutline
24 pxMi cestaOutline
62×64MenúOutline
38 pxDevoluciónOutline
38 pxAtenciónOutline
38 pxSocioFilled
38 pxAlertasOutline
26×33CulturaFilled
21×16IdiomaFilledLos botones principales comparten color, pero cada uno tiene un padding vertical distinto.
La card de libro tiene 30px de margen a la izquierda y 36px a la derecha, y las secciones de la categoría se separan con 28, 40, 47 y 60px.
Botones, filtros, banners e iconos de género usan curvaturas distintas sin un criterio común, todos en la página de Libros y eBooks.
En los listados de Fnac.es, “Añadir a la cesta” y los favoritos se esconden hasta que el cursor pasa por la card. En un móvil no hay cursor: la acción principal de la tienda nunca aparece.
Pasa el cursor por la tarjeta.
Pack Funko Star Wars Rivals Serie 1. Lado Oscuro
Juego de cartas - Goliath
1,99 € 9,95 €
Con lo que encontramos en la auditoría definimos las bases de Harmonie: una paleta con un único amarillo de marca, una escala tipográfica, una librería de iconos y un sistema de espaciado y radios.
1 amarillo de marca (#F5B027) + neutros y semánticos
Roboto con una escala de 7 estilos y mínimo de 14px
Un solo estilo: Phosphor, base de 24 px
Base 8 px, 9 pasos y 5 radios
Los 21 colores sueltos de la auditoría se ordenaron en seis escalas de 100 a 900. El amarillo de Fnac quedó en un único valor, Orange-500, reservado para la acción principal.
Una escala Major Third (ratio 1,25) sobre una base de 16px, con interlineados enteros. Los 66 estilos sueltos de la auditoría se redujeron a nueve.
Phosphor, con trazo y grosor consistentes. Tamaño base de 24px, con variantes de 16 y 32px según la jerarquía, y estados de interacción para los iconos clicables.
Nueve valores de espaciado: los primeros son submúltiplos de 8 para microespacios dentro de los componentes; desde 8px, todos son múltiplos exactos. Los radios tienen nombre por intención.
12 columnas · gutter 24px · márgenes 64px
Construimos la librería de componentes de menor a mayor: de botones y etiquetas a la card de producto, y de ahí a las pantallas del flujo de compra.
Compra visible sin hover: “Añadir al carrito” siempre a la vista.
Nuevo
Título del libro
27,50 €
1+ estrellas
Nuevo
Título del libro
27,50 €
1+ estrellas
Fnac Exclusivo
Título del libro
27,50 €
1+ estrellas
Categoría Libros. Pasa el cursor por cada pantalla para recorrerla.
Antes: Fnac.es en mayo de 2026. Después: pantallas finales con Harmonie.
Unimos las pantallas en un prototipo navegable de 10 pantallas que recorre la compra completa de un libro, de la home al pago.
Busca la novela Hotel Savoy, añádela al carrito y completa la compra con las pantallas de Harmonie.
La auditoría convirtió opiniones en datos: cada token de Harmonie responde a un problema medido.
Trabajar entre cuatro sobre los mismos tokens fue lo que hizo que el sistema se sostuviera.
Un mínimo de 14px y estados de botón claros protegen a todas las pantallas que vengan después.
Tu tarea
Solo es funcional el recorrido de la tarea. Sigue estos pasos:
