# Poncho 设计系统 ## Poncho 设计系统界面预览 筛选原生面板网格，打开详情，然后返回所选活动。 ## Poncho 设计系统设计参考 ar-poncho 2.0.320 CSS 加上 Bootstrap 3.4.1；已在 1440、768 和 390px 下验证计算值。明确指定字体回退。 ### 已发布的 CSS 字体规范 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Package inspected | ar-poncho 2.0.320 | 不要将过时的 v0.3.3 横幅当作软件包版本。 | | Font documentation | Lora headings / Montserrat body | 当前字体页面使用 CSS 字体导入；较早的仓库 README 仍提及 Encode Sans。 | | Body | 16px / 1.42857143; weight 500 | 使用 Bootstrap 3.4.1 和 Poncho 测量；本地预览使用 Arial。 | | H1 | 2.5rem = 40px / 44px | 预览标题在移动设备上仍为 40px。 | | H2 / H3 | 2rem / 1.75rem | 基础标题样式；面板专属标题规则会覆盖这些样式。 | | Panel H3 | 20px / 26px | 组件上下文中的原生 CSS 测量值。 | | Lead | 18px / 1.2; weight 500 | 简短的介绍，而非标题。 | ### 颜色角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --primary | #242C4F | 主要链接/操作的藏青色。 | | --secondary | #45658D | 次要蓝色。 | | --success | #2e7d33 | 主要/成功操作的角色；并非任意装饰色。 | | --danger | #c62828 | 危险操作或错误角色。 | | --warning | #E7BA61 | 提醒角色；仍需检查文本对比度。 | | --gray-base | #333333 | 默认文本颜色。 | | --gray-lighter | #f2f2f2 | 浅色中性背景层。 | ### 网格与组件尺寸 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Grid | 12 columns; 30px gutter | Bootstrap 3.4.1：每列两侧各有 15px 内边距。 | | Breakpoints | 768 / 992 / 1200px | sm、md、lg；col-sm-4 从 768px 起创建三列布局。 | | Containers | 750 / 970 / 1170px | 在相应断点下生效；低于 768px 时宽度自适应。 | | Panel body | 15px 20px | Poncho 组件覆盖样式。 | | Panel radius / spacing | 10px / 30px bottom margin | 此示例中使用的原生 CSS。 | | Button | 16px; 8px 20px padding; 3px border; 30px radius | Poncho 圆角操作样式；并非 Bootstrap 的默认几何形态。 | | Section spacing | 30px default; 20px small; 40px large | section、section-sm 和 section-lg 规则。 | ## Poncho 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Poncho 设计系统版本与依赖项 ### 一个 Bootstrap 3 系统 > Poncho 在 Bootstrap 3.4.1 之上叠加阿根廷公共服务样式。其安装页面仍提及实验性的 Bootstrap 4 方向，但这并不意味着 Bootstrap 5 类与已发布的示例兼容。本资源固定使用 ar-poncho 2.0.320 和 Bootstrap 3.4.1，方便一并检查面板结构和响应式行为。 CSS 横幅显示 v0.3.3，但已安装的软件包版本是 2.0.320。应以软件包清单和锁文件为准，不要只看横幅。独立预览使用原生 CSS 实现面板、按钮和网格；活动筛选则是原有的 JavaScript 功能，并非 Poncho 搜索组件。 阅读配套规范 ## Poncho 设计系统字体与依据 ### 梳理相互冲突的字体说明 当前字体文档为标题指定 Lora，为正文指定 Montserrat。下载的样式表会导入这些字体系列，但也包含较早的 Encode Sans 声明。仓库配置 README 仍推荐使用 Encode Sans。这是实际存在的版本/来源不一致；迁移到生产环境时，应检查所选版本最终生成的层叠样式，而不要假定所有历史说明都描述同一套统一主题。 预览明确指定 Arial 和 Georgia 作为回退字体，并移除外部字体导入，以确保离线可靠性。原生尺寸仍清晰可见：正文 16px、H1 为 40px，导语为 18px。面板标题使用独立的 20px 字号，因此将基础 H3 字号直接用于卡片会改变组件样式。 阅读配套规范 ## Poncho 设计系统颜色与操作层级 ### 根据操作含义选择样式 按钮文档区分默认链接操作、次要链接、一个主要或成功操作，以及危险操作。btn-primary 是常规的醒目链接式操作；btn-link 用于次要操作。btn-success 表示主要的推进操作，指南规定每页仅限一个。btn-danger 专用于具有破坏性或不可逆意图的操作。 活动浏览器在展开的详情中使用次要的重置操作和主要的返回操作。它没有绿色的注册按钮，因为它无法替任何人注册。访客仅仅打开本地面板时，绝不要显示成功声明。 - btn-primary：常规的醒目操作；避免在同一操作组中出现多个同等强调的操作。 - btn-link：次要或信息类操作，例如重置筛选条件。 - btn-success / btn-danger：仅在实际操作符合文档定义的含义时使用。 阅读配套规范 ## Poncho 设计系统网格与间距 ### 有目的地使用继承的网格 Bootstrap 3 使用 12 列网格，列间距为 30px。行的布局会抵消列上的 15px 内边距。视口宽度达到 768px 时，col-sm-4 会将三个活动面板平均分为三列；低于此宽度时，它们会变为全宽区块。容器宽度会在文档所述的断点处依次调整为 750px、970px 和 1170px。 Poncho 还会在此基础上增加组件间距：面板主体的垂直内边距为 15px，水平内边距为 20px，面板底部外边距为 30px。按钮使用 30px 圆角、3px 边框，以及 8px × 20px 内边距。这些数值体现了它与未经修改的 Bootstrap 页面之间可见的差异；不要用通用的圆角卡片主题替代它们。 阅读配套规范 ## Poncho 设计系统：可点击面板的结构 ### 每张卡片只对应一个目标 官方面板示例会用一个链接包裹整个面板，面板主体位于其中，标题和辅助说明则放在主体内。这样，紧凑的目录条目就对应一个明确的目标。不要在该链接内再嵌套其他链接或按钮，否则会产生相互冲突的交互目标。 生产环境代码片段指向一个实际的活动路由。本地预览则会拦截这个语义相同的链接，以显示原始详细说明。它会记录触发打开操作的元素，将焦点移至新显示的详情区域，并在访客关闭详情后将焦点还给原元素。这属于应用层行为，是在文档所述面板标记之上添加的。 ```

