# Дизайн-система Michigan Forty Two

## Michigan Forty Two Предпросмотр интерфейса дизайн-системы

Сочетайте фильтры по должности и исследованиям, добейтесь отсутствия результатов и сбросьте выбор.

## Michigan Forty Two Справочник по дизайн-системе

Официальная веб-палитра, типографика, рекомендации по обучению и публикации Michigan Engineering. Геометрия и работа предпросмотра — авторские решения.

### Официальная веб-палитра

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Maize / Blue | #FFCB05 / #00274C | Основная пара цветов фирменного стиля; дополнительные цвета её не заменяют. |
| Base text / surface | #131516 / #FAFAFA | Puma Black и Base White. |
| February Grey | #E9E9E9 | Светлый нейтральный цвет для разделения или дополнительного фона. |
| Community Blue | #1E406B | Дополнительный оттенок синего. |
| Research Blue | #2A5993 | Дополнительный оттенок синего. |
| Hyperlink Blue | #1779BA | Фирменный цвет ссылок для веба; всё равно учитывайте контекст и контрастность. |
| Web A2 Amethyst | #663289 | Используйте палитру веб-дизайн-системы; на более старой общей странице о фирменном стиле указан другой оттенок фиолетового. |
### Типографика и язык

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Interface/headline family | Roboto | Официальное семейство веб-шрифтов; акцент передаётся начертанием. |
| Paragraph family | Open Sans | Официальные рекомендации предписывают использовать его в абзацах на веб-страницах. |
| Playfair Display | Print-oriented serif option | Не следует считать, что его нужно использовать во всех заголовках веб-страниц. |
| Page and section names | Sentence case | Также относится к ссылкам-якорям, названиям промо-блоков и подписям. |
| CTA punctuation | No punctuation | Документированная редакционная норма; сохраняйте значимые формулировки. |
### Поддерживаемая платформа и паттерны

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Runtime | Institution-supported WordPress Forty-Two theme | Доступно через соглашение с C&M или CAEN, а не как подтверждённый общедоступный SDK npm. |
| Composition | Blocks and patterns | Элементы и компоненты представлены блоками; более крупные группы могут быть паттернами. |
| People directory | Role and Research filters; Query Sort or Sidebar layouts | Перечень официальной документации; точное название плагина API здесь не подтверждено в открытых источниках. |
| Deprecated component | Accordion Item | Помечено как устаревшее; не рекомендуйте для новой страницы. |
| Navigation maintenance | Appearance > Editor > Navigation | После создания страницы добавьте её в нужное меню или измените порядок пунктов. |
### Явно обозначенные решения для предпросмотра

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Preview runtime | Original HTML/CSS/JS | Демонстрирует документированную концепцию, но не загружает закрытую тему учреждения. |
| Preview typography | Arial; 17px body / 1.6 line-height | Преднамеренный запасной вариант и авторский размер, а не официальный токен. |
| Preview geometry | 1040px max; 220px filter sidebar; 32px gap | Авторская композиция, а не опубликованные значения сетки Forty-Two. |
| Preview compact breakpoint | 700px | Фильтры размещены над результатами; это решение приложения. |
| Filter semantics | Role AND research area | Авторская локальная логика пересечения фильтров и восстановления при отсутствии результатов. |
## Michigan Forty Two Полное руководство по дизайн-системе

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Michigan Forty Two Реализация дизайн-системы для учреждения

### Поддерживаемая экосистема WordPress

> Forty-Two — дизайн-система Michigan Engineering и поддерживаемая тема WordPress. В официальном обзоре описаны элементы, компоненты и группы компонентов, которым в редакторе соответствуют блоки и паттерны. Тема предоставляется подразделениям и учреждениям Engineering по соглашению с Communications & Marketing или через хостинг CAEN. Не следует представлять её как обычный пакет npm, который можно установить в любом проекте.

Локальный образец — прозрачная интерпретация документированной концепции каталога сотрудников. В нём используются опубликованная веб-палитра и вымышленные профили, а макет и код фильтрации созданы специально. На официальном сайте учреждения с соответствующим разрешением следует использовать поддерживаемую тему и актуальные паттерны, а не копировать эту демонстрацию в пользовательский блок HTML, считая его равноценной заменой.

