Sistema de design Michigan Forty Two.

Implementação institucional do sistema de design Michigan Forty Two

Um ecossistema WordPress compatível

Forty-Two é o sistema de design da Michigan Engineering e um tema WordPress compatível. A visão geral oficial descreve elementos, componentes e grupos de componentes, associados a blocos e padrões no editor. O tema é disponibilizado aos departamentos e unidades de Engineering por meio de acordos de hospedagem com Communications & Marketing ou CAEN. Não deve ser apresentado como um pacote npm genérico que qualquer projeto possa instalar.

Este exemplo local é uma interpretação transparente do conceito documentado de diretório de pessoas. Ele usa a paleta publicada e perfis fictícios, enquanto o layout e o código de filtragem são originais. Um site institucional autorizado deve usar o tema compatível e seus padrões atuais, em vez de copiar esta demonstração para um bloco personalizado HTML e presumir que sejam equivalentes.

Consulte a especificação de apoio

Paleta e contraste para a web no sistema de design Michigan Forty Two

Use a referência específica para a web

Maize e Blue formam a identidade principal. A paleta para a web acrescenta Base Puma Black, Base White e tons de azul nomeados, entre eles Hyperlink Blue. As cores secundárias complementam o par principal; não são motivo para atribuir um fundo chamativo e sem relação a cada tema acadêmico. O exemplo mantém as cores de identidade no cabeçalho e usa tons neutros discretos ao redor dos resultados.

A paleta do sistema para a web e a página geral da marca divergem em alguns valores secundários, incluindo A2 Amethyst. A tabela de referência usa a fonte específica do sistema para a web. Qualquer desvio do padrão do tema ainda precisa passar por uma verificação de contraste. Ter um nome oficial não torna uma cor automaticamente adequada para texto pequeno em qualquer fundo.

Consulte a especificação de apoio

Tipografia e voz editorial no sistema de design Michigan Forty Two

Hierarquia sem inventar tokens de fonte

O guia de tipografia de Engineering identifica Roboto e Open Sans como as principais famílias para a web, e recomenda Open Sans para parágrafos. Playfair Display é indicada para materiais impressos, o que não comprova que seja obrigatório usar uma fonte serifada nos títulos para a web. Esta prévia declara explicitamente o uso de Arial como alternativa; o corpo de 17px e os tamanhos dos títulos são escolhas de demonstração, não tokens tipográficos Forty-Two inventados.

As orientações de redação recomendam usar frases em caixa baixa nos títulos de páginas, títulos de seção, rótulos de âncora, títulos promocionais e legendas. Isso combina com um diretório de pessoas: um nome, uma função e uma descrição de pesquisa claros informam mais do que um slogan promocional. Em sites reais, mantenha a nomenclatura institucional correta e não acrescente credenciais não verificadas aos perfis.

Consulte a especificação de apoio

Estrutura de pessoas e taxonomias no sistema de design Michigan Forty Two

Separe a pessoa do rótulo do filtro

O índice oficial de treinamentos inclui a configuração de People, a adição de uma função ou área de pesquisa e dois layouts de filtro: Query Sort e Sidebar. Esses tópicos mostram que as pessoas e suas classificações são conteúdo gerenciado, não blocos duplicados manualmente em cada página de listagem. Os atributos atuais exatos do plugin não foram encontrados em fontes públicas, por isso este guia não inventa nomes de shortcode nem chaves de consulta.

No exemplo independente, cada pessoa tem uma função e uma área. Os dois filtros são aplicados em conjunto. Esse modelo deliberadamente simples deixa a interseção visível: Faculty e Robotics não retornam resultados, enquanto Research staff e Robotics retornam um. Uma taxonomia de produção pode ser mais elaborada, mas o comportamento AND/OR deve ser definido antes de criar a interface.

// Original local filter composition; not a Forty-Two plugin API.
const matches = (person, role, area) =>
  (role === 'all' || person.role === role) &&
  (area === 'all' || person.area === area);
// Apply both conditions; clearing one filter must preserve the other.
// Announce the result count and offer recovery when the intersection is empty.

