Precisión visible.
La jerarquía, las alineaciones y los estados explican cómo funciona el servicio. La información concreta sostiene la confianza.
Todo conectado.
Bien cuidado.
Una identidad para la tecnología que sostiene un negocio. Precisa en lo que construye. Cercana en cómo lo cuida.
El criterioLa complejidad está dentro.
La complejidad está dentro.
La claridad, fuera.
Replanta reúne hosting, mantenimiento, integraciones y automatización. Su identidad debe hacer comprensible ese conjunto a quien dirige una web o un negocio, sin exigirle hablar como un técnico.
Cuidado tangible.
La cercanía aparece en el lenguaje, la lectura y la ayuda para decidir. El carácter tecnológico convive con un equipo reconocible.
Responsabilidad con pruebas.
El compromiso ambiental se expresa mediante alcance, metodología y evidencias. El brote identifica la marca; las afirmaciones necesitan respaldo.
La firmaUn brote.
Un brote.
Un nombre. Un punto.
El lettering original conserva sus curvas, con un espaciado óptico más compacto. El símbolo aporta crecimiento y continuidad. El punto final, pegado ópticamente a la «a», cierra la firma con un acento propio.
Respirar.
Área libre mínima: un cuarto de la altura visible del símbolo en cada lado. En cabeceras, ampliar el espacio según la densidad de navegación.
Conservar.
Utilizar el SVG completo. El punto final y el punto bajo el tallo tienen posiciones distintas y fijas. No recolocar, recomponer ni volver a escribir el nombre con Inter.
Reducir con criterio.
Firma horizontal desde 120 px de ancho; símbolo desde 24 px. Para 16–20 px, usar el dibujo óptico. Mantener proporciones, sin sombras ni contornos añadidos.
El colorLa base sostiene.
La base sostiene.
El acento orienta.
Los neutros oscuros dan continuidad. Un bosque profundo distingue el capítulo de integraciones. El mint se concentra en las decisiones y en los detalles que hacen reconocible a Replanta.
Base#0D1211
Continuidad
Continuidad
Secundario#151D1A
Pausa
Pausa
Superficie#1D2823
Profundidad
Profundidad
Bosque#153D30
Capítulo de marca
Capítulo de marca
Mint#93F1C9
Acción y firma
Acción y firma
Base y secundario se usan en áreas amplias. Superficie distingue controles y estados. Bosque aparece con intención editorial. Mint permanece escaso: selección activa, enlaces principales, el punto y un énfasis en la apertura.
| Función | Texto / fondo | Contraste |
|---|---|---|
| Lectura principal | #F2F5F1 / #0D1211 | 17.19:1 |
| Lectura secundaria | #ABB8AF / #0D1211 | 9.18:1 |
| Enlace Mint | #93F1C9 / #0D1211 | 14.09:1 |
| Botón Mint | #0C2B1E / #93F1C9 | 11.35:1 |
| Lectura clara | #14352A / #F6F8F5 | 12.51:1 |
| Botón en claro | #FFFFFF / #246247 | 7.21:1 |
Una base para crecer.
Texto principal #F2F5F1. Secundario #ABB8AF. Bordes #35423B. Los bordes estructuran; no sustituyen el foco ni la indicación de estado.
Conoce el servicioLa misma claridad.
Fondo #F6F8F5. Superficie #FFFFFF. Texto #14352A. Secundario #4D6558. Acción #246247 con texto blanco.
Conoce el servicioEl modo claro conserva la estructura y utiliza sus propias parejas de contraste. No se invierte el color de las imágenes. Teal #41999F se mantiene en el punto de la firma clara como herencia de marca; el amarillo queda fuera de la interfaz principal de esta edición.
La tipografíaUna voz tipográfica.
Una voz tipográfica.
Distintos ritmos.
Inter aporta continuidad a cabeceras, lectura, navegación y precios. La personalidad surge de la composición y del contraste entre pesos. IBM Plex Mono se reserva para datos técnicos breves.
Inter · 700
Tu web.
Todo conectado.
Bien cuidado.
Mayúsculas y minúsculas naturales.Espaciado −0,048 em · Interlineado 1,035
| Uso | Peso y tamaño | Criterio |
|---|---|---|
| Apertura | Inter 700 · 44–88 px | 38–62 px en móvil. Pocas líneas, idea concreta. |
| Sección | Inter 500 · 32–49 px | Interlineado 1,16. Un cambio de capítulo reconocible. |
| Tarjeta o servicio | Inter 500 · 22–33 px | Interlineado 1,25. Icono asociado al titular. |
| Texto | Inter 400 · 16–18 px | Interlineado 1,65–1,8. Artículos en 60–70 caracteres. |
| Navegación y controles | Inter 500–600 · 13–15 px | Etiquetas legibles y superficies de interacción amplias. |
| Dato técnico | IBM Plex Mono 400 · 12–14 px | Identificadores, campos y código. Uso puntual. |
Fuentes locales con font-display: swap y licencias incluidas. Sora y Barlow quedan fuera de la nueva jerarquía. El logotipo mantiene su lettering vectorial original.
La composiciónCada elemento
Cada elemento
tiene un trabajo.
Una idea por bloque. Un recorrido claro para entender, comparar y actuar. La home presenta el conjunto; cada servicio desarrolla su alcance, sus condiciones y sus evidencias.
Aplicación · AperturaTu web.
Tu web.
Todo conectado.
Bien cuidado.
Un mensaje. Un sistema visible. Una acción principal.
Aplicación de referencia
Ritmo.
Espaciado basado en 8 px. Secciones de 72–112 px en escritorio, según su contenido. Contenedor de lectura y márgenes coherentes; altura libre, sin forzar diapositivas.
Alineación.
Antetítulo en su propia línea. Icono, primera línea del titular y párrafo contiguo comparten arranque. En móvil, la lectura se apila manteniendo la relación entre símbolo y titular.
Jerarquía.
Una acción principal por decisión. El enlace secundario conserva otro peso. Los precios muestran importe, periodo y alcance; la interacción comienza en el elemento que actúa.
Phosphor Thin en SVG. Misma familia y cuadrícula de 256 unidades. Tamaños de 24–40 px según función; 34 px en la tarjeta móvil. Alineación óptica con el texto, sin cajas decorativas obligatorias. El escudo con asterisco identifica Replanta Care.
Imagen de marca.
Objetos modulares, materiales sobrios, transparencias contenidas y luz mint localizada. Las conexiones deben tener un origen y un destino comprensibles.
Ilustración funcional.
Un esquema ayuda a entender una relación o un proceso. La imagen de apertura aporta carácter; los controles reales permanecen en HTML y funcionan sin ella.
Selección.
Evitar circuitos de relleno, interfaces ficticias y motivos botánicos superpuestos. El brote sigue en la firma; el contenido explica el compromiso ambiental.
La interacciónEl movimiento
El movimiento
da continuidad.
El efecto más reconocible es la firma compartida: la cabecera y el footer se encuentran al llegar al cierre. El movimiento acompaña al recorrido de la persona y se invierte al volver.
Respuesta breve.
180 ms como referencia para estados. El cambio de color y la flecha responden a la misma acción. Un icono junto a un título permanece estable al pasar el cursor.
Recorrido nativo.
La ruleta conserva su comportamiento. Sin bloqueos ni tiempos de espera. Las anclas dejan espacio para la cabecera y el contenido determina la altura.
Control accesible.
Foco visible, enlaces identificables y tabs con teclado. Movimiento reducido conserva la navegación y evita el desplazamiento animado de la firma.
La misma firma hasta el cierre.
En el footer, logo y lema forman una unidad vertical. Las redes ocupan el extremo derecho. El encuentro se calcula sobre la geometría real de ambas firmas.
Información que se amplía a petición
Los detalles complementarios pueden desplegarse mediante controles nativos y teclado. La propuesta de valor, el precio y las condiciones esenciales deben estar disponibles sin depender de tooltips.
La vozHablar claro
Hablar claro
también es cuidar.
Dirigirse a quien tiene que tomar una decisión. Explicar el beneficio, concretar el servicio y delimitar su alcance. Una voz cercana que se hace cargo sin prometer de más.
«Publicar es el principio. Cuidarla es lo que sigue.»
Después, explicar actualizaciones, copias y seguimiento. La emoción abre; la información permite decidir.
«El pedido entra. El trabajo sigue.»
Después, mostrar qué datos viajan, cuándo se intercambian y cómo se revisan las incidencias.
«Energía documentada.»
Enlazar las evidencias y su cobertura. Distinguir electricidad, eficiencia y reforestación. No inferir neutralidad de carbono.
«¿Qué necesitas que funcione mejor?»
Invitar con una pregunta concreta. Mantener el mismo tono en formularios, mensajes de error y confirmaciones.
Producto y comunicaciónEl producto demuestra.
El producto demuestra.
La marca lo hace comprensible.
Todos los planes de alojamiento comparten el panel Cedro. Sauce, Roble y Cedro se distinguen por capacidad y nivel de documentación. Care incluye el alojamiento correspondiente: no se presentan como dos cuotas que sumar.
Interfaces reales.
El panel, la conexión con Cloudflare y las escenas de SAP Woo Suite o AI Chat explican el producto. Las capturas se anonimizan y los datos de ejemplo se identifican. No se convierten en resultados medidos de clientes.
Diagramas con propósito.
Conexión, continuidad e impacto tienen lenguajes distintos: recorridos, secuencias y capas. Vectores ligeros, trazos precisos y acento escaso. Sin plantas decorativas repetidas ni gráficas con cifras inventadas.
Mensajes demostrables.
Recursos concretos, alcance de copias y soporte, electricidad del centro de datos y estimaciones de emisiones por separado. Sin «ilimitado», «garantizado» ni afirmaciones de neutralidad de carbono por plantar árboles.
Planes actualizados ↗ · Guía de comunicación ↗ · Todos los recursos ↗
Recursos y aplicaciónUna referencia.
Una referencia.
Todo el sistema.
Los originales vectoriales, la paleta por funciones y las fuentes viajan juntos. Esta edición toma la web de Replanta como referencia para la adaptación del resto de páginas.
Kit de identidad
Firmas seleccionadas, símbolos, fuentes con sus licencias, tokens JSON y CSS, esta guía en HTML y una muestra visual. El kit excluye las exploraciones anteriores.
Los recursos están incluidos en las carpetas assets/brand y assets/icons de este kit.
La implementación completa del tema y sus integraciones se distribuyen por separado. Los tokens describen la referencia de la home; no implican que todas las páginas hayan sido adaptadas.
Servicios.
Una apertura propia, alcance concreto, demostración cuando ayuda, planes y preguntas frecuentes. Compartir componentes sin repetir siempre la misma composición.
Lectura.
Blog y documentación priorizan el texto: extractos útiles, títulos legibles, columna contenida y navegación contextual. La ornamentación cede espacio a la comprensión.
Herramientas.
Dominios, calculadora, sello y contacto ponen la tarea en primer plano. Campos, estados y resultados tienen prioridad sobre el impacto visual. Explicar siempre qué ocurre después.
Replanta · Identidad y experiencia · Edición 1.2Actualizado el 20 de octubre de 2026