# Sistema de design Michigan Forty Two

## Prévia da interface do sistema de design Michigan Forty Two

Combine os filtros de função e pesquisa, chegue a um resultado vazio e limpe a seleção.

## Referência de design do sistema de design Michigan Forty Two

Paleta, tipografia, orientações de treinamento e publicação oficiais da Michigan Engineering para a web. A geometria da prévia e a implementação em tempo de execução são explicitamente originais.

### Paleta oficial para a web

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Maize / Blue | #FFCB05 / #00274C | Par de cores principal da identidade; as cores de apoio não o substituem. |
| Base text / surface | #131516 / #FAFAFA | Puma Black e Base White. |
| February Grey | #E9E9E9 | Tom neutro claro para divisões ou superfícies de apoio. |
| Community Blue | #1E406B | Tom de azul de apoio. |
| Research Blue | #2A5993 | Tom de azul de apoio. |
| Hyperlink Blue | #1779BA | Tom de link definido para a web; ainda é preciso verificar o contexto e o contraste. |
| Web A2 Amethyst | #663289 | Use a paleta do sistema para a web; a página geral de identidade mais antiga lista outro tom de roxo. |
### Tipografia e idioma

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Interface/headline family | Roboto | Família tipográfica oficial para a web; o peso indica ênfase. |
| Paragraph family | Open Sans | As orientações oficiais a recomendam especificamente para parágrafos na web. |
| Playfair Display | Print-oriented serif option | Não presuma que todos os títulos para a web devam usar essa fonte. |
| Page and section names | Sentence case | Também se aplica a links de âncora, títulos promocionais e legendas. |
| CTA punctuation | No punctuation | Convenção de redação documentada; preserve a formulação e seu significado. |
### Plataforma e padrões compatíveis

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Runtime | Institution-supported WordPress Forty-Two theme | Disponível por meio de uma parceria com C&M ou CAEN, não como SDK público do npm verificado. |
| Composition | Blocks and patterns | Elementos/componentes aparecem como blocos; grupos maiores podem ser padrões. |
| People directory | Role and Research filters; Query Sort or Sidebar layouts | Inventário da documentação oficial; o plugin exato API não foi verificado publicamente aqui. |
| Deprecated component | Accordion Item | Listado como obsoleto; não o recomende para uma página nova. |
| Navigation maintenance | Appearance > Editor > Navigation | Depois de criar a página, adicione ou reordene o destino no menu desejado. |
### Decisões explícitas da prévia

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Preview runtime | Original HTML/CSS/JS | Demonstra o conceito documentado; não carrega o tema institucional restrito. |
| Preview typography | Arial; 17px body / 1.6 line-height | Alternativa intencional e tamanho original, não um token oficial. |
| Preview geometry | 1040px max; 220px filter sidebar; 32px gap | Composição original, não valores publicados da grade Forty-Two. |
| Preview compact breakpoint | 700px | Empilha os filtros acima dos resultados; escolha de implementação. |
| Filter semantics | Role AND research area | Interseção local original, com recuperação para quando não há resultados. |
## Guia completo do sistema de design Michigan Forty Two

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## 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

### Cruze a função e a área

Regra original de filtragem local que torna concreto o conceito de diretório documentado.

```
// 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

### Interpretação completa de um diretório de pessoas

Inclui dois filtros, aviso de resultados, recuperação para nenhum resultado e opção de redefinição.

```
<!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>
```

Referência de código

## Configuração do agente do sistema de design Michigan Forty Two

### Ponto de partida para implementação

Adoção de tema institucional, não instalação de pacote público. O exemplo independente HTML está completo e é executado localmente. O ZIP do exemplo funcional completo em Fontes também inclui as dependências exatas da prévia e o documento integral. Extraia o arquivo, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/michigan-forty-two.html. Não abra exemplos baseados em módulos usando file://.

```
Supported institutional adoption:
1. Confirm the site is a Michigan Engineering department or unit project.
2. Arrange a Forty-Two WordPress site through Communications & Marketing or CAEN web publishing.
3. Use the Training site to select an existing block/pattern and create page stubs.
4. Build People content with the supported role/research-area structure and the current People pattern.
5. Connect the page to the intended navigation and filters in Appearance > Editor.
6. Preview real content, contrast and narrow layouts before publishing through the institution's process.

