# Wonderflow Wanda 디자인 시스템

## Wonderflow Wanda 디자인 시스템 인터페이스 미리보기

작성한 관찰 기록을 필터링하고 맥락을 살펴보며 메모를 저장하고 Wanda 테마를 전환하세요.

## Wonderflow Wanda 디자인 시스템 디자인 참고 자료

공개 개발자 문서를 바탕으로 확인한 @wonderflow/themes 16.0.0 라이트/다크 JSON 및 @wonderflow/tokens 16.0.0 웹 토큰 JSON입니다.

### 라이트 및 다크 값을 가진 테마 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --global-foreground | light hsl(221 10% 30%) / dark hsl(220 16% 85%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --global-background | light hsl(0 0% 100%) / dark hsl(0 0% 0%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --global-interactive-text | light hsl(214 66% 44%) / dark hsl(206 72% 67%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --cta-default | light hsl(0 100% 44%) / dark hsl(0 100% 44%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --cta-dark | light hsl(0 100% 38%) / dark hsl(0 100% 38%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --cta-foreground | light hsl(0 0% 100%) / dark hsl(0 0% 100%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --dimmed-0 | light hsl(210 20% 98%) / dark hsl(225 11% 7%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --dimmed-1 | light hsl(220 19% 91%) / dark hsl(218 11% 14%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --dimmed-2 | light hsl(220 16% 85%) / dark hsl(219 13% 22%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --highlight-green-background | light hsl(149 100% 91%) / dark hsl(166 100% 13%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --highlight-green-foreground | light hsl(156 100% 23%) / dark hsl(145 76% 75%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --highlight-red-background | light hsl(343 100% 96%) / dark hsl(350 100% 15%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --highlight-red-foreground | light hsl(351 92% 37%) / dark hsl(351 100% 81%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --highlight-yellow-background | light hsl(60 100% 89%) / dark hsl(22 100% 19%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
| --highlight-yellow-foreground | light hsl(25 100% 34%) / dark hsl(38 100% 77%) | 피드백 예제에서 사용하는 쌍을 이루는 테마 역할입니다. |
### 간격 기본 요소

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --space-4 | 0.250rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --space-8 | 0.500rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --space-16 | 1.000rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --space-24 | 1.500rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --space-32 | 2.000rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --space-48 | 3.000rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
### 모서리 반경 기본 요소

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --radius-4 | 0.250rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --radius-8 | 0.500rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --radius-16 | 1.000rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --radius-24 | 1.500rem | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
### 중단점 기본 요소

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --breakpoint-extra-small | 30em | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --breakpoint-small | 48em | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --breakpoint-medium | 60em | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --breakpoint-large | 80em | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
### 지속 시간 기본 요소

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --duration-100 | 0.10s | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --duration-200 | 0.20s | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --duration-250 | 0.25s | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
| --duration-300 | 0.30s | 빌드 시 token()을 사용하거나 CSS 사용자 지정 속성 파일을 가져오세요. |
## Wonderflow Wanda 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Wonderflow Wanda 디자인 시스템 기본 요소, 테마 및 CSS 사용법

### 두 가지 색상 수준 이해하기

> Wanda의 기본 색상 토큰은 214 66% 44%와 같은 HSL 채널이며 hsl() 래퍼를 포함하지 않습니다. --global-interactive-text 같은 테마 역할은 완전한 CSS 색상 값으로 해석됩니다. 완전한 테마 값을 다시 감싸면 유효하지 않으며, 기본 채널을 hsl()로 감싸지 않는 것 역시 유효하지 않습니다. 표에는 완전한 역할 값과 일반적인 크기 값이 각각 정리되어 있습니다.

### 빌드 시점 토큰과 런타임 토큰을 의도에 맞게 선택하세요

문서화된 token() 표기법은 Wanda의 PostCSS 설정으로 처리됩니다. 브라우저의 CSS 함수가 아닙니다. 일반 HTML 프로젝트에서는 배포된 tokens.css를 가져와 var()를 사용할 수 있습니다. 작동 예제는 표준 사용자 지정 속성과 함께 배포된 themes.css를 사용하므로 별도의 PostCSS 빌드 단계가 필요하지 않습니다.

## Wonderflow Wanda 디자인 시스템의 라이트 및 다크 테마 역할

### 의미가 있는 표면을 함께 전환하세요

