salveignis/bauhaus-geometry

Geometria Bauhaus

Geometria aqui é um sistema de construção, não uma decoração. Cada forma na página deve ter uma função, e a página ainda deve funcionar se as formas forem removidas. Ela também nunca deve atrapalhar a função da página. Siga este fluxo de trabalho em ordem.

1. Roteie pelo tipo de página

Comece pelo que a página deve fazer, não por como ela deve parecer. Leia o guia correspondente, que define o limite de geometria e a lista de verificação de aceitação.

A página é	Leia	Limite de intensidade
Home, marca, lançamento, landing, editorial	page-storefront.md	3
Categoria, resultados de busca, catálogo	page-plp.md	1
Detalhe do produto	page-pdp.md	1, ou 2 atrás da galeria
Carrinho, checkout	page-checkout.md	0
Dashboard, admin, conta, configurações	page-app.md	0 a 1

Um brief de marca nunca eleva esse limite. A home de uma loja pode ser um pôster, e seu checkout não pode. Para um site completo, defina os limites por página antes de projetar qualquer uma delas.

Depois, pergunte qual tamanho ele deve atingir: 9 produtos e 900 precisam de estruturas diferentes. Construa para o catálogo real e teste com o maior tamanho esperado.

2. Defina o brief

Decida estas três coisas antes de escrever marcação. Infira-as do projeto; pergunte apenas se a marca realmente as deixar em aberto.

Intensidade geométrica. Use como padrão o nível mais baixo que expresse a marca, dentro do limite da página.

Nível	Nome	A geometria cobre	Adequado para
0	Tipo	Nada. Escala e valor de cinza fazem o trabalho	Manifestos, leis, leituras longas
1	Marcador	Pequenas formas codificam categoria ou estado	SaaS, dashboards, ciência, finanças
2	Estrutura	A grade é visível; uma composição por tela	Estúdios, cultura, editorial
3	Pôster	Uma composição domina uma seção	Lançamentos, eventos, páginas de marca

Uma página tem no máximo uma seção de nível 3.

Nível de profundidade. D0 é o padrão. Adicione profundidade apenas quando "partes se montando" ou "camadas" for a mensagem real.

Nível	Técnica	Custo	Uso
D0	Tijolos e linhas planas	Apenas CSS	Quase em qualquer lugar
D1	Deslocamento duro (.bh-offset)	Apenas CSS	Botões, cards, ênfase
D2	Extrusão oblíqua (.bh-extrude)	Filtro CSS	Conjuntos de ícones, pictogramas
D3	Lajes isométricas (.bh-iso)	CSS 3D	Heróis, processos, arquitetura de um produto
D4	WebGL (bh-three.js)	three.js, GPU	Apenas uma peça central interativa

Paleta. Defina data-bh-palette no <html> ou em qualquer seção: primary, mono, signal, ember, pop, lab, night. Para uma marca, substitua os seis tokens de função (--bh-bg, --bh-fg, --bh-a1 a --bh-a4) e execute a verificação de contraste na etapa 5. Vermelho, azul e amarelo são uma convenção histórica, não um requisito.

3. Posicione antes de desenhar

Leia placement.md antes de posicionar qualquer forma. Ele mapeia cada slot da página para o que pertence ali e fornece orçamentos numéricos: uma composição por página, uma família de formas por bloco, um tamanho de tijolo, formas que se unem através das bordas, sem buracos, sem figura aninhada em figura, dados fora da arte. A lista de tijolos diz o que existe; este arquivo diz onde vai.

Para um herói, escolha um modo de arte ali (bloco, pilha, friso, linhas ou células). Use como padrão um bloco construído com composeBlock:

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

Para outras seções, composition.md fornece regras e modos de falha para cada arquétipo. Muitos são métodos de pôster, então verifique o mapa de slots primeiro.

Se o usuário fornecer referências, meça-as com o método em reference-decoding.md antes de construir, depois compare sua página com os mesmos números.

Leia a teoria em theory.md quando o usuário quiser justificativa, quando uma decisão for contestada ou ao escrever sobre o design.

4. Carregue as partes

Copie de assets/ para o projeto. Não as reescreva de memória.

• bauhaus-geometry.css: tokens, tijolos, campos, profundidade, movimento. Sempre inclua. É seguro ao lado de um sistema de design existente porque tudo fica em camadas de cascata e é prefixado com bh-.
• bauhaus-ui.css: widgets e seções. Pule quando o projeto tiver seus próprios componentes e aplique tijolos e tokens a esses componentes.
• bauhaus-commerce.css com bh-commerce.js: listagens, filtros, páginas de produto, carrinho e checkout. Use para qualquer loja.
• bh-shapes.js: formas personalizadas como dados, incluindo <bh-shape>.
• bh-geometry.js: geradores e elementos personalizados opcionais <bh-field>, <bh-bundle>, <bh-construct>.
• bh-three.js: apenas D4. templates/construct-webgl.html mostra a fiação.
• templates/landing.html: uma página de marketing completa para começar.
• bh-audit.js: uma verificação no navegador para a etapa 6.

Prefira marcação estática para que a página não precise de JS em tempo de execução:

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

Experimente várias sementes e mantenha a melhor; um campo gerado é um rascunho, então troque tijolos individuais manualmente onde a composição estiver fraca.

5. Construa

O tijolo é o átomo. Um elemento, uma primitiva, uma rotação de um quarto de volta:

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

