Sistema de diseño
Andor Home.
Tipografía, color y reglas de uso compartidas entre la web pública (andorhome.com), el CRM operativo (crm.andorhome.com) y el backoffice (admin). Un solo lenguaje visual para toda la red.
Tipografía
Dos familias trabajando juntas: la Cormorant Garamond aporta carácter editorial a los títulos; la Jost da claridad funcional al texto, los botones y la interfaz. Sin terceras familias.
Serif Garaldo con personalidad clásica. La usamos para todos los títulos, claims editoriales, números KPI grandes y nombres de personas o lugares. Pesos cargados: 300, 400, 500, 600, 700 (incluye itálica para 300 y 400).
Donde otros venden pisos, nosotros encontramos hogares.
Sans-serif geométrico inspirado en Futura. La usamos para texto largo, metadatos, etiquetas, botones, labels de formulario y toda la interfaz operativa. Pesos cargados: 300, 400, 500, 600, 700.
El propósito del sistema de diseño es que la marca se reconozca antes incluso de leer el primer titular.
La escala editorial es la que usa la home, las páginas de campaña (Vender, Barrios, Finance, Magazine) y las landing comerciales. Tamaños grandes, mucho aire vertical, jerarquía marcada.
La escala operativa es la del CRM y el backoffice. Mismas familias, tamaños más compactos porque la densidad informativa es mayor: tablas largas, KPIs en grilla, fichas con muchos campos.
- Cormorant solo para títulos y números expresivos. Si está en un bloque editorial o transmite emoción/identidad, va en Cormorant. Si está dentro de una tabla, un formulario o un menú, va en Jost.
- El italic es del color roble, no del negro. Cuando usas cursiva en un h1 o h2, va siempre en color roble — funciona como acento. Nunca pongas italic en color de texto principal.
- Mayúsculas solo con tracking ≥ 0.14em. El uppercase sin letter-spacing aprieta y se lee mal en Jost. Los eyebrows van con 0.25em, los botones con 0.14em.
- Pesos limitados. Para Cormorant: 300, 400, 500. Para Jost: 400, 500, 600. Pesos extras (700, 800) solo si hay justificación concreta.
- Cero familias terceras. Si necesitas distinguir algo de la marca, usa color o tracking, no otra tipografía.
Color
El sistema cromático nace de la oficina insignia de Mataró: madera de roble en el mostrador y suelo de cemento pulido. Esos dos materiales se traducen en los dos tonos de acento de toda la marca.
El color de identidad. Marca CTAs principales, KPIs, precios, el ítem activo de la navegación, los em itálicos en títulos y cualquier elemento donde queramos llamar la atención. Solo un tono primario por interfaz para no diluir la jerarquía.
#B89060184 · 144 · 960 · 22 · 48 · 284655 C#96724A150 · 114 · 740 · 24 · 51 · 414635 C#D4B88A212 · 184 · 1380 · 13 · 35 · 174665 C184 · 144 · 96 · 0.08tags, active rowEl gris cálido del suelo. Marca elementos descriptivos no accionables: encabezados de sección en sidebar (Principal, Inmuebles, Moderación...), eyebrows secundarios, identificadores de zona, badges informativos. Permite jerarquizar sin competir con el roble.
#8B7D72139 · 125 · 1140 · 10 · 18 · 45Warm Gray 9 C#7A7572122 · 117 · 1140 · 4 · 7 · 52Warm Gray 10 C#A89E95168 · 158 · 1490 · 6 · 11 · 34Warm Gray 5 C#6B6058107 · 96 · 880 · 10 · 18 · 58Warm Gray 11 CLos fondos y el texto. El sistema funciona en modo oscuro (por defecto, identidad fuerte) y modo claro (web pública diurna, lectura larga, accesibilidad). Los pares de tokens están emparejados para garantizar contraste AA en ambos temas.
#0a0a0aBlack 6 C#FAFAFA11-0601 (Bright White)#f0ebe211-0907 (Cream)#1F1F1FBlack 7 CSolo aparecen para indicar estado: éxito, advertencia, error o información. Nunca decorativos. Los cuatro están saturados pero ajustados al espíritu cálido de la paleta principal.
#4caf7d76 · 175 · 1257480 Cpublicado, OK#e0a030224 · 160 · 481235 Cen revisión, atención#e05555224 · 85 · 851788 Celiminar, error#7aa3d8122 · 163 · 2167682 Ctooltip, banner info- Un solo roble por superficie de decisión. Si una pantalla tiene varios CTAs, solo el principal va en roble lleno; los secundarios van en línea (border roble + fondo transparente).
- Cemento nunca toca un acento de estado. No mezcles cemento con verde/ámbar/rojo en el mismo bloque. El cemento es para neutralidad cálida; los estados ya hablan por sí solos.
- Texto sobre roble: siempre #0a0a0a. El negro profundo da contraste AA garantizado. Nunca uses texto blanco sobre roble — pierde definición.
- Light mode usa el roble oscuro (#96724A), no el del dark mode. El #B89060 sobre fondo claro pierde contraste. El sistema cambia los tokens automáticamente con
[data-theme="light"]. - Pantone es aproximado. Las equivalencias indicadas son la PMS más próxima medida sobre la conversión RGB→Lab. Para imprenta crítica (papelería corporativa, lonas grandes) usar siempre prueba física antes de tirada.
Aplicación
El sistema vive en un solo archivo: 04_andor-tokens.css. Tanto la web pública como el CRM y el backoffice lo importan en la primera línea de su <head>. Cambiar un valor en ese archivo actualiza los tres productos a la vez.
Productos cubiertos por este sistema
Web pública (andorhome.com) · home + páginas de campaña (Vender, Barrios, Andor Finance, Magazine, Informe de mercado) · landing de oficinas.
CRM operativo (crm.andorhome.com) · calendario, ficha de inmueble, cartera, adquisiciones, RRHH, Contenido web.
Backoffice (admin) · moderación, CMS editorial, configuración de la red.
Este documento se versiona junto al código en el repositorio. Para proponer un cambio del sistema (nuevo color, nuevo size token, modificación de regla), abrir issue en el repo etiquetado design-system antes de tocar nada. Cualquier modificación impacta a los tres productos.