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

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Небольшая поверхность с семантическими HTML в дизайн-системе Pico CSS

### Компактная семантическая поверхность HTML

> Стили Pico оформляют привычные элементы HTML, поэтому для каждого абзаца, поля или кнопки не нужно перечислять длинный список классов компонентов. В этом примере article служит карточкой настроек, а его header и footer обозначают границы; элементы label содержат стандартные элементы управления input/select. Элемент main использует container, поскольку это стандартная сборка Pico, а не отдельная версия без классов.

Поэтому Pico подходит для компактных инструментов и интерфейсов, построенных вокруг контента, где достаточно стандартных элементов управления браузера. Но сам по себе Pico не превращает форму в приложение. За пример текста для чтения, снимок настроек и локальный результат отвечает всё приложение JavaScript, а браузер обрабатывает базовую семантику ввода.

Прочитать вспомогательную спецификацию

## Переменные темы и семантические роли дизайн-системы Pico CSS

### Переменные темы и семантические роли

Основная роль по умолчанию — это не один цвет, применяемый повсюду. Pico разделяет цвета основного текста, фона, состояния при наведении, фокуса и инверсного отображения. В таблице приведены фактические значения для светлой темы, чтобы при настройке фирменной палитры можно было сохранить нужные соотношения. В примере для чтения используются цвета основного текста, а кнопки наследуют полное оформление компонентов Pico.

Переключатель оформления задаёт data-theme для html. Явно указанное значение light или dark имеет приоритет над автоматическим выбором темы. Если убрать этот атрибут, Pico сможет следовать предпочтительной цветовой схеме браузера. В демонстрации задан исходный режим, чтобы состояние флажка соответствовало внешнему виду. При добавлении собственной основной палитры переопределите обе схемы: одного изменения корневого значения для светлой темы недостаточно, чтобы полностью настроить тёмную тему.

Прочитать вспомогательную спецификацию

## Адаптивная типографика меняет всю шкалу в дизайн-системе Pico CSS

### Гибкая типографика меняет масштаб целиком

Pico меняет корневой размер шрифта при нескольких ширинах экрана: сначала 100%, затем 106.25%, 112.5%, 118.75%, 125% и 131.25%. При стандартном размере браузера 16px это соответствует диапазону 16–21px. Поскольку для отступов компонентов используется rem, удобное пространство макета увеличивается вместе с текстом. Поэтому токен, заданный как один rem, не всегда равен шестнадцати пикселям.

Ползунок в примере меняет только размер шрифта #sample, задавая его в процентах от унаследованного размера. Он не переопределяет корневую переменную Pico и не меняет масштабирование браузера. Это различие помогает сохранить настройки неизменными и чётко ограничить область действия параметра. Выбранное значение в процентах отображается стандартным элементом output. Размеры заголовков остаются стандартными для Pico: h1 — 2rem, h2 — 1.75rem.

Прочитать вспомогательную спецификацию

## Длина строки и композиция для чтения в дизайн-системе Pico CSS

### Длина строки и композиция для чтения

Три варианта длины строки — оригинальные значения в единицах ch. Они задают максимальную ширину, а не заставляют текст занимать всю колонку. На мобильном устройстве образец может быть уже выбранного максимума — так и должно быть при адаптивном ограничении ширины. Даже при выборе большой ширины горизонтальная прокрутка не нужна.

В пользовательском макете для чтения используются два столбца minmax; при ширине менее 800px макет перестраивается в одну колонку. Этот порог относится только к данной композиции, а не к официальным контрольным точкам Pico. Для кнопок просмотра и сброса используется помощник grid из Pico, а подвал диалогового окна — flex-строка с переносом. На узких экранах удобство панели настроек важнее двухколоночного расположения.

Прочитать вспомогательную спецификацию

## Проверка средствами браузера и полезный этап просмотра в дизайн-системе Pico CSS

### Проверка средствами браузера и полезный этап просмотра

Для имени профиля заданы required и minlength, а рядом размещена связанная с полем короткая подсказка. Стандартная проверка ограничений не позволяет отправить пустое поле. Скрипт дополнительно удаляет пробелы по краям, чтобы пара пробелов не считалась допустимым значением. При событии invalid добавляется aria-invalid, включающий оформление ошибки Pico; при вводе собственная ошибка и устаревший атрибут invalid сбрасываются.

Select и range — стандартные элементы управления браузера. Они сразу обновляют пример для чтения, а кнопка Review profile сохраняет отдельный объект с ожидающими применения настройками. Этот снимок отображается в диалоговом окне и передаётся при выборе Apply locally, поэтому подтверждение всегда соответствует применяемым значениям.

1. Оставьте имя профиля пустым и нажмите Review profile.

2. Введите имя, выберите ширину и измените размер текста в примере.

