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 principales de Grupo Mecsa definen la identidad visual de la marca. Haz clic en el código HEX para copiarlo.
Primary
Uso: Botones principales, CTAs
$primary-color
Secondary
Uso: Textos secundarios, bordes
$secondary-color
Dark
Uso: Headers, footers
$dark-bg
Success
Uso: Confirmaciones, estados positivos
$success
Warning
Uso: Advertencias, alertas
$warning
Danger
Uso: Errores, acciones destructivas
$danger
Info
Uso: Información, tooltips
$info
Light
Uso: Fondos, secciones claras
$light-bg
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