# Sistema di progettazione Sprout Social Seeds ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Sprout Social Seeds Seleziona i post visibili, esamina la selezione mista e ripristina o annulla le modifiche dopo un’azione in blocco filtrata. ## Riferimento di progettazione del sistema sistema di design Sprout Social Seeds Esportazioni effettive di Seeds: color 2.5.0, space 0.8.1, typography 3.8.0 e border 1.7.1 CSS. ### Riferimenti della palette per lo studio del prodotto | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --color-neutral-0 | #ffffff | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-neutral-100 | #f3f4f4 | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-neutral-200 | #dee1e1 | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-neutral-700 | #515e5f | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-neutral-900 | #273333 | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-blue-0 | #e9f4ff | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-blue-300 | #a1c2f8 | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-blue-700 | #205bc3 | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-green-100 | #d7f4d7 | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | | --color-green-900 | #006b40 | Token della palette effettivamente pubblicati. La loro associazione alle azioni e agli stati di questa coda originale è specifica dell’applicazione. | ### Scala di spaziatura fissa completa | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --space-size--0 | 0px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--100 | 2px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--200 | 4px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--300 | 8px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--350 | 12px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--400 | 16px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--450 | 24px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--500 | 32px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | | --space-size--600 | 40px | Token pixel effettivi di CSS. Il pacchetto include anche equivalenti in rem basati su una base di 18 px; non presumere una conversione a 16 px. | ### Tipografia del prodotto e densità leggibile | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --typography-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-font-size--100 | 11px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-font-size--200 | 13px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-font-size--300 | 16px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-font-size--400 | 18px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-font-size--500 | 21px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-font-size--600 | 24px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-font-size--700 | 32px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-line-height--300 | 24px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | | --typography-line-height--500 | 29.333333333333332px | Valori pubblicati del pacchetto tipografico. L’esempio del prodotto usa la famiglia di sistema, non il carattere Proxima Nova per il marketing. | ### Scala di forme e bordi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --border-radius-400 | 4px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-radius-500 | 6px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-radius-600 | 8px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-radius-800 | 12px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-radius-900 | 24px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-radius-1000 | 999999px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-width-500 | 1px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-width-600 | 2px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | | --border-width-700 | 3px | Valori effettivi del pacchetto dei bordi; le schede originali usano angoli arrotondati di 8 px e bordi da un pixel. | ## Guida completa al sistema di progettazione sistema di design Sprout Social Seeds Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Token del prodotto e ambito del runtime del sistema di progettazione sistema di design Sprout Social Seeds ### Usa le fondamenta del prodotto > Seeds distingue la tipografia del prodotto da quella del brand. La coda usa il token effettivo della famiglia di caratteri di sistema del pacchetto tipografico pubblico, insieme ai token pubblicati per colori, spaziatura e bordi. Non carica un carattere tipografico per il marketing per poi sostenere di riprodurre il sistema del prodotto. Le versioni dei pacchetti sono bloccate nella configurazione, così il riferimento e l’esempio restano confrontabili. ### Separa i token dai componenti Caricare i pacchetti di token Seeds rende disponibili le variabili; non crea un editor di post né un albero di componenti React. Le schede, la logica di selezione e l’azione di revisione locale di questo studio sono codice originale in OpenDesign. La pagina definisce esplicitamente questa implementazione basata sui token. I componenti Seeds React nativi hanno requisiti di integrazione propri, illustrati nelle risorse ufficiali sui componenti. ## Riferimenti per palette, spaziatura e tipografia del sistema di progettazione sistema di design Sprout Social Seeds ### Usa i nomi esatti dei token Il riferimento include nomi esportati effettivi, come --space-size--350 per 12 px e --border-radius-600 per 8 px. Non è possibile dedurre questi nomi moltiplicando un’etichetta della scala. CSS importa direttamente i file dei token e usa le relative variabili, così è possibile risalire da un valore renderizzato alla distribuzione bloccata, anziché a una palette ipotizzata. ### Fai attenzione alla base di rem Il pacchetto della spaziatura fornisce sia valori in pixel sia in rem. Per esempio, il valore di 16 px è rappresentato anche come 0.8888888888888888rem, in base a una base di 18 px. Lo studio usa i token in pixel per esplicitare la spaziatura prevista. Sostituire alla cieca quei valori in rem in una radice da 16 px cambierebbe la densità, anziché mantenerla. ## Schede editoriali e contesto di revisione del sistema di progettazione sistema di design Sprout Social Seeds ### Rendi ogni scheda utile prima dell’interazione Ogni scheda include un canale, uno stato, un titolo originale e un breve post completo. Un dettaglio espandibile offre criteri di revisione. I contenuti sono materiale fittizio di esercitazione e lo spazio di lavoro non è collegato ad alcun account social. Una scheda può quindi descrivere un’attività credibile senza suggerire l’accesso a post o dati analitici reali. ### Mantieni gli accenti del brand secondari rispetto alla lettura Il blu identifica l’azione di revisione della coda originale e il verde accompagna il testo Pronto per la revisione. Queste associazioni di ruolo sono scelte applicative che usano voci effettive della palette. Lo stato è sempre espresso anche a parole, quindi il significato non dipende dalla percezione del colore. Bordi e spaziatura separano i tre post senza sostituire i contenuti leggibili con segnaposto decorativi. ## Selezione visibile e stato misto nel sistema di progettazione sistema di design Sprout Social Seeds ### Limita la selezione in blocco alla vista corrente Seleziona i post visibili agisce sull’insieme filtrato. Se si seleziona una sola delle diverse schede visibili, la casella di selezione in blocco assume il suo stato indeterminato nativo. Cambiando il filtro, la selezione viene cancellata, così un record nascosto non può essere modificato da un’azione successiva. Il conteggio visibile indica sia il numero di elementi mostrati sia quello selezionato. - La selezione in blocco si applica solo ai record visibili. - La selezione mista usa la proprietà nativa indeterminate. - Cambiando il filtro, la selezione viene cancellata. - Lo stato dell’azione deriva dai record selezionati in bozza. ### Abilita solo le azioni pertinenti Segna come pronto per la revisione è abilitato solo quando è selezionato almeno un post visibile in bozza. I record già pronti non vengono riportati indietro da questa azione. L’aggiornamento modifica solo le bozze selezionate, ne cancella la selezione e ricalcola la vista. Non viene eseguita alcuna pubblicazione o pianificazione in rete. ## Stati vuoti filtrati e annullamento nel sistema di progettazione sistema di design Sprout Social Seeds ### Consenti di recuperare una coda vuota Contrassegnare come pronte per la revisione tutte le bozze visibili mentre si visualizza il filtro Bozze lascia naturalmente un risultato vuoto. Lo stato vuoto spiega che i record esistono ancora e offre l’opzione Mostra tutti i post. Non visualizza uno spinner di caricamento né inventa un errore di rete per un risultato locale noto. La distinzione tra nessuna corrispondenza e nessun record resta visibile. ### Annulla l’ultima modifica effettiva L’applicazione memorizza lo stato precedente solo per i record modificati dall’ultima azione di revisione. Annulla ripristina quei valori, ridisegna la vista corrente e riporta il focus sul filtro. Non ripristina record non correlati né finge di annullare un post social pubblicato. Un’azione in blocco successiva sostituisce l’unica operazione di annullamento disponibile, in linea con l’etichetta Annulla l’ultima modifica. ## Coda eseguibile completa e verifiche del sistema di progettazione sistema di design Sprout Social Seeds ### Usa tutte e quattro le distribuzioni dei token Il sorgente importa color, space, typography e border CSS prima del foglio di stile originale della composizione. Salva insieme il file completo main.js, seeds.css e la shell HTML. L’anteprima include gli stessi valori pubblici e il codice dell’applicazione, senza font remoti né backend. Le versioni esatte dei pacchetti sono indicate nel comando di installazione. 1. Installa i quattro pacchetti Seeds di token con versioni bloccate. 2. Salva la voce fornita, CSS e l’elemento root HTML. 3. Verifica la selezione mista prima di modificare il filtro. 4. Verifica il ripristino dopo un filtro senza risultati e l’annullamento dopo una revisione in blocco. ### Verifica una combinazione di stati Seleziona un post e verifica lo stato misto del controllo in blocco. Cambia lo stato in Bozza e controlla che la selezione venga azzerata. Seleziona le bozze visibili, contrassegnale come pronte e verifica il risultato vuoto. Annulla e conferma che le due bozze siano ripristinate, quindi mostra tutti i post. Alla larghezza di un telefono, le schede diventano un’unica colonna di lettura, mentre le etichette e i controlli di revisione restano accessibili. ## Esempi di componenti del sistema di design Sprout Social Seeds ### main.js — coda editoriale completa Dati originali, filtro, selezione mista, modifica in blocco e annullamento. ``` 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(); ``` Riferimento del codice - Non si intende suggerire la presenza di un API social, di un’operazione di pubblicazione o di un componente React nativo. ### seeds.css — composizione con token reali Il layout completo e responsive utilizza le variabili CSS installate. ``` *{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}} ``` Riferimento del codice - Le associazioni tra palette e ruoli sono scelte originali dell’applicazione. ### index.html — shell completa dell’app Elemento root e punto di ingresso dell’app locale. ``` Editorial review queue
``` Riferimento del codice - Sostituisci il file index.html radice di Vite con questo file. ## Configurazione dell’agente del sistema di design Sprout Social Seeds ### Punto di partenza per l’implementazione Questi sono pacchetti pubblici di token. L’applicazione completa per la revisione è codice originale fornito sopra. ``` 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 ``` ### Un prompt per il tuo progetto ``` Realizza la coda editoriale fornita usando il pacchetto pubblico Seeds di token CSS con versione bloccata. Mantieni i nomi reali dei token, la tipografia di sistema per i prodotti, la selezione degli elementi visibili, lo stato misto nativo, gli aggiornamenti in blocco solo per le bozze, il ripristino da stato vuoto e l’annullamento in un passaggio. Mantieni i contenuti di esempio originali e non suggerire mai che sia collegato un account social o che venga eseguita una pubblicazione. ``` ## Fonti e ambito del sistema di design Sprout Social Seeds Un’applicazione originale OpenDesign che usa pacchetti pubblici di token Seeds. Le schede e il flusso di revisione sono originali HTML/JavaScript, non componenti nativi Seeds React. Non è collegato alcun account social e non viene pubblicato nulla. - Pacchetti di token Percorsi di distribuzione pubblici e valori delle basi con versione specificata. - Colore Riferimenti alle palette e contesto di prodotto e brand. - Spaziatura Voci della scala e uso della spaziatura. - Tipografia per prodotti Indicazioni tipografiche per font di sistema. - Configurazione dei componenti nativi Requisiti di integrazione separati per React. ## Risorse correlate al sistema di design Sprout Social Seeds ### SumUp Circuit Una guida Circuit con token semantici esatti, proprietà di convalida native, un editor completo degli articoli del venditore e un’anteprima illustrata dal lato cliente. ### TDesign Crea un editor compatto di criteri API con TDesign React: ruoli concreti del tema, scala delle dimensioni di due pixel, registrazione dei campi Form e composizione tipizzata di Table. ### Thumbtack Thumbprint Crea un’interfaccia per scoprire servizi con le primitive v2 documentate di Thumbprint: schede compatte dei fornitori, dettagli di confronto leggibili, stati di selezione chiari e una selezione ristretta sempre visibile. - [Riferimento per l’implementazione](https://seeds.sproutsocial.com/resources/tokens/) - [Fonte](https://seeds.sproutsocial.com/resources/tokens/) - [Riferimento del codice](https://seeds.sproutsocial.com/resources/tokens/) - [Pacchetti di token Percorsi di distribuzione pubblici e valori delle basi con versione specificata.](https://seeds.sproutsocial.com/resources/tokens/) - [Colore Riferimenti alle palette e contesto di prodotto e brand.](https://seeds.sproutsocial.com/visual/color/) - [Spaziatura Voci della scala e uso della spaziatura.](https://seeds.sproutsocial.com/visual/space/) - [Tipografia per prodotti Indicazioni tipografiche per font di sistema.](https://seeds.sproutsocial.com/visual/product-typography/) - [Configurazione dei componenti nativi Requisiti di integrazione separati per React.](https://seeds.sproutsocial.com/components/getting-started/)