Design System · v0.1 · para armado y maquetado

Componentes de armado

Todo lo necesario para maquetar la web pública y el sistema interno. Un solo archivo: assets/habicanton.css — tokens + componentes, sin frameworks, sin build.

Componente

Botones

<button class="btn btn--primario">Quiero vender mi casa</button>
<button class="btn btn--acento">Ver casas disponibles</button>
<button class="btn btn--secundario">Conocer el proceso</button>
<button class="btn btn--whatsapp">💬 Hablar por WhatsApp</button>   <!-- canal #1 del negocio -->
Componente clave

Chips de estatus — el pipeline del inmueble

El corazón del sistema: cada inmueble vive en un estatus y todos los perfiles lo ven igual (hoy "se va avisando" por WhatsApp). Estos 11 estados salen del proceso real levantado en el descubrimiento.

Prospecto→ En análisis→ Oferta hecha→ Firma y poder→ Liquidación→ Remodelación→ En venta→ Apartada→ En trámite→ Escriturada→ Entregada 
<span class="chip chip--enventa">En venta</span>
<span class="chip chip--tramite">En trámite</span>
<span class="chip chip--escriturada">Escriturada</span>
<!-- 11 estados: prospecto · analisis · oferta · firma · liquidacion ·
     remodelacion · enventa · apartada · tramite · escriturada · entregada -->
Componente

Tarjeta de propiedad

La unidad del catálogo — con los datos que pidió el cliente para su ficha: precio, recámaras, baños, m² de terreno y construcción, cómo se entrega, forma de pago y estatus legal.

En venta
$685,000 · Infonavit o contado
Fracc. Chulavista · Tlajomulco de Zúñiga
2 rec1 baño90 m² terreno65 m² constr.
RemodeladaVenta tradicional
Remodelación
$620,000 · disponible pronto
Lomas del Sur · Tlajomulco de Zúñiga
2 rec1.5 baños105 m² terreno78 m² constr.
Traspaso
Vendida
$710,000 · escriturada jun 2026
Santa Fe · Tlajomulco de Zúñiga
3 rec2 baños120 m² terreno96 m² constr.
Compra-reventa
Componente

Formularios — las dos puertas de captación

La acción #1 que pidió el cliente: que el visitante deje datos para perfilarlo. Una puerta para el que vende, otra para el que compra — cada una alimenta su pipeline.

Puerta 1 · Propietario

Vende tu casa — como esté

Con deuda, intestada, vandalizada o habitada. Te decimos cuánto y cómo, sin compromiso.

Te contactamos por WhatsApp, como tú prefieras.
Puerta 2 · Comprador

Estrena casa remodelada con tu crédito

Nosotros te hacemos todo el trámite de tu crédito Infonavit. Tú solo entregas documentos y firmas.

Si no sabes, te ayudamos a consultarlo — es gratis.
Componente

Avisos de trámite — voz del portal del comprador

Los textos son literalmente los que el cliente pidió para el portal (Fase 2), ya en el tono de la marca. En Fase 1 estos avisos son el guion del seguimiento por WhatsApp.

Esperando tus documentos No podemos avanzar sin ellos: acta de nacimiento, INE, CURP y constancia fiscal (PDF, no mayor a 3 meses). Envíalos cuando puedas.
Tu avalúo está en proceso Ya lo solicitamos. En cuanto lo recibamos, mandamos tu crédito a inscripción con Infonavit.
Tenemos tu notificación de descuento Entrégala a Recursos Humanos de tu empresa lo antes posible — sin ese paso tu crédito no avanza.
¡Firma de escritura! Preséntate el jueves 14 · 11:00 en la Notaría 12 (Av. México 2341) con tu INE original.
Una disculpa — trámite detenido Surgió un problema con un apoderado de Infonavit que se sale de nuestras manos. Estamos encima; no debe tardar en resolverse.
Componente

Tablas y métricas — sistema interno

Inventario (vista asesor)

InmuebleEstatusPrecio
Chulavista M12-L8
2 rec · 65 m²		En venta$685,000
Lomas del Sur C4
2 rec · 78 m²		Remodelación$620,000
Santa Fe P22
3 rec · 96 m²		En trámite$710,000
Silos A3
2 rec · 60 m²		En análisispor definir

El asesor externo ve catálogo, estatus y comisión — nunca inversión ni utilidad (regla de acceso confirmada en descubrimiento).

Tablero (vista dirección)

14
Inmuebles activos
5
En venta ahora
3
Escrituradas este mes
23
Leads sin asignar
Ranking de asesores El cliente pidió un ranking de ventas por asesor "como motivación" — vive en esta vista con estos mismos componentes.
Fundamentos

Tokens

:root {
  /* Marca */
  --hab-primario: #5B21E0;   --hab-primario-hover: #4A18C4;  --hab-primario-suave: #EFE9FD;
  --hab-tinta:    #1A1240;   --hab-acento: #FF6B35;          --hab-acento-suave: #FFF0EA;
  --hab-exito:    #0FA968;   --hab-alerta: #F5A623;          --hab-error: #E5484D;
  --hab-info:     #3B82F6;   --hab-whatsapp: #25D366;

  /* Neutrales (lavanda cálido) */
  --hab-fondo: #F7F5FB;  --hab-superficie: #FFFFFF;
  --hab-texto: #1A1240;  --hab-texto-2: rgba(26,18,64,.70);  --hab-texto-3: rgba(26,18,64,.45);

  /* Tipografía */
  --hab-display: 'Plus Jakarta Sans', system-ui, sans-serif;  /* titulares, botones, cifras */
  --hab-body:    'Inter', system-ui, sans-serif;              /* cuerpo, formularios */

  /* Geometría */
  --r-card: 16px;  --r-input: 12px;  --r-pill: 999px;
  /* Espaciado base 4: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
}