Bauplay UI Kit & Guía de Estilos
Esta página sirve como catálogo interactivo de todos los componentes visuales de Bauplay. Aquí se recopilan tipografías, botones, enlaces, tarjetas, alineaciones de imagen y transiciones de fondo que definen nuestra identidad de marca.
1. Jerarquía Tipográfica (Nunito & Noto Sans)
Heading H1 (Nunito 600 - 54px)
Heading H2 (Nunito 600 - 32px)
Heading H3 (Nunito 600 - 24px)
Heading H4 (Nunito 600 - 20px)
Heading H5 (Nunito 600 - 18px)
Heading H6 (Nunito 600 - 16px)
Texto Lead / Destacado (Noto Sans - 18px): Diseñado para subtítulos introductorios y párrafos de apertura. Tiene un interlineado alto para facilitar la lectura.
Texto Base / Cuerpo (Noto Sans - 15px/16px): Este es el tamaño estándar que utilizamos para la mayoría de descripciones, listas y detalles técnicos. Mantiene una excelente nitidez y equilibrio.
Texto Pequeño / Leyendas (Noto Sans - 13px): Utilizado para descripciones secundarias, notas al pie de foto, textos legales o metadatos técnicos de los sets.
Texto en Negrita y Cursiva: Puedes aplicar estilos con peso de tipografía Noto Sans 700 o en formato énfasis cursiva para destacar palabras clave de forma natural.
Texto Acentuado con Clase Global: Este párrafo utiliza la clase global de texto acentuado para pintar el color de forma dinámica en Rojo Bauplay.
2. Botones y Enlaces Interactivos
Botón Primario RojoBotón Secundario NegroBotón Secundario AzulBotón Outline / BordeSaber más sobre BauplayVolver a la tiendaVer más opciones azul
3. Alineación y Composición de Imágenes
Imagen a la izquierda y texto a la derecha
Esta disposición clásica facilita una lectura asimétrica y fluida. La imagen tiene aplicados los bordes redondeados suaves de 5px. Todo el bloque de texto está alineado a la izquierda.
Ver catálogo completoTexto a la izquierda e imagen a la derecha
Alternar el orden de las imágenes y textos en cada sección crea un ritmo dinámico en el scroll de la página, manteniendo al usuario enganchado y facilitando la asimilación del contenido.
Explorar nuestro método4. Variedad de Tarjetas (Cards & Contenedores)
Tarjeta Gris Claro (Menú)
Fondo gris de navegación (#f5f5f5) con bordes de 5px. El estilo más representativo y limpio para estructurar bloques secundarios.
Scopri di piùTarjeta Blanca Sombra
Fondo blanco puro con una sombra de difuminado muy sutil. Bordes de 5px. Aporta profundidad sin recargar visualmente.
Scopri di piùRECOMENDADO
Tarjeta Azul Destacada
Fondo azul Bauplay (#1f84c6) con textos en blanco y un badge de recomendación. Diseñada para resaltar ofertas o secciones especiales.
Scopri di piùRECOMENDADO
Tarjeta Roja Destacada
Fondo rojo Bauplay (#e42b30) con textos en blanco. Diseñada para llamar la atención del usuario hacia una acción o producto destacado.
Scopri di piùNUEVO
Tarjeta Negra
Fondo negro absoluto (#000000) con textos en blanco. Ideal para bloques de destaque importante o separadores visuales.
Ver ofertasTALLERES CREATIVOS
Llevamos la creatividad a tu centro, tu asociación o tu empresa. 12 modalidades adaptadas en Barcelona, Madrid y online.
Configura il mio laboratorio5. Transiciones de Fondos (Alternancia de Secciones)
Fondo Gris Menú (#f5f5f5)
Fondo gris de navegación, nuestro tono principal para alternar secciones blancas puras. Limpio y elegante.
Fondo Amarillo (#e8bf10)
Color de acento Bauhaus muy potente. Reservado para cierres de página, bloques de urgencia o características clave.
Fondo Azul (#1f84c6)
El azul oficial de la marca, ideal para secciones de transición secundarias o acentos Bauhaus en el flujo de lectura.
Fondo Crema (#f4f0e9)
Tono crema de contraste. Su uso es muy limitado, enfocado a secciones especiales de productos artesanales.