Independent study:
Open the complete HTML example below locally. It does not install or reproduce the institution's theme.
```

### Um prompt para seu projeto

```
Para um site autorizado da Michigan Engineering, use o tema compatível da Forty-Two para WordPress e os padrões atuais de Pessoas. Mantenha funções e áreas de pesquisa como classificações atualizadas, use a paleta específica para a Web e a tipografia documentada, e conecte novas páginas à navegação. Para um protótipo independente, identifique o layout e o ambiente de execução originais, use pessoas fictícias e evite logotipos institucionais. Implemente filtros combinados claros e uma forma de recuperação para o estado vazio.
```

## Fontes e escopo do sistema de design Michigan Forty Two

Interpretação independente de OpenDesign. O tema compatível da Forty-Two para WordPress e os detalhes internos exatos dos plugins não estão incluídos; todos os perfis são fictícios.

- Escopo do sistema e da hospedagem Blocos, padrões e opção de hospedagem autorizada do WordPress.

- Cores para a Web Paleta específica para a Web e requisitos de contraste.

- Tipografia Roboto, Open Sans e hierarquia editorial.

- Conteúdo do treinamento Filtros de Pessoas, padrões e blocos obsoletos.

- Fluxo para novas páginas Etapas concretas de navegação e edição.

- Orientações de contraste Limites do tema padrão e das cores personalizadas.

- Convenções de escrita Uso de maiúsculas e minúsculas em frases e convenções de CTA.

- Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação.

## Recursos relacionados ao sistema de design Michigan Forty Two

### Aksel

Use os tokens ax reais da versão 8 de Aksel, a densidade nativa da tabela e uma estrutura semântica de cabeçalho. Ordene e selecione registros fictícios de acompanhamento enquanto compara os temas claro e escuro.

### NHS sistema de design

Use a tipografia, o espaçamento responsivo, as opções de seleção agrupadas e os detalhes contextuais do NHS.UK para criar um fluxo claro de escolha de preferências de consulta.

### NL sistema de design

Crie uma interface de serviço público com componentes reais de colaboradores e um tema explícito. Esta referência usa Utrecht CSS para demonstrar o mapeamento de tokens, a estrutura de uma lista de dados e dois temas originais com o mesmo fluxo de edição.


- [Referência de implementação](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Fonte](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/)
- [Fonte](https://cm.engin.umich.edu/our-brand/typography/)
- [Fonte](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Fonte](https://training.engin.umich.edu/)
- [Consulte a especificação de apoio](https://cm.engin.umich.edu/our-brand/design-system-42/)
- [Consulte a especificação de apoio](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/)
- [Consulte a especificação de apoio](https://cm.engin.umich.edu/our-brand/typography/)
- [Referência de código](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Consulte a especificação de apoio](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Consulte a especificação de apoio](https://training.engin.umich.edu/page-basics/new-page-checklist/)
- [Consulte a especificação de apoio](https://accessibility.engin.umich.edu/color-contrast/)
- [Escopo do sistema e da hospedagem Blocos, padrões e opção de hospedagem autorizada do WordPress.](https://cm.engin.umich.edu/our-brand/design-system-42/)
- [Cores para a Web Paleta específica para a Web e requisitos de contraste.](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/)
- [Tipografia Roboto, Open Sans e hierarquia editorial.](https://cm.engin.umich.edu/our-brand/typography/)
- [Conteúdo do treinamento Filtros de Pessoas, padrões e blocos obsoletos.](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Fluxo para novas páginas Etapas concretas de navegação e edição.](https://training.engin.umich.edu/page-basics/new-page-checklist/)
- [Orientações de contraste Limites do tema padrão e das cores personalizadas.](https://accessibility.engin.umich.edu/color-contrast/)
- [Convenções de escrita Uso de maiúsculas e minúsculas em frases e convenções de CTA.](https://sites.google.com/a/umich.edu/engcom-wiki/web/writing-best-practices/text-content)