Repair café

Skills · Saturday, 10:00
``` 代码参考 阅读配套规范 ## Poncho 设计系统：筛选与本地状态 ### 真正的筛选，而非装饰性标签 活动类型下拉框带有明确的标签和三个类别。类别变更后，不匹配的面板容器会隐藏，状态消息也会更新为新的结果数量。该数量表示当前可见的活动，不代表报名总数或活动可用情况。重置后会恢复显示全部三个活动，并将焦点移回筛选器。 切换类别时，会关闭已打开的详情，避免已隐藏活动的内容与结果脱节。打开面板不会改变筛选条件。这些规则有意保持简洁，但足以检验控件、结果和详情之间的关系。 1. 选择“艺术”，并确认只剩下版画工作坊。 2. 打开活动并查看其说明，然后返回同一个面板。 3. 重置筛选条件，并确认三个活动都重新显示。 阅读配套规范 ## Poncho 设计系统：键盘操作与内容结构 ### 不要照搬仅用于视觉呈现的禁用状态 官方按钮表格展示了禁用状态下的 CSS 类。真正需要禁用的 HTML 按钮还必须添加 disabled 属性；仅添加类无法阻止键盘激活。对于链接，应根据是否仍有有效目标来决定如何处理，而不要把禁用样式当作完整的交互方案。 使用一个 H1，并保持层级清晰。本目录在面板内使用 H3，因为展开的详情是一个 H2 区段；如果列表独立呈现且上方没有中间层级的区段，则应根据实际文档调整标题级别。装饰性图标库并非必需，因此此处未使用，因为文本标签已清楚说明每项操作。 阅读配套规范 ## Poncho 设计系统：原生设置与适用范围 ### 只加载示例实际使用的层 先加载 Bootstrap CSS，再加载 Poncho CSS，这样主题才能覆盖其基础样式。基础网格和面板无需使用 Bootstrap JavaScript 或 jQuery。如果应用添加了 Bootstrap 交互式小部件，请在 Bootstrap 3.4.1 JavaScript 之前加载兼容的 jQuery 版本，并测试实际使用的小部件。 这是一个有明确兼容性边界的旧版依赖栈。在它旁边安装现代版 Bootstrap 并不等于完成迁移。应区分在仓库 MIT 许可证下复用代码，与政府网站上显示的政府身份标识、官方徽标和内容许可证。此预览使用虚构的社区活动，并不声称提供阿根廷政府服务。 阅读配套规范 ## Poncho 设计系统：组件示例 ### 整块面板均可导航 用一个链接包裹面板主体；不要在其中嵌套交互控件。 ```

