Neptuno DS: cómo convertimos una auditoría visual de LinkedIn en un sistema de diseño escalable

En productos complejos, el verdadero reto está en construir un lenguaje visual capaz de crecer sin romperse.

Un sistema de diseño inspirado en LinkedIn y centrado especialmente en uno de sus flujos más críticos: la búsqueda de empleo.

Nuestro objetivo no era replicar la interfaz de LinkedIn, sino analizarla, detectar fricciones y transformar decisiones visuales dispersas en reglas reutilizables. Queríamos pasar del caos visual a un sistema documentado, accesible y escalable.

El punto de partida: auditar antes de diseñar

Antes de crear componentes, empezamos por observar. La auditoría visual nos permitió identificar patrones, inconsistencias y puntos de fricción dentro del flujo de empleo.

Este flujo era especialmente interesante porque concentra una gran cantidad de información en muy poco espacio: filtros, listados de ofertas, tarjetas de empleo, botones de acción, estados, etiquetas, formularios y navegación. Es decir, un entorno perfecto para comprobar si una interfaz mantiene claridad o si, por el contrario, genera sobrecarga cognitiva.

Durante la auditoría detectamos varios problemas clave.

El primero fue la accesibilidad por contraste. Algunos grises tenían una legibilidad baja y no ofrecían suficiente contraste, especialmente en textos secundarios, bordes, estados deshabilitados o elementos informativos. Esto afectaba directamente a la lectura y podía dificultar la experiencia de personas con baja visión o en contextos de uso menos favorables.

También encontramos falta de jerarquía visual. En muchas zonas del flujo, distintos elementos competían por la misma atención: filtros, pills, botones, etiquetas y textos tenían pesos visuales similares. El resultado era una interfaz donde no siempre quedaba claro qué era información, qué era estado y qué era acción.

Otro hallazgo importante fue la inconsistencia en el espaciado. Aparecían valores irregulares, lo que generaba una composición menos predecible. En un flujo tan denso como el de empleo, el espaciado no es un detalle estético: es lo que permite respirar a la interfaz, agrupar información y guiar la lectura.

También detectamos una iconografía inconsistente, con mezcla de iconos outline, fill e incluso estilos más ilustrativos. Esta variedad rompía la unidad visual y hacía que algunos elementos parecieran pertenecer a sistemas distintos.

Por último, vimos una tipografía poco sistematizada, con inconsistencias en tamaños, pesos y estilos. Esto afectaba a la jerarquía de lectura y hacía más difícil escanear rápidamente ofertas, filtros y descripciones.

La auditoría nos dejó una conclusión clara: el problema no era una pantalla concreta, sino la falta de un sistema compartido.

De los hallazgos a los principios

A partir de la auditoría definimos tres principios que guiaron todo Neptuno DS:

Jerarquía, para que cada nivel de información tuviera un propósito claro y se construyera sobre el anterior.

Semántica, para que cada componente comunicara una función y no solo una apariencia.

Composición, para que las piezas pudieran combinarse siguiendo reglas consistentes.

Estos principios nos ayudaron a tomar decisiones de diseño con una lógica común. No queríamos crear componentes aislados, sino un ecosistema capaz de sostener experiencias complejas.

La estructura del sistema: diseño atómico aplicado

Para organizar Neptuno DS utilizamos una estructura basada en diseño atómico. Esta metodología nos permitió construir desde las decisiones más pequeñas hasta pantallas completas.

Foundations: donde empieza el sistema

Las foundations son la base del sistema. Aquí definimos los tokens y reglas visuales que garantizan consistencia en todo el producto.

Color, organizado en tokens base y tokens semánticos.

Tipografía, con una jerarquía clara para títulos, cuerpo, captions y datos.

Titles

Text

Captions

Spacing, basado en múltiplos de 4px para eliminar valores arbitrarios.

Border width, para definir grosores consistentes.

Radius, con reglas claras para botones, cards, inputs, tags y elementos circulares.

Icon size, para asegurar coherencia entre navegación, botones e inputs.

Uno de los cambios más importantes fue pasar de colores usados por apariencia a colores usados por función. En lugar de elegir un azul, un gris o un verde porque “encaja”, cada color empezó a tener un rol: acción, texto, fondo, estado, información, error o éxito.

Esto tuvo un impacto directo en la accesibilidad. Al reorganizar los grises, reforzar contrastes y definir usos semánticos, el sistema redujo ambigüedades y mejoró la legibilidad en zonas críticas del flujo de empleo.

Breakpoints

Grid

Átomos: las piezas mínimas reutilizables

Después construimos los átomos, los elementos básicos del sistema. Creamos átomos con estados definidos, entre ellos botones, links, avatares, checkboxes, tags, iconos, inputs y elementos de navegación.

