# Пульс — дизайн-система (pulse-ds) 1.0.0 > Общий визуальный язык приложений s25/PartsBooster: токены, шрифты (Onest, Inter, JetBrains Mono), значки Material Symbols Rounded и Web Components от кнопки до дровера. Работает одинаково в чистом HTML, React, Svelte, Astro и PHP-шаблонах. Этот файл — всё, что нужно, чтобы собрать интерфейс. Не придумывай стили: бери компоненты и раскладки .pz-*; свой CSS — только для сетки страницы, через токены var(--pz-*). ## Подключение Любая страница (две строки в ; канал v1 получает исправления сам, без пересборки приложения): ```html ``` Тема: класс .dark (или data-theme="dark") на или любом блоке; data-theme="auto" — по системе. На — класс pz-app (земля, шрифт, цвет). Tailwind v4 (после `@import "tailwindcss";`): ```css @import url("https://ds.partsbooster.com/v1/tailwind.css"); ``` Tailwind v3 — пресет `https://ds.partsbooster.com/v1/tailwind-preset.cjs` (скачать в проект) в `presets: [...]`. Утилиты: bg-pz-surface, text-pz-fg, text-pz-muted, rounded-pz-card, shadow-pz-card, font-pz-head, text-pz-h1, bg-pz-ground. События компонентов — `pz-*` (pz-change, pz-select, pz-close…), значение в `e.detail`. Чистый JS: `el.addEventListener('pz-change', e => e.detail.value)`. Атрибуты-обработчики вида onpz-change в HTML не работают. React (18 и 19) — обёртки, они правильно передают булевы атрибуты и события. Установка: `npm i git+ssh://git@gitlab.s25.app/labs/pulse-ds.git`; CSS и pulse-ds.js всё равно — с CDN в index.html. ```jsx import { PzButton, PzSegmented } from '@s25/pulse-ds/react'; setV(e.detail.value)}>… ``` Svelte 5 — теги как есть, события атрибутом: ` v = e.detail.value}>`. Типы тегов: `https://ds.partsbooster.com/v1/pulse-ds.d.ts`. Закреплённая версия (для релиза, который не должен меняться): https://ds.partsbooster.com/1.0.0/… ## Правила ### ДНК: по чему узнают Пульс 1. **Парящие карточки на тонированной земле.** Фон — земля (`.pz-app`, `--pz-ground`); каждый виджет — отдельная белая карточка `` с многослойной мягкой тенью. Внутри карточки вложенные блоки — колодцы (``), без тени. 2. **Пластика.** Все контролы — пилюли. Главное действие чернильное (`variant="ink"`), одно на экран (не считая «+ Создать» в шапке). Активный пункт меню — белая пилюля с тенью. Плитка пространства, темы и типа записи — тонированная (цвет 15 %) с глифом того же цвета (``); тёмного глифа на насыщенном цвете не бывает. 3. **Параметры пилюлями.** Исполнитель, срок, важность, связи — пилюли-выпадашки в одну строку (`` в ``). Таблицы «подпись — значение» нет. 4. **Запись открывается дровером** (``) с тремя режимами: справа рядом со списком, окном по центру, на весь экран. Отдельной страницы записи нет. 5. **Степпер статуса.** Этапы пилюлями, подсказка «что дальше» и действие — в одной рейке (``). 6. **Стекло** — для плавающего: шапки, меню, листы, палитра. Меню и листы почти непрозрачны (`--pz-glass-strong` 0.98), размытие только усиливает. 7. **Телефон: всё плавает.** Шапка-пилюля, таб-бар с круглой чернильной «+» (``), меню превращаются в листы снизу (``). 8. **ИИ** — свой тёплый слой: градиент `--pz-ai-a → --pz-ai-b`, текст `--pz-ai-fg`, значок `auto_awesome` (``, `tone="ai"`). ### Цвет Нейтральные с холодным синим подтоном. Акцент бренда — оранжевый градиент (`--pz-grad`: логотип, «ждут тебя», горящий срок). Ссылки и фокус — `--pz-link`. Цвет несут типы записей и этапы: идея `idea`, задача `task`, баг `bug`, документ `doc`, объявление `ann` — у каждого мягкая пара `*-soft`. Кнопки цвет не несут: они чернильные или белые. Тёмная тема держит ту же глубину: земля почти чёрная с синим и лиловым свечением, у поверхностей светлая кромка; главное действие в тёмной теме светлое. ### Типографика и значки Заголовки — Onest 600 с плотным трекингом (до −0.04em на крупных), текст — Inter 400/500/600, номера записей — JetBrains Mono. Заглавные подписи секций — 11 px, трекинг 0.08em (`.pz-cap`). Цифры в столбцах — табличные (`.pz-num`). Значки — Material Symbols Rounded, размеры 16/18/20/24; значок без подписи — всегда с `label`. Эмодзи — только в реакциях чата. ### Движение Появление панелей, листов, меню — `--pz-ease`, 220–280 мс, сдвиг 8–12 px. Нажатие пилюли, рост числа, сегмент — `--pz-spring`, 160–200 мс. Наведение: карточка поднимается на 3 px, пилюля на 1 px. При `prefers-reduced-motion` остаются только проявления. ### Чего не делаем - плоских таблиц с линиями-разделителями вместо парящих карточек и строк; группы отделяются воздухом и колодцами; - прямоугольных кнопок и полей с радиусом 8–10 px; - листа свойств «Исполнитель / Срок / Метки» вместо пилюль-параметров; - встроенного блока «Обсуждение» с комментариями вместо чата-мессенджера; - отдельной страницы записи вместо дровера с режимами; - теней слабее `--pz-sh-btn` на белых контролах; - текста в пилюлях: пилюля — для параметров и действий; поле ввода прямоугольное (радиус 13) с подписью сверху (``); - белой плашки с тенью как выделения на белой поверхности: в меню и списках наведение — тонированная заливка, выбор — акцент и галочка; - своих цветов, теней и радиусов в коде экрана: только токены `var(--pz-*)` или утилиты Tailwind `*-pz-*`; - своих версий компонентов: если нужного нет — дополнить pulse-ds, а не верстать рядом. ## Раскладки и типографика (классы светлого DOM) - `.pz-app` на body — земля (градиент --pz-ground), шрифт Inter, цвет текста. - `.pz-page` — колонка страницы до 1240 px с полями; `.pz-stack` (gap 16; .tight 12, .loose 32), `.pz-row` (ряд с переносом, gap 8; .end, .between, .nowrap), `.pz-grid` — сетка карточек от 320 px, `.pz-spacer`. - Размер ряда: `.pz-sm` / `.pz-md` / `.pz-lg` на предке — все контролы внутри одной высоты (32/40/48). - Текст: `.pz-h0`…`.pz-h4` (Onest), `.pz-body-lg`, `.pz-body`, `.pz-small`, `.pz-micro`, `.pz-cap` (заглавная подпись секции), `.pz-id` (номер записи, моно), `.pz-num` (табличные цифры), `.pz-muted`, `.pz-faint`, `.pz-link`. ## Токены CSS-переменные `--pz-<имя>`; в Tailwind — утилиты с префиксом pz-. Значения тем переключаются сами. ### color - --pz-bg — Земля: фон приложения под градиентом --ground. - --pz-bg-2 — Фон дровера и вложенных панелей. - --pz-surface — Карточки, белые пилюли, выбранный сегмент. - --pz-surface-2 — Колодцы внутри карточек, поля форм. - --pz-well — Дорожки полос этапов и колец. - --pz-seg — Дорожка сегмента и степпера. - --pz-fg — Основной текст и заголовки. - --pz-text-2 — Вторичный текст, описания. - --pz-muted — Подписи, мета-строки. - --pz-faint — Плейсхолдеры, заглавные подписи. - --pz-chev — Шевроны, выключенные точки, ручки. - --pz-hair — Подложка hover, чипы, тончайшие заливки. - --pz-hair-2 — Контуры пустых пилюль и полей. - --pz-ink — Главное действие, тосты, выбранный чип. - --pz-ink-2 — Верх градиента чернил. - --pz-on-ink — Текст на чернилах. - --pz-link — Ссылки, кольцо фокуса, непрочитанное. - --pz-link-soft — Ореол фокуса, выделение. - --pz-accent — Бренд: логотип, «ждут тебя», горящий срок. - --pz-accent-2 — Светлый край оранжевого градиента. - --pz-accent-soft — Подложка горящего срока. - --pz-accent-deep — Текст на accent-soft. - --pz-accent-fg — Текст на оранжевом градиенте. - --pz-idea — Идея. - --pz-idea-soft — Идея. - --pz-task — Задача. - --pz-task-soft — Задача. - --pz-bug — Баг. - --pz-bug-soft — Баг. - --pz-doc — Документ. - --pz-doc-soft — Документ. - --pz-ann — Объявление. - --pz-ann-soft — Объявление. - --pz-ok — Успех. - --pz-ok-soft — Успех. - --pz-ok-bright — Успех. - --pz-warn — Внимание. - --pz-warn-soft — Внимание. - --pz-danger — Ошибка и удаление. - --pz-danger-soft — Ошибка и удаление. - --pz-st-new — Цвет этапа в полосе. - --pz-st-disc — Цвет этапа в полосе. - --pz-st-work — Цвет этапа в полосе. - --pz-st-done — Цвет этапа в полосе. - --pz-glass — Стекло плавающих шапок. - --pz-glass-strong — Стекло меню, листов, палитры. - --pz-glass-edge — Светлая кромка стекла. - --pz-scrim — Затемнение под окном и листом. - --pz-chat-a — Фон чата, верх. - --pz-chat-b — Фон чата, низ. - --pz-bub — Чужой пузырь. - --pz-bub-me — Свой пузырь. - --pz-bub-me-fg — Текст своего пузыря. - --pz-ai-a — Слой ИИ, начало градиента. - --pz-ai-b — Слой ИИ, конец градиента. - --pz-ai-fg — Текст и иконки ИИ. - --pz-pri-high — Важность «Высокая»: янтарный текст. - --pz-pri-high-soft — Важность «Высокая»: подложка, отличается от danger-soft. - --pz-selection — Выделение текста. - --pz-hover — Наведение на пункт меню, день календаря, строку на белом. - --pz-veil — Полупрозрачная подложка значка на ИИ-пилюле. - --pz-toast-btn — Кнопка внутри чернильного тоста. - --pz-orb-a — Шар пустого состояния, блик. - --pz-orb-b — Шар пустого состояния, край. ### gradient - --pz-ground — Земля: фон приложения, три пятна света на тонированной основе. - --pz-grad — Бренд: логотип, «ждут тебя», горячие счётчики. - --pz-grad-ink — Чернила: главное действие, выбранный сегмент, тост. - --pz-grad-blue — Синяя пилюля: отправка в чате, счётчик «обращаются ко мне», включённый тумблер. ### shadow - --pz-sh-card — Парящая карточка. - --pz-sh-card-hover — Карточка и пилюля на hover. - --pz-sh-btn — Белые пилюли и круглые кнопки. - --pz-sh-seg — Выбранный сегмент, активный пункт меню, открытая строка. - --pz-sh-pop — Меню и выпадашки. - --pz-sh-float — Дровер, панель чатов, окна, листы. - --pz-sh-ink — Чернильные кнопки и тосты. - --pz-sh-glass — Стеклянные шапки и поле чата. ### radius - --pz-r-pill — Все контролы. - --pz-r-card — Парящая карточка. - --pz-r-panel — Дровер, панель чатов, окна. - --pz-r-in — Вложенные блоки, пункт меню. - --pz-r-tile — Плитка типа записи. - --pz-r-ctl — Поле ввода (прямоугольник с подписью сверху). - --pz-r-well — Колодцы внутри карточек, строки списка. - --pz-r-menu — Меню и выпадашки. - --pz-r-area — Многострочное поле. - --pz-r-tip — Подсказки, скелетон. ### spacing - --pz-space-2 — Между строками списка. - --pz-space-4 — Внутри групп иконок. - --pz-space-8 — Между пилюлями в строке. - --pz-space-12 — Между блоками в карточке. - --pz-space-16 — Между карточками. - --pz-space-24 — Поля карточки. - --pz-space-32 — Между секциями. ### size - --pz-c-h-xs — Высота чипа. - --pz-c-h-sm — Плотные строки и панели. - --pz-c-h-md — Контрол по умолчанию. - --pz-c-h-lg — Верхняя строка: поиск, группа значков, «Создать». - --pz-c-h-field — Поле ввода. - --pz-c-fs-xs — Шрифт чипа. - --pz-c-fs-sm — Шрифт контрола sm. - --pz-c-fs-md — Шрифт контрола md. - --pz-c-fs-lg — Шрифт контрола lg. - --pz-c-fs-field — Шрифт поля; на телефоне 16, чтобы iOS не увеличивал страницу. - --pz-c-px-xs — Отступ чипа. - --pz-c-px-sm — Отступ контрола sm. - --pz-c-px-md — Отступ контрола md. - --pz-c-px-lg — Отступ контрола lg. - --pz-c-ic-xs — Значок в чипе. - --pz-c-ic-sm — Значок в контроле sm. - --pz-c-ic-md — Значок в контроле md. - --pz-c-ic-lg — Значок в контроле lg. - --pz-sidebar-w — Ширина сайдбара. - --pz-drawer-w — Ширина дровера справа. - --pz-tabbar-h — Таб-бар телефона. ### easing - --pz-ease — Появление панелей, листов, меню. - --pz-spring — Нажатие, счётчики, сегмент. ### duration - --pz-dur-press — Нажатие и hover. - --pz-dur-pop — Меню, тосты. - --pz-dur-panel — Дровер, чаты, листы. ### type - --pz-t-h0 (font shorthand) + --pz-t-h0-ls — 56px/56px 600, заголовки: Листы-манифесты, первый экран. - --pz-t-h1 (font shorthand) + --pz-t-h1-ls — 34px/38px 600, заголовки: Заголовок страницы и записи. - --pz-t-h2 (font shorthand) + --pz-t-h2-ls — 24px/29px 600, заголовки: Заголовок окна, героя. - --pz-t-h3 (font shorthand) + --pz-t-h3-ls — 18px/23px 600, заголовки: Заголовок карточки. - --pz-t-h4 (font shorthand) + --pz-t-h4-ls — 15px/20px 600, заголовки: Заголовок колодца, строки. - --pz-t-body-lg (font shorthand) + --pz-t-body-lg-ls — 16px/25px 400, текст: Описание записи. - --pz-t-body (font shorthand) + --pz-t-body-ls — 14px/21px 400, текст: Основной текст интерфейса. - --pz-t-small (font shorthand) + --pz-t-small-ls — 13px/18px 400, текст: Мета-строки, подписи. - --pz-t-micro (font shorthand) + --pz-t-micro-ls — 12px/16px 500, текст: Время, счётчики. - --pz-t-cap (font shorthand) + --pz-t-cap-ls — 11px/14px 600, текст: Заглавная подпись секции. - --pz-t-id (font shorthand) + --pz-t-id-ls — 13px/16px 600, моно: Номер записи. ## Компоненты ### Микро — контролы #### — Значок Значок Material Symbols Rounded по имени. Размеры 16/18/20/24; у активного пункта и статуса — заливка (fill). Атрибуты: - name: string — Имя значка из Material Symbols (add, search, forum, monitor_heart…). - size: number — Размер в px. По умолчанию — размер значка контрола (--ic), иначе 20. - fill: boolean — Залитый вариант: активный пункт, статус. - tone: 'muted' | 'faint' | 'link' | 'accent' | 'ok' | 'danger' | 'ai' — Цвет. Без атрибута — цвет текста. Правила: - Значок без подписи рядом — только внутри pz-icon-button с label (aria-label обязателен). - Эмодзи вместо значков не используются, кроме реакций в чате. Пример — Размеры и тона: ```html

