# Pico CSS 设计系统

## Pico CSS 设计系统界面预览

调整行宽和示例字号、切换外观，并在原生对话框中查看本地配置。

## Pico CSS 设计系统设计参考

Pico CSS 2.1.1 默认编译后的样式表。最初定义的颜色为浅色主题。响应式根字号缩放会改变 rem 的像素值；不要假设每个视口的根字号都是 16px。阅读宽度和 800px 的布局断点均为应用层选择。

### 排版与节奏

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --pico-font-family | var(--pico-font-family-sans-serif) | 系统无衬线字体族别名。 |
| --pico-line-height | 1.5 | 正文默认行高。 |
| --pico-font-size | 100% | 响应式媒体规则生效前的初始根字号。 |
| --pico-spacing | 1rem | 基础间距单位。 |
| --pico-typography-spacing-vertical | 1rem | 文本垂直节奏。 |
| --pico-grid-column-gap | var(--pico-spacing) | 原生 .grid 列之间的间距。 |
| --pico-border-radius | 0.25rem | 控件/卡片的默认形状。 |
| --pico-border-width | 0.0625rem | 默认边界粗细。 |
| --pico-outline-width | 0.125rem | 焦点轮廓宽度。 |
| --pico-form-element-spacing-vertical | 0.75rem | 输入框/按钮的垂直内边距。 |
| --pico-form-element-spacing-horizontal | 1rem | 输入框/按钮的水平内边距。 |
### 浅色主题的主要角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --pico-primary | #0172ad | 链接/主要阅读文本颜色。 |
| --pico-primary-background | #0172ad | 主按钮背景。 |
| --pico-primary-hover | #015887 | 悬停时的主要文本颜色。 |
| --pico-primary-hover-background | #02659a | 悬停时的主要按钮界面表面。 |
| --pico-primary-focus | rgba(2, 154, 232, 0.5) | 焦点强调色。 |
| --pico-primary-inverse | #fff | 主要背景上的文本颜色。 |
| --pico-background-color | #fff | 页面界面表面。 |
| --pico-color | #373c44 | 正文默认文本颜色。 |
| --pico-muted-color | #646b79 | 次要文本。 |
### 响应式根字号

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Base | 100% | 若浏览器默认字号为 16px，则为 16px。 |
| ≥576px | 106.25% | 在相同假设下为 17px。 |
| ≥768px | 112.5% | 18px。 |
| ≥1024px | 118.75% | 19px。 |
| ≥1280px | 125% | 20px。 |
| ≥1536px | 131.25% | 21px。 |
### 标题字号与应用控件

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| h1 | 2rem / 1.125 | 官方标题字号与行高。 |
| h2 | 1.75rem / 1.15 | 官方二级标题。 |
| h3 | 1.5rem / 1.175 | 官方三级标题。 |
| Reading measure | 48ch / 62ch / 72ch | 原有的可选最大行长。 |
| Sample scale | 90–125%; step 5 | 原有的范围限制，仅应用于示例文本。 |
| Composition breakpoint | 800px | 原有的双列转为堆叠布局规则。 |
## Pico CSS 设计系统完整指南

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

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

## Pico CSS 设计系统：简洁的语义化 HTML 界面表面

### 简洁的语义化 HTML 界面表面

> Pico 为常见的 HTML 元素提供样式，无需为每个段落、字段或按钮都添加一长串组件类名。在此示例中，article 承载偏好设置卡片，其页眉和页脚划定边界，标签则包含原生 input/select 控件。main 元素使用 container，因为这里采用的是标准 Pico 构建版本，而非独立的无类分发版本。

对于紧凑工具和内容驱动型界面，如果浏览器的原生控件已能满足需求，Pico 会非常实用。但它本身并不会将表单变成应用。完整的 JavaScript 负责阅读示例、审核快照和本地结果，浏览器则处理基础输入语义。

阅读配套规范

## Pico CSS 设计系统主题变量与语义角色

### 主题变量与语义角色

默认的主要角色并不是一个不加区分地套用到所有地方的颜色。Pico 将主要文本、背景、悬停、焦点和反白值分别处理。参考表列出了实际的浅色主题定义，便于品牌定制时保留这些关系。阅读界面的标签使用主要文本角色；按钮则沿用 Pico 完整的组件样式。

外观切换开关会在 html 上设置 data-theme。显式指定 light 或 dark 属性时，将覆盖自动配色方案选择。移除该属性后，Pico 可以跟随浏览器的首选配色方案。演示采用显式的初始模式，以确保复选框与视觉外观保持同步。引入自定义主要配色时，请同时覆盖两种配色方案的定义；仅修改浅色根值不足以构成完整的深色主题。

阅读配套规范

## Pico CSS 设计系统：响应式排版会改变整个字号比例

### 响应式排版会改变整个字号比例

Pico 会在多个视口宽度下调整根字号：初始为 100%，之后依次为 106.25%、112.5%、118.75%、125% 和 131.25%。在浏览器默认字号为 16px 时，这些值对应 16–21px。由于组件间距使用 rem，舒适的布局也会随着文本一同放大。因此，一个 rem 的设计令牌并不总是等于十六像素。

