Skip to main content

🎨 Documentación Desing system Alpura-4

Un Design System (o Sistema de Diseño) es una guía completa que reúne todos los elementos visuales, componentes, patrones y reglas que definen cómo se diseña y desarrolla una interfaz dentro de un producto digital.

✅ Beneficios de tener un Design System​

  • Consistencia visual y funcional.
  • Ahorro de tiempo (no se rediseña cada pantalla desde cero).
  • Escalabilidad: se puede crecer el producto sin perder coherencia.
  • Colaboración fluida entre diseño y desarrollo.
  • Mejor experiencia de usuario, porque todo se comporta igual.

✅ Objetivo Design System Alpura​

-El DS fue creado para garantizar la coherencia visual, la eficiencia operativa y una experiencia de usuario superior en todos los productos digitales. A diferencia de otras librerías de componentes, este sistema integra una narrativa visual inspirada en el sector lácteo (Look & Feel Lechero) combinando una estética industrial con una identidad de marca acogedora y funcional.

El Design System se divide en:

  • Foundations: Paleta de colores, tipografías, logotipos, grids, espacios, sombras e iconografía.
  • Navegación: Breadcrums, tabs, wizard.
  • Componentes: Botones,toast, mensajes, modales, cintillos, tooltip, empty states, drawer, cards,tablas,etc.
  • Elementos de formulario: Checkbox, radio buttons, switches, segmented pills, chips, text fields, dropdown,drag and drop. etc.
  • Crud genérico: Crear, consultar, modificar, eliminar, activar/inactivar, etc.
  • Componentes de interfaz: Spinner, pantallas de error, avatares, login.

Consulta el Design System​

Puedes consultar el DS en el visor o bién hacer clic aquí para verlo mas grande en otra ventana.

Voz y tono de nuestras interfaces​

-Cuando diseñamos interfaces, además de utilizar el design system, hablamos de una manera que refuerce la marca, natural y directa. La comunicación debe ser clara y esencial, busca humanizar procesos industriales complejos a través de un lenguaje que se sienta cercano, pero extremadamente eficiente.

  • LOS PILARES DE NUESTRA VOZ Frescura Calidez Honestidad

  • Aplicación del tono El tono es adaptable según la situación del usuario: Tono

  • Toque lechero (personalidad) Para reforzar el look & feel del sistema, incorporamos guiños sutiles en el micro-copy y elementos del sistema sin comprometer la usabilidad. Toque elechero

  • Lo que NO somos

No somos infantiles: Ser amigable no significa ser poco profesionales. Evitamos el exceso de exclamaciones o lenguaje que reste seriedad a la operación.

No somos burocráticos: Evitamos palabras como "ejecutar" o "solicitud" cuando podemos utilizar "hacer", "listo" o "pedido".

❓Dudas y comentarios​

Si tienes dudas o algún comentario, por favor contactar al equipo Arquitectura-UX/UI ó al equipo de Arquitectura Frontend.