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

Juguetes de madera Bauplay

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 completo

Texto 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étodo
Juguetes de madera Bauplay

4. 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.
Saber más

Tarjeta Blanca Sombra

Fondo blanco puro con una sombra de difuminado muy sutil. Bordes de 5px. Aporta profundidad sin recargar visualmente.
Saber más
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.
Saber más
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.
Saber más
NUEVO

Tarjeta Negra

Fondo negro absoluto (#000000) con textos en blanco. Ideal para bloques de destaque importante o separadores visuales.
Ver ofertas
  • Juguetes de madera Bauplay

    TALLERES CREATIVOS

    Llevamos la creatividad a tu centro, tu asociación o tu empresa. 12 modalidades adaptadas en Barcelona, Madrid y online.

    Configurar mi taller

    • 5. 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.