Wanda는 라이트 및 다크 테마 매핑을 제공합니다. 예제에서는 루트의 data-theme을 변경해 테마 스타일시트가 전경색, 표면색, 테두리 및 강조 역할을 함께 바꾸도록 합니다. 테마 전환은 표현 상태의 변경이지 리서치 상태의 초기화가 아니므로 선택 항목과 저장된 메모는 그대로 유지됩니다.

### 주요 로컬 동작에만 CTA 역할을 사용하세요

빨간색 CTA 쌍은 저장된 메모를 검토하는 데 한 번만 사용합니다. 주제 태그에는 중립 강조 역할을 사용하고, 감정 태그에는 초록색, 노란색, 빨간색 쌍을 사용합니다. 각 태그에는 감정을 글로도 표시하므로 색각 차이가 있어도 의미를 파악할 수 있습니다. 예제에서는 카드마다 별도의 강조 색상 팔레트를 임의로 만들지 않습니다.

## Wonderflow Wanda 디자인 시스템 피드백 콘텐츠 및 근거의 범위

### 관찰 내용과 해석을 분리하세요

각 카드에는 작성된 관찰 내용과 펼쳐 볼 수 있는 맥락 메모가 포함되어 있습니다. 맥락 메모는 샘플이 무엇을 보여 주는지 설명하며, 빈도나 심각도에 관한 주장은 명시적으로 피합니다. 실제 피드백 도구라면 근거 없는 경향으로 단일 인용문을 둔갑시키지 않고 출처와 분석의 경계를 유지해야 합니다.

### 장식으로 근거를 꾸며내지 마세요

이 예시에는 꾸며낸 고객 신원, 별점 또는 모델 신뢰도 점수가 없습니다. 직접 작성한 메모 다섯 개만으로도 필터링, 정보 공개, 저장 상태를 보여 주기에 충분합니다. 실제 제품에서는 연구 출처와 접근 규칙을 데이터 계약에 명시해야 합니다. 보기 좋은 인용문 카드만으로는 이를 대신할 수 없습니다.

## Wonderflow Wanda 디자인 시스템 필터링 및 노트북 상태

### 주제와 감정 조건을 함께 적용하세요

기본 select 두 개가 AND 필터를 적용합니다. 조건에 맞는 메모가 없으면 사용자에게 복구 안내 메시지와 초기화 동작을 표시합니다. 결과 수는 더 큰 데이터세트의 결과처럼 보이지 않도록 직접 작성한 메모 다섯 개를 분모로 명시합니다. 이 내용은 모두 전체 소스에서 확인할 수 있습니다.

### 저장한 메모를 표시 여부와 별개로 유지하세요

저장하면 메모가 로컬 Set에 추가됩니다. 필터링으로 카드가 숨겨져도 노트북에서는 삭제되지 않습니다. 저장된 메모를 전환하면 이전 검토 결과가 지워져 현재 선택 항목과 확인 내용이 일치합니다. 노트북에는 실제 메모 내용이 표시되므로 배지 숫자만으로 내용을 나타내지 않고 직접 확인할 수 있습니다.

## Wonderflow Wanda 디자인 시스템 카드, 정보 공개 및 반응형 레이아웃

### 간격을 활용해 근거와 컨트롤을 구분하세요

넓은 화면에서 각 메모 카드는 16px 모서리 반경과 24px 내부 간격을 사용합니다. 태그로 주제를 먼저 보여 주고, 인용문은 더 큰 글자 크기로 표시하며, 펼쳐지는 맥락 정보는 저장 동작 앞에 배치합니다. 노트북은 메모 옆의 차분한 배경 표면에 놓입니다. 이는 Wanda의 값을 활용한 독자적인 구성 방식이며, 기본 제공되는 리서치 카드 컴포넌트라는 뜻은 아닙니다.

### 모바일에서도 읽기 순서를 유지하세요

768px에서는 노트북이 관찰 내용 다음으로 이동하고 카드 안쪽 여백은 16px로 줄어듭니다. 주제 및 감정 컨트롤은 전체 너비의 행으로 표시됩니다. 펼친 맥락 정보는 문서 흐름 안에 표시되며 다른 메모를 덮거나 가리지 않습니다. 카드에는 고정 높이를 적용하지 않으므로 인용문이 길어도 읽기 쉽습니다.

## Wonderflow Wanda 디자인 시스템의 네이티브 React 설정 및 HTML 경계

### Wanda 도구 체인 전체를 고려하세요

