Mecsa Design System

Nuestra guía oficial construida bajo la metodología Atomic Design. Estandarizando la excelencia visual y técnica en cada producto de Grupo Mecsa.

Comenzar Ahora GitHub

Principios, colores, tipografía y rejilla base del sistema.

Explorar

Botones, inputs, badges y elementos básicos indivisibles.

Explorar

Uniones de átomos formando componentes UI simples.

Explorar

Módulos complejos formados por moléculas y átomos.

Explorar

Lo que está en producción

El sistema real que usan hoy la web y las apps internas. Si vas a construir algo nuevo, empezá acá.

Tokens, sidebar, topbar, launcher de sistemas, modo oscuro y ayuda contextual. El shell de Proyectos, OPS, RH, Docs y SICOP.

Explorar

grupomecsa.net: estructura, variables SCSS, SEO, componentes, movimiento y tienda en línea.

Explorar

Una app de ejemplo funcionando. Copiala, cambiale el menú y ya tenés el shell completo.

Abrir

Acelera el desarrollo con componentes listos para producción.

Garantiza una experiencia uniforme en todas las plataformas.

Diseñado para ser inclusivo y cumplir estándares WCAG.