Inspect Seeds’ actual public color, spacing, product typography and border tokens through a complete editorial review queue with mixed selection, filtered empty states and undo.
Sprout Social Seeds Design System Product Tokens and Runtime Scope
Use the product foundations
Seeds distinguishes product typography from brand typography. The queue uses the actual system-font family token from the public typography package, together with published color, space and border tokens. It does not load a marketing typeface and then claim to reproduce the product system. The package versions are pinned in the setup so the reference and example remain comparable.
Separate tokens from components
Loading Seeds token packages exposes variables; it does not create a post editor or a React component tree. The cards, selection logic and local review action in this study are original OpenDesign code. The page deliberately calls this a token-based implementation. Native Seeds React components have their own integration requirements through the official component resources.
Sprout Social Seeds Design System Palette, Spacing and Type References
Use exact token names
The reference includes actual exported names such as --space-size--350 for 12px and --border-radius-600 for 8px. These names cannot be inferred by multiplying a scale label. The CSS imports the token files directly and consumes their variables, so a reader can trace a rendered value back to the pinned distribution instead of a guessed palette.
Watch the rem baseline
The space package supplies both pixel and rem forms. For example, its 16px step is also represented as 0.8888888888888888rem, reflecting an 18px baseline. The study uses pixel token forms to keep its intended spacing explicit. Blindly substituting those rem values into a 16px root would change the density rather than preserve it.
Sprout Social Seeds Design System Editorial Cards and Review Context
Make each card useful before interaction
Every card has a channel, a status, an original title and a complete short post. A secondary disclosure provides review criteria. The content is fictional practice material and the workspace has no social-account connection. A card can therefore communicate a believable task without implying access to actual posts or analytics.
Keep brand accents subordinate to reading
Blue identifies the original queue’s review action and green accompanies its Ready for review text. These role assignments are application decisions using real palette entries. The status is always written out, so the meaning is not dependent on seeing the color. Borders and spacing separate the three posts without replacing readable content with decorative placeholders.
Sprout Social Seeds Design System Visible Selection and Mixed State
Keep bulk selection tied to the current view
Select visible posts acts on the filtered set. Selecting only one of several visible cards gives the bulk checkbox its native indeterminate state. Changing the filter clears the selection, preventing a hidden record from being changed by a later action. The visible count reports both the number shown and number selected.
Bulk selection applies only to visible records.
Mixed selection uses the native indeterminate property.
Changing the filter clears selection.
Action state is derived from selected draft records.
Enable only a meaningful action
Sprout Social Seeds Design System Filtered Empty States and Undo
Keep an empty queue recoverable
Marking all visible drafts ready while viewing Draft naturally leaves an empty result. The empty state explains that the records still exist and provides Show all posts. It does not display a loading spinner or fabricate a network error for a known local result. The distinction between no matches and no records remains visible.
Undo the last actual change
The application stores the previous status only for records changed by the latest review action. Undo restores those values, rerenders the current view and returns focus to the filter. It does not reset unrelated records or pretend to undo a published social post. A subsequent batch replaces the single available undo operation, matching the label Undo last change.
Sprout Social Seeds Design System Complete Runnable Queue and Checks
Use all four token distributions
The source imports color, space, typography and border CSS before the original composition stylesheet. Save the full main.js, seeds.css and HTML shell together. The preview bundles those same public values and application code without remote fonts or a backend. The exact package versions appear in the installation command.
Install the four pinned Seeds token packages.
Save the supplied entry, CSS and root HTML.
Test mixed selection before changing the filter.
Verify filtered-empty recovery and undo after a batch review.
Test a combination of states
Select one post and verify the mixed bulk state. Change to Draft and check that selection clears. Select the visible drafts, mark them ready and inspect the empty result. Undo and confirm the two drafts return, then show all posts. At a phone width the cards become a single reading column while labels and review controls remain accessible.
Sprout Social Seeds Design System Component Examples
main.js — complete editorial queue
Original data, filter, mixed selection, batch change and undo.
javascript
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=`<main><header><div><p class="eyebrow">OpenDesign · Editorial practice</p><h1>A small queue, ready for a closer look</h1><p>Prepare original sample posts for review. This workspace does not connect to social accounts or publish content.</p></div><span class="badge">3 sample posts</span></header><section class="filters" aria-label="Queue controls"><label>Status <select id="filter"><option>All posts</option><option>Draft</option><option>Ready for review</option></select></label><label class="select-all"><input type="checkbox" id="all">Select visible posts</label><button id="review" disabled>Mark ready for review</button></section><p id="count" role="status"></p><div id="posts"></div><section id="empty" hidden><h2>No posts in this view</h2><p>Your sample posts remain available in the full queue.</p><button id="clear">Show all posts</button></section><div id="notice" hidden><p id="message" role="status"></p><button id="undo">Undo last change</button></div><footer>Uses the published Seeds color, space, typography and border token packages. The post cards, selection model and local review action are original OpenDesign code, not Sprout Social’s application or native React components.</footer></main>`;
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.length<rows.length;all.disabled=!rows.length;document.querySelector('#review').disabled=!selected.some(x=>x.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=`<div class="post-head"><label><input type="checkbox" data-id="${x.id}" aria-label="Select ${x.title}" ${chosen.has(x.id)?'checked':''}><span class="channel">${x.channel}</span></label><span class="status ${x.status==='Draft'?'draft':'ready'}">${x.status}</span></div><h2>${x.title}</h2><p class="copy">${x.copy}</p><details><summary>Review checklist</summary><ul><li>The first sentence makes the subject clear.</li><li>The wording describes a real next step.</li><li>The post does not promise an unavailable feature.</li></ul></details>`;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();
These are public token packages. The complete review application is original code supplied above.
sh
npm create vite@latest seeds-review -- --template vanilla
cd seeds-review
npm install
npm install @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected]
# Save index.html at root; main.js and seeds.css in src.
npm run dev
A Prompt for Your Project
Agent Prompt
Build the supplied editorial queue using the pinned public Seeds token CSS. Preserve real token names, system product typography, visible-only selection, native mixed state, draft-only batch updates, empty recovery and one-step undo. Keep the original sample content and never imply a connected social account or publishing action.
05
Sprout Social Seeds Design System Sources and Scope
An original OpenDesign application using published Seeds token packages. The cards and review workflow are original HTML/JavaScript, not native Seeds React components. No social account is connected and nothing is published.