``` #### — Кнопка Кнопка-пилюля. Белая — обычное действие, чернильная — одно главное на экран, тихая (ghost), синяя — отправка в чате, danger — удаление. Атрибуты: - variant: 'white' | 'ink' | 'ghost' | 'blue' | 'danger' (по умолчанию white) — Вид. ink — главное действие (в тёмной теме светлое). - size: 'sm' | 'md' | 'lg' (по умолчанию md) — Высота 32/40/48. Обычно задаётся рядом (.pz-sm/.pz-lg на предке), а не кнопкой. - icon: string — Значок слева. - icon-end: string — Значок справа. - dropdown: boolean — Шеврон справа — кнопка открывает меню. - loading: boolean — Кольцо вместо значка, нажатия не проходят. - disabled: boolean - block: boolean — На всю ширину. - href: string — Сделать ссылкой . - type: 'button' | 'submit' | 'reset' (по умолчанию button) — submit отправляет форму, в которой стоит кнопка. События: - click — Обычный click; при disabled и loading не всплывает. Слоты: - по умолчанию — Подпись. - slot="start" — Перед подписью (аватар, плитка). - slot="end" — После подписи (счётчик pz-counter). Правила: - На экране одно чернильное действие, не считая «+ Создать» в шапке. - Кнопки цвет не несут: только чернильные, белые или тихие. Цветная — только синяя «Отправить» в чате. - Прямоугольных кнопок с радиусом 8–10 px не бывает. - Элементы одного ряда — одной высоты: размер задаёт ряд (класс .pz-sm / .pz-lg), а не отдельная кнопка. Пример — Варианты: ```html

