Brand Book · v1.0
Sistema de diseño · 2026

Un sistema visual para sentirse en casa, en cualquier lugar.

VOYENESAS es real estate, marketplace y lifestyle a escala global. Este brand book reúne los tokens, componentes y reglas que mantienen la identidad consistente, premium y lista para producción.

Sector
Real Estate · Marketplace · Lifestyle
Audiencia
Internacional
Estilo
Minimalista · Tech · Premium
Versión
1.0 · May 2026
Voyenesas™ BRAND · BOOK · 01
02 / Color

Sistema de color

Una paleta editorial: dos brand colors, una escala neutral pensada para alto contraste, una familia semántica predecible y un gradiente firma.

Brand

Primary

#F7F7F7
--vy-color-primary

Secondary

#020B3C
--vy-color-secondary

Button Primary

#DCDCDC
--vy-btn-primary-bg

Button Secondary

#E8EBFD
--vy-btn-secondary-bg

Acentos · Rainbow

Coral

#FF6B6B

Amber

#FFB13C

Jade

#36D399

Sky

#3ABFF8

Violet

#A78BFA

Rose

#F472B6

Gradient · Signature

linear-gradient(90deg, …)
--vy-gradient-rainbow

Neutrals · Cool grey · Navy bias

Semantic

Success

#16A34A

Warning

#D97706

Error

#DC2626

Info

#2563EB
03 / Tipografía

Tipografía

Pareja editorial: Instrument Serif para titulares con voz y caracter, Geist para UI clara y técnica. Una jerarquía completa de Display a Label.

DisplayInstrument Serif · Italic96 / 1.05 / -0.03em
A new kind of home.
HeroInstrument Serif72 / 1.05 / -0.03em
Real estate, reimagined.
H1Geist · 60048 / 1.18 / -0.015em
Discover homes you'll love.
H2Geist · 60036 / 1.18 / -0.015em
Curated marketplace, global reach.
H3Geist · 60028 / 1.18
A premium lifestyle, simplified.
H4 / H5Geist · 50020 · 18 / 1.5
A thousand details, zero friction.
Designed for builders, brokers, and dreamers.
Body LG / Body / SMGeist · 40018 · 16 · 14 / 1.65

A larger paragraph for moments that matter — onboarding, hero copy, key value props. Calm, generous, readable.

Body text for long form content. Listings, articles, terms. Voice stays warm and human, never corporate.

Small print and metadata. Captions, helper text, footnotes. Always paired with strong hierarchy above.

LabelGeist · 500 · uppercase12 / 1 / 0.12em
FEATURED · OCEANFRONT · CARTAGENA
04 / Espaciado

Sistema de espaciado

Grid de 4 px. Un solo set de tokens para padding, gap y margins — no inventes valores fuera de la escala.

Token · Value · Pixel · Visual4px base grid
05 / Componentes · Botones

Botones

Variantes: Primary, Primary Soft (#DCDCDC), Secondary (#E8EBFD), Ghost y Rainbow. Estados completos: hover, active, focus, disabled.

Variants · Sizes · Statesbuttons.css
06 / Componentes · Formularios

Formularios

Inputs con altura fija de 48 px, radius 12, focus en sky. Toda la familia: text, select, textarea, checkbox, radio, switch.

Te enviaremos las novedades del marketplace.
El precio debe ser mayor a $50.000.
Inputs · Select · Textarea · Statesforms.css
Tipo de propiedad

Operación

Notificaciones
Checkbox · Radio · Switchforms.css
07 / Componentes · Cards

Cards

Cuatro arquetipos: real estate listing, service tile, UI básica y el módulo de mapas con GPS pin.

Real Estate

Featured
Casa Marítima
Bocagrande, Cartagena
$840K USD
4 hab 3 baños 320 m²
New Premium
Villa Tulum Selva
Aldea Zamá, Tulum
$1.2M USD
5 hab 4 baños 480 m²
Open House
Loft Alfama
Alfama, Lisboa
€2.4K /mes
2 hab 1 baño 95 m²

Service Cards

Concierge

Gestión integral de tu propiedad: limpieza, mantenimiento y check-in 24/7.

Conocer más
Verificación

Cada listing pasa por validación legal, documental y visita en sitio.

Ver proceso
Lifestyle

Experiencias curadas: chef privado, yates, wellness y mobility.

Explorar

UI Maps · GPS

Casa Marítima
3.2 KM · BOCAGRANDE
UI Basic
Resumen del mes

Una card neutra, lista para datos, formularios o cualquier contenido genérico de producto.

128
Visitas
12
Saves
3
Tours
08 / Componentes · Badges

Badges

Etiquetas compactas, uppercase, pill-shaped. Variantes para estado, brand y promo.

Neutral Brand Soft Disponible Pendiente Vendido Nuevo ★ Premium
Status · Brand · Promobadges.css
09 / Iconografía

Iconografía

24×24 grid, 1.75 px stroke, round caps & joins. Una familia coherente para toda la UI.

24×24 · 1.75px · strokeicon-set.svg
10 / Favicon

Favicon

El wordmark dentro de un squircle navy. SVG primario + fallbacks PNG e ICO.

Favicon 64
64 px
Favicon 48
48 px
Favicon 32
32 px
Favicon 16
16 px
SVG · PNG · ICO/assets/favicon/