Repair café

Skills · Saturday, 10:00
``` 代码参考 ### 完整的活动目录 原生 Poncho 面板，搭配可用的类别筛选器和关闭后恢复焦点的详情视图。 ``` Community activities

COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE

Find a local activity

Browse practical sessions at the community centre.

3 activities

Repair café

Skills · Saturday, 10:00

Community garden

Outdoors · Sunday, 09:30

Printmaking workshop

Arts · Tuesday, 16:00

``` 代码参考 ## Poncho 设计系统：AI Agent 设置 ### 实现起点 原生 CSS 设置。由于筛选和详情逻辑为本示例原创，因此此预览无需 Bootstrap JavaScript。Sources 中的完整可运行示例 ZIP 还提供了预览所需的确切依赖项和完整文档。将其解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/poncho.html。请勿通过 file:// 打开基于模块的示例。 ``` npm install ar-poncho@2.0.320 bootstrap@3.4.1 # Copy the following package assets into your site's public vendor directory: # node_modules/bootstrap/dist/css/bootstrap.min.css # node_modules/ar-poncho/dist/css/poncho.min.css # Load Bootstrap first, then Poncho. # Optional Bootstrap JS components also need jQuery before bootstrap.min.js. ``` ### 适用于你项目的提示词 ``` 在 Bootstrap 3.4.1 上使用 ar-poncho 2.0.320。使用 12 列网格和单链接面板卡片，构建易于访问的目录。保留原生按钮的语义颜色、内边距和圆角。提供带标签的筛选、结果数量以及焦点恢复功能。根据固定版本的程序包验证字体层叠；不要混用 Bootstrap 5 API，也不要虚构报名成功状态。 ``` ## Poncho 设计系统：来源与适用范围 这是一个独立的 OpenDesign 示例，使用原生 CSS，不涉及政府身份标识。当前文档与较早的 README 对字体系列的说明并不一致；此预览以固定版本的 CSS 和明确指定的后备字体为准。 - 官方仓库与安装 程序包设置、依赖项和 MIT 代码许可证。 - 面板结构 整卡链接、辅助说明与变体。 - 按钮的语义 操作层级、类名与状态。 - 排版 当前字体系列与语义文本指南。 - 已发布的 CSS 实际的颜色、排版和几何样式声明。 - Bootstrap 3 网格 继承的响应式列、列间距和容器宽度。 - 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。 ## Poncho 设计系统：相关资源 ### Queensland Government 设计系统 通过完整的图解资源选择器，探索 Queensland 的 Bootstrap 实现，其中包含真实的主题角色、原生复选框样式和无障碍答题回顾对话框。 ### Ripple 通过完整的工作坊时间线，了解 Ripple 实际的色彩用途、14 级间距比例和响应式字体参考；其中还包括渐进式披露、进度提示和用于下一步操作的键盘焦点。 ### Scottish Government 设计系统 通过原生字符计数字段应用苏格兰政府的响应式字号、间距和颜色语义；超出限制的文本仍会保留，并支持后续调整。 - [实现参考](https://argob.github.io/poncho/componentes/paneles/) - [来源](https://github.com/argob/poncho/blob/master/dist/css/poncho.css) - [来源](https://getbootstrap.com/docs/3.4/css/#grid) - [阅读配套规范](https://github.com/argob/poncho) - [阅读配套规范](https://argob.github.io/poncho/identidad/tipografia/) - [阅读配套规范](https://argob.github.io/poncho/componentes/botones/) - [阅读配套规范](https://getbootstrap.com/docs/3.4/css/#grid) - [代码参考](https://argob.github.io/poncho/componentes/paneles/) - [阅读配套规范](https://argob.github.io/poncho/componentes/paneles/) - [官方仓库与安装 程序包设置、依赖项和 MIT 代码许可证。](https://github.com/argob/poncho) - [面板结构 整卡链接、辅助说明与变体。](https://argob.github.io/poncho/componentes/paneles/) - [按钮的语义 操作层级、类名与状态。](https://argob.github.io/poncho/componentes/botones/) - [排版 当前字体系列与语义文本指南。](https://argob.github.io/poncho/identidad/tipografia/) - [已发布的 CSS 实际的颜色、排版和几何样式声明。](https://github.com/argob/poncho/blob/master/dist/css/poncho.css) - [Bootstrap 3 网格 继承的响应式列、列间距和容器宽度。](https://getbootstrap.com/docs/3.4/css/#grid)