# Sprout Social Seeds 디자인 시스템 ## Sprout Social Seeds 디자인 시스템 인터페이스 미리보기 표시된 게시물을 선택하고 혼합 선택 상태를 살펴본 다음, 필터링된 일괄 변경 후 복구하거나 실행 취소하세요. ## Sprout Social Seeds 디자인 시스템 디자인 참조 실제로 설치된 Seeds 색상 2.5.0, 간격 0.8.1, 타이포그래피 3.8.0, 테두리 1.7.1의 CSS 내보내기 항목. ### 제품 연구용 팔레트 참조 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --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 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--100 | 2px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--200 | 4px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--300 | 8px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--350 | 12px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--400 | 16px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--450 | 24px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--500 | 32px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 16px 기준으로 변환된다고 가정하지 마세요. | | --space-size--600 | 40px | 실제 CSS 픽셀 토큰입니다. 패키지에는 18px 기준으로 계산한 rem 값도 포함되어 있으므로, 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 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-radius-500 | 6px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-radius-600 | 8px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-radius-800 | 12px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-radius-900 | 24px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-radius-1000 | 999999px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-width-500 | 1px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-width-600 | 2px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | | --border-width-700 | 3px | 실제 테두리 패키지 값이며, 기존 카드에는 8px 둥근 모서리와 1픽셀 테두리가 적용됩니다. | ## Sprout Social Seeds 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Sprout Social Seeds 디자인 시스템 제품 토큰 및 런타임 범위 ### 제품의 기반을 활용하세요 > Seeds는 제품 타이포그래피와 브랜드 타이포그래피를 구분합니다. 이 대기열은 공개 타이포그래피 패키지의 실제 시스템 글꼴 계열 토큰과 공개된 색상, 간격, 테두리 토큰을 사용합니다. 마케팅용 서체를 불러온 뒤 제품 시스템을 재현했다고 주장하지 않습니다. 참조 자료와 예제를 계속 비교할 수 있도록 설정에서 패키지 버전을 고정합니다. ### 토큰과 컴포넌트 구분하기 Seeds 토큰 패키지를 불러오면 변수가 제공될 뿐, 게시물 편집기나 React 컴포넌트 트리가 생성되는 것은 아닙니다. 이 예제에 포함된 카드, 선택 로직, 로컬 검토 기능은 독자적으로 작성한 OpenDesign 코드입니다. 이 페이지는 토큰 기반 구현임을 명시합니다. 네이티브 Seeds React 컴포넌트를 사용하려면 공식 컴포넌트 리소스를 통해 별도로 통합해야 합니다. ## Sprout Social Seeds 디자인 시스템 팔레트, 간격 및 타이포그래피 참고 자료 ### 정확한 토큰 이름 사용하기 참고 자료에는 12px에 해당하는 --space-size--350, 8px에 해당하는 --border-radius-600 등 실제로 내보내는 이름이 포함되어 있습니다. 이러한 이름은 배율 레이블에 숫자를 곱해 알아낼 수 없습니다. CSS은 토큰 파일을 직접 가져와 변수를 사용하므로, 추측한 팔레트가 아닌 버전이 고정된 배포판에서 렌더링된 값을 확인할 수 있습니다. ### rem 기준값 확인하기 간격 패키지는 픽셀 값과 rem 값을 모두 제공합니다. 예를 들어 16px 단계는 0.8888888888888888rem로도 표현되며, 이는 기준값이 18px임을 반영합니다. 이 예제에서는 의도한 간격을 명확하게 유지하기 위해 픽셀 단위 토큰을 사용합니다. rem 값을 16px 루트에 그대로 적용하면 간격을 유지하는 것이 아니라 밀도가 달라집니다. ## Sprout Social Seeds 디자인 시스템 편집 카드 및 검토 맥락 ### 각 카드가 상호작용 없이도 유용하도록 구성하기 모든 카드에는 채널, 상태, 직접 작성한 제목, 완결된 짧은 게시물이 있습니다. 보조 공개 영역에서 검토 기준을 확인할 수 있습니다. 콘텐츠는 연습용으로 만든 가상의 자료이며, 이 작업 공간은 소셜 계정에 연결되어 있지 않습니다. 따라서 실제 게시물이나 분석 데이터에 접근할 수 있다고 오해시키지 않으면서도 카드에 그럴듯한 작업 맥락을 담을 수 있습니다. ### 브랜드 강조색보다 읽기 쉬운 콘텐츠를 우선하기 파란색은 이 대기열에서 직접 정한 검토 작업을 나타내며, 초록색은 ‘검토 준비 완료’ 문구와 함께 사용됩니다. 이러한 역할 배정은 실제 팔레트 항목을 활용한 애플리케이션 차원의 결정입니다. 상태는 항상 텍스트로도 표시되므로 색상을 보지 못해도 의미를 알 수 있습니다. 테두리와 간격으로 게시물 세 개를 구분하며, 읽을 수 있는 콘텐츠를 장식용 자리 표시자로 대체하지 않습니다. ## Sprout Social Seeds 디자인 시스템 선택 표시 및 혼합 상태 ### 일괄 선택을 현재 보기에 한정하기 ‘표시된 게시물 선택’은 필터링된 항목에 적용됩니다. 표시된 카드 여러 개 중 하나만 선택하면 일괄 선택 체크박스에 기본 제공 혼합 상태가 표시됩니다. 필터를 변경하면 선택이 해제되어, 숨겨진 항목이 이후 작업에서 변경되는 일을 방지합니다. 표시 개수에는 현재 화면에 표시된 항목 수와 선택된 항목 수가 모두 나타납니다. - 일괄 선택은 현재 표시된 항목에만 적용됩니다. - 혼합 선택에는 기본 제공 indeterminate 속성을 사용합니다. - 필터를 변경하면 선택이 해제됩니다. - 작업 상태는 선택된 초안 항목을 기준으로 결정됩니다. ### 의미 있는 작업만 활성화하기 ‘검토 준비 완료로 표시’는 표시된 게시물 중 Draft가 하나 이상 선택된 경우에만 활성화됩니다. 이미 준비 완료 상태인 항목은 이 작업으로 다시 이전 상태로 돌아가지 않습니다. 선택된 초안만 업데이트한 다음 선택을 해제하고 보기를 다시 계산합니다. 네트워크를 통한 게시나 예약 작업은 수행하지 않습니다. ## Sprout Social Seeds 디자인 시스템 필터 결과 없음 상태 및 실행 취소 ### 항목이 없는 대기열에서 다시 진행할 수 있도록 하기 Draft 보기를 확인하는 중 표시된 초안을 모두 준비 완료로 표시하면 결과가 비게 됩니다. 이때 빈 상태 메시지로 항목이 여전히 존재함을 알리고 ‘모든 게시물 표시’를 제공합니다. 이미 알고 있는 로컬 결과에 로딩 스피너를 표시하거나 네트워크 오류를 꾸며내지 않습니다. 일치하는 항목이 없는 경우와 항목 자체가 없는 경우를 구분해 보여 줍니다. ### 실제로 마지막으로 변경한 내용 실행 취소하기 애플리케이션은 가장 최근 검토 작업에서 변경된 항목의 이전 상태만 저장합니다. 실행 취소하면 해당 값을 복원하고 현재 보기를 다시 렌더링한 뒤 필터로 포커스를 돌려줍니다. 관련 없는 항목을 초기화하거나 소셜 게시물을 게시 취소하는 것처럼 동작하지 않습니다. 다음 일괄 작업이 수행되면 실행 취소 가능 작업이 교체되어 ‘마지막 변경 실행 취소’라는 레이블과 일치하게 동작합니다. ## Sprout Social Seeds 디자인 시스템 실행 가능한 완전한 대기열 및 확인 절차 ### 네 가지 토큰 배포판 모두 사용하기 소스에서는 원래의 스타일시트보다 먼저 색상, 간격, 타이포그래피, 테두리 CSS을 가져옵니다. 전체 main.js, seeds.css, HTML 셸을 함께 저장하세요. 미리보기는 원격 글꼴이나 백엔드 없이 동일한 공개 값과 애플리케이션 코드를 번들링합니다. 정확한 패키지 버전은 설치 명령에 표시되어 있습니다. 1. 버전이 고정된 Seeds 토큰 패키지 네 개를 설치합니다. 2. 제공된 진입점, CSS 및 루트 HTML을 저장합니다. 3. 필터를 변경하기 전에 혼합 선택 상태를 테스트합니다. 4. 일괄 검토 후 필터 결과가 비었을 때 복구되는지, 실행 취소가 가능한지 확인합니다. ### 여러 상태를 조합해 테스트하기 게시물 하나를 선택하고 일괄 선택이 혼합 상태로 표시되는지 확인합니다. Draft로 변경하면 선택이 해제되는지 확인합니다. 표시된 초안을 선택해 준비 완료로 표시한 다음 결과가 비는지 살펴봅니다. 실행 취소로 초안 두 개가 복원되는지 확인하고 모든 게시물을 표시합니다. 휴대전화 화면 너비에서는 카드가 한 열로 배치되며, 레이블과 검토 컨트롤도 계속 사용할 수 있습니다. ## 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
``` 코드 참조 - 루트 Vite index.html을 이 파일로 바꿉니다. ## Sprout Social Seeds 디자인 시스템 AI 에이전트 설정 ### 구현 시작점 이 패키지는 공개 토큰 패키지입니다. 완성된 검토 애플리케이션은 위에 제공된 독자적인 코드입니다. ``` 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 디자인 시스템의 출처와 범위 공개된 Seeds 토큰 패키지를 사용하는 독자적인 OpenDesign 애플리케이션입니다. 카드와 검토 워크플로는 독자적으로 만든 HTML/JavaScript 요소이며, 네이티브 Seeds React 구성 요소가 아닙니다. 소셜 계정은 연결되어 있지 않으며 게시된 콘텐츠도 없습니다. - 토큰 패키지 공개 배포 경로와 버전별 기반 값입니다. - 색상 팔레트 참조와 제품 및 브랜드 맥락입니다. - 간격 크기 항목과 간격 사용법입니다. - 제품 타이포그래피 시스템 글꼴을 사용하는 제품 지침입니다. - 네이티브 구성 요소 설정 별도의 React 통합 요구 사항입니다. ## Sprout Social Seeds 디자인 시스템 관련 자료 ### SumUp Circuit 정확한 시맨틱 토큰, 네이티브 유효성 검사 props, 완성된 판매자 상품 편집기, 고객 측 미리보기 그림을 제공하는 Circuit 가이드입니다. ### TDesign 구체적인 테마 역할, 2픽셀 크기 체계, Form 필드 등록, 타입이 지정된 Table 구성 등 TDesign React을 사용해 간결한 API 정책 편집기를 만드세요. ### 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/)