Guía de Estilo Visual
Directrices de diseño para docs.mercasist.org
🎨 Paleta de Colores
Colores Principales
#5cb85c
Verde Principal
#2c3e50
Azul Oscuro
#5a6c7d
Texto Principal
#95a5a6
Texto Secundario
Fondos
#f4f5f7
Fondo Página
#ffffff
Contenedor
#f8f9fa
Alternativo
📝 Tipografía
Título H1 (28px, #2c3e50)
Título H2 (18px, #5cb85c)
Título H3 (16px, #2c3e50)
Párrafo normal (14px, #5a6c7d, line-height: 1.7)
Subtítulo (14px, #95a5a6)
📦 Cajas de Información
Información (Azul): Para datos importantes, contexto general.
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%)
Advertencia (Naranja): Para alertas, precauciones.
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%)
Éxito (Verde): Para confirmaciones, logros.
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%)
📐 Espaciado Estándar
- ✅ Padding contenedor:
40px
- ✅ Margin entre secciones:
30px - 35px
- ✅ Margin entre elementos:
15px - 20px
- ✅ Border radius:
8px
- ✅ Max-width container:
1000px
🎯 Reglas de Oro
Siempre usar:
- Verde
#5cb85c para elementos principales
- Borde verde de 3px bajo el H1
- Container de max-width
1000px
- Sombras suaves:
0 1px 3px rgba(0,0,0,0.05)
- Footer estándar en todas las páginas
Nunca:
- Inventar colores fuera de la paleta
- Cambiar la fuente o tamaños sin justificación
- Ignorar el espaciado estándar
- Olvidar el responsive design
📋 Documentación Completa
Para directrices completas, ejemplos de código y componentes adicionales, consultar:
/root/clawd/docs-mercasist/DIRECTRICES-DISENO.md