Guía de marca
Casachula
Casas que encajan con tu vida
01
El proyecto
Casachula es una inmobiliaria de Cartagena que cuenta el proceso de comprar o vender casa como se cuenta una película: por capítulos, con un reparto y con los números encima de la mesa desde la primera toma.
La marca no habla de inmuebles, habla de momentos vitales. La primera vivienda, la segunda residencia, la reforma, el cambio a algo más grande, la mudanza a la costa. Cada uno es un capítulo distinto y cada capítulo tiene su casa.
Marca local, con equipo por zonas y especialidad.
Casachula no es solo casas: es también contenido y barrio.
02
Principios
Empezamos por ti, no por la casa
Primero el capítulo de tu vida, después el inmueble. La conversación arranca por la persona; el catálogo viene detrás.
Los números, sobre la mesa
Hipoteca, impuestos y plazos explicados antes de que los preguntes. Si hay que dar una cifra incómoda, se da al principio.
Cada paso, a la vista
Sin promesas, sin sustos y sin letra pequeña. Lo que se hace, se enseña.
Detrás de cada casa, una persona
El reparto tiene nombre y cara. Cada propiedad está dirigida por alguien concreto del equipo.
03
Logotipo
Wordmark en minúsculas con el símbolo ® integrado. Trazo grueso, terminaciones redondeadas y una «a» inicial ligada que arranca la palabra en un solo gesto.
Proporción 457 × 73 (≈ 6,3:1). Se dibuja en paper #FFFAF0, lo que lo hace un logo pensado para fondo oscuro.
Logotipo principal
El lockup completo es la versión preferente. Úsalo siempre que el espacio lo permita, respetando su área de reserva.
Toca y el fondo de la sección cambia claro/oscuro.Isotipo
El isotipo funciona solo como marca corta —favicon, sello, avatar de redes— cuando el espacio no permite el lockup completo.
Área de respeto & tamaño mínimo
Sobre distintos fondos
Usos incorrectos
Co-branding
Separa ambas marcas con una línea vertical de altura igual al isotipo. Deja a cada lado un espacio mínimo de X y alinea las marcas por su eje óptico.
Favicon & marca corta
16 px 32 px — tamaños reales del isotipo como favicon.
04
Color
La base son cuatro neutros cálidos y un verde profundo. Nada de blanco puro ni de negro puro: el fondo tira a marfil y la tinta tira a verde.
Brand · color principal
green
| Token | Valor | Uso |
|---|---|---|
surface |
#FFFAF0 | Fondo de página y de tarjeta |
surface-dark |
#1B2A21 | Bandas oscuras, pie, hero |
text-primary |
#1B2A21 | Texto sobre claro |
text-secondary |
rgba(27,42,33,.65) | Metadatos, pies de foto |
text-on-dark |
#FFFAF0 | Texto sobre oscuro |
accent |
#0C5D3D | Botones, enlaces, subrayados |
border |
rgba(27,42,33,.12) | Separadores y bordes de tarjeta |
border-strong |
rgba(27,42,33,.24) | Bordes en estado activo o foco |
05
Submarcas
Casachula no es solo casas. Seis líneas de contenido con color propio: bar, música, históricas, cooking, guías y podcast.
Regla de uso: el color de submarca nunca es un fondo plano. Se aplica como capa sobre fotografía al 62 % de opacidad, con el texto en paper encima.
Vermut, terraza, barrio
bar
06
Paleta pastel
Tonos suaves para diferenciar bloques sin romper la calidez del marfil. Se usan como fondo de sección o de tarjeta, siempre con la tinta #1B2A21 encima.
Los seis primeros vienen del sistema de diseño; los cuatro últimos son los tintes más lavados que se están usando en la web.
Sistema
p-orange
07
Tipografía
Tres familias con papeles muy separados: una serif para los titulares, una sans para todo lo demás y una manuscrita reservada a los nombres propios.
La regla de composición: el titular se parte en dos. La primera mitad va en DM Serif Display en mayúsculas; el nombre propio —un apellido, un barrio, una cala— cae en SloopScriptPro. ESTRENAR EN LA + la Alameda. LUCÍA + Hernández.
Escribe aquí — pruébala tú mismo
Escribe aquí — pruébala tú mismo
Escribe aquí — pruébala tú mismo
| Token | Valor | Uso |
|---|---|---|
Display |
48 / 50,4 px | DM Serif Display 400 · MAYÚSCULAS |
H1 |
36 / 39,6 px | DM Serif Display 400 · MAYÚSCULAS |
H2 |
24 / 28,8 px | Supreme LL 700 |
Title |
18 / 23,4 px | Supreme LL 250 |
Body |
16 / 25,6 px | Supreme LL 250 |
Body-sm |
14 / 21 px | Supreme LL 250 |
Label |
12 / 14,4 px | Supreme LL 250 · MAYÚSCULAS · tracking 0,72 px |
Caption |
12 / 16,8 px | Supreme LL 250 |
Script |
96 / 105,6 px | SloopScriptPro 400 · solo nombres propios |
08
El lenguaje
Casachula cuenta el proceso inmobiliario con vocabulario de cine. No es un adorno: es el sistema de nombres de toda la marca. Cuando dudes cómo llamar a algo, mira esta tabla antes de inventar.
| Token | Valor | Uso |
|---|---|---|
Capítulo |
Momento vital del cliente | «¿En qué capítulo estás?» — en vez de perfil o segmento |
Cartelera |
Listado de propiedades | En vez de catálogo o resultados |
Estreno |
Propiedad recién publicada | Badge de tarjeta — en vez de novedad |
Dirigida por |
Agente responsable | Bajo el título de cada propiedad |
Toma 1 · 2 · 3 |
Pasos del proceso | En vez de fase o paso |
Casting |
Plan de referidos | «Abre el casting» |
Sala de rodaje |
La oficina | Sección de contacto |
Videorreseña |
Testimonio en vídeo | En vez de review o testimonial |
Una producción de Casachula |
Firma de cierre | Pie de piezas y tarjetas destacadas |
09
Tono de voz
La metáfora de cine hace el trabajo pesado; el tono la sujeta para que no se vuelva cursi. Frases cortas, cifras concretas y cero promesas.
cinematográficoscursis
La casa es la película y el cliente el protagonista. Pero la metáfora se nota, no se explica.
clarosopacos
«Hipoteca, impuestos y plazos, antes de que preguntes.» Los números van delante.
cercanoscomerciales
«Empezamos por ti, no por la casa.» Nadie es un lead.
sin humograndilocuentes
«Sin promesas. Cada paso, a la vista.» Ni letra pequeña ni superlativos.
10
Espaciado
Escala de base 4. Todo lo que separa dos cosas en Casachula es múltiplo de cuatro.
La escala · cuándo usar cada valor
En uso
El mismo componente con la escala aplicada. Las zonas de color son el espacio: 24 de padding y huecos de 8 · 16 · 24. Nada suelto.
Radios de esquina
- 8px Chip Etiquetas y muestras de color.
- 12px Tarjeta Propiedades, equipo, contenidos.
- 16px Media Imágenes y vídeo.
- 999px Píldora Botones, badges y filtros.
11
Uso de marca
El logo se dibuja en marfil, así que el fondo manda. Y el nombre se escribe siempre igual.
Hazlo
- Parte el titular: DM Serif Display en mayúsculas + el nombre propio en SloopScriptPro.
- Aplica el color de submarca como capa al 62 % sobre fotografía.
- Escribe «Casas chulas», en dos palabras.
- Usa Supreme LL solo en 250 o en 700.
- Da el número antes de que lo pregunten.
Evítalo
- No sustituyas SloopScriptPro por otra manuscrita. En la web se coló Great Vibes en «la Alameda».
- No escribas «Casaschulas» todo junto: en el menú aparece así y en el pie «Casas chulas». Solo una es correcta.
- No uses un color de submarca como fondo plano de sección.
- No pongas SloopScriptPro en un párrafo: es para nombres propios.
- No uses blanco puro ni negro puro. El fondo es marfil y la tinta es verde oscuro.
12
Créditos
- Identidad y sistema de diseño
- Equipo de diseño Casachula
- Guía de marca
- muthafunk®