Referência de código

Consulte a especificação de apoio

Filtragem e recuperação no sistema de design Michigan Forty Two

Deixe a seleção atual clara

Alterar um filtro atualiza os perfis visíveis e uma região dinâmica com a contagem de resultados. O foco não sai do campo de seleção, permitindo que pessoas que usam o teclado comparem opções sem voltar repetidamente ao controle. A mensagem de ausência de resultados explica que a combinação não tem resultados e orienta a alterar um dos campos ou limpar ambos.

Limpar os filtros restaura os valores padrão e todos os perfis, e então devolve o foco ao primeiro filtro. Os perfis permanecem na mesma ordem. Isso evita um problema sutil em diretórios nos quais cada alteração de filtro remove pessoas e também as reordena inesperadamente. Os nomes e as descrições são fictícios; não implicam vínculos reais com a universidade.

1. Selecione Research staff e confirme que o diretório mostra apenas um perfil.
2. Combine Faculty com Robotics e confira a mensagem de recuperação exibida quando não há resultados.
3. Limpe os dois filtros e confirme que os três perfis reaparecem na ordem original.

Consulte a especificação de apoio

Blocos, padrões e manutenção no sistema de design Michigan Forty Two

Escolha um padrão mantido

O inventário de treinamentos inclui padrões para especialistas, eventos, ciclos de consulta, publicações recentes e pessoas. Use o padrão correspondente ao modelo de conteúdo, em vez de montar uma grade visualmente semelhante com caixas de texto sem conexão. Um padrão para pessoas pode preservar a relação entre o registro de uma pessoa e o diretório que o exibe.

O componente mais antigo Accordion Item está explicitamente listado como obsoleto. Sua presença em materiais de treinamento históricos não é uma recomendação para novas implementações. Se páginas existentes usarem um bloco antigo, consulte o site de treinamento atual e o processo de manutenção compatível antes de substituí-lo; preserve o conteúdo significativo e os destinos existentes ao alterar a apresentação.

• Registros de pessoas: nomes, funções, áreas e conteúdo dos perfis devem pertencer à estrutura de conteúdo compatível.
• Padrões: use uma composição atual e documentada para a listagem ou seção promocional.
• Navegação: trate os links de descoberta como conteúdo mantido, não como consequência incidental da publicação de uma página.

Consulte a especificação de apoio

Fluxo prático do editor do sistema de design Michigan Forty Two

Conecte uma nova página ao site

A lista oficial de verificação para novas páginas explica que publicar uma página não a torna automaticamente encontrável. Defina a página principal e, em seguida, conecte-a ao cabeçalho, à subnavegação, aos filtros de função ou área de pesquisa, ou ao rodapé necessários. No fluxo documentado do editor, acesse Aparência, Editor e Navegação, selecione o menu adequado, adicione a página e ajuste sua posição na visualização em lista.

Para um projeto autorizado da Forty-Two, esse fluxo do editor é o caminho concreto de integração. Este recurso não inventa um comando de SDK público. O bloco de configuração informa a opção de hospedagem compatível e inclui um link para o material de treinamento; o exemplo completo de código local está identificado separadamente para estudo independente.

Consulte a especificação de apoio

Limites de acessibilidade e identidade do sistema de design Michigan Forty Two

Os estilos padrão não validam o conteúdo

As orientações de acessibilidade da Engineering informam que os componentes padrão da Forty-Two foram projetados para oferecer contraste acessível, mas alterações nas cores podem comprometer esse benefício. O conteúdo do perfil também precisa de títulos significativos, rótulos de links úteis, descrições alternativas precisas para imagens e um estado vazio compreensível. A prévia verifica o layout responsivo e o comportamento dos filtros, mas não certifica a conformidade institucional.

A prévia original não usa Block M, assinatura da universidade nem dados reais de funcionários. Os logotipos institucionais são distribuídos por canais autenticados da marca e fazem parte de um sistema de identidade separado destas cores didáticas. Um site genuíno da Engineering deve seguir os processos de marca e publicação compatíveis; um protótipo independente deve se identificar com transparência.

