Información conectada.
Decisiones con contexto.
Real Estate Intelligence Platform
Identidad, estrategia y fundamentos visuales para una plataforma inmobiliaria con personalidad propia.
Explorar los logos ↓
Cómo utilizar este sistema
Una identidad consolidada
Terralis es el nombre del producto. Real Estate Intelligence Platform define su categoría. Esta edición integra las variantes originales verticales, horizontales e iconos para fondos claros y oscuros.
Qué significa inteligencia
Conectar información autorizada, darle contexto y facilitar acciones. El profesional conserva el criterio comercial. La marca no implica pronósticos o resultados que aún no estén implementados.
| Contenido | Uso |
|---|---|
| Estrategia y posicionamiento | Comprender la promesa, personalidad y arquitectura de marca. |
| Identidad visual | Elegir el logo, la variante, los colores y la jerarquía tipográfica. |
| Fundamentos digitales | Aplicar principios de composición, accesibilidad y personalización. |
| Archivos originales | Consultar y descargar los PNG incorporados en este documento. |
Este archivo funciona de manera autónoma: incluye imágenes, estilos y navegación. Los fundamentos de producto quedan documentados como referencia para el desarrollo posterior del UI Kit.
01 / Visión de marca
organizado y conectado.
Información para actuar.
Terralis integra inventario, fotografías, marca, conversaciones y seguimiento comercial. La inteligencia nace de su relación: una consulta conserva la propiedad de interés, el contexto de atención y la próxima acción.
Diseñado para agentes independientes e inmobiliarias en crecimiento. La experiencia muestra lo que se sabe, lo que falta por verificar y lo que el profesional puede hacer a continuación.
02 / Estrategia y posicionamiento
| Dimensión | Definición |
|---|---|
| Nombre / categoría | Terralis — Real Estate Intelligence Platform. |
| Problema | Inventario, contenido y conversaciones desconectados dificultan el seguimiento. |
| Promesa | Información inmobiliaria conectada para gestionar con mayor claridad y continuidad. |
| Mecanismo | Un registro enlaza fotografía, ficha publicada, consulta, responsable y siguiente acción. |
| Público | Agentes independientes, equipos y PYMES inmobiliarias. |
| Diferenciación propuesta | Inteligencia contextual integrada en el trabajo cotidiano. |
Capacidades definidas
PMS, Media Studio, CRM, agente IA, calendario, CMS y configuración multi-Tenant. Su integración debe validarse en implementación.
Evolución por validar
Analítica comparativa, recomendaciones, priorización de oportunidades y pronósticos son posibles extensiones, no capacidades disponibles por el solo cambio de nombre.
03 / Personalidad y tono de voz
Cercana y precisa
Habla de propiedades, fotografías, clientes y visitas. Usa “tu espacio de trabajo” en interfaz; reserva “Tenant” para documentación técnica. Explica el resultado de cada acción.
Serena y útil
Prefiere frases cortas, verbos concretos y errores recuperables. La tecnología acompaña la operación sin exigir al usuario entender la infraestructura.
| Contexto | Texto recomendado | Evitar |
|---|---|---|
| Éxito | Borrador guardado. Puedes completarlo después. | Operación ejecutada exitosamente. |
| Error | No pudimos procesar 2 fotos. Reintenta con esos archivos. | Error del pipeline. |
| Publicación | Publicar propiedad | Activar entidad |
| Estado vacío | Comienza con tus fotografías. | No existen registros. |
| IA | Voy a consultar este detalle con el equipo. | Asumir datos que la ficha no contiene. |
Lenguaje de inteligencia: separar “dato confirmado”, “información pendiente” y “sugerencia”. Explicar de dónde procede una recomendación y permitir continuar con atención humana.
04 / Arquitectura de marca
| Marca | Papel | Dónde aparece |
|---|---|---|
| Brutals.Agency | Creadora e implementadora | Documentación, ayuda y firma secundaria en el acceso. |
| Terralis | Plataforma de inteligencia inmobiliaria | Navegación, acceso y comunicaciones de producto. |
| Marca del Tenant | Identidad comercial | Sitio, dominio, fotografías y comunicaciones con prospectos. |
Firma y descriptor
En portada: “Terralis” y debajo “Real Estate Intelligence Platform”. En interfaces compactas: Terralis o isotipo. “by Brutals.Agency” aparece separado y subordinado, fuera del área de seguridad.
Autonomía de producto
La identidad visual procede de los logos y la lámina adjuntos. Brutals firma la creación sin imponer su paleta. En esta edición el nombre visible del producto es Terralis, sin sufijos.
05 / Concepto creativo seleccionado
Inteligencia que acompaña.
Los tres módulos permiten una lectura de conversación, conexión y crecimiento. Su organización construye una T: el signo reúne personas, información y territorio.
Esta interpretación desarrolla el logo suministrado y su categoría. La dirección está seleccionada; las aplicaciones mantienen la geometría y personalidad del signo.
| Criterio | Decisión |
|---|---|
| Identidad | Utilizar las variantes finales suministradas como referencia visual. |
| Diferenciación | Signo modular y conversacional compatible con una plataforma tecnológica. |
| Permanencia | La inteligencia acompaña al profesional y mantiene su capacidad de decisión. |
06 / Construcción y proporción
Escalado uniforme. Mantener las proporciones del PNG correspondiente. No estirar, comprimir ni alterar el espacio entre el símbolo, el nombre y el descriptor.
Área de seguridad propuesta. X equivale a ¼ del ancho visible del isotipo. Reservar al menos X libre alrededor del contenido visible; en versiones con fondo integrado, tener en cuenta el margen que ya incluye el archivo.
Jerarquía. Terralis es el nombre. Real Estate Intelligence Platform es el descriptor. Respetar su redacción y composición original.
Elección del archivo. Las versiones condensadas permiten insertar el logo en composiciones propias. Las extendidas incorporan un lienzo y márgenes definidos.
07 / Variantes, mínimos y activos
Icono de aplicación
Para favicon, avatar y acceso a la aplicación. Contenedor original incluido.
Logo vertical · compacto
Composición vertical con descriptor; útil en portadas y piezas institucionales.
Logo vertical · extendido
Composición completa con fondo y margen propios. Mantener el lienzo.
Logo horizontal · condensado
Formato apaisado con transparencia; para cabeceras, firmas y bandas de marca.
Logo horizontal · extendido
Formato apaisado con fondo integrado y aire alrededor del lockup.
| Aplicación | Referencia mínima propuesta | Regla |
|---|---|---|
| Isotipo | 16 px; preferir 24 px | Validar lectura a escala real. |
| Icono con contenedor | 48 px | Usar la variante adecuada al entorno. |
| Logo con descriptor | 300 px de ancho / 55 mm impreso | Aumentar si el descriptor no resulta legible. |
| Espacio insuficiente | Icono original | Elegir otro formato antes de comprimir el logo. |
Las diez variantes se reproducen desde los archivos adjuntos, sin filtros, recoloreados ni reconstrucción tipográfica. LIGHT está preparada para fondo claro; DARK para fondo oscuro. La versión oscura es una aplicación cromática de marca, no un monocromo.
08 / Paleta cromática maestra
| Color | HEX | RGB | Rol propuesto |
|---|---|---|---|
| Coral | #E85D45 | 232, 93, 69 | Acción · Conversación |
| Oliva | #52634A | 82, 99, 74 | Arraigo · Patrimonio |
| Verde fresco | #85BA50 | 133, 186, 80 | Crecimiento · Potencial |
| Azul | #426F86 | 66, 111, 134 | Información · Proyección |
| Verde azulado | #2D827A | 45, 130, 122 | Conexión · Confianza |
| Carbón | #202725 | 32, 39, 37 | Estructura · Permanencia |
| Arena | #D8D1C5 | 216, 209, 197 | Territorio · Calidez |
| Piedra | #F5F2EC | 245, 242, 236 | Claridad · Fondo |
| Gris auxiliar | #7F7F7F | 127, 127, 127 | Descriptor del logo |
Los ocho colores se corresponden con la paleta final adjunta. El gris auxiliar procede del descriptor de las versiones claras. La paleta no se utiliza en partes iguales: piedra, blanco y carbón sostienen la interfaz. Los acentos ayudan a orientarse.
09 / Tipografía
0123456789
Familia UI: Arial / Helvetica / sans-serif.
Datos técnicos: ui-monospace / monospace.
El wordmark se reproduce desde los archivos originales suministrados. No sustituirlo por texto escrito con una fuente aproximada. La familia de interfaz es independiente del arte del logo.
La UI utiliza una pila de sistema reproducible sin descargas externas. Esta es una selección nueva para la interfaz, no una identificación de la fuente del logo.
Usar cifras tabulares en precios, métricas y tablas cuando la familia lo permita. Reservar mayúsculas para etiquetas breves.
| Rol | Tamaño / interlínea | Peso |
|---|---|---|
| Display | 48 / 52 px | 700 |
| H1 · H2 · H3 | 32/40 · 24/32 · 20/28 px | 700 |
| H4 · H5 · H6 | 18/26 · 16/24 · 14/20 px | 700 |
| Body / Formularios | 16 / 24 px | 400 |
| Tablas / Botones / Labels | 14 / 20 px; preferir 16 px en captura de datos | 400 / 700 |
| Caption / IDs | 12 / 18 px | 400 |
10 / Sistema gráfico
Retícula
Desktop: 12 columnas, margen 32 px, gutter 24 px. Sidebar 230 px. Tablet: 8 columnas; móvil: 4 columnas y margen 16 px. En pantallas pequeñas, convertir la navegación lateral en un acceso compacto.
Espaciado y forma
Escala: 4, 8, 12, 16, 24, 32, 48 y 64 px. Controles: radio 8 px. Cards: 16 px. Modales: 24 px. Pills: radio completo. Evitar redondear cada elemento como el isotipo.
Bordes: 1 px para separación; foco: 3 px más 3 px de separación. Sombra solo en elementos flotantes: 0 8px 24px rgba(32,39,37,.10). El patrón gráfico puede usar módulos redondeados a baja densidad en portadas, nunca detrás de tablas.
Extensión cromática: oliva para comunicación patrimonial; azul para información y análisis; arena para bloques editoriales secundarios. Estas asociaciones son de marca, no nuevos estados operativos.
11 / Iconografía
Construir una familia lineal sobre una retícula de 24 × 24 px, trazo 1,75 px y remates redondos. Caja óptica aproximada de 20 × 20 px. Mantener pesos y alineación idénticos en toda la navegación.
| Módulo | Metáfora recomendada | Uso |
|---|---|---|
| Panel de control | Cuadrícula de cuatro módulos | Vista general |
| Propiedades / Borradores | Ficha / Ficha con lápiz | Inventario / información pendiente |
| Media Studio | Imagen con controles | Preparación de fotografías |
| CRM / Agente IA | Personas / Conversación | Relación comercial / asistencia |
| Calendario / Sitio web | Calendario / Ventana | Visitas / contenido público |
| Configuración | Controles deslizantes | Preferencias y conexiones |
Accesibilidad
Acompañar el icono con una etiqueta cuando no sea universal. Botones de solo icono requieren un nombre accesible. El color no debe ser el único indicador de selección.
Estado de esta entrega
La familia de iconos de interfaz se desarrollará en el UI Kit siguiendo estas especificaciones. El icono de marca se mantiene separado de la iconografía funcional.
12 / Fotografía e imagen
Dirección de imagen
Fotografía inmobiliaria clara y veraz: verticales controladas, luz natural, balance neutro y detalle suficiente para evaluar el espacio. Mostrar interiores, exteriores, entorno y amenidades existentes.
Preparación
Mantener originales, generar derivados y usar correcciones conservadoras. No añadir vistas, mobiliario, arquitectura ni atributos inexistentes sin separar y etiquetar explícitamente una visualización.
| Contexto | Tratamiento |
|---|---|
| Cards de propiedades | Relación 4:3; object-fit: cover; recorte revisado por el usuario. |
| Galería de detalle | Imagen completa disponible; navegación accesible. |
| Media Studio | Antes / después con encuadre y escala comparables. |
| Marca de agua | Logo del Tenant con margen respecto al borde; revisar legibilidad. |
| Referencias de fotografía | Seleccionar imágenes autorizadas y representativas; no atribuir resultados de optimización sin una comparación real. |
Evitar imágenes de stock que hagan parecer que una propiedad demo es un inmueble comercial real.
13 / Componentes del producto
| Familia | Especificación | Estados |
|---|---|---|
| Botones | 44 px de alto mínimo; primario verde, secundario neutro, coral puntual. | Default, hover, focus, active, disabled, loading. |
| Inputs / Selects | Etiqueta persistente; ayuda y error asociados; borde de control. | Vacío, lleno, foco, inválido, deshabilitado. |
| Checkbox / Switch | Selección explícita con etiqueta; switch solo para cambios inmediatos. | On/off, foco, disabled. |
| Badges / Status pills | Texto legible + color semántico; no depender del color. | Borrador, Listo, Publicado, Archivado. |
| Cards / Tables | Título, contenido, metadatos y acción contextual. | Carga, vacío, poblado, error recuperable. |
| Tabs / Sidebar | Un elemento activo, orden estable y nombre accesible. | Default, hover, seleccionado, foco. |
| Modal / Toast | Modal con foco contenido; toast anunciado sin mover foco. | Confirmación, éxito, error. |
| Search / Pagination | Búsqueda por nombre o ID; conteo y página visibles. | Sin resultados, buscando, resultados. |
Hover: fondo muted en controles neutros. Active: borde de 2 px sin cambiar tamaño exterior. Loading: conservar el ancho y anunciar aria-busy. Disabled: no accionable; explicar los requisitos faltantes.
14 / Light Mode y Dark Mode
| Token semántico | Light | Dark |
|---|---|---|
| background | #F5F2EC | #141A18 |
| surface | #FFFFFF | #202725 |
| surface-elevated | #FFFFFF | #29332E |
| text-primary | #202725 | #F5F2EC |
| text-secondary | #58635E | #B4C0B9 |
| border | #D7DED9 | #405047 |
| control-border | #7A8780 | #82948A |
| primary | #236D66 | #8CD3C8 |
| on-primary | #FFFFFF | #142822 |
| accent | #E85D45 | #F58A73 |
| success | #28613C | #A6D77B |
| warning | #825400 | #F0CA7A |
| error | #AE342A | #FFACA0 |
| info | #236D66 | #8CD3C8 |
Dark Mode conserva las fotografías y el isotipo. Cambia superficies, tipografía y semántica. Usar los archivos DARK en superficies oscuras y LIGHT en superficies claras; las versiones extendidas ya incorporan el fondo correspondiente. Los logos oscuros del Tenant requieren variante clara o un contenedor claro.
Los neutrales dominan la superficie. Coral destaca acciones puntuales; verde fresco se reserva para marca y acentos, no para sustituir todos los estados de éxito.
15 / Aplicación en Terralis
| Módulo | Acción principal | Regla funcional |
|---|---|---|
| Panel de control | Nueva propiedad / Media Studio | Priorizar pendientes y actividad reciente. |
| Propiedades | Nueva propiedad | Estados visibles y filtros claros. |
| Borradores | Continuar editando | Privados hasta publicación explícita. |
| Media Studio | Crear borrador / Descargar ZIP | Revisión previa; fotografías asociadas al Tenant. |
| CRM | Gestionar próximo contacto | Estado, origen, responsable y próxima acción. |
| Agente IA | Revisar y derivar conversaciones | Consultar inventario publicado y fuentes autorizadas. |
| Calendario | Nueva cita | Relacionar lead, propiedad y zona horaria. |
| Sitio web / CMS | Guardar borrador / Publicar cambios | Editar secciones admitidas por el template. |
| Configuración | Guardar cambios | Dominio, marca, correo, SEO, usuarios e integraciones. |
Todas las pantallas comparten navegación, encabezado y jerarquía. Estas reglas serán la referencia para desarrollar las pantallas y sus estados en el UI Kit.
Inteligencia visible: conservar origen, estado y fecha del dato. Separar recomendaciones de hechos publicados. Las acciones de publicación, contacto y asignación requieren control del profesional.
16 / Media Studio y marca de agua
→ Completar ficha → Publicar
Marca comercial
La fotografía utiliza el logo del Tenant. Terralis identifica la herramienta; no se impone como sello visible sobre las propiedades. El tenant_id relaciona archivos y configuración internamente.
Preset inicial propuesto
Lado mayor 1920 px, salida WebP o JPEG, margen 3% del lado corto, ancho de logo 14% del ancho de foto y opacidad inicial 55%. Son valores ajustables: revisar cada conjunto.
| Etapa | Control del usuario |
|---|---|
| Carga | Seleccionar 15–25 fotos; validar tipo, dimensiones y límites. |
| Optimización | Conservar original; aplicar exposición/color y compresión conservadoras. |
| Revisión | Comparar resultados; ajustar posición, tamaño y opacidad. |
| Salida | Descargar ZIP o crear borrador con galería ordenable. |
| Publicación | Validar ficha completa y solicitar confirmación explícita. |
17 / White-label y personalización
| Superficie | Terralis | Tenant |
|---|---|---|
| Login | Producto y firma creadora secundaria | Nombre del espacio de trabajo y logo si corresponde. |
| Sidebar / Dashboard | Identidad y estructura constantes | Identificador del espacio; avatar y usuarios. |
| Sitio público | Presencia opcional según contrato | Logo, favicon, colores, contenidos y dominio. |
| Fotografías exportadas | Sin marca de agua obligatoria de Terralis | Logo comercial según configuración. |
| Reportes comerciales | Atribución opcional y discreta | Identidad principal del cliente. |
| Correos operativos | Terralis en avisos de cuenta y seguridad | Marca propia en comunicaciones comerciales. |
Regla de personalización
El color del Tenant se limita a tokens tenant-* del sitio y sus materiales. No debe sobrescribir la semántica de error, éxito o foco del sistema.
Contraste y variantes
Antes de aplicar un color personalizado, validar su contraste y elegir una pareja de texto adecuada. Solicitar versión inversa del logo o usar fondo protector.
18 / Aplicaciones comerciales
Información conectada.
Decisiones con contexto.
Real Estate Intelligence Platform
by Brutals.AgencyTu negocio inmobiliario,
organizado y conectado.
Más territorio. Más posibilidades.
El descriptor identifica la categoría. “Información conectada. Decisiones con contexto.” funciona como mensaje institucional. “Tu negocio inmobiliario, organizado y conectado.” explica el beneficio comercial. Usar un mensaje principal por pieza.
Los materiales comerciales deben describir funcionalidades disponibles y alcances contratados. No asociar Intelligence a predicciones infalibles, valoración certificada ni ventas garantizadas.
19 / Accesibilidad y legibilidad
| Tema | Pareja evaluada | Contraste | Resultado |
|---|---|---|---|
| light | text-primary / surface | 15.24:1 | AA texto normal |
| light | text-secondary / surface | 6.25:1 | AA texto normal |
| light | on-primary / primary | 6.09:1 | AA texto normal |
| light | on-accent / accent | 4.41:1 | Revisar |
| light | error / surface | 6.32:1 | AA texto normal |
| dark | text-primary / surface | 13.64:1 | AA texto normal |
| dark | text-secondary / surface | 8.11:1 | AA texto normal |
| dark | on-primary / primary | 9.04:1 | AA texto normal |
| dark | on-accent / accent | 6.36:1 | AA texto normal |
| dark | error / surface | 8.46:1 | AA texto normal |
Cálculo sRGB de los tokens de esta edición. WCAG exige al menos 4,5:1 para texto normal y 3:1 para texto grande. Estas comprobaciones de color no equivalen a una auditoría completa de accesibilidad.
Objetivo de controles: 44 × 44 px; foco visible; navegación por teclado; etiquetas persistentes; errores explicados en texto; zoom sin pérdida de contenido; avisos de guardado con role="status". Evitar interacción exclusivamente por arrastre o color.
Referencia: W3C · Understanding SC 1.4.3 — Contrast (Minimum)
20 / Design tokens
Tres niveles
Primitivos: brand-coral, brand-teal, brand-green, brand-olive, brand-blue, brand-sand y neutrales originales.
Semánticos: background, primary, error, text-primary.
Componentes: radius-control, radius-card y reglas de estado.
Archivos de implementación
Los tokens semánticos están documentados en este HTML y definidos en su CSS. La tabla Light/Dark contiene la referencia de valores; la paleta conserva los primitivos de marca. El UI Kit desarrollará sus componentes a partir de esta base.
:root {
--brand-coral: #E85D45;
--primary: #236D66;
--on-primary: #FFFFFF;
--background: #F5F2EC;
}
[data-theme="dark"] {
--primary: #8CD3C8;
--on-primary: #142822;
--background: #141A18;
}
.button-primary {
background: var(--primary);
color: var(--on-primary);
}Mantener la elección de tema a nivel raíz. Persistir preferencia por usuario en producción y respetar prefers-color-scheme cuando aún no exista una elección explícita.
21 / Usos incorrectos
| Evitar | Por qué | Aplicación correcta |
|---|---|---|
| Estirar o comprimir el logo | Altera su proporción. | Escalado uniforme. |
| Reescribir Terralis con una fuente aproximada | Pierde el dibujo original. | Usar el SVG del wordmark. |
| Cambiar colores módulo por módulo | Fragmenta la identidad. | Usar los primitivos maestros. |
| Añadir sombra, relieve o degradado al signo | Reduce su reproducibilidad. | Versiones planas. |
| Texto blanco sobre coral maestro | No alcanza 4,5:1 para texto normal. | Carbón sobre coral o botón verde accesible. |
| Texto oscuro sobre fondo oscuro | Reduce legibilidad. | Variante DARK original. |
| Usar Terralis como sello obligatorio en fotos | Compite con el Tenant. | Logo comercial del Tenant. |
| Reproducir el descriptor demasiado pequeño | No se puede leer. | Wordmark o isotipo sin descriptor. |
| Introducir colores ajenos a la paleta actual | Debilita la continuidad visual. | Usar los nueve primitivos documentados. |
No eliminar la cola conversacional, mover módulos ni redondear nuevamente los trazados originales.
22 / Maestros y guía de implementación
| Familia | Archivos incluidos |
|---|---|
| Iconos | LIGHT y DARK, con contenedor original. |
| Verticales compactos | LIGHT y DARK, con descriptor. |
| Verticales extendidos | LIGHT y DARK, con fondo integrado. |
| Horizontales condensados | LIGHT y DARK, con transparencia. |
| Horizontales extendidos | LIGHT y DARK, con fondo integrado. |
| Paleta | Referencia cromática original de ocho colores. |
Originales integrados. Los once PNG están incrustados en este documento y se pueden descargar desde sus respectivas secciones. Se preservan sus bytes, dimensiones, colores y transparencia. La colección de esta edición está en formato PNG.
Implementación. Usar dimensiones explícitas y object-fit: contain. Elegir la variante según el fondo y evitar filtros que alteren los colores. Añadir el nombre accesible “Terralis” y usar el icono correspondiente como favicon.
Gobernanza. Una actualización de identidad debe reemplazar la referencia aprobada y sus tokens de forma consistente. Mantener la personalización del Tenant separada de los estados semánticos del sistema. Conservar su marca como protagonista en propiedades, fotografías y canales públicos.