# 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 托管方案获取，并非已验证的公开 npm SDK。 | | 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 主题。官方概述介绍了元素、组件和组件组，它们在编辑器中分别对应区块和模式。该主题通过 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 设计系统：人员与分类结构 ### 将人员信息与筛选标签分开 官方培训索引包含人员配置、添加职位或研究领域，以及两种筛选布局：查询排序和侧边栏。这些内容表明，人员及其分类由内容管理，而不是在每个列表页面上手动重复创建区块。目前无法公开检索到插件的具体属性，因此本指南不会编造短代码名称或查询键。 在这个独立示例中，每个人只有一个职位和一个领域。两个筛选条件会同时生效。这个刻意简化的模型清楚展示了交集效果：教职人员加机器人学不会返回结果，而研究人员加机器人学会返回一条结果。生产环境中的分类体系可以更丰富，但在构建界面前，应明确其 AND/OR 逻辑。 ``` // 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 设计系统：无障碍与身份使用限制 ### 默认样式不等于内容已通过验证 工程学院的无障碍指南指出，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. ``` 代码参考 ### 完整的人员目录实现示例 包含两个筛选条件、结果播报、无结果恢复提示和重置功能。 ``` Research collaborators
INDEPENDENT RESEARCH DIRECTORY

Find a collaborator

Explore fictional profiles by role and research area.

3 people

Avery Chen

Faculty

Studies ways to make community energy systems easier to understand and maintain.

Energy

Jordan Ellis

Research staff

Supports experiments in human-centred robotics and field testing.

Robotics

Samira Patel

Faculty

Explores how durable materials can support repair and reuse.

Materials
``` 代码参考 ## Michigan Forty Two 设计系统：AI Agent 配置 ### 实现起点 这是采用机构主题，而不是安装公开软件包。独立的 HTML 示例内容完整，可在本地运行。Sources 中的完整可运行示例 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 网站，请使用受支持的 Forty-Two WordPress 主题和当前的人员模式。将职务和研究领域作为维护中的分类使用，采用网站专用配色和文档规定的字体排印，并将新页面加入导航。对于独立原型，请标明原创的几何设计和运行时，使用虚构人物，避免使用机构徽标。实现清晰的组合筛选和空状态恢复。 ``` ## Michigan Forty Two 设计系统来源与范围 对 OpenDesign 的独立诠释。不包含受支持的 Forty-Two WordPress 主题及其确切插件内部实现；所有个人资料均为虚构。 - 系统与托管范围 WordPress 区块、模式和经授权的托管方案。 - 网站配色 网站专用配色及对比度要求。 - 排版 Roboto、Open Sans 和编辑层级。 - 训练内容清单 人员筛选器、模式和已弃用区块。 - 新建页面流程 具体的导航和编辑器操作步骤。 - 对比度指南 默认主题和自定义颜色的适用范围。 - 写作规范 句首字母大写规范和 CTA 规范。 - 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。 ## Michigan Forty Two 设计系统相关资源 ### Aksel 使用 Aksel v8 的真实 ax 令牌、原生表格密度和语义化表头结构。对虚构的后续记录进行排序和选择，并比较浅色与深色主题。 ### 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)