Consulte a especificação de apoio

Exemplos de componentes do sistema de design Michigan Forty Two

// Original local filter composition; not a Forty-Two plugin API.
const matches = (person, role, area) =>
  (role === 'all' || person.role === role) &&
  (area === 'all' || person.area === area);
// Apply both conditions; clearing one filter must preserve the other.
// Announce the result count and offer recovery when the intersection is empty.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research collaborators</title><style>*{box-sizing:border-box}body{margin:0;color:#131516;background:#fafafa;font:17px/1.6 Arial,sans-serif}header{background:#00274c;color:#fafafa;border-top:8px solid #ffcb05;padding:32px}h1{font-size:36px;line-height:1.15;margin:8px 0 16px}h2{font-size:23px;line-height:1.25;margin:0 0 8px}main,header>div{max-width:1040px;margin:auto}.layout{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:32px}label{display:block;font-weight:bold;margin:0 0 8px}select,button{font:inherit;padding:10px;width:100%;border:1px solid #00274c;margin-bottom:24px;background:white;color:#00274c}button{cursor:pointer;font-weight:bold}button:focus-visible,select:focus-visible{outline:3px solid #00274c;outline-offset:3px}article{padding:24px 0;border-top:1px solid #e9e9e9}article p{margin:8px 0}.role{color:#1e406b;font-weight:bold}.topic{display:inline-block;background:#e9e9e9;padding:4px 10px;font-size:14px}#empty{border-left:6px solid #ffcb05;padding:16px;background:white}footer{font-size:14px;padding:24px 32px;border-top:1px solid #e9e9e9}[hidden]{display:none!important}@media(max-width:700px){.layout{grid-template-columns:1fr;padding:24px;gap:8px}header{padding:24px}h1{font-size:30px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filters button{grid-column:1/-1;margin-bottom:8px}select{margin-bottom:8px}}</style><header><div><small>INDEPENDENT RESEARCH DIRECTORY</small><h1>Find a collaborator</h1><p>Explore fictional profiles by role and research area.</p></div></header><main><div class="layout"><aside class="filters" aria-label="Filter people"><div><label for="role">Role</label><select id="role"><option value="all">All roles</option><option value="faculty">Faculty</option><option value="staff">Research staff</option></select></div><div><label for="area">Research area</label><select id="area"><option value="all">All areas</option><option value="energy">Energy</option><option value="robotics">Robotics</option><option value="materials">Materials</option></select></div><button id="reset">Clear filters</button></aside><section aria-label="Matching people"><p id="count" role="status">3 people</p><article data-role="faculty" data-area="energy"><h2>Avery Chen</h2><p class="role">Faculty</p><p>Studies ways to make community energy systems easier to understand and maintain.</p><span class="topic">Energy</span></article><article data-role="staff" data-area="robotics"><h2>Jordan Ellis</h2><p class="role">Research staff</p><p>Supports experiments in human-centred robotics and field testing.</p><span class="topic">Robotics</span></article><article data-role="faculty" data-area="materials"><h2>Samira Patel</h2><p class="role">Faculty</p><p>Explores how durable materials can support repair and reuse.</p><span class="topic">Materials</span></article><div id="empty" hidden><h2>No matching people</h2><p>Try another role or research area, or clear both filters.</p></div></section></div><footer>OpenDesign interpretation of Forty-Two’s documented people-directory concept and web palette. Fictional profiles; Arial fallback, original layout and filtering. Not the university’s WordPress theme or an official directory.</footer></main><script>const role=document.querySelector('#role'),area=document.querySelector('#area');function filter(){let n=0;document.querySelectorAll('article').forEach(a=>{a.hidden=!((role.value==='all'||role.value===a.dataset.role)&&(area.value==='all'||area.value===a.dataset.area));if(!a.hidden)n++});document.querySelector('#count').textContent=n+' '+(n===1?'person':'people');document.querySelector('#empty').hidden=n!==0}role.onchange=area.onchange=filter;document.querySelector('#reset').onclick=()=>{role.value=area.value='all';filter();role.focus()};</script></html>