Прочитать вспомогательную спецификацию

## Michigan Forty Two Веб-палитра и контрастность дизайн-системы

### Используйте специальный справочник для веб-палитры

Maize и Blue — основные цвета фирменного стиля. В веб-палитре также есть Base Puma Black, Base White и именованные оттенки синего, в том числе Hyperlink Blue. Дополнительные оттенки поддерживают основную пару; это не повод назначать каждой академической теме свой кричащий фон. В образце фирменные цвета используются в заголовке, а вокруг результатов — сдержанные нейтральные тона.

Значения некоторых дополнительных цветов, в том числе A2 Amethyst, в веб-палитре и на общей странице о фирменном стиле различаются. В таблице справочника используются данные из отдельного источника веб-палитры. При любом отступлении от настроек темы по умолчанию нужно проверять контрастность. Официальное название цвета не гарантирует, что его можно использовать для мелкого текста на любом фоне.

Прочитать вспомогательную спецификацию

## Michigan Forty Two Типографика и редакционный стиль дизайн-системы

### Иерархия без выдуманных токенов шрифтов

В руководстве по типографике Engineering шрифтами для веба названы Roboto и Open Sans; Open Sans рекомендуется для абзацев. Playfair Display описан как шрифт для печатных материалов, поэтому это не подтверждение того, что веб-заголовки должны быть с засечками. В этом предпросмотре явно используется запасной шрифт Arial; размеры основного текста 17px и заголовков — демонстрационные решения, а не выдуманные токены типографики Forty-Two.

Рекомендации по написанию требуют использовать предложения с заглавной буквы только в начале в названиях страниц, заголовках разделов, подписях ссылок, названиях промо-блоков и подписях. Такой подход подходит для каталога сотрудников: ясное имя, должность и описание исследований содержат больше информации, чем рекламный слоган. На реальных сайтах точно указывайте название учреждения и не добавляйте в профили неподтверждённые сведения о квалификации.

Прочитать вспомогательную спецификацию

## Michigan Forty Two Структура каталога сотрудников и таксономии дизайн-системы

### Отделяйте данные о сотруднике от подписи фильтра

В официальном указателе учебных материалов есть разделы по настройке People, добавлению должности или направления исследований, а также два варианта фильтров: Query Sort и Sidebar. Из этих материалов следует, что сотрудники и их классификации — это управляемый контент, а не вручную дублируемые блоки на каждой странице со списком. Точные атрибуты текущего плагина не были найдены в открытых источниках, поэтому это руководство не придумывает названия шорткодов или ключей запроса.

В независимом примере у каждого человека указаны одна роль и одно направление. Оба фильтра применяются одновременно. Эта намеренно упрощённая модель наглядно показывает пересечение: сочетание «Преподавательский состав» и «Робототехника» не даёт результатов, а сочетание «Научный сотрудник» и «Робототехника» — один результат. В рабочей таксономии может быть больше значений, но поведение операторов И/ИЛИ нужно определить до создания интерфейса.

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

Справочник по коду

Прочитать вспомогательную спецификацию

## Michigan Forty Two Фильтрация в дизайн-системе и восстановление результатов

### Помогите разобраться в текущем выборе

Изменение фильтра обновляет отображаемые профили и область с объявлением числа результатов. Фокус при этом не уходит с раскрывающегося списка, поэтому пользователи клавиатуры могут сравнивать варианты, не возвращаясь к элементу управления после каждого выбора. Сообщение об отсутствии результатов объясняет, что для выбранного сочетания ничего не найдено, и предлагает изменить одно из полей или очистить оба.

Кнопка «Очистить фильтры» восстанавливает значения по умолчанию и показывает все профили, после чего переводит фокус на первый фильтр. Профили остаются в неизменном порядке. Это позволяет избежать малозаметной проблемы каталогов, в которых при каждом изменении фильтра записи не только скрываются, но и неожиданно меняют порядок. Указанные здесь имена и описания вымышлены и не подразумевают реальных назначений в университете.

