La forma visual de Futura Capital.

Principios de diseño

Cinco decisiones estéticas que definen todo lo que Futura publica. Si una pieza rompe alguno de estos principios, no es Futura.

Editorial antes que corporativo

La inversión inmobiliaria tradicionalmente se comunica con plantillas corporativas aburridas: azules, grises, fotos de handshakes. Futura rompe esa convención adoptando un lenguaje visual más cercano al de una revista de arquitectura o un libro de diseño. Tipografía serif expresiva, mucho espacio en blanco, uso puntual del color.

Calidez sobre frialdad

El fondo nunca es blanco puro (#FFFFFF). Siempre es #FAFAF7, un tono cálido que recuerda al papel. Pequeño detalle que hace toda la diferencia en cómo se siente la marca.

Grano sobre pixel

Todas las superficies tienen una textura sutil de grano (3.5% de opacidad) que evoca la calidad análoga de la prensa impresa. Diferencia a Futura de una página web cualquiera.

El magenta es acento, no protagonista

El color de marca #E91E63 aparece en momentos específicos: links, acentos tipográficos, elementos activos. Nunca como fondo general. Menos es más.

Tipografía como jerarquía

Fraunces (display serif) para titulares y momentos expresivos. Inter (sans neutral) para cuerpo y UI. JetBrains Mono para metadatos y etiquetas. Cada fuente tiene un rol específico y no se intercambian.

Color

Paleta cálida con un único acento cromático. Dos modos: light editorial (documentos, blog, email) y dark editorial (fichas técnicas, presentaciones, social de impacto).

Superficie — Light

Tinta — Light

Marca

Semánticos

Dark editorial

Tipografía

Tres fuentes. Cada una con un rol no negociable. Fraunces para la voz. Inter para la mano. JetBrains Mono para la etiqueta.

Fraunces — Display

Serif variable con ópticas ajustables. Úsala en titulares (h1, h2, h3), pull quotes, stat values y momentos expresivos. Pesos 400–600. Cursiva disponible con peso expresivo.

Inter — Body & UI

Sans-serif neutral con features tipográficos activados (ss01, cv11). Úsala en cuerpo de texto, UI, navegación, botones, formularios.

JetBrains Mono — Label

Monospace para metadatos, fechas, coordenadas, etiquetas de sección, código. Siempre en tamaños pequeños y con letter-spacing generoso.

Espaciado

Escala de 4 puntos. Todos los espaciados (padding, margin, gap) deben usar variables --s-*. Nunca valores arbitrarios.

/* Escala base 4px */
--s-1: 0.25rem;   /*   4px */
--s-2: 0.5rem;    /*   8px */
--s-3: 0.75rem;   /*  12px */
--s-4: 1rem;      /*  16px */
--s-5: 1.5rem;    /*  24px */
--s-6: 2rem;      /*  32px */
--s-7: 3rem;      /*  48px */
--s-8: 4rem;      /*  64px */
--s-9: 6rem;      /*  96px */
--s-10: 8rem;     /* 128px */

Regla de oro

Entre secciones grandes: --s-8 a --s-10. Entre párrafos: --s-4. Entre ítems de lista: --s-2. Dentro de componentes: --s-3 a --s-5.

Motion & textura

Movimiento sutil y textura sutil. Nada debe competir con el contenido; todo debe acompañarlo.

Easing oficial

--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

Animación de entrada

Los hero y elementos principales entran con un fadeInUp escalonado (stagger de 100ms). Duración total: 800ms con --ease-out.

Hover

Transiciones de 200ms para cambios de color, 300ms para transformaciones (translateY, scale). Nunca más de 300ms.

Grano

Todas las superficies grandes (body, hero cards, secciones destacadas) llevan un overlay SVG de ruido turbulento al 3.5% de opacidad. Esto es la firma visual de Futura.

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,...");
}

Botones

Cuatro variantes. Uso primario para CTAs únicos por pantalla; acento para momentos de conversión (agendar cita, invertir).

