salveignis/geometría-bauhaus

Geometría Bauhaus

La geometría aquí es un sistema de construcción, no una decoración. Cada forma en la página debe cumplir una función, y la página debe seguir funcionando si se eliminan las formas. Tampoco debe interferir con el trabajo de la página. Sigue este flujo de trabajo en orden.

1. Enrutar por tipo de página

Empieza por lo que la página debe hacer, no por cómo debe verse. Lee la guía correspondiente, que establece el límite de geometría y la lista de verificación de aceptación.

La página es	Lee	Límite de intensidad
Inicio, marca, lanzamiento, aterrizaje, editorial	page-storefront.md	3
Categoría, resultados de búsqueda, catálogo	page-plp.md	1
Detalle de producto	page-pdp.md	1, o 2 detrás de la galería
Carrito, proceso de pago	page-checkout.md	0
Panel de control, administración, cuenta, configuración	page-app.md	0 a 1

Un brief de marca nunca eleva este límite. La página de inicio de una tienda puede ser un póster, y su proceso de pago no. Para un sitio completo, establece los límites por página antes de diseñar cualquiera de ellas.

Luego pregúntate qué tamaño debe alcanzar: 9 productos y 900 necesitan estructuras diferentes. Construye para el catálogo real y prueba con el tamaño más grande esperado.

2. Establecer el brief

Decide estas tres cosas antes de escribir el marcado. Infiérelas del proyecto; pregunta solo si la marca realmente las deja abiertas.

Intensidad geométrica. Por defecto, el nivel más bajo que exprese la marca, dentro del límite de la página.

Nivel	Nombre	La geometría cubre	Adecuado para
0	Tipo	Nada. La escala y el valor de gris hacen el trabajo	Manifiestos, leyes, lecturas largas
1	Marcador	Formas pequeñas codifican categoría o estado	SaaS, paneles, ciencia, finanzas
2	Estructura	La cuadrícula es visible; una composición por pantalla	Estudios, cultura, editorial
3	Póster	Una composición domina una sección	Lanzamientos, eventos, páginas de marca

Una página tiene como máximo una sección de nivel 3.

Nivel de profundidad. D0 es el predeterminado. Añade profundidad solo cuando "piezas ensamblándose" o "capas" sea el mensaje real.

Nivel	Técnica	Costo	Uso
D0	Fichas y líneas planas	Solo CSS	Casi en todas partes
D1	Desplazamiento duro (.bh-offset)	Solo CSS	Botones, tarjetas, énfasis
D2	Extrusión oblicua (.bh-extrude)	Filtro CSS	Conjuntos de iconos, pictogramas
D3	Losas isométricas (.bh-iso)	CSS 3D	Héroes, procesos, arquitectura de un producto
D4	WebGL (bh-three.js)	three.js, GPU	Solo una pieza central interactiva

Paleta. Establece data-bh-palette en <html> o en cualquier sección: primary, mono, signal, ember, pop, lab, night. Para una marca, sobrescribe los seis tokens de roles (--bh-bg, --bh-fg, --bh-a1 a --bh-a4) y ejecuta la verificación de contraste en el paso 5. El rojo, el azul y el amarillo son una convención histórica, no un requisito.

3. Colocar antes de dibujar

Lee placement.md antes de colocar cualquier forma. Asigna cada espacio de página a lo que pertenece allí y proporciona presupuestos numéricos: una composición por página, una familia de formas por bloque, un tamaño de ficha, formas que se unen a través de bordes, sin agujeros, sin figura anidada en otra figura, datos fuera del arte. La lista de fichas dice lo que existe; este archivo dice dónde va.

Para un héroe, elige un modo de arte allí (bloque, pila, friso, líneas o celdas). Por defecto, un bloque construido con composeBlock:

node scripts/generate.mjs block --cols 3 --rows 4 --seed 7 --colors fg,a1,a3,a2

Para otras secciones, composition.md proporciona reglas y modos de fallo para cada arquetipo. Muchos son métodos de póster, así que primero consulta el mapa de espacios.