공식 설치에는 react-components, themes, symbols, tokens가 포함되며, 컴포넌트 CSS에 필요한 PostCSS 설정은 @wonderflow/config에서 제공합니다. React 진입점은 core.css와 themes 패키지를 가져옵니다. react-components만 설치하고 모든 테마 역할을 사용할 수 있다고 가정하면 통합이 완전하지 않습니다. 공개 설치 페이지에서는 10.6을 초과하는 버전의 Tailwind 호환성에 대해서도 주의를 안내합니다.

### 기본 제공 컴포넌트라고 주장하지 않고 이 예제를 사용하세요

실행되는 미리보기는 Wanda 16.0.0 테마 CSS와 독자적인 시맨틱 HTML을 사용합니다. React Button, Select 또는 정보 공개 컴포넌트는 실행하지 않습니다. 이 경계는 의도적이며 명확하게 드러나 있습니다. 전체 소스는 정적 서버로 실행할 수 있지만, 기본 React로 마이그레이션하려면 최신 컴포넌트 API와 빌드 구성을 확인해야 합니다.

## Wonderflow Wanda 디자인 시스템 전체 소스 및 에이전트 검토

### 실제 미리보기를 재현하세요

고정된 버전의 테마 패키지를 설치하고 생성된 themes.css를 제공된 index.html 및 wanda.css와 같은 위치에 복사한 다음 디렉터리를 서버로 제공하세요. 소스에는 메모 다섯 개와 필터링, 정보 공개, 저장 상태, 피드백이 모두 포함되어 있습니다. 미리보기는 런타임 네트워크 의존성을 피하기 위해 같은 스타일시트를 로컬로 번들링합니다.

1. @wonderflow/themes 16.0.0을 설치하고 생성된 CSS를 복사하세요.

2. index.html 및 wanda.css 전체 파일을 저장하세요.

3. 결과가 없는 조건으로 필터링한 뒤 초기화하고 메모를 저장하세요.

4. 테마를 전환하고 노트북이 그대로 유지되는지 확인하세요.

### 오류 및 전환 상태를 검토하세요

에이전트가 필터의 분모, 결과 없음 상태의 복구 기능, 저장 메모의 유지, 검토 결과 무효화를 그대로 유지하도록 요청하세요. 두 가지 표시 모드와 길게 펼친 메모를 모두 확인하세요. 로컬 검토는 선택한 샘플을 요약할 뿐입니다. 별도의 구현과 근거 출처가 없다면 이를 AI 분석이나 고객 검증으로 표현해서는 안 됩니다.

- token()을 런타임 CSS으로 취급하지 마세요.

- 원시 HSL 채널과 완성된 테마 색상을 구분하세요.

- 직접 작성한 샘플과 실제 리서치 근거를 구분하세요.

## Wonderflow Wanda 디자인 시스템 컴포넌트 예시

### index.html — 피드백 워크스페이스 전체

독자적인 시맨틱 HTML과 애플리케이션 상태 전체를 포함합니다. 복사한 Wanda 테마 스타일시트를 사용합니다.

