# Дизайн-система Sprout Social Seeds ## Предпросмотр интерфейса дизайн-системы Sprout Social Seeds Выбирайте видимые публикации, проверяйте смешанное выделение, а также восстанавливайте или отменяйте изменения пакетной операции после фильтрации. ## Справочник по дизайн-системе Sprout Social Seeds Фактические экспорты CSS из установленных Seeds: цвет — 2.5.0, отступы — 0.8.1, типографика — 3.8.0, границы — 1.7.1. ### Примеры палитр для изучения продукта | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --color-neutral-0 | #ffffff | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-neutral-100 | #f3f4f4 | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-neutral-200 | #dee1e1 | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-neutral-700 | #515e5f | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-neutral-900 | #273333 | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-blue-0 | #e9f4ff | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-blue-300 | #a1c2f8 | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-blue-700 | #205bc3 | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-green-100 | #d7f4d7 | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | | --color-green-900 | #006b40 | Настоящие опубликованные токены палитры. Их назначение для действий и статусов этой оригинальной очереди зависит от приложения. | ### Полная фиксированная шкала отступов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --space-size--0 | 0px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--100 | 2px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--200 | 4px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--300 | 8px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--350 | 12px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--400 | 16px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--450 | 24px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--500 | 32px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | | --space-size--600 | 40px | Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px. | ### Типографика продукта и удобочитаемая плотность | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --typography-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-font-size--100 | 11px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-font-size--200 | 13px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-font-size--300 | 16px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-font-size--400 | 18px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-font-size--500 | 21px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-font-size--600 | 24px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-font-size--700 | 32px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-line-height--300 | 24px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | | --typography-line-height--500 | 29.333333333333332px | Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов. | ### Шкала форм и границ | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --border-radius-400 | 4px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-radius-500 | 6px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-radius-600 | 8px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-radius-800 | 12px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-radius-900 | 24px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-radius-1000 | 999999px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-width-500 | 1px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-width-600 | 2px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | | --border-width-700 | 3px | Фактические значения пакета границ; в оригинальных карточках используются скругления 8px и границы толщиной в один пиксель. | ## Полное руководство по дизайн-системе Sprout Social Seeds Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Токены продукта и область действия среды выполнения дизайн-системы Sprout Social Seeds ### Используйте основы продукта > Seeds разделяет типографику продукта и фирменную типографику. В очереди используется фактический токен семейства системных шрифтов из общедоступного пакета типографики вместе с опубликованными токенами цвета, отступов и границ. Маркетинговый шрифт не загружается, поэтому пример не выдаёт себя за воспроизведение продуктовой системы. Версии пакетов зафиксированы в настройках, чтобы справочник и пример можно было сопоставить. ### Разделяйте токены и компоненты Загрузка пакетов токенов Seeds предоставляет переменные, но не создаёт редактор публикаций или дерево компонентов React. Карточки, логика выделения и локальное действие проверки в этом примере — оригинальный код OpenDesign. На странице он прямо обозначен как реализация на основе токенов. Для интеграции нативных компонентов Seeds React требуются отдельные инструкции, доступные в официальных ресурсах компонентов. ## Справочник по палитре, отступам и типографике дизайн-системы Sprout Social Seeds ### Используйте точные имена токенов В справочник включены реальные экспортируемые имена, например --space-size--350 для 12px и --border-radius-600 для 8px. Эти имена нельзя вывести, просто умножив значение на шкале. CSS напрямую импортирует файлы токенов и использует их переменные, поэтому можно проследить связь между отображаемым значением и закреплённым дистрибутивом, а не полагаться на предположительную палитру. ### Учитывайте базовый размер для rem В пакете отступов доступны значения в пикселях и rem. Например, шаг 16px также представлен как 0.8888888888888888rem, что соответствует базовому размеру 18px. В примере используются пиксельные формы токенов, чтобы явно задать предполагаемые отступы. Если без проверки подставить значения rem в корневой размер 16px, плотность изменится, а не сохранится. ## Редакционные карточки и контекст проверки в дизайн-системе Sprout Social Seeds ### Сделайте каждую карточку полезной ещё до взаимодействия У каждой карточки есть канал, статус, оригинальный заголовок и короткая публикация с полным текстом. В дополнительном раскрывающемся блоке приведены критерии проверки. Контент вымышлен и создан для упражнений; рабочее пространство не связано с аккаунтами в социальных сетях. Благодаря этому карточка выглядит правдоподобно и при этом не создаёт впечатления, будто она предоставляет доступ к настоящим публикациям или аналитике. ### Не позволяйте акцентам фирменной палитры мешать чтению Синий обозначает действие проверки в оригинальной очереди, а зелёный сопровождает текст «Готово к проверке». Это назначение ролей — решение, принятое для приложения с использованием настоящих цветов палитры. Статус всегда указан текстом, поэтому его значение не зависит от восприятия цвета. Границы и отступы разделяют три публикации, не подменяя читаемый контент декоративными заглушками. ## Выделение видимых элементов и смешанное состояние в дизайн-системе Sprout Social Seeds ### Применяйте массовое выделение только к текущему представлению Действие «Выбрать видимые публикации» применяется к отфильтрованному набору. Если выбрать только одну из нескольких видимых карточек, флажок массового выбора перейдёт в нативное промежуточное состояние. При смене фильтра выделение сбрасывается, поэтому последующее действие не затронет скрытую запись. В счётчике отображаются и количество видимых элементов, и количество выбранных. - Массовое выделение применяется только к видимым записям. - Для смешанного выделения используется нативное свойство indeterminate. - При смене фильтра выделение сбрасывается. - Доступность действия зависит от статуса выбранных черновиков. ### Разрешайте только осмысленные действия Действие «Отметить как готовое к проверке» доступно, только если выбрана хотя бы одна видимая публикация со статусом «Черновик». Уже готовые к проверке записи не переключаются обратно. Обновляются только выбранные черновики, их выделение сбрасывается, а представление пересчитывается. Публикации или планирования через сеть не происходит. ## Пустые состояния после фильтрации и отмена действий в дизайн-системе Sprout Social Seeds ### Сохраняйте возможность восстановить очередь, даже если она пуста Если отметить как готовые к проверке все видимые черновики при активном фильтре «Черновики», результаты закономерно исчезнут. В пустом состоянии поясняется, что записи по-прежнему существуют, и предлагается показать все публикации. Для известного локального результата не отображается индикатор загрузки и не имитируется сетевой сбой. Различие между отсутствием совпадений и отсутствием записей остаётся понятным. ### Отменяйте последнее фактическое изменение Приложение сохраняет предыдущий статус только для записей, изменённых последним действием проверки. Отмена восстанавливает эти значения, обновляет текущее представление и возвращает фокус к фильтру. Она не сбрасывает несвязанные записи и не притворяется, что отменяет публикацию в социальной сети. Следующая пакетная операция заменяет единственную доступную операцию отмены — это соответствует подписи «Отменить последнее изменение». ## Полноценная запускаемая очередь и проверки в дизайн-системе Sprout Social Seeds ### Используйте все четыре дистрибутива токенов Исходный файл подключает цвета, отступы, типографику и границы CSS перед оригинальной таблицей стилей композиции. Сохраните полные файлы main.js, seeds.css и оболочку HTML вместе. Предпросмотр включает те же общедоступные значения и код приложения, без удалённых шрифтов и серверной части. Точные версии пакетов указаны в команде установки. 1. Установите четыре пакета токенов Seeds с фиксированными версиями. 2. Сохраните предоставленные точку входа, CSS и корневой HTML. 3. Прежде чем менять фильтр, проверьте смешанное состояние выбора. 4. Проверьте восстановление после пустой выдачи и отмену пакетного изменения после проверки. ### Проверьте сочетание состояний Выберите одну публикацию и проверьте смешанное состояние массового выбора. Переключитесь на черновики и убедитесь, что выбор сброшен. Выберите отображаемые черновики, отметьте их как готовые и проверьте пустую выдачу. Отмените действие и убедитесь, что два черновика вернулись, затем отобразите все публикации. На экране телефона карточки выстраиваются в одну колонку для чтения, а метки и элементы управления проверкой остаются доступными. ## Примеры компонентов дизайн-системы Sprout Social Seeds ### main.js — полная очередь редакционных материалов Исходные данные, фильтр, смешанный выбор, пакетное изменение и отмена. ``` import '@sproutsocial/seeds-color/dist/seeds-color.css'; import '@sproutsocial/seeds-space/dist/seeds-space.css'; import '@sproutsocial/seeds-typography/dist/seeds-typography.css'; import '@sproutsocial/seeds-border/dist/seeds-border.css'; import './seeds.css'; let items=[{id:'p1',title:'A clearer first step',channel:'Team updates',copy:'A useful guide starts with the task someone needs to complete. This week, we are revisiting the first step in our workshop toolkit.',status:'Draft'},{id:'p2',title:'Room for different perspectives',channel:'Community notes',copy:'Good workshop preparation creates more than an agenda. It gives people time to think and more than one way to contribute.',status:'Draft'},{id:'p3',title:'From notes to next actions',channel:'Team updates',copy:'Close a conversation with a decision, an owner and a date to look again. Keep open questions visible alongside the agreed next step.',status:'Ready for review'}];let chosen=new Set(),previous=null; document.querySelector('#root').innerHTML=`

