# Sistema de design Sprout Social Seeds ## Prévia da interface do sistema de design Sprout Social Seeds Selecione as publicações visíveis, examine a seleção mista e recupere ou desfaça alterações em lote após filtrar. ## Referência de design do sistema de design Sprout Social Seeds Exports reais de Seeds: cores 2.5.0, espaçamento 0.8.1, tipografia 3.8.0 e bordas 1.7.1 CSS. ### Referências de paleta para estudos de produto | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --color-neutral-0 | #ffffff | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-neutral-100 | #f3f4f4 | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-neutral-200 | #dee1e1 | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-neutral-700 | #515e5f | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-neutral-900 | #273333 | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-blue-0 | #e9f4ff | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-blue-300 | #a1c2f8 | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-blue-700 | #205bc3 | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-green-100 | #d7f4d7 | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | | --color-green-900 | #006b40 | Tokens de paleta publicados e reais. O mapeamento deles para as ações e os estados desta fila original é específico da aplicação. | ### Escala completa de espaçamento fixo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --space-size--0 | 0px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--100 | 2px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--200 | 4px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--300 | 8px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--350 | 12px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--400 | 16px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--450 | 24px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--500 | 32px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | | --space-size--600 | 40px | Tokens reais em pixels de CSS. O pacote também oferece equivalentes em rem baseados em uma referência de 18px; não presuma uma conversão para 16px. | ### Tipografia do produto e densidade legível | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --typography-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-font-size--100 | 11px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-font-size--200 | 13px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-font-size--300 | 16px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-font-size--400 | 18px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-font-size--500 | 21px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-font-size--600 | 24px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-font-size--700 | 32px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-line-height--300 | 24px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | | --typography-line-height--500 | 29.333333333333332px | Valores do pacote de tipografia publicado. O exemplo do produto usa a família do sistema, não a fonte Proxima Nova da marca. | ### Escala de formas e bordas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --border-radius-400 | 4px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-radius-500 | 6px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-radius-600 | 8px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-radius-800 | 12px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-radius-900 | 24px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-radius-1000 | 999999px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-width-500 | 1px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-width-600 | 2px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | | --border-width-700 | 3px | Valores reais do pacote de bordas; os cartões originais usam cantos arredondados de 8px e bordas de um pixel. | ## Guia completo do sistema de design Sprout Social Seeds Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Tokens de produto e escopo de runtime do sistema de design Sprout Social Seeds ### Use os fundamentos do produto > Seeds distingue a tipografia do produto da tipografia da marca. A fila usa o token real de família tipográfica do sistema, disponível no pacote público de tipografia, junto com os tokens publicados de cor, espaçamento e borda. Ela não carrega uma fonte de marketing para depois afirmar que reproduz o sistema do produto. As versões dos pacotes são fixadas na configuração para manter a referência e o exemplo comparáveis. ### Separe tokens de componentes Carregar os pacotes de tokens do Seeds disponibiliza variáveis; isso não cria um editor de publicações nem uma árvore de componentes React. Os cartões, a lógica de seleção e a ação local de revisão deste estudo são código original em OpenDesign. A página se descreve deliberadamente como uma implementação baseada em tokens. Os componentes nativos do Seeds React têm requisitos próprios de integração, disponíveis nos recursos oficiais de componentes. ## Referências de paleta, espaçamento e tipografia do sistema de design Sprout Social Seeds ### Use os nomes exatos dos tokens A referência inclui nomes exportados reais, como --space-size--350 para 12px e --border-radius-600 para 8px. Não é possível deduzir esses nomes multiplicando um valor da escala. O CSS importa os arquivos de tokens diretamente e usa suas variáveis, permitindo rastrear um valor renderizado até a distribuição fixada, em vez de recorrer a uma paleta estimada. ### Observe a referência de rem O pacote de espaçamento fornece valores em pixels e em rem. Por exemplo, a etapa de 16px também é representada como 0.8888888888888888rem, refletindo uma referência de 18px. O estudo usa os valores dos tokens em pixels para explicitar o espaçamento pretendido. Substituir esses valores em rem às cegas em uma raiz de 16px alteraria a densidade, em vez de preservá-la. ## Cartões editoriais e contexto de revisão do sistema de design Sprout Social Seeds ### Faça cada cartão ser útil antes mesmo da interação Cada cartão tem um canal, um estado, um título original e uma publicação curta completa. Uma seção expansível secundária apresenta os critérios de revisão. O conteúdo é fictício e serve apenas para prática; o espaço de trabalho não está conectado a nenhuma conta de rede social. Assim, um cartão pode representar uma tarefa plausível sem sugerir acesso a publicações ou métricas reais. ### Mantenha os destaques da marca em segundo plano durante a leitura O azul identifica a ação de revisão original da fila, e o verde acompanha o texto “Pronto para revisão”. Essas atribuições de função são decisões da aplicação que usam cores reais da paleta. O estado é sempre descrito por escrito, portanto seu significado não depende da percepção da cor. Bordas e espaçamento separam as três publicações sem substituir conteúdo legível por elementos decorativos de preenchimento. ## Seleção visível e estado misto no sistema de design Sprout Social Seeds ### Limite a seleção em lote à visualização atual Selecionar publicações visíveis atua sobre o conjunto filtrado. Se apenas um de vários cartões visíveis for selecionado, a caixa de seleção em lote assume seu estado indeterminado nativo. Ao alterar o filtro, a seleção é limpa, evitando que uma publicação oculta seja alterada por uma ação posterior. A contagem visível informa tanto o número de itens exibidos quanto o de itens selecionados. - A seleção em lote se aplica apenas aos registros visíveis. - A seleção mista usa a propriedade indeterminate nativa. - Alterar o filtro limpa a seleção. - O estado da ação é determinado pelos rascunhos selecionados. ### Ative apenas ações que façam sentido A ação “Marcar como pronto para revisão” só fica disponível quando pelo menos uma publicação visível selecionada está como rascunho. Essa ação não reverte registros que já estão prontos. A atualização altera apenas os rascunhos selecionados, limpa a seleção e recalcula a visualização. Nenhuma publicação ou operação de agendamento é enviada pela rede. ## Estados vazios filtrados e desfazer no sistema de design Sprout Social Seeds ### Permita recuperar uma fila vazia Ao marcar como prontos todos os rascunhos visíveis na visualização Rascunhos, é natural que nenhum resultado permaneça. O estado vazio explica que os registros continuam existindo e oferece a opção “Mostrar todas as publicações”. Ele não exibe um indicador de carregamento nem inventa um erro de rede para um resultado local conhecido. A diferença entre não encontrar correspondências e não haver registros continua evidente. ### Desfaça a última alteração real A aplicação guarda o estado anterior apenas dos registros alterados pela ação de revisão mais recente. A opção Desfazer restaura esses valores, renderiza novamente a visualização atual e devolve o foco ao filtro. Ela não redefine registros sem relação com a ação nem finge desfazer uma publicação em rede social. Uma nova ação em lote substitui a única operação de desfazer disponível, de acordo com o rótulo “Desfazer última alteração”. ## Fila executável completa e verificações do sistema de design Sprout Social Seeds ### Use as quatro distribuições de tokens O código-fonte importa os tokens de cor, espaçamento, tipografia e borda CSS antes da folha de estilos original de composição. Salve juntos o main.js, o seeds.css e o shell HTML completos. A prévia reúne esses mesmos valores públicos e o código da aplicação, sem fontes remotas nem backend. Os comandos de instalação mostram as versões exatas dos pacotes. 1. Instale os quatro pacotes de tokens Seeds com versões fixadas. 2. Salve o ponto de entrada fornecido, o CSS e a raiz HTML. 3. Teste a seleção mista antes de alterar o filtro. 4. Verifique a recuperação do estado vazio filtrado e a opção de desfazer após uma revisão em lote. ### Teste uma combinação de estados Selecione uma publicação e verifique o estado misto da seleção em lote. Mude para Rascunhos e confira se a seleção é limpa. Selecione os rascunhos visíveis, marque-os como prontos e examine o resultado vazio. Desfaça a alteração e confirme que os dois rascunhos voltaram; em seguida, mostre todas as publicações. Em telas de celular, os cartões formam uma única coluna de leitura, mantendo acessíveis os rótulos e os controles de revisão. ## Exemplos de componentes do sistema de design Sprout Social Seeds ### main.js — fila editorial completa Dados originais, filtro, seleção mista, alteração em lote e opção de desfazer. ``` 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(); ``` Referência de código - Não se pressupõem integração com redes sociais API, operação de publicação nem componente nativo React. ### seeds.css — composição com tokens reais O layout responsivo completo usa as variáveis instaladas de 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}} ``` Referência de código - A associação entre paleta e funções é uma decisão original da aplicação. ### index.html — shell completo do aplicativo Elemento raiz e ponto de entrada do aplicativo local. ``` Editorial review queue
``` Referência de código - Substitua o index.html raiz do Vite por este arquivo. ## Configuração de agente do sistema de design Sprout Social Seeds ### Ponto de partida para implementação Estes são pacotes públicos de tokens. A aplicação completa de revisão é código original fornecido acima. ``` 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 ``` ### Um prompt para seu projeto ``` Crie a fila editorial fornecida usando o pacote público de tokens Seeds CSS com versões fixadas. Preserve os nomes reais dos tokens, a tipografia de produto baseada na fonte do sistema, a seleção apenas de itens visíveis, o estado misto nativo, as atualizações em lote limitadas a rascunhos, a recuperação do estado vazio e a opção de desfazer em uma etapa. Mantenha o conteúdo de exemplo original e nunca sugira uma conta de rede social conectada ou uma ação de publicação. ``` ## Fontes e escopo do sistema de design Sprout Social Seeds Uma aplicação original em OpenDesign que usa pacotes de tokens publicados do Seeds. Os cartões e o fluxo de revisão são criações originais em HTML/JavaScript, não componentes nativos do Seeds React. Nenhuma conta de rede social está conectada e nada é publicado. - Pacotes de tokens Caminhos de distribuição públicos e valores de fundamentos com versões fixadas. - Cor Referências de paleta e contexto de produto versus marca. - Espaçamento Elementos da escala e usos do espaçamento. - Tipografia do produto Orientações de produto para a fonte do sistema. - Configuração de componentes nativos Separe os requisitos de integração de React. ## Recursos relacionados ao sistema de design Sprout Social Seeds ### SumUp Circuit Um guia do Circuit com tokens semânticos exatos, propriedades nativas de validação, um editor completo de itens para lojistas e uma prévia ilustrada do lado do cliente. ### TDesign Crie um editor compacto de políticas API com TDesign React: funções concretas do tema, escala de tamanhos de dois pixels, registro de campos do Form e composição tipada de Table. ### Thumbtack Thumbprint Crie uma interface de descoberta de serviços com os elementos primitivos documentados da v2 do Thumbprint: cartões compactos de prestadores, detalhes de comparação fáceis de ler, estados de seleção claros e uma lista de favoritos persistente. - [Referência de implementação](https://seeds.sproutsocial.com/resources/tokens/) - [Fonte](https://seeds.sproutsocial.com/resources/tokens/) - [Referência de código](https://seeds.sproutsocial.com/resources/tokens/) - [Pacotes de tokens Caminhos de distribuição públicos e valores de fundamentos com versões fixadas.](https://seeds.sproutsocial.com/resources/tokens/) - [Cor Referências de paleta e contexto de produto versus marca.](https://seeds.sproutsocial.com/visual/color/) - [Espaçamento Elementos da escala e usos do espaçamento.](https://seeds.sproutsocial.com/visual/space/) - [Tipografia do produto Orientações de produto para a fonte do sistema.](https://seeds.sproutsocial.com/visual/product-typography/) - [Configuração de componentes nativos Separe os requisitos de integração de React.](https://seeds.sproutsocial.com/components/getting-started/)