3. Проверьте сохранённые настройки, отмените действие, чтобы продолжить редактирование, или примените их к локальному статусу.

Прочитать вспомогательную спецификацию

## Настоящее модальное окно, а не просто стилизованный оверлей в дизайн-системе Pico CSS

### Настоящий модальный диалог, а не просто стилизованное наложение

Pico оформляет dialog и его содержимое article, но не предоставляет прикладную логику JavaScript. В этом примере вызывается HTMLDialogElement.showModal. Браузер помещает окно на верхний слой, делает остальную часть документа неактивной и обеспечивает стандартное закрытие клавишей Escape. Простое добавление атрибута open создало бы немодальное поведение, поэтому здесь этот способ не используется.

В диалоговом окне задан aria-labelledby, указывающий на заголовок. У кнопки закрытия есть явная доступная подпись, а кнопки Keep editing и Apply locally описывают два возможных действия. Обе кнопки отмены вызывают close, не меняя сохранённый статус. При применении ожидающий профиль отображается в тексте, после чего окно закрывается; данные не записываются в localStorage и запрос не отправляется.

Прочитать вспомогательную спецификацию

## Нативный блок раскрытия для пояснений в дизайн-системе Pico CSS

### Нативный раскрывающийся блок для дополнительной информации

Пара details/summary объясняет, какие элементы управления влияют на пример, а какие — нет. Блок раскрывается без JavaScript, потому что это встроенное поведение элемента HTML. В summary задан понятный вопрос; с клавиатуры элемент также доступен. Пояснение носит вспомогательный характер, поэтому оно не прерывает основную форму ещё одной постоянно открытой панелью.

Не заменяйте details стилизованным заголовком, даже если закрытый блок на снимке экрана выглядит так же. Переключатель оформления также остаётся флажком с type=checkbox и role=switch, поэтому у него есть настоящее бинарное состояние. Стили Pico применяются к семантическим структурам, и именно эти структуры во многом определяют взаимодействие.

- article объединяет настройки в визуально сгруппированную область.

- details и summary обеспечивают нативное раскрытие содержимого.

- dialog, открытый через showModal, создаёт модальную границу просмотра.

Прочитать вспомогательную спецификацию

## Установите один раз и сохраните воспроизводимость примера в дизайн-системе Pico CSS

### Установите один раз и сохраните воспроизводимость примера

Стандартный пакет содержит скомпилированный файл pico.min.css. Скопируйте его в локальную папку assets, подключите перед правилами макета приложения и загрузите поставляемый файл app.js с атрибутом defer. Полная разметка, CSS и скрипт приведены выше. Для этого примера не нужны провайдер фреймворка, шрифт с иконками или сторонний плагин JavaScript.

Используйте стандартную таблицу стилей вместе с классами container и grid. Сборка без классов предполагает другую структуру макета, а условная сборка иначе ограничивает область применения стилей; заменять одну версию другой без проверки разметки — не нейтральная оптимизация. Если вы добавляете Pico на существующий сайт, проверьте, как его селекторы элементов взаимодействуют с уже заданными стилями форм и типографики, прежде чем применять их глобально.

Прочитать вспомогательную спецификацию

## Выберите дистрибутив до адаптации разметки в дизайн-системе Pico CSS

### Выберите вариант поставки, прежде чем адаптировать разметку

В этом примере используется стандартный дистрибутив и его вспомогательные классы container и grid. Дистрибутив без классов предполагает другую структуру макета, а условный дистрибутив ограничивает область применения стилей Pico. Рассматривайте выбор дистрибутива как решение об интеграции, а не как взаимозаменяемую оптимизацию размера файла.

На существующем сайте проверьте, как селекторы элементов влияют на имеющиеся заголовки, формы, статьи и диалоговые окна. Процентный размер шрифта примера для чтения — локальное переопределение; его следует оставить локальным. Изменение корневого масштаба также повлияет на отступы и элементы управления Pico, основанные на rem. При выборе элементов документа, наследующих тему, согласуйте атрибут оформления с настройками приложения.

Прочитать вспомогательную спецификацию

## Примеры компонентов дизайн-системы Pico CSS

### Полноценный семантический интерфейс для чтения

Элементы label оборачивают свои элементы управления, 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 выбраны специально.

## Настройка AI-агента дизайн-системы Pico CSS

### Отправная точка для реализации

Сохраните приведённые выше примеры целиком в файлы 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 Фактические определения стилей и цветов.

- Типографика Семантические заголовки и типографика.

- Формы Состав нативной формы.

- Модальное окно Стилизация диалога и граница между ней и поведением приложения.

- Сетка Вспомогательное средство для адаптивного макета.

- Accordion Раскрывающийся блок details и элемент summary.

## Связанные ресурсы дизайн-системы 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)
- [Accordion Раскрывающийся блок details и элемент summary.](https://picocss.com/docs/accordion)