```
<!doctype html><html lang="en" data-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Feedback study</title><link rel="stylesheet" href="wanda-theme.css"><link rel="stylesheet" href="wanda.css"><body><main><header><div><span class="eyebrow">PRODUCT RESEARCH / AUTHORED SAMPLE NOTES</span><h1>Explore the feedback</h1><p>Read individual observations before turning a theme into a decision.</p></div><button id="theme" aria-pressed="false">Dark theme</button></header><div class="filters"><label>Topic <select id="topic" aria-label="Topic"><option value="all">All topics</option><option>Setup</option><option>Search</option><option>Export</option></select></label><label>Sentiment <select id="sentiment" aria-label="Sentiment"><option value="all">All sentiments</option><option value="positive">Positive</option><option value="mixed">Mixed</option><option value="negative">Negative</option></select></label><button id="reset">Reset filters</button></div><div class="workspace"><section><div class="section-heading"><h2>Sample observations</h2><span id="count" role="status"></span></div><div id="notes"></div><div id="empty" hidden><h3>No observations match</h3><p>Clear a filter to see the authored examples again.</p></div></section><aside><h2>Research notebook</h2><p>Save observations to keep them together while comparing topics.</p><ul id="saved"></ul><p id="hint">No observations saved yet.</p><button class="cta" id="review">Review saved notes</button><p id="result" role="status"></p></aside></div><footer>Original interface using Wanda 16.0.0 theme and token values. All quotations are written for this specimen, not real customer feedback or research findings.</footer></main>
<script>
const data=[{id:1,topic:'Setup',sentiment:'positive',quote:'The first checklist made it clear what I needed to prepare.',context:'Authored onboarding observation; one sample, not a measured trend.'},{id:2,topic:'Search',sentiment:'negative',quote:'I could not tell whether the filter was still active after I changed the search.',context:'Authored state-visibility observation; investigate with actual users.'},{id:3,topic:'Export',sentiment:'mixed',quote:'The file was useful, but I wanted to check the included columns first.',context:'Authored export observation; no frequency or severity estimate.'},{id:4,topic:'Setup',sentiment:'mixed',quote:'I understood the steps but needed an explanation of one unfamiliar term.',context:'Authored terminology observation; the term is intentionally unspecified.'},{id:5,topic:'Search',sentiment:'positive',quote:'Seeing a count beside each topic helped me narrow the list.',context:'Authored topic-navigation observation; not an endorsement.'}];const saved=new Set();const $=id=>document.getElementById(id);function render(){const visible=data.filter(n=>($('topic').value==='all'||n.topic===$('topic').value)&&($('sentiment').value==='all'||n.sentiment===$('sentiment').value));$('count').textContent=visible.length+' of '+data.length+' notes';$('empty').hidden=!!visible.length;$('notes').replaceChildren(...visible.map(n=>{let a=document.createElement('article');a.innerHTML=`<div class="tags"><span>${n.topic}</span><span class="${n.sentiment}">${n.sentiment}</span></div><blockquote>${n.quote}</blockquote><details><summary>Read sample context</summary><p>${n.context}</p></details><button class="save" aria-pressed="${saved.has(n.id)}" aria-label="${saved.has(n.id)?'Remove':'Save'} note ${n.id}">${saved.has(n.id)?'Saved to notebook':'Save to notebook'}</button>`;a.querySelector('.save').onclick=()=>{saved.has(n.id)?saved.delete(n.id):saved.add(n.id);$('result').textContent='';render()};return a}));$('saved').replaceChildren(...data.filter(n=>saved.has(n.id)).map(n=>{let l=document.createElement('li');l.textContent=n.topic+': '+n.quote;return l}));$('hint').hidden=!!saved.size}
$('topic').onchange=render;$('sentiment').onchange=render;$('reset').onclick=()=>{$('topic').value='all';$('sentiment').value='all';render()};$('review').onclick=()=>{$('result').textContent=saved.size?`${saved.size} authored notes ready for local review. No analysis has been generated.`:'Save a note before reviewing.'};$('theme').onclick=()=>{const dark=$('theme').getAttribute('aria-pressed')!=='true';$('theme').setAttribute('aria-pressed',dark);document.documentElement.dataset.theme=dark?'dark':'light'};render();
</script>
</body></html>
```

코드 참조

- index.html로 저장하고 wanda.css 및 wanda-theme.css와 같은 위치에 두세요.

### wanda.css — 실제 테마 역할을 활용한 구성

반응형 카드와 노트북 레이아웃은 게시된 사용자 지정 속성을 활용합니다.

```
*{box-sizing:border-box}body{margin:0;background:var(--global-background);color:var(--global-foreground);font:16px/1.5 system-ui,sans-serif}main{padding:32px}header{display:flex;align-items:start;justify-content:space-between;gap:24px;border-bottom:1px solid var(--dimmed-1);padding-bottom:24px}h1{font-size:32px;line-height:1.25;margin:8px 0 16px}h2{font-size:20px;margin:0}h3{font-size:18px}.eyebrow,footer{font-size:12px}p{margin:8px 0 16px}.filters{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:24px 0}label{display:flex;gap:8px;align-items:center}button,select{background:var(--global-background);color:var(--global-foreground);font:inherit;padding:8px 16px;min-height:44px;border:1px solid var(--dimmed-2);border-radius:8px}button{cursor:pointer}.workspace{display:grid;grid-template-columns:1.7fr 1fr;gap:32px}.section-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}#count{font-size:14px}article{padding:24px;border:1px solid var(--dimmed-1);border-radius:16px;margin-bottom:16px}.tags{display:flex;gap:8px;font-size:12px}.tags span{padding:4px 8px;background:var(--highlight-gray-background);color:var(--highlight-gray-foreground);border-radius:4px}.tags .positive{background:var(--highlight-green-background);color:var(--highlight-green-foreground)}.tags .negative{background:var(--highlight-red-background);color:var(--highlight-red-foreground)}.tags .mixed{background:var(--highlight-yellow-background);color:var(--highlight-yellow-foreground)}blockquote{margin:16px 0;font-size:20px;line-height:1.4}details{font-size:14px;margin:16px 0}summary{cursor:pointer;color:var(--global-interactive-text)}.save{font-size:14px}.save[aria-pressed=true]{border-color:var(--global-interactive-text);color:var(--global-interactive-text)}aside{background:var(--dimmed-0);padding:24px;border-radius:16px;align-self:start}aside p,aside li{font-size:14px}aside ul{padding-left:20px}aside li{margin:16px 0}.cta{background:var(--cta-default);color:var(--cta-foreground);border-color:var(--cta-default)}.cta:hover{background:var(--cta-dark)}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--global-interactive-text);outline-offset:3px}footer{border-top:1px solid var(--dimmed-1);padding-top:16px;margin-top:32px}#empty{padding:24px;background:var(--dimmed-0);border-radius:16px}[hidden]{display:none!important}@media(max-width:767px){main{padding:16px}.workspace{grid-template-columns:1fr;gap:24px}header{display:block}header button{margin-top:8px}.filters label{width:100%;justify-content:space-between}.filters select{flex:1}article{padding:16px}h1{font-size:28px}.section-heading{align-items:center}}
```