示例的滑块只会将 #sample 的 font-size 调整为其继承字号的相应百分比，不会改写 Pico 的根变量，也不会影响浏览器缩放设置。这样可以让设置控件保持稳定，并清楚地界定样式作用范围。原生输出会显示所选百分比。标题字号保留 Pico 默认值：h1 为 2rem，h2 为 1.75rem。

阅读配套规范

## Pico CSS 设计系统：行宽与阅读布局

### 行宽与阅读布局

三种行宽是以 ch 为单位设定的自定义选项。它们限定最大宽度，不会强制文本超出所在栏宽。在移动设备上，示例内容可能窄于所选的最大宽度；这是响应式最大宽度的预期效果。即使选择较宽的行宽，也无需出现水平滚动。

自定义的 reading-layout 使用两列 minmax 布局，并在宽度低于 800px 时折叠为单列。这个断点仅适用于当前布局，并非 Pico 的官方断点。成对的审核/重置按钮使用 Pico 的网格辅助类，弹窗页脚则使用可换行的 flex 行布局。在窄屏上，保持设置面板易读比维持双列布局更重要。

阅读配套规范

## Pico CSS 设计系统：通过有用的审核步骤进行原生校验

### 原生验证与实用的审核步骤

配置文件名称使用 required 和 minlength，并配有对应的简短说明。原生约束验证会阻止提交空值。脚本还会检查去除首尾空白后的值，避免仅输入两个空格就满足应用规则。发生 invalid 事件时，会添加 aria-invalid，以启用 Pico 的无效状态样式；输入时则会清除自定义错误和过期的无效状态属性。

选择框和范围滑块使用浏览器原生控件。它们会立即更新阅读示例；“审核配置文件”则会捕获单独的待应用对象。这个快照既是对话框中显示的文本，也是“在本地应用”所使用的数据，因此确认时描述的内容与实际应用的值不会不一致。

1. 将配置文件名称留空，然后尝试审核配置文件。

2. 输入名称，选择宽度，并调整示例字号。

3. 查看快照；取消以继续编辑，或应用到本地状态。

阅读配套规范

## Pico CSS 设计系统：真正的模态对话框，而非仅有样式的叠层

### 真正的模态对话框，而非仅设置样式的遮罩层

Pico 会为 dialog 及其文章内容设置样式，但不会提供应用层的 JavaScript。本示例调用 HTMLDialogElement.showModal。浏览器会将对话框置于顶层，使文档其余部分变为惰性状态，并提供原生的 Escape 键关闭行为。仅设置 open 属性会产生不同的非模态行为，本示例不会这样做。

对话框通过 aria-labelledby 指向其标题。关闭按钮带有明确的无障碍标签，“继续编辑”和“在本地应用”则清楚说明了两种结果。两个取消按钮都会调用 close，但不会更改已保存的状态。应用操作会将待应用的配置文件显示为可见文本，然后关闭对话框；它不会写入 localStorage，也不会发送请求。

阅读配套规范

## Pico CSS 设计系统：使用原生披露组件展示补充说明

### 使用原生折叠控件展示补充说明

details/summary 组合用于说明哪些控件会影响示例，哪些不会。无需 JavaScript，它就能真正展开或收起，因为这种行为由 HTML 元素提供。summary 会提出清楚的问题，并且支持键盘操作。这段说明属于辅助内容，因此不会在主表单中插入另一个始终展开的面板。

不要仅仅因为闭合状态的截图看起来相似，就把 details 替换成带样式的标题。同样，外观选项输入仍保留 type=checkbox 和 role=switch，因此具有真实的二元状态。Pico 会为语义结构应用样式；而这些结构本身也承载了大部分交互约定。

- article 用于创建视觉上分组的偏好设置界面表面。

- details 和 summary 提供原生披露功能。

- 使用 showModal 打开的 dialog 提供模态审核边界。

阅读配套规范

## Pico CSS 设计系统：安装一次，确保示例可复现

### 安装一次，确保示例可复现

标准软件包包含编译后的 pico.min.css。将其复制到本地 assets 文件夹，在应用布局规则之前引入，并使用 defer 加载随附的 app.js。上文已提供完整标记、CSS 和脚本。本示例无需框架提供器、图标字体或第三方 JavaScript 插件。

始终使用标准样式表及其容器/网格类。无类构建版本采用不同的布局假设，条件构建版本则以不同方式限定样式范围；未经检查标记就互换这些发行版本，并非不会产生影响的优化。如果要在现有网站中添加 Pico，请先检查其元素选择器与现有表单和排版样式之间的相互作用，再决定是否全局应用。

阅读配套规范

## Pico CSS 设计系统：调整标记之前先选择发行版本

### 调整标记前，先选择分发版本

本示例使用标准发行版本及其容器和网格辅助类。无类发行版本会改变布局假设，条件发行版本则会限定 Pico 样式的作用范围。选择发行版本应视为集成决策，而不是可以随意互换的文件体积优化。

