101.4K+下载
政府与公共服务 · 新资源

Poncho 设计系统.

通过可用的活动目录，查看 Poncho 的 Bootstrap 3 网格、语义操作颜色，以及可通过完整面板区域点击的服务入口。

下载 OpenDesign 下载 DESIGN.md
OpenDesign 指南8 个章节21 条参考条目原始应用指南
01

Poncho 设计系统界面预览

筛选原生面板网格，打开详情，然后返回所选活动。

浏览社区活动打开完整示例
原生 ar-poncho 2.0.320 + Bootstrap 3.4.1 CSS；回退字体为 Arial/Georgia，并保留原有筛选行为。· 实现参考
02

Poncho 设计系统设计参考

ar-poncho 2.0.320 CSS 加上 Bootstrap 3.4.1；已在 1440、768 和 390px 下验证计算值。明确指定字体回退。

已发布的 CSS 字体规范

来源
名称 / 规则值 / 配置用途
Package inspectedar-poncho 2.0.320不要将过时的 v0.3.3 横幅当作软件包版本。
Font documentationLora headings / Montserrat body当前字体页面使用 CSS 字体导入；较早的仓库 README 仍提及 Encode Sans。
Body16px / 1.42857143; weight 500使用 Bootstrap 3.4.1 和 Poncho 测量；本地预览使用 Arial。
H12.5rem = 40px / 44px预览标题在移动设备上仍为 40px。
H2 / H32rem / 1.75rem基础标题样式；面板专属标题规则会覆盖这些样式。
Panel H320px / 26px组件上下文中的原生 CSS 测量值。
Lead18px / 1.2; weight 500简短的介绍，而非标题。

颜色角色

来源
名称 / 规则值 / 配置用途
--primary #242C4F主要链接/操作的藏青色。
--secondary#45658D 次要蓝色。
--success#2e7d33 主要/成功操作的角色；并非任意装饰色。
--danger#c62828 危险操作或错误角色。
--warning#E7BA61 提醒角色；仍需检查文本对比度。
--gray-base#333333 默认文本颜色。
--gray-lighter#f2f2f2 浅色中性背景层。

网格与组件尺寸

来源
名称 / 规则值 / 配置用途
Grid12 columns; 30px gutterBootstrap 3.4.1：每列两侧各有 15px 内边距。
Breakpoints768 / 992 / 1200pxsm、md、lg；col-sm-4 从 768px 起创建三列布局。
Containers750 / 970 / 1170px在相应断点下生效；低于 768px 时宽度自适应。
Panel body15px 20pxPoncho 组件覆盖样式。
Panel radius / spacing10px / 30px bottom margin此示例中使用的原生 CSS。
Button16px; 8px 20px padding; 3px border; 30px radiusPoncho 圆角操作样式；并非 Bootstrap 的默认几何形态。
Section spacing30px default; 20px small; 40px largesection、section-sm 和 section-lg 规则。
03

Poncho 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

DESIGN-poncho.md

完整指导、实现起点和源代码链接。

下载指南

Poncho 设计系统版本与依赖项

一个 Bootstrap 3 系统

Poncho 在 Bootstrap 3.4.1 之上叠加阿根廷公共服务样式。其安装页面仍提及实验性的 Bootstrap 4 方向，但这并不意味着 Bootstrap 5 类与已发布的示例兼容。本资源固定使用 ar-poncho 2.0.320 和 Bootstrap 3.4.1，方便一并检查面板结构和响应式行为。

摘自本 OpenDesign 指南

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 设计系统：可点击面板的结构

每张卡片只对应一个目标

官方面板示例会用一个链接包裹整个面板，面板主体位于其中，标题和辅助说明则放在主体内。这样，紧凑的目录条目就对应一个明确的目标。不要在该链接内再嵌套其他链接或按钮，否则会产生相互冲突的交互目标。

生产环境代码片段指向一个实际的活动路由。本地预览则会拦截这个语义相同的链接，以显示原始详细说明。它会记录触发打开操作的元素，将焦点移至新显示的详情区域，并在访客关闭详情后将焦点还给原元素。这属于应用层行为，是在文档所述面板标记之上添加的。

html
<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>

代码参考

阅读配套规范

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 设计系统：组件示例

整块面板均可导航

用一个链接包裹面板主体；不要在其中嵌套交互控件。

html
<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>

代码参考

完整的活动目录

原生 Poncho 面板，搭配可用的类别筛选器和关闭后恢复焦点的详情视图。

