Beta abierta en todo el país. 
Con condicionesCaballito · Ciudad de Buenos Aires$920.000/ mes
+ $120.000 de expensas
3 ambientes luminoso, contrafrente
- 3 ambientes
- 68 m²
Sistema de diseño
Todo lo que sostiene la cara de Habify
Página viva: los tokens, la tipografía, el color, los gradientes, el glassmorphism, las superficies y las animaciones que usa la landing. Sirve para ver, comparar y decidir antes de tocar código.
Urbanist · display + cuerpoInstrument Serif · acentosTailwind 3Next 15 · App Router
01
Color
El violeta de marca hace todo el trabajo de identidad; el resto de la paleta es soporte. Los semánticos son los del semáforo del buscador y los estados del score.
Marca
brand
#7635DC
brand-light
#8B5CF6
brand-lighter
#A78BFA
brand-magenta
#C026D3
brand-rosa
#E879F9
brand-soft
#EDE4FF
Superficies
noche
#0B0718
ink
#14102A
carbon
#1E1738
pizarra
#2A2150
fondo
#F4F2FA
linea
#E8E3F4
Texto y semánticos
tinta
#1C1633
gris
#5F5A70
verde
#166534
verdeclaro
#4ADE80
ambar
#92400E
ambarclaro
#FBBF24
rojo
#B91C1C
02
Gradientes
Cinco gradientes y nada más. El de marca es el único que se usa sobre superficies grandes; los otros son atmósfera.
.grad-brand
120° · #7635DC → #8B5CF6 → #C026D3
.grad-brand-soft
120° · #8B5CF6 → #A78BFA → #E879F9
.grad-aurora
135° · lavanda → rosa → azul
.grad-noche
165° · #0B0718 → #1E1738 → #14102A
.grad-mesh
tres radiales sobre fondo oscuro
.grad-halo
halo violeta sutil para secciones claras
.text-grad — sobre claro
Tu alquiler construye
.text-grad-light — sobre oscuro
Tu alquiler construye
03
Tipografía
Urbanist para todo — es la tipografía de la landing. Instrument Serif itálica aparece sólo en las palabras que llevan el degradado: es el gesto editorial que corta la uniformidad.
h1 · 4rem / 1.04 · bold
Tu alquiler ya te cuesta todo. Que por lo menos te construya algo.
h2 · 2.9rem · bold
El papel que hasta hoy no existía
h3 · 1.125rem · bold
Certificado de buena paga
lead · 1.125rem · regular
En Argentina no hay ningún registro de que pagaste tu alquiler en fecha. Nosotros lo creamos.
body · 0.875rem · regular
Cada pago en fecha te suma. Y te decimos exactamente qué lo sube y qué lo baja: acá no hay números mágicos ni condenas.
kicker · 13px · bold · uppercase 0.18em
Score y certificado
04
Superficies y glassmorphism
Cuatro superficies: card sobre claro, card-dark sobre oscuro, y las dos versiones de vidrio. El vidrio necesita algo detrás — sobre fondo plano no se nota y sólo cuesta performance.
.card + .card-hover
Superficie clara
Borde linea, sombra card, hover que levanta 4px y tiñe el borde de violeta.
.card-dark + .card-dark-hover
Superficie oscura
Vidrio muy sutil: blanco al 4%, blur-sm y borde blanco al 10%.
.glass — sobre claro
Vidrio claro
Blanco al 70%, blur-xl y borde blanco al 60%. Se usa en la barra de navegación cuando ya se scrolleó y en los chips sobre foto.
.glass-dark — sobre oscuro
Vidrio oscuro
Blanco al 7%, blur-xl y sombra profunda. Es el que usan las tarjetas de la barra de credibilidad sobre el hero.
.shadow-card
0 12px 36px rgba(28,22,51,.07)
.shadow-lift
0 26px 54px rgba(91,33,182,.16)
.shadow-glass
0 8px 32px rgba(28,22,51,.10)
.rounded-xl2
1.25rem
.rounded-xl3
1.75rem
.rounded-xl4
2.25rem
05
Botones, chips e íconos
Un solo botón primario en toda la página: el gradiente de marca desplazándose en hover. Todo lo demás es secundario.
sobre claro
sobre oscuro
chips y estados
Identidad RENAPEROpcionalApartado ✓
Calificás Con condiciones Todavía no
Incluido No incluido
set de íconos · 24px · stroke 1.6
<TrustStrip /> · reemplaza a la sección de seguridad
- Identidad verificada
- Sin custodia de fondos · PSP regulados
- Consentimiento explícito · Ley 25.326
- Score siempre explicable
<Ficha /> · con y sin semáforo
Palermo · Ciudad de Buenos Aires$780.000/ mes
+ $95.000 de expensas
2 ambientes con balcón
- 2 ambientes
- 48 m²
Ver la propiedad
Con condicionesCaballito · Ciudad de Buenos Airesbotones de descarga
06
Animaciones
Todo respeta prefers-reduced-motion. Los reveals usan IntersectionObserver con red de seguridad: pase lo que pase el contenido nunca queda oculto.
.animate-drift
18s · blobs del fondo
.animate-drift-slow
26s · segunda capa
.animate-floaty
5s · el teléfono del hero
.animate-pulseRing
2.6s · el punto de «beta activa»
.reveal — entrada al hacer scroll
from="up (por defecto)" · delay 0ms
from="left" · delay 90ms
from="right" · delay 180ms
from="scale" · delay 270ms
<Counter /> — sube al entrar en pantalla
0M
personas alquilan
0
Habify Score
07
Mockups de la app
Cuatro pantallas hechas con markup y tokens — nada de imágenes. Se ven nítidas en cualquier pantalla, pesan casi nada y el copy se puede editar sin volver a Figma.
Hola, Sofía
sofi.habify
Saldo disponible
$412.300
TransferirPagarAhorrar
HabiReserva · agostoApartado ✓
$780.000
Se paga solo el 5 · recibo automático
742
Habify Score
+6 este mes
36%
Mi casa propia
del camino
Certificado de buena paga
Listo para compartir
ScreenWallet
Tu Habify Score
742
de 1000
Identidad RENAPER100%
Pagos en fecha · 12/12100%
Antigüedad del alquiler74%
Constancia de ahorro58%
Para llegar a 800
Sumá 4 meses más de aportes al fondo y completá la verificación de ingresos.
ScreenScore
Pagar alquiler · agosto
Depto 2 amb · Palermo
Vence el 5 de agosto
$780.000
Destino (CBU fijado)•••• 4471
TitularidadVerificada ✓
OrigenHabiReserva
+8 puntos de score al pagar en fecha
ScreenPago
Certificado de buena paga
habify
Sofía M.
DNI verificado · RENAPER
Pagos en fecha24/24
Antigüedad2 años
Habify Score742 / 1000
NivelVerificado
CompartirDescargar PDF
Verificable con QR por quien lo reciba
ScreenCertificado
<SueldoFlow /> — claro
El techo se paga primero, siempre
Sueldo acreditado$1.494.000
→ Sobre alquiler$780.000
→ Ahorro casa propia$60.000
Disponible para vos$654.000
<SueldoFlow dark /> — oscuro
El techo se paga primero, siempre
Sueldo acreditado$1.494.000
→ Sobre alquiler$780.000
→ Ahorro casa propia$60.000
Disponible para vos$654.000
08
Composiciones
Los bloques que la landing repite. Cambiar uno acá cambia la página entera.
<Quote />
En 2022 dejé $65.000 de depósito. Cuando terminó el contrato me devolvieron los mismos $65.000: no alcanzaban para pagar ni el 10% de un mes de alquiler.
tonos de <Section />
light
soft
aurora
dark
darker
brand
09
Reglas que no se negocian
Salen de los documentos del proyecto. Si un diseño las rompe, el diseño está mal — no la regla.
- Nunca aparece la palabra «garantizado» junto a un rendimiento.
- Toda proyección aclara que es simulada y que las tasas cambian.
- Nunca se dice ni se sugiere que Habify sea un banco o una entidad financiera.
- Siempre se aclara que los pagos los procesa un proveedor registrado ante el BCRA.
- No se publican testimonios de usuarios que no existen.
- Ninguna función de fase 2 o 3 se comunica como disponible: se rotula «lo que viene».
- El 70/20/10 del depósito administrado no se comunica en la etapa 1.
- Prohibido hardcodear tasas: vienen de un endpoint configurable en runtime.