在现有网站中，请检查元素选择器对现有标题、表单、文章和对话框的影响范围。阅读示例中的百分比字号属于局部覆盖，应保持局部；更改根字号也会改变 Pico 基于 rem 的间距和控件尺寸。确定文档哪些部分继承主题时，请确保外观属性与应用的偏好设置控件保持一致。

阅读配套规范

## Pico CSS 设计系统：组件示例

### 完整的语义化阅读界面

标签包裹对应控件，article 创建设置卡片，details 提供披露功能，dialog 则包含审核内容。

```
<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
```

代码参考

- Pico 为这些元素设置样式；浏览器 API 提供原生行为。

- 通过 showModal 打开对话框，而不是添加 open 属性。

### 原始配置文件交互

实时样式、原生验证、安全的审核文本，以及本地应用/重置行为。

```
const $=id=>document.getElementById(id);let pending=null;
function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';}
for(const id of ['measure','scale','night'])$(id).addEventListener('input',update);
$('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();});
$('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')});
for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close());
$('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();});
$('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update();
```

代码参考

- 配置文件不会离开本文档。

- 仅含空白字符的名称会通过 setCustomValidity 被拒绝。

### 阅读布局

明确的应用规则将设置面板与示例分开。

```
main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}}
```

代码参考

- 800px 断点和 ch 尺寸是自定义选择。

## Pico CSS 设计系统：AI Agent 设置

### 实现起点

将上方的完整示例分别保存为 body、style.css 和 app.js。独立预览会内联相同的官方 CSS 和原始应用代码。此示例使用当前浏览器对原生 dialog API 的支持。HTML 包装器包含完整的 body 标记；请将随附的交互示例和 CSS 示例保存为此处引用的文件名。

```
<!-- npm install @picocss/pico@2.1.1
mkdir -p assets
cp node_modules/@picocss/pico/css/pico.min.css assets/pico.min.css -->
<!doctype html>
<html lang="en" data-theme="light">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Reading room</title>
<link rel="stylesheet" href="assets/pico.min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
</body>
</html>
```

### 适用于你项目的提示词

```
使用 Pico 2.1.1 阅读配置文件示例，搭配标准样式表、语义化 article、原生表单和 details 披露组件。将字号和行宽调整限制在示例范围内，并使外观复选框与 data-theme 保持同步。验证去除首尾空白后的配置文件名称，捕获审核快照，并使用 dialog.showModal 打开对话框；取消操作不得应用更改。只应用已捕获的本地配置文件，并在恢复原生表单默认值后重置。保留 Pico 的响应式根字号比例，不要用示例字号设置替换它。
```

## Pico CSS 设计系统：来源与适用范围

Pico CSS 2.1.1。默认令牌与原有阅读布局和个人资料规则相互独立。不实现持久化或远程服务。

- CSS 变量 实际样式和颜色定义。

- 排版 语义化标题和文本。

- 表单 原生表单组合。

- 模态框 对话框样式与应用行为边界。

- 网格 响应式布局辅助工具。

- 手风琴 详情与摘要展开控件。

## Pico CSS 设计系统相关资源

### Preline UI

使用原生 Preline 设计的行程规划工具，包含关联选项卡、受约束的数字输入插件、已安装的主题别名、实际的 Tailwind 尺度，以及随所选行程更新的本地材料估算。

### Prime UI

一个版本固定的 PrimeVue 实现，属于 Prime UI 生态系统：采用 Aura 主题的文档树，包含真实的预设引用、受控展开、筛选、选择和本地固定功能。

### Pure CSS

Pure CSS 是一款模块化样式表，适用于网格、表单、按钮、菜单和表格，不包含小组件运行时。本指南展示如何将其可选的响应式网格模块与原生语义元素结合，用于可筛选的设备目录，并明确实现排序和选择功能。


- [实现参考](https://picocss.com/docs/forms)
- [来源](https://picocss.com/docs/css-variables)
- [阅读配套规范](https://picocss.com/docs/forms)
- [阅读配套规范](https://picocss.com/docs/css-variables)
- [阅读配套规范](https://picocss.com/docs/typography)
- [阅读配套规范](https://picocss.com/docs/grid)
- [阅读配套规范](https://picocss.com/docs/modal)
- [阅读配套规范](https://picocss.com/docs/accordion)
- [代码参考](https://picocss.com/docs/modal)
- [代码参考](https://picocss.com/docs/forms)
- [代码参考](https://picocss.com/docs/grid)
- [CSS 变量 实际样式和颜色定义。](https://picocss.com/docs/css-variables)
- [排版 语义化标题和文本。](https://picocss.com/docs/typography)
- [表单 原生表单组合。](https://picocss.com/docs/forms)
- [模态框 对话框样式与应用行为边界。](https://picocss.com/docs/modal)
- [网格 响应式布局辅助工具。](https://picocss.com/docs/grid)
- [手风琴 详情与摘要展开控件。](https://picocss.com/docs/accordion)