Si el usuario proporciona referencias, mídelas con el método en reference-decoding.md antes de construir, luego compara tu página con los mismos números.

Lee la teoría en theory.md cuando el usuario quiera fundamentos, cuando una decisión esté en disputa o cuando escribas sobre el diseño.

4. Cargar las partes

Copia desde assets/ dentro del proyecto. No las reescribas de memoria.

• bauhaus-geometry.css: tokens, fichas, campos, profundidad, movimiento. Inclúyelo siempre. Es seguro junto a un sistema de diseño existente porque todo reside en capas en cascada y tiene el prefijo bh-.
• bauhaus-ui.css: widgets y secciones. Omítelo cuando el proyecto tenga sus propios componentes y aplica fichas y tokens a esos componentes.
• bauhaus-commerce.css con bh-commerce.js: listados, filtros, páginas de producto, carrito y proceso de pago. Úsalo para cualquier tienda.
• bh-shapes.js: formas personalizadas como datos, incluyendo <bh-shape>.
• bh-geometry.js: generadores y elementos personalizados opcionales <bh-field>, <bh-bundle>, <bh-construct>.
• bh-three.js: solo D4. templates/construct-webgl.html muestra la conexión.
• templates/landing.html: una página de marketing completa para empezar.
• bh-audit.js: una verificación en el navegador para el paso 6.

Prefiere el marcado estático para que la página no necesite JS en tiempo de ejecución:

node scripts/generate.mjs field --preset bloom --cols 6 --rows 3 --seed 4
node scripts/generate.mjs bundle --preset u --n 9 --gap 5
node scripts/generate.mjs construct --preset pinwheel
node scripts/generate.mjs shape --name bean --size 64

Prueba varias semillas y conserva la mejor; un campo generado es un borrador, así que intercambia fichas individuales a mano donde la composición sea débil.

5. Construir

La ficha es el átomo. Un elemento, una primitiva, una rotación de un cuarto de vuelta:

<i class="bh-t" data-s="quarter" data-f="a1" data-g="bg" data-r="90"></i>

• data-s forma: solid disc dot quarter half arch leaf tri peak diamond cross x stair octa ring notch bite bars slash arcs rings burst dots dotfan checker void
• data-f figura y data-g fondo: bg fg a1 a2 a3 a4, o establece --f y --g directamente
• data-r: 90 180 270
• Diseño: .bh-field con --cols, .bh-cells para una cuadrícula dibujada, data-span="2" para contraste de escala

¿Necesitas una forma que la lista no tiene? Lee primero shapes.md y descríbela a bh-shapes.js como datos. No dibujes a mano rutas SVG ni detalles de trazo sobre una silueta.

Encuentra el marcado prefabricado, luego adapta su copia y tokens:

• commerce.md: tarjeta de producto y sus estados, variantes, línea de carrito, resumen de pedido, campos de pago
• sections.md: héroes, bento, estadísticas, proceso, CTA, pie de página
• widgets.md: tarjetas, estadísticas, planes de precios, gráficos, gráfica, acordeón, formulario, pestañas
• grids.md: el módulo, recetas de diseño, reglas responsivas
• depth-3d.md: formato de especificación para construcciones, D3 y D4
• motion.md: recetas de entrada, desplazamiento y cinéticas

Frameworks. Las clases y atributos se transfieren directamente. En JSX, escribe className y style={{ "--cols": 6 }}. Con Tailwind, conserva la hoja de estilo principal y usa valores arbitrarios para el diseño alrededor. Genera el marcado generado en tiempo de compilación cuando sea posible.

6. Verificar

Ejecuta esto y corrige lo que informen antes de terminar:

node scripts/check-contrast.mjs            # paletas incluidas
node scripts/check-contrast.mjs --bg "#f2ede1" --fg "#191816" --a1 "#d3341b" --a2 "#1d4fa3"
node scripts/shape-lint.mjs src/index.html # cualquier archivo que contenga SVG en línea

