← aborrasdesign.com
Case study · Rebranding · SaaS PropTech + IA

El mismo motor. Otra credibilidad.

De una UI «gaming» a un sistema editorial premium — 12+ páginas, 3 motores de IA, 5 correos y un brand book invocable por IA. Con una sola restricción: solo podía tocar el CSS.

RolDirección visual + CSS Duración5 jornadas StackStreamlit · CSS · Email HTML ClienteProject Synapse ↗︎
Desplázate
01
01 · El reto

El producto era sofisticado.
Su piel decía lo contrario.

Tres motores de IA generando dosieres de valoración para inversores inmobiliarios — vestidos de videojuego: neón, glows, emojis y copy bélico. Un inversor que aterriza en una pantalla que grita no le confía su capital.

ORBITAL COMMAND ARSENAL TÁCTICO KILL LIST ⚡ MUNICIONES

El correo de bienvenida salía desde sniper@ con un águila en el asunto — y acababa en spam. Y el primer acceso a la plataforma no dejaba claro por dónde empezar: había que ganar claridad en ese momento inicial.

02
02 · La transformación

Banca privada,
no sala de mando.

La dirección «Atelier / Editorial Noir»: obsidiana cálida, oro como único acento, serif editorial. El principio que lo gobierna todo — la contención es el lujo.

Antes Después
ORBITAL COMMANDv3.1 ◉ SYSTEM ACTIVE // 250 CR
INTELLIGENCE UNIT // DOSSIER GENERATOR
⚡ Forjar dossier
Synapse En línea · Saldo: 250 CR
Dosier Elite
Generar dosier
Arrastra el divisor · la misma pantalla · el mismo motor · otro registro
03
03 · El sistema

Un sistema, no pantallas.

Cada color tiene un significado y cada nivel tipográfico una sola manera de hacerse. Donde antes competían cuatro neones, ahora hay una paleta que comunica.

Obsidiana
#0c0b09 · fondo
Ivory
#f4f0e6 · tinta
Oro
#c9ab73 · acento
Salvia
#9aae86 · positivo
Rosa
#caa0a0 · alerta
Cream
CTA primario
Fraunces · títulosDosier Elite
Inter · cuerpoLa inteligencia analiza el mercado y calcula la rentabilidad, sin estridencias.
JetBrains Mono · datos● En línea · Saldo: 250 CR
04
04 · El oficio

La restricción que lo hizo interesante.

Regla roja

Yo solo tocaba la pintura. Ni lógica Python, ni motores, ni plantillas. Cuando había que cambiar markup, lo especificaba — no lo tocaba. Por eso el rebranding es reversible, auditable y no ha roto nada.

iSelectores sin idioma

La plataforma vive en ES/PT/CA: selectores estructurales como [id^="1-"] que sobreviven al cambio de idioma.

iiCobertura hex + rgb()

Cada neutralización cubre #00f2ff y rgb(0, 242, 255) — si no, el neón reaparece.

iiiInyección opt-in

Cada página carga su *-atelier.css tras sus estilos. Reversible detrás de un flag.

ivEntrega por Pull Request

PRs al repositorio real, frontera CSS/markup limpia, auditoría final contra cada superficie pública.

05
05 · El registro verbal

El copy es diseño.

La mitad de la percepción «gaming» no era el cian: era el vocabulario. El tono dejó de disparar y empezó a asesorar.

MUNICIONEScréditos
ARSENAL TÁCTICOtus tres motores
KILL LISToportunidades destacadas
06
06 · El alcance

Toda la plataforma, una sola voz.

Del pre-login al último correo transaccional — visualizaciones de informe incluidas, diseñadas a mano en CSS/SVG puro.

0+
páginas
0
motores de IA
0
correos email-safe
0
secciones de brand book
0
jornadas
Artefacto 01 · anatomía de un dosier
Dosier Elite · Calle Ejemplo, 12 Ref · SYN-0000 · Barcelona
Valor de mercado
480.000 €
Yield bruto
5,8 %
Precio / m²
4.000 €
Posicionamiento de preciozona · comparables reales
Mediana de zona Este activo
Fortalezas
Finca regia rehabilitada, demanda de alquiler sólida.
Debilidades
Sin ascensor; certificado energético E.
Oportunidades
Precio un 9 % bajo mediana; margen de reforma.
Amenazas
Regulación de alquiler en revisión.
Veredicto

Compra recomendada con reserva: el descuento sobre mediana absorbe el riesgo regulatorio.

Artefacto 02 · el correo que ya no huele a spam
DeSynapse Atelier <hola@projectsynapse.ai>
Parainversor@ejemplo.com
Tu Dosier Elite está listo
Synapse Atelier

Hemos analizado el mercado, localizado comparables reales y calculado la rentabilidad del activo.

Ver mi dosier
Synapse · Análisis inmobiliario con IA

Antes: sniper@ + emoji de águila → spam. Ahora: HTML compatible Gmail/Outlook/Apple Mail, con plan anti-spam.

07
07 · Los momentos transitorios

La carga también es marca.

Nada de terminales verdes: streaming en mono, cursor de oro, tono sereno. Esta demo es el componente real del sistema.

Síntesis en tiempo real Gemini · Google DeepMind
08
08 · Resultado

Un sistema que trabaja sin mí.

Rebranding vivo en producción, coherente en 12+ páginas, 3 motores, informes y correos — verificado con auditoría de código contra el repositorio real.
5 correos transaccionales compatibles con Gmail/Outlook/Apple Mail, con plan anti-spam para la bienvenida.
Un brand book de 20 secciones — para que cualquier página nueva nazca coherente sin depender de mí.
La relación cambió de forma: el encargo puntual acabó en propuesta de colaboración continuada.
Brand book · 20 secciones
02 · Paleta y uso semántico
Obsidiana
#0c0b09
Ivory
#f4f0e6
Oro
#c9ab73
Salvia
#9aae86
Rosa
#caa0a0
Cream
CTA
03 · Tipografía · tres familias, un sistema
Dosier Elite
La inteligencia analiza el mercado, encuentra comparables reales y calcula la rentabilidad.
● En línea · Saldo: 250 CR
04 · Escala y jerarquía · la regla canónica
TítuloDosier Elite
Sección1. El activo
EtiquetaUbicación exacta
CuerpoTexto sobrio, legible, sin estridencias.
09 · Componentes reutilizables
Valor de mercado
480.000 €
Generar dosier Continuar con Google Óptima Correcta Cara
Veredicto
Cuando entregas sistema y no pantallas, el cliente no te necesita menos — te quiere más cerca.
09
09 · Aprendizajes

Lo que me llevo.

1Las restricciones revelan el criterio

No poder tocar Python me obligó a conocer el flujo de render a fondo.

2Sin sistema, es maquillaje

La página 13 — la que aún no existe — ya sabe cómo debe ser.

3El copy es diseño

Cambiar el vocabulario valió tanto como cambiar la paleta.

4Los correos son la marca

Son lo que ve el cliente de tu cliente.

Siguiente proyecto

¿Tienes un producto
que merece mejor piel?