Vivona UI kit

Todos los estilos del sitio viven en styles.css. Esta página los muestra en vivo: si cambias un token o un componente aquí, cambia en toda la web. Los bloques están en el mismo orden que las secciones del CSS.

1 · Color

Toda la base es acromática. El sistema tiene un solo color: el acento. Se usa en la acción principal, en el estado «en venta» y en los enlaces. Los demás estados se distinguen por relleno y peso, no por color.

2 · Tipografía

Titulares y nombres propios en Borna Medium (solo alfabeto latino). Interfaz, cifras y textos largos en Arial. En ruso los titulares caen a Arial automáticamente.

3 · Botones y enlaces

4 · Controles de búsqueda

5 · Estados de obra

Cinco fases. El color lo recibe solo «en venta», lo que se puede comprar hoy. «Llaves en mano» va en negro, «en obras» en contorno, «próximamente» y «vendida» en gris.

6 · Marcas provisionales

Las promotoras usan su logotipo oficial, descargado de su propia web. Van sin marco y con campo de protección, y cada uno lleva su propia altura: se midió la superficie de tinta de cada logotipo y se escaló para que todos pesen ópticamente lo mismo, en vez de ajustarlos a una altura común. Las promociones todavía no tienen logotipo: para ellas el nombre genera una marca con iniciales y un color fijo. Todo pasa por el mismo componente.

7 · Ficha de promoción

La tarjeta del listado. Pulsa para ver el modal completo con los dos logotipos.

8 · Promotora

9 · Paneles, cifras y tablas

10 · Pie

Hecho en Forma Bureau