OpenDesign · Editorial practice

A small queue, ready for a closer look

Prepare original sample posts for review. This workspace does not connect to social accounts or publish content.

3 sample posts

`; function visible(){let value=document.querySelector('#filter').value;return items.filter(x=>value==='All posts'||x.status===value)} function updateSelection(){let rows=visible(),selected=rows.filter(x=>chosen.has(x.id));const all=document.querySelector('#all');all.checked=rows.length>0&&selected.length===rows.length;all.indeterminate=selected.length>0&&selected.lengthx.status==='Draft');document.querySelector('#count').textContent=`${rows.length} posts shown · ${selected.length} selected`;} function render(){let rows=visible();chosen=new Set([...chosen].filter(id=>rows.some(x=>x.id===id)));const root=document.querySelector('#posts');root.replaceChildren(...rows.map(x=>{let a=document.createElement('article');a.innerHTML=`
${x.status}

${x.title}

${x.copy}

Review checklist
`;a.querySelector('input').onchange=e=>{e.target.checked?chosen.add(x.id):chosen.delete(x.id);updateSelection()};return a}));document.querySelector('#empty').hidden=rows.length>0;updateSelection();} document.querySelector('#filter').onchange=()=>{chosen.clear();render()};document.querySelector('#all').onchange=e=>{chosen=new Set(e.target.checked?visible().map(x=>x.id):[]);render()};document.querySelector('#review').onclick=()=>{let changed=items.filter(x=>chosen.has(x.id)&&x.status==='Draft');if(!changed.length)return;previous=changed.map(x=>({id:x.id,status:x.status}));changed.forEach(x=>x.status='Ready for review');chosen.clear();render();document.querySelector('#notice').hidden=false;document.querySelector('#message').textContent=`${changed.length} ${changed.length===1?'post marked':'posts marked'} ready for review locally. Nothing was published.`;};document.querySelector('#undo').onclick=()=>{previous?.forEach(p=>{items.find(x=>x.id===p.id).status=p.status});previous=null;render();document.querySelector('#notice').hidden=true;document.querySelector('#filter').focus()};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All posts';render();document.querySelector('#filter').focus()};render(); ``` Справочник по коду - Не предполагается наличие социальной сети API, операции публикации или встроенного компонента React. ### seeds.css — композиция на основе реальных токенов Полная адаптивная компоновка использует переменные CSS из установленных пакетов. ``` *{box-sizing:border-box}body{margin:0;font:var(--typography-font-size--300)/var(--typography-line-height--300) var(--typography-family);color:var(--color-neutral-900);background:var(--color-neutral-100)}main{max-width:1160px;padding:var(--space-size--500);margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}h1{font-size:var(--typography-font-size--700);line-height:var(--typography-line-height--700);margin:8px 0 16px;max-width:24ch}header p:last-child{max-width:64ch}.eyebrow,.badge{font-size:13px;font-weight:600}.badge{white-space:nowrap;background:var(--color-green-100);color:var(--color-green-900);padding:8px 12px;border-radius:var(--border-radius-400)}.filters{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:24px;background:white;border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-600)}label{display:flex;align-items:center;gap:8px}select,button{font:inherit;border:1px solid var(--color-neutral-600);border-radius:var(--border-radius-400);padding:8px 12px;min-height:40px}select{background:white;color:var(--color-neutral-900);max-width:100%}button{background:var(--color-blue-700);color:white;border-color:var(--color-blue-700);font-weight:600;cursor:pointer}button:disabled{opacity:.5;cursor:default}input{width:18px;height:18px;accent-color:var(--color-blue-700);flex-shrink:0}#count{font-size:13px;color:var(--color-neutral-700);margin:24px 0 16px}#posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}article{display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-600);padding:24px;background:white;min-width:0}.post-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.channel,.status{font-size:13px}.status{padding:2px 8px;border-radius:4px}.draft{background:var(--color-neutral-100)}.ready{background:var(--color-green-100);color:var(--color-green-900)}h2{font-size:21px;line-height:29.333px;margin:24px 0 16px}.copy{min-height:144px}details{border-top:1px solid var(--color-neutral-200);padding-top:16px;margin-top:auto;font-size:13px;line-height:1.6}summary{cursor:pointer;font-weight:600}details ul{padding-left:20px}details li{margin:8px 0}#notice{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--color-blue-0);border:1px solid var(--color-blue-300);border-radius:8px;padding:16px 24px;margin-top:24px}#notice p{margin:0}#empty{background:white;padding:24px;border-radius:8px}#empty h2{margin-top:0}footer{font-size:13px;line-height:1.6;border-top:1px solid var(--color-neutral-200);margin-top:32px;padding-top:24px}:focus-visible{outline:3px solid var(--color-blue-700);outline-offset:3px}[hidden]{display:none!important}@media(max-width:850px){#posts{grid-template-columns:1fr}.copy{min-height:0}header{flex-wrap:wrap}#notice{flex-wrap:wrap}}@media(max-width:480px){main{padding:16px}.filters,article{padding:16px}.filters>label:first-child{flex-wrap:wrap}h1{font-size:24px;line-height:32px}.filters{gap:16px}.eyebrow{overflow-wrap:anywhere}} ``` Справочник по коду - Назначение цветов ролям — оригинальное решение приложения. ### index.html — полная оболочка приложения Корневой элемент и точка входа локального приложения. ``` Editorial review queue
``` Справочник по коду - Замените этим файлом корневой index.html в Vite. ## Настройка агента дизайн-системы Sprout Social Seeds ### Отправная точка для реализации Это общедоступные пакеты токенов. Полное приложение для проверки — оригинальный код, приведённый выше. ``` npm create vite@latest seeds-review -- --template vanilla cd seeds-review npm install npm install @sproutsocial/seeds-color@2.5.0 @sproutsocial/seeds-space@0.8.1 @sproutsocial/seeds-typography@3.8.0 @sproutsocial/seeds-border@1.7.1 # Save index.html at root; main.js and seeds.css in src. npm run dev ``` ### Запрос для вашего проекта ``` Создайте предоставленную очередь редакционных материалов с помощью общедоступных пакетов токенов Seeds CSS с фиксированными версиями. Сохраните настоящие имена токенов, типографику системного продукта, выбор только видимых элементов, встроенное смешанное состояние, пакетное обновление только черновиков, восстановление после пустой выдачи и отмену одним действием. Оставьте исходные примеры содержимого и не создавайте впечатление, что подключена учётная запись социальной сети или выполняется публикация. ``` ## Источники и область применения дизайн-системы Sprout Social Seeds Оригинальное приложение OpenDesign, использующее опубликованные пакеты токенов Seeds. Карточки и рабочий процесс проверки — оригинальные HTML/JavaScript, а не встроенные компоненты Seeds React. Учётная запись социальной сети не подключена, публикации не выполняются. - Пакеты токенов Общедоступные пути распространения и версии базовых значений. - Цвет Ссылки на палитру и контекст продуктовых и фирменных цветов. - Интервалы Элементы шкалы и использование отступов. - Типографика продукта Рекомендации по системным шрифтам для продукта. - Настройка встроенных компонентов Отдельные требования интеграции React. ## Связанные ресурсы дизайн-системы Sprout Social Seeds ### SumUp Circuit Руководство по Circuit с точными семантическими токенами, встроенными свойствами валидации, полноценным редактором товаров для продавцов и иллюстрированным пользовательским интерфейсом. ### TDesign Создайте компактный редактор политики API на основе TDesign React: конкретные роли тем, двухпиксельная шкала размеров, регистрация полей Form и типизированная композиция Table. ### Thumbtack Thumbprint Создайте интерфейс для поиска услуг на основе документированных примитивов Thumbprint v2: компактные карточки поставщиков, понятные сведения для сравнения, наглядные состояния выбора и постоянно видимый список избранного. - [Справочник по реализации](https://seeds.sproutsocial.com/resources/tokens/) - [Источник](https://seeds.sproutsocial.com/resources/tokens/) - [Справочник по коду](https://seeds.sproutsocial.com/resources/tokens/) - [Пакеты токенов Общедоступные пути распространения и версии базовых значений.](https://seeds.sproutsocial.com/resources/tokens/) - [Цвет Ссылки на палитру и контекст продуктовых и фирменных цветов.](https://seeds.sproutsocial.com/visual/color/) - [Интервалы Элементы шкалы и использование отступов.](https://seeds.sproutsocial.com/visual/space/) - [Типографика продукта Рекомендации по системным шрифтам для продукта.](https://seeds.sproutsocial.com/visual/product-typography/) - [Настройка встроенных компонентов Отдельные требования интеграции React.](https://seeds.sproutsocial.com/components/getting-started/)