Fundamentos del Design System
Los fundamentos son los principios básicos que guían todo el sistema de diseño de Grupo Mecsa.
Identidad de Marca
Misión del Design System
Proporcionar una experiencia consistente, accesible y de alta calidad en todos los productos digitales de Grupo Mecsa, manteniendo la coherencia con la identidad de la marca.
Principios de Diseño
Paleta de Colores
Los colores reales de Grupo Mecsa, los que están hoy en producción en la web y en las apps internas.
#0064A5 y al violeta
heredado del POS, que ya no se usan en ningún producto.
Marca
Navy (Primary)
Uso: Botones principales, links, estado activo
$primary-color · --brand
Navy oscuro
Uso: Fondos oscuros, footer, texto de titular
$color-gm-dark
Navy claro
Uso: Hover y degradados del primario
$primary-dark-color
Ámbar
Uso: Acentos de marca (logo OPS, destacados)
ámbar Mecsa
Ámbar UI
Uso: Acentos en las apps: viñetas, tips, switch
--accent
Estado
Success
Uso: Confirmaciones, estados completados
$green
Warning
Uso: Advertencias, en proceso
$yellow
Danger
Uso: Errores, acciones destructivas
$red
Info
Uso: Información, tooltips
$info
Superficies y texto
En las apps internas los neutros no son fijos: cambian con el tema. Por eso se usan tokens y no HEX. La tabla completa está en Apps internas → Tokens.
| Token | Claro | Oscuro | Uso |
|---|---|---|---|
--bg-app | #f8f9fa | #0b1120 | Fondo de página |
--bg-surface | #ffffff | #131c2e | Tarjetas y modales |
--text | #111827 | #e8edf7 | Texto principal |
--text-muted | #9ca3af | #7f8ea8 | Metadatos |
--border | #eaeaea | #263248 | Bordes |
Tipografía
Grupo Mecsa utiliza la fuente Inter para toda su comunicación digital.
Familia Tipográfica
Inter Light (300)
Inter Regular (400)
Inter Medium (500)
Inter SemiBold (600)
Inter Bold (700)
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
Escala Tipográfica
Heading 1 - 2rem (32px)
.h1-gm { font-size: 2rem; }
Heading 2 - 1.5rem (24px)
.h2-gm { font-size: 1.5rem; }
Heading 3 - 1.25rem (20px)
.h3-gm { font-size: 1.25rem; }
Heading 4 - 1rem (16px)
.h4-gm { font-size: 1rem; }
Heading 5 - 0.938rem (15px)
.h5-gm { font-size: 0.938rem; }
Sistema de Espaciado
Utilizamos un sistema de espaciado basado en múltiplos de 4px para mantener consistencia visual.
| Nombre | Valor | Píxeles | Uso |
|---|---|---|---|
xs |
0.25rem |
4px | Espaciado mínimo, separación interna |
sm |
0.5rem |
8px | Espaciado pequeño entre elementos |
md |
1rem |
16px | Espaciado estándar |
lg |
1.5rem |
24px | Espaciado entre secciones pequeñas |
xl |
2rem |
32px | Separación entre secciones |
xxl |
3rem |
48px | Separación mayor entre secciones |
Sistema de Grid
Utilizamos el sistema de grid de Bootstrap 5 con 12 columnas responsivas.
Breakpoints
| Breakpoint | Class | Tamaño |
|---|---|---|
| Extra small | .col- |
< 576px |
| Small | .col-sm- |
≥ 576px |
| Medium | .col-md- |
≥ 768px |
| Large | .col-lg- |
≥ 992px |
| Extra large | .col-xl- |
≥ 1200px |
| Extra extra large | .col-xxl- |
≥ 1400px |
Ejemplo de Grid
Iconografía
Utilizamos Font Awesome 6 como nuestra biblioteca principal de iconos.
Iconos Principales
fa-cubes
Fundamentos
fa-atom
Átomos
fa-dna
Moléculas
fa-bacteria
Organismos
Accesibilidad
Principios de Accesibilidad
- Contraste: Todos los colores cumplen con WCAG 2.1 AA
- Navegación por teclado: Todos los elementos interactivos son accesibles
- Etiquetas semánticas: Uso correcto de HTML semántico
- Textos alternativos: Todas las imágenes tienen alt text
- Tamaño de fuente: Mínimo 16px para legibilidad
Contraste de Colores
Ratio de contraste mínimo:
- Texto normal: 4.5:1
- Texto grande: 3:1