Luego, en un navegador a 375px y 1280px, ejecuta la auditoría y trabaja a través de la lista de aceptación de la guía de la página:

const { audit } = await import("./assets/bh-audit.js");
console.table(audit({ card: ".bh-product", name: ".bh-product__name", price: ".bh-price" }));

También verifica:

• Cuenta el héroe: una familia de formas, un tamaño, sin agujeros y formas que se unen. Ponlo junto a tus referencias y compara los números.
• Elimina toda la geometría mentalmente: ¿sigue clara la jerarquía?
• Cada forma tiene un trabajo nombrable: marcar, dividir, enmarcar, codificar, navegar o anclar.
• Las composiciones decorativas tienen aria-hidden="true"; las formas de datos tienen una alternativa textual.
• Sin desplazamiento horizontal, y las fichas permanecen cuadradas.
• El texto nunca se sitúa sobre una ficha de patrón (bars, arcs, dots, burst).
• El color nunca es el único portador de significado. a3 y a4 son decorativos a menos que estén etiquetados.
• El movimiento se detiene bajo prefers-reduced-motion, y solo una cosa se repite por vista.
• Los objetivos interactivos tienen al menos 44px de alto, con foco visible.

Reglas estrictas

Derechos. Usa el estilo, nunca las obras. Consulta rights.md antes de nombrar, agregar imágenes o adaptar una referencia.

• Nunca reproduzcas una obra de arte, póster, logotipo o composición específica, ya sea histórica o contemporánea. Una imagen de referencia informa solo los principios: cambia la estructura, no solo los colores.
• Nunca uses el sello de la Bauhaus de 1922, logotipos de museos o fotos de edificios históricos, muebles o personas a menos que el usuario proporcione archivos con licencia.
• No marques el producto de un cliente como "Bauhaus" ni impliques afiliación con ninguna institución o empresa Bauhaus.
• Fuentes: por defecto, las pilas incluidas que hacen referencia a Jost, Archivo y Space Grotesk (SIL OFL) de código abierto. No distribuyas recreaciones comerciales sin una licencia.

Forma.

• Rellenos planos, líneas finas y bordes duros. Sin degradados en figuras, sombras suaves, vidrio esmerilado ni tarjetas redondeadas. Las curvas provienen de la geometría, no de border-radius en contenedores.
• Diseño asimétrico: texto alineado a la izquierda y peso descentrado. Evita un héroe centrado con formas flotando alrededor.
• Un acento saturado debe dominar cada vista. Tres primarios iguales se leen como un juguete.
• Se requiere contraste de escala: combina una forma muy grande con otras muy pequeñas.
• Varía el vocabulario restringiéndolo. Cinco formas bien usadas superan a las veinticinco a la vez.

Escala. Nunca juzgues un listado a partir de una demo de nueve elementos. Prueba con muchos elementos, nombres largos, imágenes faltantes y un resultado vacío antes de darlo por terminado.

Fallos comunes.

Fallo	Solución
Formas aleatorias esparcidas alrededor del contenido	Construye un bloque con composeBlock y elimina el resto
Figura anidada en otra figura	Haz que el objeto mismo sea la forma, abarcando 2×2
Líneas finas en cada sección	Enmarca una sección y usa espacio para las demás
Fichas iguales cubriendo todo, como papel tapiz	Agrega un gran espacio, añade vacíos, reduce el área
Colores primarios en cada elemento	Usa un solo acento; el resto es tinta y papel
La geometría lucha contra el texto	Baja la intensidad un nivel
Fuente "Bauhaus" en todas partes	Usa una grotesca neutra para el texto, sans serif geométrica solo para títulos
Escena isométrica que no dice nada	Usa D0 a menos que las partes correspondan a conceptos reales
Forma con un trozo o fragmento suelto	Reconstruye con bh-shapes.js: un corte, no un trazo
Diseño editorial aplicado a una tienda	Enruta por tipo de página: precio y acción primero
Adición con un toque elige una variante que nadie eligió	Enlaza a opciones cuando haya más de una