<button class="btn btn-primary">Agendar cita</button>
<button class="btn btn-accent">Invertir ahora</button>
<button class="btn btn-secondary">Ver más</button>
<button class="btn btn-ghost">Cancelar</button>

Badges

Etiquetas pequeñas para estados, categorías, fases. En monospace, uppercase, letter-spacing generoso.

Callouts

Bloques destacados para notas, advertencias, éxito y peligro. Sin cajitas de colores saturados; bordes laterales y backgrounds suaves.

Pull quotes

Frases destacadas en tipografía Fraunces cursiva con barra lateral magenta. Uso puntual, nunca más de una por sección.

Script blocks

Bloques oscuros específicos para diálogos de venta, llamadas o interacciones. Tratados como piezas destacadas, no como código.

Method cards

Cards para los 6 pasos de la metodología F.U.T.U.R.A. Letra dominante como marca visual, título, descripción, entregable.

Stat grid

Grid de métricas con números grandes en Fraunces. Ideales para cifras de desarrollo, KPIs de venta, datos de plusvalía.

Dark editorial

Para fichas técnicas de terrenos, presentaciones en pantalla y piezas de social con impacto visual fuerte. Misma estructura, tipografías y espaciado; solo cambian los tokens cromáticos.

Cuándo usar dark

Fichas técnicas de desarrollos individuales. Portadas de presentaciones comerciales. Posts de social que requieren impacto visual (lanzamientos, anuncios, aniversarios). Cover de webinars y eventos.

Cuándo NO usar dark

Contenido de lectura larga (playbook, blog). Emails transaccionales. Formularios. Documentos operativos. Cualquier pieza donde se deba leer más de 2 minutos seguidos.

Playbook comercial

El playbook F.U.T.U.R.A. es el documento fundacional del sistema. Usa light editorial con navegación lateral sticky, hero con meta-datos, components de script block y method cards. Viven en subdominio privado: playbook.futuracapital.mx.

Blog futuracapital.mx

Los artículos SEO del blog siguen la estética light editorial con una estructura más centrada (sin sidebar, contenido centrado a 720px). El hero del post lleva eyebrow con fecha + categoría, título H1 en Fraunces, lead en Inter 300.

Fichas técnicas

Las fichas técnicas de desarrollos individuales usan la variante dark editorial. Formato JPG estandarizado, misma estructura para todos los desarrollos (hero + stat grid + amenidades + plano + contacto). Referenciadas por el skill ficha-tecnica-terrenos.

Social media

Tres plantillas base para posts cuadrados (4:5). Quote, Accent, Dark. Todas con ratio fijo, branding inferior sutil, tipografía Fraunces para impacto.

Email

Emails en light editorial, ancho máximo 600px, tipografía system-safe con fallback a Fraunces para clientes modernos. Header minimalista con wordmark; CTA principal en botón accent.

Do & Don't

Decisiones no negociables para mantener la integridad del sistema.

Color

Tipografía

Espaciado

Fondos

Imágenes

CSS base

Copia este bloque en cualquier proyecto nuevo para heredar el sistema completo de tokens. Si modificas estos valores, estás creando un sistema distinto — no una variante.

:root {
  /* Superficie */
  --bg: #FAFAF7;
  --bg-alt: #F4F2ED;
  --line: #E8E6DF;

  /* Tinta */
  --ink: #0F0F0E;
  --ink-soft: #2A2A28;
  --ink-muted: #6B6B68;

  /* Marca */
  --accent: #E91E63;
  --accent-deep: #B3144A;
  --accent-wash: #FDF2F7;

  /* Dark */
  --dark-bg: #0E0E0D;
  --dark-ink: #F5F3ED;
  --dark-accent: #FF4785;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Espaciado (escala 4pt) */
  --s-1: 0.25rem; --s-2: 0.5rem;
  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

Import de fuentes

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?
  family=Fraunces:ital,opsz,wght@0,9..144,400..700
  &family=Inter:wght@300..700
  &family=JetBrains+Mono:wght@400;500
  &display=swap" rel="stylesheet">