Cada átomo se diseñó con variantes, tamaños y estados: default, hover, focus, pressed, selected o disabled. Esto era clave para que el sistema no dependiera de decisiones improvisadas en cada pantalla.

Por ejemplo, los botones dejaron de ser solo formas azules o blancas. Pasaron a tener jerarquías claras: primario, secundario, terciario y premium. Cada uno con un uso concreto, un comportamiento esperado y una relación visual con el resto del sistema.

Botones

Inputs átomos

Moléculas: patrones que resuelven interacciones

Las moléculas combinan átomos para resolver interacciones frecuentes. En Neptuno DS creamos toasts, paginación, button sets, listas y grupos de avatares, dropdown, notificaciones entre otros.

Aquí el sistema empezó a ganar comportamiento. Ya no se trataba solo de piezas visuales, sino de patrones que daban feedback, agrupaban información o facilitaban la navegación.

Un ejemplo claro son los toasts. En el flujo de empleo, acciones como guardar una oferta o retirarla de guardados necesitan confirmación inmediata. Al convertir ese feedback en una molécula documentada, evitamos soluciones distintas para el mismo problema.

Toast Neptuno DS

Organismos: bloques complejos de interfaz

Los organismos son estructuras más completas que combinan átomos y moléculas. En Neptuno DS construimos header, filter bar, filter card, description job card y tablas.

Header Neptuno DS

Filter card Neptuno DS

Filter bar Neptuno DS

Description job card Neptuno DS

Tablas Neptuno DS

Estos organismos fueron especialmente importantes en el flujo de empleo. La búsqueda de trabajo necesita mostrar mucha información sin saturar: ofertas, filtros, descripciones, acciones, estados y resultados. Por eso era fundamental que cada bloque tuviera una función clara.

La Filter Card, por ejemplo, permitió ordenar los filtros con una estructura más limpia, estados visibles y una jerarquía más comprensible. La Description Job Card ayudó a organizar la información de cada oferta con una lectura más clara y componentes reutilizables.

Páginas: el sistema aplicado a experiencias reales

Finalmente, combinamos organismos para construir páginas completas. Aquí comprobamos si Neptuno DS funcionaba en contexto real.

Aplicado al flujo de empleo, el sistema permitió transformar una interfaz densa en una experiencia más coherente. Los filtros, botones, tarjetas y estados empezaron a compartir una misma lógica visual. Esto redujo la sensación de ruido, mejoró el escaneo de información y facilitó la toma de decisiones.

Flujo empleo de Linkedin

Flujo empleo de Linkedin con Neptuno DS

El impacto en accesibilidad

Uno de los mayores aprendizajes del proyecto fue entender que la accesibilidad no se añade al final. Se diseña desde las foundations.

Al trabajar el color semántico, la tipografía y el espaciado desde el inicio, Neptuno DS permitió mejorar la accesibilidad de forma estructural. No se trataba solo de corregir contrastes puntuales, sino de evitar que el problema se repitiera.

En el flujo de empleo, esto tuvo un impacto especial porque es un contexto de alta carga cognitiva. Una persona que busca trabajo necesita comparar ofertas, revisar requisitos, aplicar filtros y tomar decisiones rápidas. Si la interfaz no diferencia bien entre información, acción y estado, la experiencia se vuelve más lenta y frustrante.

Con el sistema, los elementos importantes ganaron jerarquía. Las acciones principales fueron más reconocibles. Los textos tuvieron mejor legibilidad. Los filtros se organizaron con más claridad. Y los estados dejaron de depender solo del color para apoyarse también en estructura, texto y comportamiento.

Documentar para que el sistema viva

Un sistema de diseño no termina cuando se diseñan los componentes. Para que sea útil, tiene que estar documentado.

Por eso creamos una landing page de documentación para Neptuno DS. Esta página funciona como una extensión del sistema: recoge foundations, átomos, moléculas y organismos, y permite entender cómo se usan, por qué existen y cómo se combinan.

La documentación convierte el sistema en una herramienta compartida. Ayuda a diseñadores a tomar decisiones más rápido, facilita el traspaso a desarrollo y reduce la posibilidad de crear variantes innecesarias.

Conclusión: diseñar menos pantallas, diseñar mejores reglas

La auditoría nos permitió detectar problemas reales de accesibilidad, jerarquía, consistencia y carga cognitiva. La estructura atómica nos permitió ordenar esas decisiones desde la base hasta la experiencia final. Y la aplicación en el flujo de empleo demostró que un buen sistema puede mejorar la claridad, la eficiencia y la escalabilidad de una interfaz compleja.

En definitiva, Neptuno DS no solo organiza una interfaz: construye un lenguaje común para que producto, diseño y desarrollo puedan avanzar con más coherencia.

Porque cuando las reglas son claras, las experiencias no se improvisan: se construyen mejor.