Отправить

Удалить

``` Пример — Размеры рядом и состояния: ```html

``` #### — Кнопка-значок Круглая кнопка со значком. Без заливки по умолчанию, solid — белая с тенью, ink — чернильная. Счётчик и точка непрочитанного. Атрибуты: - icon: string — Значок. - label: string — Подпись для экранных дикторов и подсказка. Обязательна. - variant: 'plain' | 'solid' | 'ink' | 'blue' (по умолчанию plain) - size: 'sm' | 'md' | 'lg' (по умолчанию md) - on: boolean — Выбрана (в группе — чернильная). - badge: string — Число в чернильном кружке. - dot: boolean — Оранжевая точка — есть новое. - fill: boolean — Залитый значок. - href: string - disabled: boolean События: - click Правила: - label обязателен: иконка без подписи всегда с aria-label. - Несколько кнопок-значков рядом — в pz-icon-group (белая пилюля), а не россыпью. Пример — Варианты: ```html

``` #### — Группа значков Белая пилюля с кнопками-значками внутри: шапка страницы (чаты, объявления, колокольчик), переключатель вида. Выбранная — чернильная. Атрибуты: - size: 'sm' | 'md' | 'lg' (по умолчанию md) - label: string — aria-label группы. Слоты: - по умолчанию — pz-icon-button и разделители . Пример — Шапка и переключатель вида: ```html

``` #### — Поле ввода Поле с подписью сверху и подсказкой или ошибкой снизу: однострочное, многострочное (multiline), поиск-пилюля (variant="search"). Работает в