1. Выберите «Научный сотрудник» и убедитесь, что в каталоге остался один профиль.

2. Сочетайте «Преподавательский состав» с «Робототехникой» и проверьте сообщение о восстановлении после отсутствия результатов.

3. Очистите оба фильтра и убедитесь, что все три профиля вернулись в исходном порядке.

Прочитать вспомогательную спецификацию

## Michigan Forty Two Блоки, шаблоны и обслуживание дизайн-системы

### Выберите поддерживаемый шаблон

В обучающей библиотеке есть шаблоны для экспертов, мероприятий, циклов запросов, последних публикаций и людей. Выбирайте шаблон, соответствующий модели контента, а не собирайте похожую на вид сетку из отдельных текстовых блоков. Шаблон для людей помогает сохранить связь между записью о человеке и каталогом, в котором она отображается.

Устаревший элемент Accordion Item явно помечен как нерекомендуемый. То, что он присутствует в старых учебных материалах, не означает, что его следует использовать в новой реализации. Если на существующих страницах используются старые блоки, перед их заменой обратитесь к актуальному учебному сайту и поддерживаемому процессу обслуживания. При изменении оформления сохраните значимый контент и существующие целевые ссылки.

- Записи о людях: имена, роли, направления и содержимое профиля должны храниться в поддерживаемой структуре контента.

- Шаблоны: используйте актуальную документированную композицию для списка или рекламного раздела.

- Навигация: ссылки для поиска информации — это поддерживаемый контент, а не побочный результат публикации страницы.

Прочитать вспомогательную спецификацию

## Michigan Forty Two Практический рабочий процесс редактора дизайн-системы

### Подключите новую страницу к сайту

В официальном списке действий при создании страницы поясняется, что публикация не делает её автоматически доступной для поиска. Назначьте ей родительскую страницу, а затем добавьте её в нужные меню: верхнюю навигацию, поднавигацию, фильтры по ролям или направлениям исследований либо нижний колонтитул. В описанном процессе работы с редактором откройте разделы «Внешний вид», «Редактор» и «Навигация», выберите нужное меню, добавьте страницу и задайте её положение в режиме списка.

Для авторизованного проекта Forty-Two этот процесс работы с редактором — конкретный способ интеграции. В этом материале нет выдуманной команды для общедоступного SDK. В блоке настройки указан поддерживаемый способ размещения и дана ссылка на учебные материалы; полный пример кода для самостоятельного изучения обозначен отдельно.

Прочитать вспомогательную спецификацию

## Michigan Forty Two Доступность дизайн-системы и ограничения фирменной идентичности

### Стили по умолчанию не проверяют содержимое

В рекомендациях Engineering по доступности указано, что стандартные компоненты Forty-Two разработаны с учётом доступной контрастности, однако изменение цветов может свести это преимущество на нет. Для содержимого профилей также нужны осмысленные заголовки, понятные подписи ссылок, точные альтернативные описания изображений и ясное сообщение об отсутствии результатов. Предварительный просмотр позволяет проверить адаптивную компоновку и работу фильтров, но не подтверждает соответствие требованиям учреждения.

В исходном примере не используются Block M, подпись университета и реальные данные сотрудников. Логотипы учреждения распространяются через каналы бренда с ограниченным доступом и относятся к отдельной системе идентичности, не связанной с этими учебными цветами. Настоящий сайт Engineering должен соответствовать поддерживаемым правилам использования бренда и публикации материалов; независимый прототип должен честно указывать на свой статус.

Прочитать вспомогательную спецификацию

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

Справочник по коду

## Michigan Forty Two Настройка AI-агента дизайн-системы

### Отправная точка для реализации

