# Sistema de diseño de Sprout Social Seeds ## Vista previa de la interfaz del sistema de diseño de Sprout Social Seeds Selecciona publicaciones visibles, revisa la selección mixta y recupera o deshaz los cambios después de modificar un lote filtrado. ## Referencia de diseño del sistema de diseño de Sprout Social Seeds Exportaciones reales de CSS de Seeds: colores 2.5.0, espaciado 0.8.1, tipografía 3.8.0 y bordes 1.7.1. ### Referencias de paleta del estudio de producto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --color-neutral-0 | #ffffff | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-neutral-100 | #f3f4f4 | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-neutral-200 | #dee1e1 | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-neutral-700 | #515e5f | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-neutral-900 | #273333 | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-blue-0 | #e9f4ff | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-blue-300 | #a1c2f8 | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-blue-700 | #205bc3 | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-green-100 | #d7f4d7 | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | | --color-green-900 | #006b40 | Tokens de paleta publicados reales. Su correspondencia con las acciones y los estados de esta cola original depende de la aplicación. | ### Escala de espaciado fija completa | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --space-size--0 | 0px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--100 | 2px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--200 | 4px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--300 | 8px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--350 | 12px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--400 | 16px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--450 | 24px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--500 | 32px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | | --space-size--600 | 40px | Tokens de píxeles reales de CSS. El paquete también incluye equivalentes en rem basados en una referencia de 18 px; no des por hecho una conversión basada en 16 px. | ### Tipografía de producto y densidad legible | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --typography-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-font-size--100 | 11px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-font-size--200 | 13px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-font-size--300 | 16px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-font-size--400 | 18px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-font-size--500 | 21px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-font-size--600 | 24px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-font-size--700 | 32px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-line-height--300 | 24px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | | --typography-line-height--500 | 29.333333333333332px | Valores publicados del paquete de tipografía. El ejemplo de producto usa la familia del sistema, no la tipografía Proxima Nova de marketing. | ### Escala de formas y bordes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --border-radius-400 | 4px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-radius-500 | 6px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-radius-600 | 8px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-radius-800 | 12px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-radius-900 | 24px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-radius-1000 | 999999px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-width-500 | 1px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-width-600 | 2px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | | --border-width-700 | 3px | Valores reales del paquete de bordes; las tarjetas originales usan esquinas redondeadas de 8 px y bordes de un píxel. | ## Guía completa del sistema de diseño de Sprout Social Seeds Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Tokens de producto y ámbito de ejecución del sistema de diseño de Sprout Social Seeds ### Usa los fundamentos del producto > Seeds distingue la tipografía de producto de la tipografía de marca. La cola usa el token real de familia tipográfica del sistema del paquete público de tipografía, junto con los tokens publicados de color, espaciado y bordes. No carga una tipografía de marketing para luego afirmar que reproduce el sistema del producto. Las versiones de los paquetes están fijadas en la configuración, de modo que la referencia y el ejemplo sigan siendo comparables. ### Separa los tokens de los componentes Cargar los paquetes de tokens de Seeds expone variables; no crea un editor de publicaciones ni un árbol de componentes de React. Las tarjetas, la lógica de selección y la acción local de revisión de este estudio son código original en OpenDesign. La página lo describe deliberadamente como una implementación basada en tokens. Los componentes nativos de Seeds React tienen sus propios requisitos de integración, disponibles en los recursos oficiales de componentes. ## Referencias de paleta, espaciado y tipografía del sistema de diseño de Sprout Social Seeds ### Usa los nombres exactos de los tokens La referencia incluye nombres de exportación reales, como --space-size--350 para 12 px y --border-radius-600 para 8 px. No es posible deducir estos nombres multiplicando una etiqueta de escala. El CSS importa directamente los archivos de tokens y usa sus variables, de modo que se puede rastrear un valor representado hasta la distribución fijada, en lugar de recurrir a una paleta inventada. ### Ten en cuenta la referencia de rem El paquete de espaciado ofrece valores tanto en píxeles como en rem. Por ejemplo, el incremento de 16 px también se representa como 0.8888888888888888rem, según una referencia de 18 px. El estudio usa los valores de los tokens en píxeles para explicitar el espaciado previsto. Sustituir esos valores rem sin más en una raíz de 16 px cambiaría la densidad en lugar de conservarla. ## Tarjetas editoriales y contexto de revisión del sistema de diseño de Sprout Social Seeds ### Haz que cada tarjeta sea útil antes de interactuar Cada tarjeta incluye un canal, un estado, un título original y una publicación breve completa. Un desplegable secundario ofrece criterios de revisión. El contenido es material ficticio de práctica y el espacio de trabajo no está conectado a ninguna cuenta de redes sociales. Así, una tarjeta puede presentar una tarea verosímil sin sugerir que se accede a publicaciones o estadísticas reales. ### Mantén los acentos de marca en segundo plano para facilitar la lectura El azul identifica la acción de revisión de la cola original y el verde acompaña el texto «Listo para revisión». Estas asignaciones de función son decisiones de la aplicación que usan colores reales de la paleta. El estado siempre aparece escrito, por lo que su significado no depende de percibir el color. Los bordes y el espaciado separan las tres publicaciones sin sustituir contenido legible por elementos decorativos de relleno. ## Selección visible y estado mixto del sistema de diseño de Sprout Social Seeds ### Limita la selección múltiple a la vista actual Seleccionar publicaciones visibles actúa sobre el conjunto filtrado. Si se selecciona solo una de varias tarjetas visibles, la casilla de selección múltiple adopta su estado nativo indeterminado. Al cambiar el filtro, se borra la selección para impedir que una acción posterior modifique un registro oculto. El recuento de elementos visibles indica cuántos se muestran y cuántos están seleccionados. - La selección múltiple solo se aplica a los registros visibles. - La selección mixta usa la propiedad nativa indeterminate. - Al cambiar el filtro, se borra la selección. - El estado de la acción se determina a partir de los borradores seleccionados. ### Habilita solo las acciones pertinentes Marcar como listo para revisión solo se habilita cuando hay al menos una publicación visible seleccionada en estado Borrador. La acción no cambia a un estado anterior los registros que ya están listos. La actualización solo modifica los borradores seleccionados, borra la selección y vuelve a calcular la vista. No se publica ni se programa nada a través de la red. ## Estados vacíos con filtros y deshacer del sistema de diseño de Sprout Social Seeds ### Permite recuperar una cola vacía Si se marcan como listos todos los borradores visibles mientras se muestra el filtro Borrador, es normal que el resultado quede vacío. El estado vacío explica que los registros siguen existiendo y ofrece la opción «Mostrar todas las publicaciones». No muestra un indicador de carga ni inventa un error de red para un resultado local conocido. Se mantiene visible la diferencia entre no encontrar coincidencias y no tener registros. ### Deshaz el último cambio real La aplicación solo guarda el estado anterior de los registros modificados por la última acción de revisión. Deshacer restaura esos valores, vuelve a representar la vista actual y devuelve el foco al filtro. No restablece registros ajenos a la acción ni simula deshacer una publicación en redes sociales. Una acción por lotes posterior sustituye la única operación de deshacer disponible, de acuerdo con la etiqueta «Deshacer último cambio». ## Cola ejecutable completa y comprobaciones del sistema de diseño Sprout Social Seeds ### Usa las cuatro distribuciones de tokens El código fuente importa los tokens de color, espacio, tipografía y borde CSS antes de la hoja de estilos de composición original. Guarda juntos los archivos completos main.js, seeds.css y el contenedor HTML. La vista previa incluye esos mismos valores públicos y el código de la aplicación, sin fuentes remotas ni backend. Las versiones exactas de los paquetes aparecen en el comando de instalación. 1. Instala los cuatro paquetes de tokens Seeds con versiones fijadas. 2. Guarda el punto de entrada proporcionado, CSS y el elemento raíz HTML. 3. Prueba la selección mixta antes de cambiar el filtro. 4. Verifica la recuperación tras un filtro sin resultados y la opción de deshacer después de revisar un lote. ### Prueba una combinación de estados Selecciona una publicación y comprueba el estado mixto de las acciones en lote. Cambia a Borradores y verifica que se borre la selección. Selecciona los borradores visibles, márcalos como listos y comprueba que no haya resultados. Deshaz la acción y confirma que vuelvan los dos borradores; después, muestra todas las publicaciones. En una pantalla de teléfono, las tarjetas se disponen en una sola columna de lectura, mientras que las etiquetas y los controles de revisión siguen siendo accesibles. ## Ejemplos de componentes del sistema de diseño Sprout Social Seeds ### main.js — cola editorial completa Datos originales, filtro, selección mixta, cambios por lote y opción de deshacer. ``` 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(); ``` Referencia de código - No se presupone ninguna conexión a redes sociales API, operación de publicación ni componente nativo React. ### seeds.css — composición con tokens reales El diseño adaptable completo utiliza las variables CSS instaladas. ``` *{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}} ``` Referencia de código - Las asignaciones de la paleta a cada función son decisiones originales de la aplicación. ### index.html — estructura completa de la aplicación Elemento raíz y punto de entrada de la aplicación local. ``` Editorial review queue
``` Referencia de código - Reemplaza el index.html raíz de Vite con este archivo. ## Configuración del agente del sistema de diseño Sprout Social Seeds ### Punto de partida para la implementación Estos son paquetes de tokens públicos. La aplicación completa de revisión es código original proporcionado más arriba. ``` 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 ``` ### Una instrucción para tu proyecto ``` Crea la cola editorial proporcionada con los tokens públicos de Seeds CSS y sus versiones fijadas. Conserva los nombres reales de los tokens, la tipografía de producto del sistema, la selección limitada a elementos visibles, el estado mixto nativo, las actualizaciones por lote solo para borradores, la recuperación cuando no hay resultados y la opción de deshacer en un solo paso. Mantén el contenido de ejemplo original y no des a entender que hay una cuenta de redes sociales conectada ni que se realiza una publicación. ``` ## Fuentes y alcance del sistema de diseño Sprout Social Seeds Aplicación OpenDesign original que utiliza paquetes públicos de tokens Seeds. Las tarjetas y el flujo de revisión son HTML/JavaScript originales, no componentes nativos de Seeds React. No hay ninguna cuenta de redes sociales conectada ni se publica contenido. - Paquetes de tokens Rutas de distribución pública y valores fundamentales versionados. - Color Referencias de la paleta y contexto de producto frente a marca. - Espaciado Entradas de escala y uso del espaciado. - Tipografía de producto Recomendaciones de tipografía de sistema. - Configuración de componentes nativos Requisitos de integración de React por separado. ## Recursos relacionados con el sistema de diseño Sprout Social Seeds ### SumUp Circuit Una guía de Circuit con tokens semánticos exactos, propiedades de validación nativas, un editor completo de artículos para comerciantes y una vista previa ilustrada para clientes. ### TDesign Crea un editor compacto de políticas de API con TDesign React: roles de tema concretos, su escala de tamaños de dos píxeles, registro de campos Form y una composición tipada de Table. ### Thumbtack Thumbprint Crea una interfaz de descubrimiento de servicios con las primitivas documentadas de Thumbprint v2: tarjetas compactas de proveedores, detalles comparativos fáciles de leer, estados de selección claros y una lista de preselección persistente. - [Referencia de implementación](https://seeds.sproutsocial.com/resources/tokens/) - [Fuente](https://seeds.sproutsocial.com/resources/tokens/) - [Referencia de código](https://seeds.sproutsocial.com/resources/tokens/) - [Paquetes de tokens Rutas de distribución pública y valores fundamentales versionados.](https://seeds.sproutsocial.com/resources/tokens/) - [Color Referencias de la paleta y contexto de producto frente a marca.](https://seeds.sproutsocial.com/visual/color/) - [Espaciado Entradas de escala y uso del espaciado.](https://seeds.sproutsocial.com/visual/space/) - [Tipografía de producto Recomendaciones de tipografía de sistema.](https://seeds.sproutsocial.com/visual/product-typography/) - [Configuración de componentes nativos Requisitos de integración de React por separado.](https://seeds.sproutsocial.com/components/getting-started/)