Дизайн-система 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>