Подключение темы учреждения, а не установка общедоступного пакета. Независимый пример HTML завершён и запускается локально. В ZIP-архиве с полным рабочим примером из раздела «Источники» также находятся точные зависимости для предварительного просмотра и полный документ. Распакуйте архив, выполните в этой папке команду python3 -m http.server 8080, затем откройте http://localhost:8080/michigan-forty-two.html. Не открывайте примеры с модулями через 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.
```

### Запрос для вашего проекта

```
Для авторизованного сайта Michigan Engineering используйте поддерживаемую тему WordPress Forty-Two и актуальные шаблоны People. Храните роли и направления исследований как поддерживаемые классификации, используйте веб-палитру и документированную типографику, а новые страницы добавляйте в навигацию. Для независимого прототипа укажите, что геометрия и среда выполнения разработаны самостоятельно, используйте вымышленные данные людей и не включайте логотипы учреждения. Реализуйте понятную фильтрацию по нескольким параметрам и восстановление после отсутствия результатов.
```

## Michigan Forty Two Источники и область применения дизайн-системы

Независимая интерпретация OpenDesign. Поддерживаемая тема WordPress Forty-Two и точная внутренняя реализация плагинов не входят в комплект; все профили вымышлены.

- Система и способ размещения Блоки WordPress, шаблоны и авторизованный способ размещения.

- Цвета для веб-сайтов Специальная веб-палитра и требования к контрастности.

- Типографика Roboto, Open Sans и редакционная иерархия.

- Обучающая библиотека Фильтры по людям, шаблоны и устаревшие блоки.

- Процесс создания страницы Конкретные действия в навигации и редакторе.

- Рекомендации по контрастности Границы применения темы по умолчанию и пользовательских цветов.

- Правила написания текстов Регистр заголовков и правила для CTA.

- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.

## Michigan Forty Two Связанные материалы о дизайн-системе

### Aksel

Используйте реальные токены ax из Aksel v8, штатную плотность таблицы и семантическую структуру заголовков. Сортируйте и выбирайте вымышленные записи для последующей обработки, сравнивая светлую и тёмную темы.

### NHS дизайн-система

Используйте типографику NHS.UK, адаптивные отступы, сгруппированные варианты с переключателями и контекстные сведения, чтобы создать понятный сценарий выбора предпочтительного времени приёма.

### NL дизайн-система

Создайте интерфейс для государственных услуг на основе реальных компонентов участников проекта и явно заданной темы. В этом примере Utrecht CSS показывает сопоставление токенов, структуру списка данных и две оригинальные темы с одинаковым процессом редактирования.


- [Справочник по реализации](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Источник](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/)
- [Источник](https://cm.engin.umich.edu/our-brand/typography/)
- [Источник](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Источник](https://training.engin.umich.edu/)
- [Прочитать вспомогательную спецификацию](https://cm.engin.umich.edu/our-brand/design-system-42/)
- [Прочитать вспомогательную спецификацию](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/)
- [Прочитать вспомогательную спецификацию](https://cm.engin.umich.edu/our-brand/typography/)
- [Справочник по коду](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Прочитать вспомогательную спецификацию](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Прочитать вспомогательную спецификацию](https://training.engin.umich.edu/page-basics/new-page-checklist/)
- [Прочитать вспомогательную спецификацию](https://accessibility.engin.umich.edu/color-contrast/)
- [Система и способ размещения Блоки WordPress, шаблоны и авторизованный способ размещения.](https://cm.engin.umich.edu/our-brand/design-system-42/)
- [Цвета для веб-сайтов Специальная веб-палитра и требования к контрастности.](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/)
- [Типографика Roboto, Open Sans и редакционная иерархия.](https://cm.engin.umich.edu/our-brand/typography/)
- [Обучающая библиотека Фильтры по людям, шаблоны и устаревшие блоки.](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system)
- [Процесс создания страницы Конкретные действия в навигации и редакторе.](https://training.engin.umich.edu/page-basics/new-page-checklist/)
- [Рекомендации по контрастности Границы применения темы по умолчанию и пользовательских цветов.](https://accessibility.engin.umich.edu/color-contrast/)
- [Правила написания текстов Регистр заголовков и правила для CTA.](https://sites.google.com/a/umich.edu/engcom-wiki/web/writing-best-practices/text-content)