• data-s formato: 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 e data-g fundo: bg fg a1 a2 a3 a4, ou defina --f e --g diretamente
• data-r: 90 180 270
• Layout: .bh-field com --cols, .bh-cells para uma grade desenhada, data-span="2" para contraste de escala

Precisa de uma forma que a lista não tem? Leia shapes.md primeiro e descreva-a para bh-shapes.js como dados. Não desenhe caminhos SVG à mão ou detalhes de traço sobre uma silhueta.

Encontre marcação pronta, depois adapte seu texto e tokens:

• commerce.md: cartão de produto e seus estados, variantes, linha do carrinho, resumo do pedido, campos de checkout
• sections.md: heróis, bento, estatísticas, processo, CTA, rodapé
• widgets.md: cartões, estatísticas, planos de preços, gráficos, gráfico de linhas, acordeão, formulário, abas
• grids.md: o módulo, receitas de layout, regras responsivas
• depth-3d.md: formato de especificação para construtos, D3 e D4
• motion.md: receitas de entrada, rolagem e cinéticas

Frameworks. Classes e atributos são portados diretamente. Em JSX, escreva className e style={{ "--cols": 6 }}. Com Tailwind, mantenha a folha de estilo principal e use valores arbitrários para o layout ao redor dela. Renderize a marcação gerada em tempo de compilação quando possível.

6. Verifique

Execute estes comandos e corrija o que eles relatarem antes de terminar:

node scripts/check-contrast.mjs            # paletas agrupadas
node scripts/check-contrast.mjs --bg "#f2ede1" --fg "#191816" --a1 "#d3341b" --a2 "#1d4fa3"
node scripts/shape-lint.mjs src/index.html # qualquer arquivo contendo SVG inline

Depois, em um navegador a 375px e 1280px, execute a auditoria e percorra a lista de aceitação do guia da página:

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

Verifique também:

• Conte o herói: uma família de formas, um tamanho, sem buracos e formas que se unem. Coloque-o ao lado de suas referências e compare os números.
• Remova toda a geometria mentalmente: a hierarquia ainda está clara?
• Cada forma tem uma função nomeável: marcar, dividir, emoldurar, codificar, navegar ou ancorar.
• Composições decorativas têm aria-hidden="true"; formas de dados têm uma alternativa textual.
• Sem rolagem horizontal, e os tijolos permanecem quadrados.
• O texto nunca fica sobre um tijolo de padrão (bars, arcs, dots, burst).
• A cor nunca é o único portador de significado. a3 e a4 são decorativos a menos que rotulados.
• O movimento para sob prefers-reduced-motion, e apenas uma coisa faz loop por visualização.
• Os alvos interativos têm pelo menos 44px de altura, com foco visível.

Regras rígidas

Direitos. Use o estilo, nunca as obras. Veja rights.md antes de nomear, adicionar imagens ou adaptar uma referência.

• Nunca reproduza uma obra de arte, pôster, logotipo ou composição específica, seja histórica ou contemporânea. Uma imagem de referência informa princípios apenas: mude a estrutura, não apenas as cores.
• Nunca use o sinete da Bauhaus de 1922, logotipos de museus ou fotos de edifícios históricos, móveis ou pessoas, a menos que o usuário forneça arquivos licenciados.
• Não rotule o produto de um cliente como "Bauhaus" nem implique afiliação com qualquer instituição ou empresa Bauhaus.
• Fontes: use como padrão as pilhas agrupadas, que referenciam Jost, Archivo e Space Grotesk com licença aberta (SIL OFL). Não distribua revivals comerciais sem uma licença.

Forma.

• Preenchimentos planos, traços finos e bordas duras. Sem gradientes em figuras, sombras suaves, glassmorfismo ou cartões arredondados. Curvas vêm da geometria, não de border-radius em contêineres.
• Layout assimétrico: tipo alinhado à esquerda e peso descentralizado. Evite um herói centralizado com formas flutuando ao redor.
• Um acento saturado deve dominar cada visualização. Três primárias iguais parecem brinquedo.
• O contraste de escala é obrigatório: emparelhe uma forma muito grande com formas muito pequenas.
• Varie o vocabulário restringindo-o. Cinco formas bem usadas vencem todas as vinte e cinco de uma vez.

Escala. Nunca julgue uma listagem a partir de uma demo de nove itens. Teste com muitos itens, nomes longos, imagens ausentes e um resultado vazio antes de considerar concluído.

Falhas comuns.

Falha	Correção
Formas aleatórias espalhadas pelo conteúdo	Construa um bloco com composeBlock e exclua o resto
Figura aninhada em uma figura	Faça do objeto a própria forma, ocupando 2×2
Traços finos em todas as seções	Moldura uma seção e use espaço para as outras
Tijolos iguais cobrindo tudo, como papel de parede	Adicione um grande span, adicione vazios, reduza a área
Cores primárias em todo elemento	Use um acento; o resto é tinta e papel
A geometria luta com o texto	Reduza a intensidade em um nível
Fonte "Bauhaus" em todo lugar	Use uma grotesca neutra para texto, sans-serif geométrica apenas para exibição
Cena isométrica que não diz nada	Use D0 a menos que as partes mapeiem conceitos reais
Forma com um toco ou fragmento solto	Reconstrói com bh-shapes.js: um corte, não um traço
Layout editorial aplicado a uma loja	Roteie por tipo de página: preço e ação primeiro
Adição de um toque escolhe uma variante que ninguém escolheu	Link para opções quando houver mais de uma