Sistema de diseño¿Qué estaba frenando el crecimiento?
Accesibilidad
Diseño que todos puedan usar.
Checklist mínimo para llevar estos diseños a producción. Usar WCAG 2.2 AA como objetivo de implementación y verificar cada pantalla; las muestras del kit no sustituyen una auditoría formal.
| Elemento | Criterio recomendado |
|---|---|
| Texto normal | Contraste mínimo 4.5:1 |
| Texto grande | Contraste mínimo 3:1 |
| Controles y bordes funcionales | Contraste no textual de al menos 3:1 donde corresponda |
| Foco | Visible y perceptible con teclado |
| Formularios | Etiqueta persistente, errores explicados y mensajes de confirmación |
| Imágenes | Texto alternativo útil; decorativas sin anuncio redundante |
| Movimiento | Respetar la preferencia de movimiento reducido del usuario |
Ejemplo de contraste
Texto blanco sobre Deep InkAlternativa con buen contraste para titulares.
Texto blanco sobre Grows GreenNo usar esta combinación para texto informativo; el contraste es insuficiente.
En botones verdes preferir texto oscuro (#1D252D). Comprobar también Slate, Sage y Soft Mint según el tamaño del texto y el contexto. Evitar depender solo del color para comunicar estados.
Gobernanza del sistema
Oficial · manual / archivos aportadosPropuesto · requiere validaciónVersión digital 1.0 · borrador · noviembre 2026
1. SolicitudDocumentar el cambio y su caso de uso.
2. RevisiónValidar consistencia de marca, accesibilidad y desarrollo.
3. PublicaciónRegistrar versión, responsable y fecha.
Aprobación sugerida: Growth lidera identidad y tono; Tecnología valida componentes y accesibilidad; la dirección valida nuevas extensiones de marca. Los responsables son una propuesta de proceso, no una asignación ya aprobada.
Implementación y calidad
De la guía a producción.
Recursos para que Growth, Diseño y Tecnología trabajen con los mismos criterios. Los ejemplos son demostrativos y deben validarse antes de usarlos con usuarios reales.
Desarrollo reutilizable
Tokens y componentes.
Utiliza las mismas decisiones visuales entre páginas web, dashboards y presentaciones. Los valores oficiales se distinguen de las extensiones sugeridas.
COLOR PRINCIPAL
--grows-green: #26D07C;TEXTO PRINCIPAL
--grows-ink: #1D252D;TIPOGRAFÍA
--font-brandSpace GroteskESPACIADO BASE
--space-4: 1rem;16 px** Medida referencial con tamaño raíz de 16 px. Los tokens de componentes (foco, bordes y radios) representan una propuesta de implementación. Revisa contrastes y estados antes de publicar.
Vista responsive de ejemplo
Selecciona una vista para probar una composición de referencia. No reproduce el sitio grows.pro.
La vista previa es una referencia de estilo. La plantilla completa se incluye en el paquete junto con sus tokens CSS.
Recursos para desarrollo
Design tokens
Colores, espaciados, tipografía y radios, en CSS y JSON. Las extensiones propuestas están etiquetadas.
Descargar CSS ↓ Descargar JSON ↓Plantilla HTML
Hero, botón, formulario con etiquetas y ejemplo de adaptación móvil. No conecta con CRM ni envía información.
Descargar HTML ↓Checklist previo a publicar
Esta lista es interactiva solo durante la sesión y no guarda ni certifica aprobaciones.
Estado y responsables
Oficial: manual, logos y favicons aportadosPropuesto: UI, paleta ampliada, iconos y plantillasVersión del portal: 1.46 · documentación evolutiva
Flujo sugerido, aún sin aprobación: Growth revisa identidad y contenido; Tecnología verifica accesibilidad y funcionamiento; Dirección autoriza nuevas extensiones de marca.
Narrativa de marca
Historias que convierten claridad en acción.
Un marco para explicar qué cambia gracias a Grows, sin recurrir a frases grandilocuentes ni repetir nuestro manifiesto visual.
Estructura narrativa
Del reto al resultado.
En cada historia, explica primero el problema de negocio, después qué se ordenó, cómo se actuó y qué resultado se obtuvo. El resultado debe ser real y verificable; cuando no hay datos, describe el beneficio esperado sin presentarlo como un logro.
¿Qué información o proceso había que organizar?
¿Qué hicimos diferente y con quién?
¿Qué cambió y cómo lo demostramos?
Llevado a la práctica
Una idea, distintos formatos.
Ejemplos de tono y estructura; no son testimonios ni resultados atribuidos a clientes.
Sitio web · propuesta de valorBreve
Crecer no debería significar más complejidad.
Conectamos procesos, datos y equipos para que cada decisión tenga más contexto y cada esfuerzo avance en la misma dirección.
Usar en heroes y páginas de soluciones. Un mensaje central y un CTA concreto.Presentación · aperturaEjecutivo
La tecnología sola no transforma una organización.
La transformación ocurre cuando las personas entienden el objetivo, los procesos acompañan y los datos ayudan a decidir. Ahí comienza nuestro trabajo.
Usar para abrir una conversación estratégica, sin saturarla de funcionalidades.Caso de éxito · estructuraEvidencia
Del desafío a un cambio comprobable.
Situación inicial → decisión tomada → solución implementada → resultado medido y validado por el cliente.
Publicar indicadores, citas y marcas únicamente cuando estén verificados y autorizados.Voz de Grows
Expertos, sin sonar complicados.
Hablar desde el valor que generamos, no desde una lista de herramientas. Mantener frases claras, cercanía profesional y una acción concreta para el lector.
Evitar
“Revolucionamos el ecosistema empresarial con soluciones disruptivas de última generación”.
Preferir
“Ayudamos a que tus equipos trabajen mejor conectados y tomen decisiones con información confiable”.
Aplicación del tono
Una idea. Tres maneras de contarla.
Selecciona el canal para ver cómo un mensaje cambia de formato sin perder la esencia de Grows.
Propuesta web
Crecer con claridad es crecer mejor.
Conectamos datos, procesos y personas para que los equipos tomen mejores decisiones y conviertan la tecnología en resultados.
¿Y el movimiento?
La animación debe reforzar la lectura: revelar una idea, mostrar una relación o confirmar una acción. Para los principios de movimiento consulta Movimiento con intención; aquí nos enfocamos en la historia que contamos.