Guía de estilos
Una identidad consistente. Una experiencia que convierte.
Las reglas visuales y de interacción del sitio, para que cada página nueva y cada programa se vean y funcionen igual.
01Paleta institucional
#0D2B52Estructura y autoridad#F7F7F7Fondo y respiración#1BA3B6Identidad e interacción#D4A437Énfasis e identidad#5A6772Contenido secundarioComplementos
#276DDF#15AD64#FF582BTeal para interacción. Dorado para destacar. Coral, verde y azul solo en usos justificados: el explorador DISC y las experiencias vivenciales.
Variantes de teal
#1BA3B6Identidad y acentos sin texto#087F8CBotones con texto blanco#127A89Enlaces sobre fondos claros#A9DEE5Tarjetas con texto marino02Contraste WCAG AA
Texto normal: mínimo 4.5:1. Valores calculados con la fórmula de luminancia relativa de WCAG 2.1.
03Tipografía
Texto base de 16 px con interlineado 1.65. Titulares en Bricolage Grotesque de 700 a 750. Etiquetas en Montserrat 600, mayúsculas con espaciado amplio. Las tres familias se cargan desde Google Fonts con display=swap y solo los pesos usados.
04Botones y estados
Teal. Inicio, Soluciones, Nuestro enfoque y Nosotros: iniciar una conversación.
Dorado. Programas, fichas, Maxwell y DISC: pedir alcance e inversión.
Marino. Contacto: enviar el formulario.
Hover: el botón sube 2 px y oscurece su fondo. Foco: contorno de 3 px en teal oscuro sobre fondos claros y en dorado sobre fondos marino. Altura mínima táctil de 44 a 48 px. Transiciones de 150 a 250 ms, sin animaciones invasivas, y sin movimiento cuando el sistema pide reducirlo.
05Componentes
06Fotografía
Las fotografías actuales se mantienen de forma provisional. En una fase posterior se revisarán retratos del equipo, imágenes de talleres y conferencias, iluminación, encuadre, calidad, autenticidad y permisos de publicación. No se harán sustituciones sin aprobación.
Formato: WebP, 1600 px de lado largo y una variante de 800 px (srcset). Nombres descriptivos en minúsculas y con guiones. Cada archivo incluye título, descripción, autor y derechos en EXIF y XMP; se retiran GPS y datos del dispositivo.
07Pendientes antes de publicar
| Pendiente | Qué falta |
|---|---|
| Envío real del formulario | Definir el servicio (Formspree, Netlify, backend propio) y escribir su URL en el atributo data-endpoint del formulario. Mientras tanto se abre un correo prellenado. |
| Aviso de privacidad definitivo | Completar razón social, domicilio y proveedores; revisión legal. La página sigue marcada noindex. |
| Analítica | Los clics en botones y envíos ya publican eventos en window.dataLayer; falta conectar Google Tag Manager o la herramienta elegida. |
| Fotografías | Revisar permisos de publicación de personas y logotipos visibles, y reconstruir el banco fotográfico en la fase posterior acordada. |
| Licencias Maxwell y DISC | Validar títulos, materiales, modalidades y uso de marca antes de comercializar. |
| Perfil de Marely Silman Meza | Publicar formación, especialidad y experiencia cuando estén confirmadas. |
| Logotipo vectorial | El isotipo disponible mide 292 px de ancho; sustituir por SVG o AI cuando exista. |
| Pruebas con lector de pantalla | Probar con NVDA, JAWS o VoiceOver antes de la publicación. |
08Mapa del sitio
- Solucionesretos y públicos · cada uno enlaza a Programas ya filtrado
- Programasbúsqueda, filtros y carga progresiva
- Maxwell Leadership11 programas
- Línea DISCexplorador y 6 programas
- Fichas de programa32 páginas con la misma plantilla y URL propia
- Nuestro enfoquemodelo integral y metodología
- Nosotrosidentidad aprobada y equipo
- Contactoconversación y solicitud
- Aviso de privacidadborrador pendiente de validación legal
- Experiencias y casosfase posterior