Guía de estilo

El sistema con el quese construye la web

Todo lo que hay debajo se dibuja con las mismas primitivas que usan los bloques de la web, así que esta página no puede quedarse desfasada. Las medidas de la derecha son las del mockup de Figma; el contrato lo vigila tests/e2e/tokens-acapulco.e2e.spec.ts.

01Titulares

Donde la Costa del SolSe convierte en tu hogar

Token: text-hero · text-hero-alt
Medida del Figma: 70 / 80 px · interlineado 75

Descubre nuestra colecciónde propiedades exclusivas

Token: text-title · text-title-alt
Medida del Figma: 40 / 50 px · interlineado 50

Villa Chalet en Nueva Andalucía

Token: text-card-title
Medida del Figma: Cormorant 400 · 30 px / 34

02Texto

Nuestros servicios

Token: text-eyebrow · text-label
Medida del Figma: 14 px SemiBold · #878787 · filete 85 px

Más de seis décadas creando historias de éxito en Fuengirola.

Token: text-lead
Medida del Figma: 18 px / 30

Seleccionamos residencias que encarnan el estilo de vida mediterráneo. Encuentra el hogar perfecto para tu familia, una villa única para disfrutar del sol o una inversión con alto potencial de revalorización.

Token: text-copy · text-subtle
Medida del Figma: 15 px / 25 · tinta al 63 %

Málaga, España

Token: text-meta
Medida del Figma: 14 px SemiBold

1.880.000 €

Token: text-price
Medida del Figma: 18 px SemiBold / 27

03Cifras

+50
Años de experiencia: +1000
Clientes satisfechos: +500
Propiedades vendidas: +4
Idiomas hablados

Token: text-stat · text-stat-label
Medida del Figma: 70 px Light · rótulo 20 px con 0.2em

04Controles

Contorno Sobre foto

Token: PillLink · h-control · px-control-x
Medida del Figma: 52 de alto · 38 de padding · radio 30

05Color

Fondo

--brand-bg · #eeeeee

Superficie

--brand-surface · #ffffff

Tinta

--brand-ink · #262626

Antetítulo

--brand-label · #878787

Token: --brand-*
Medida del Figma: paleta monocroma: el color lo aportan las fotos

06Ritmo

72 — entre secciones

48 — titular a contenido

20 — dentro de un grupo

Token: py-section · mt-block · gap-stack
Medida del Figma: 72 · 48 · 20 px a 1440

rounded-card

rounded-pill

Token: rounded-card · rounded-pill
Medida del Figma: 11 px · 30 px

07Páginas interiores

Sin desplegable

Token: AccordionRow · text-card-label · text-title
Medida del Figma: fila de 60 de alto · «+» que gira 45° · panel 709 + 515, hueco 56

destacadoapagado

Token: TimelineDot
Medida del Figma: 20 px · tinta cuando está destacado, borde cuando no

08 · Sección oscura

El mismo sistemasobre la tinta

La única sección oscura de la marca usa --brand-ink de fondo. El texto corrido pasa a text-subtle-on-ink, que es blanco al 75 %: el color del cuerpo se define en alfa justo para que funcione igual sobre claro y sobre oscuro.

Botón sobre tinta