html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Community activities</title><link rel="stylesheet" href="vendor/poncho-2.0.320/bootstrap.min.css"><link rel="stylesheet" href="vendor/poncho-2.0.320/poncho.min.css"><style>html,body{height:auto}body{padding:30px 0;font-family:Arial,sans-serif!important}h1,h2,h3{font-family:Georgia,serif!important}.container{max-width:100%}.panel{display:block}.filter{display:flex;gap:15px;flex-wrap:wrap;align-items:end;margin:30px 0}.filter>div{flex:1;min-width:180px}.panel:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #333;outline-offset:3px}#detail{border-left:5px solid var(--secondary);padding-left:20px;margin:25px 0}footer{font:14px/1.5 Arial;border-top:1px solid #ddd;padding-top:20px}[hidden]{display:none!important}</style><main class="container"><p class="text-muted">COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE</p><h1>Find a local activity</h1><p class="lead">Browse practical sessions at the community centre.</p><div class="filter"><div><label for="category">Activity type</label><select id="category" class="form-control"><option value="all">All activities</option><option value="skills">Skills</option><option value="outdoors">Outdoors</option><option value="arts">Arts</option></select></div><button id="reset" class="btn btn-link" type="button">Reset filter</button></div><p id="count" role="status">3 activities</p><div class="row"><div class="col-sm-4" data-category="skills"><a class="panel panel-default" href="#detail" data-title="Repair café" data-copy="Bring one small household item to a supervised repair session. This demonstration does not reserve a place."><div class="panel-body"><h3>Repair café</h3><p class="text-muted">Skills · Saturday, 10:00</p></div></a></div><div class="col-sm-4" data-category="outdoors"><a class="panel panel-default" href="#detail" data-title="Community garden" data-copy="Meet at the garden gate for a planting session. Wear suitable footwear; tools are provided in this fictional programme."><div class="panel-body"><h3>Community garden</h3><p class="text-muted">Outdoors · Sunday, 09:30</p></div></a></div><div class="col-sm-4" data-category="arts"><a class="panel panel-default" href="#detail" data-title="Printmaking workshop" data-copy="Explore simple printing techniques in the studio. This local example has no registration service."><div class="panel-body"><h3>Printmaking workshop</h3><p class="text-muted">Arts · Tuesday, 16:00</p></div></a></div></div><section id="detail" hidden tabindex="-1"><h2 id="title"></h2><p id="copy"></p><button id="close" class="btn btn-primary">Back to activities</button></section><footer>Native Poncho 2.0.320 CSS with Bootstrap 3.4.1. Arial / Georgia fallbacks. Original activity data and filtering; no government identity or booking service.</footer></main><script>let opener;const select=document.querySelector('#category');function filter(){let n=0;document.querySelectorAll('[data-category]').forEach(x=>{x.hidden=select.value!=='all'&&x.dataset.category!==select.value;if(!x.hidden)n++});document.querySelector('#count').textContent=n+' activit'+(n===1?'y':'ies');document.querySelector('#detail').hidden=true}select.onchange=filter;document.querySelector('#reset').onclick=()=>{select.value='all';filter();select.focus()};document.querySelectorAll('[data-title]').forEach(a=>a.onclick=e=>{e.preventDefault();opener=a;document.querySelector('#title').textContent=a.dataset.title;document.querySelector('#copy').textContent=a.dataset.copy;document.querySelector('#detail').hidden=false;document.querySelector('#detail').focus()});document.querySelector('#close').onclick=()=>{document.querySelector('#detail').hidden=true;opener.focus()};</script></html>

代码参考

04

Poncho 设计系统：AI Agent 设置

实现起点

原生 CSS 设置。由于筛选和详情逻辑为本示例原创，因此此预览无需 Bootstrap JavaScript。Sources 中的完整可运行示例 ZIP 还提供了预览所需的确切依赖项和完整文档。将其解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/poncho.html。请勿通过 file:// 打开基于模块的示例。

bash
npm install [email protected] [email protected]
# 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.

适用于你项目的提示词

Agent 提示词
在 Bootstrap 3.4.1 上使用 ar-poncho 2.0.320。使用 12 列网格和单链接面板卡片，构建易于访问的目录。保留原生按钮的语义颜色、内边距和圆角。提供带标签的筛选、结果数量以及焦点恢复功能。根据固定版本的程序包验证字体层叠；不要混用 Bootstrap 5 API，也不要虚构报名成功状态。
05

Poncho 设计系统：来源与适用范围

这是一个独立的 OpenDesign 示例，使用原生 CSS，不涉及政府身份标识。当前文档与较早的 README 对字体系列的说明并不一致；此预览以固定版本的 CSS 和明确指定的后备字体为准。