코드 참조

- 테마 값은 임의로 만든 팔레트가 아니라 설치된 패키지에서 가져옵니다.

## Wonderflow Wanda 디자인 시스템 AI 에이전트 설정

### 구현 시작점

로컬 미리보기에는 게시된 것과 동일한 테마 CSS가 번들로 포함되어 있습니다. HTML 애플리케이션에는 PostCSS나 React가 필요하지 않습니다.

```
npm install @wonderflow/themes@16.0.0
cp node_modules/@wonderflow/themes/dist/themes.css wanda-theme.css
# Save the complete index.html and wanda.css examples beside that file.
python3 -m http.server 8080
```

### 프로젝트를 위한 프롬프트

```
전체 독자적인 HTML 예제를 사용해 Wanda 16.0.0 테마 역할로 피드백 노트북을 만드세요. AND 필터링, 메모 다섯 개라는 명시적 분모, 펼쳐지는 맥락 정보, 저장 상태 유지, 오래된 검토 결과 삭제를 그대로 유지하세요. 빌드 시점의 token() 사용을 CSS 변수와 구분하고, 직접 작성한 관찰 내용을 고객 리서치로 제시하지 마세요.
```

## Wonderflow Wanda 디자인 시스템 출처 및 범위

Wanda themes 및 tokens 16.0.0을 사용하는 OpenDesign 애플리케이션 연구입니다. 인터페이스는 독자적인 HTML이며 기본 Wanda React 런타임이 아닙니다. 모든 인용문은 직접 작성한 샘플 콘텐츠이며 고객 근거가 아닙니다.

- 디자인 토큰 HSL 채널 형식, token(), CSS 및 JavaScript 액세스.

- 설치 기본 패키지 구성, PostCSS 설정 및 호환성 안내.

- 테마 사용 테마 키, data-theme 및 사용 측의 책임.

- Wanda 개요 시스템 범위 및 공개 문서 시작점.

## Wonderflow Wanda 디자인 시스템 관련 리소스

### Workday Canvas

Canvas Kit의 복합 FormField, 제어형 TextInput, PrimaryButton을 사용해 로컬 학습 계획을 구성하고, 현재 사용하는 시맨틱 토큰의 출처와 이전 space.x4 마이그레이션 예시를 구분하세요.

### Zendesk Garden

실제 테마 별칭, 타이포그래피 및 둥근 모서리 크기 체계, 완성된 답장 작성기, 표시 여부를 고려하는 로컬 임시 저장, 입력란 복구 기능을 다루는 고객 지원 업무용 Garden 가이드입니다.

### Adeo Mozaic

Mozaic의 16px 매직 유닛, 48px로 맞춘 컨트롤, 실제 SCSS 임포트와 BEM 클래스로 실용적인 수량 컨트롤 구성을 만들어 보세요. 선반 플래너는 경계값과 타입 지정 오류, 로컬 자재 요약을 눈으로 확인할 수 있게 해줍니다.


- [구현 레퍼런스](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [출처](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [출처](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [코드 참조](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [디자인 토큰 HSL 채널 형식, token(), CSS 및 JavaScript 액세스.](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [설치 기본 패키지 구성, PostCSS 설정 및 호환성 안내.](https://design.wonderflow.ai/get-started/documentation/develop/installation)
- [테마 사용 테마 키, data-theme 및 사용 측의 책임.](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Wanda 개요 시스템 범위 및 공개 문서 시작점.](https://design.wonderflow.ai/)