# Sistema de design Wonderflow Wanda

## Prévia da interface do sistema de design Wonderflow Wanda

Filtre observações próprias, examine o contexto, salve anotações e alterne o tema Wanda.

## Referência de design do sistema sistema de design Wonderflow Wanda

@wonderflow/themes 16.0.0 em JSON para temas claro/escuro e @wonderflow/tokens 16.0.0 em JSON para tokens web, verificados com base na documentação pública para desenvolvedores.

### Funções do tema com valores claro e escuro

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --global-foreground | light hsl(221 10% 30%) / dark hsl(220 16% 85%) | Função de tema pareada usada no exemplo de feedback. |
| --global-background | light hsl(0 0% 100%) / dark hsl(0 0% 0%) | Função de tema pareada usada no exemplo de feedback. |
| --global-interactive-text | light hsl(214 66% 44%) / dark hsl(206 72% 67%) | Função de tema pareada usada no exemplo de feedback. |
| --cta-default | light hsl(0 100% 44%) / dark hsl(0 100% 44%) | Função de tema pareada usada no exemplo de feedback. |
| --cta-dark | light hsl(0 100% 38%) / dark hsl(0 100% 38%) | Função de tema pareada usada no exemplo de feedback. |
| --cta-foreground | light hsl(0 0% 100%) / dark hsl(0 0% 100%) | Função de tema pareada usada no exemplo de feedback. |
| --dimmed-0 | light hsl(210 20% 98%) / dark hsl(225 11% 7%) | Função de tema pareada usada no exemplo de feedback. |
| --dimmed-1 | light hsl(220 19% 91%) / dark hsl(218 11% 14%) | Função de tema pareada usada no exemplo de feedback. |
| --dimmed-2 | light hsl(220 16% 85%) / dark hsl(219 13% 22%) | Função de tema pareada usada no exemplo de feedback. |
| --highlight-green-background | light hsl(149 100% 91%) / dark hsl(166 100% 13%) | Função de tema pareada usada no exemplo de feedback. |
| --highlight-green-foreground | light hsl(156 100% 23%) / dark hsl(145 76% 75%) | Função de tema pareada usada no exemplo de feedback. |
| --highlight-red-background | light hsl(343 100% 96%) / dark hsl(350 100% 15%) | Função de tema pareada usada no exemplo de feedback. |
| --highlight-red-foreground | light hsl(351 92% 37%) / dark hsl(351 100% 81%) | Função de tema pareada usada no exemplo de feedback. |
| --highlight-yellow-background | light hsl(60 100% 89%) / dark hsl(22 100% 19%) | Função de tema pareada usada no exemplo de feedback. |
| --highlight-yellow-foreground | light hsl(25 100% 34%) / dark hsl(38 100% 77%) | Função de tema pareada usada no exemplo de feedback. |
### Primitivos de espaçamento

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --space-4 | 0.250rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --space-8 | 0.500rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --space-16 | 1.000rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --space-24 | 1.500rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --space-32 | 2.000rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --space-48 | 3.000rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
### Primitivos de raio

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --radius-4 | 0.250rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --radius-8 | 0.500rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --radius-16 | 1.000rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --radius-24 | 1.500rem | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
### Primitivos de pontos de interrupção

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --breakpoint-extra-small | 30em | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --breakpoint-small | 48em | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --breakpoint-medium | 60em | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --breakpoint-large | 80em | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
### Primitivos de duração

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --duration-100 | 0.10s | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --duration-200 | 0.20s | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --duration-250 | 0.25s | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
| --duration-300 | 0.30s | Use token() durante a compilação ou importe o arquivo de propriedades personalizadas CSS. |
## Guia completo do sistema de design Wonderflow Wanda

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Primitivos, temas e uso de CSS no sistema de design Wonderflow Wanda

### Entenda os dois níveis de cor

> Os tokens de cor primitivos do Wanda são canais HSL, como 214 66% 44%, sem o invólucro hsl(). As funções de tema, como --global-interactive-text, são resolvidas em uma cor CSS completa. Envolver novamente um valor completo de tema o tornaria inválido; omitir hsl() nos canais primitivos também é inválido. A tabela registra separadamente os valores completos das funções e as dimensões comuns.

### Escolha intencionalmente entre tokens de compilação e de runtime

A notação documentada token() é processada pela configuração PostCSS do Wanda. Ela não é uma função CSS do navegador. Um projeto HTML simples pode, em vez disso, importar o tokens.css publicado e usar var(). O exemplo funcional usa o themes.css publicado com propriedades personalizadas padrão; por isso, não exige uma etapa de compilação PostCSS oculta.

## Funções dos temas claro e escuro do sistema de design Wonderflow Wanda

### Alterne a superfície semântica em conjunto

Wanda oferece mapeamentos para temas claro e escuro. O exemplo altera data-theme no elemento raiz e permite que a folha de estilos do tema substitua, em conjunto, as funções de primeiro plano, superfície, borda e destaque. A seleção e as notas salvas permanecem inalteradas, pois a troca de tema é um estado de apresentação, não uma redefinição do estado da pesquisa.

### Reserve a função de CTA para a principal ação local

O par de CTA vermelho é usado uma vez, para revisar as notas salvas. As tags de tópico usam funções neutras de destaque, enquanto as tags de sentimento usam pares verde, amarelo e vermelho. Cada tag também apresenta o sentimento por escrito, para que diferenças na percepção das cores não eliminem o significado. O exemplo não inventa uma paleta de destaque separada para cada cartão.

## Limites de conteúdo e evidências do sistema de design Wonderflow Wanda para feedback

### Mantenha a observação separada da interpretação

Cada cartão contém uma observação redigida e uma nota de contexto expansível. O contexto descreve o que a amostra ilustra e evita explicitamente alegações sobre frequência ou gravidade. Uma ferramenta real de feedback deve preservar a distinção entre fonte e análise, em vez de transformar uma única citação em uma tendência sem respaldo.

### Não invente provas com elementos decorativos

O exemplo não contém identidades de clientes, avaliações por estrelas nem pontuações de confiança de modelos fabricadas. Cinco notas redigidas bastam para demonstrar filtragem, expansão de conteúdo e estado salvo. Em um produto ativo, a procedência da pesquisa e as regras de acesso devem fazer parte do contrato de dados; um cartão de citação atraente não pode fornecê-las.

## Filtragem e estado do caderno do sistema de design Wonderflow Wanda

### Combine os critérios de tópico e sentimento

Os dois seletores nativos aplicam um filtro AND. Uma combinação sem notas correspondentes exibe uma mensagem de recuperação e uma ação para redefinir os filtros. A contagem dos resultados informa seu denominador, cinco notas redigidas, em vez de sugerir uma contagem de um conjunto de dados maior. Tudo isso está visível no código-fonte completo.

### Mantenha as notas salvas mesmo quando estiverem ocultas

Salvar adiciona uma nota a um Set local. A filtragem pode ocultar o cartão sem removê-lo do caderno. Ao alternar o estado salvo de uma nota, qualquer resultado de revisão anterior é apagado, mantendo a confirmação alinhada à seleção atual. O caderno exibe o texto real, permitindo inspecionar seu conteúdo em vez de mostrar apenas a contagem de um indicador.

## Cartões, expansão de conteúdo e layout responsivo do sistema de design Wonderflow Wanda

### Use o espaçamento para separar as evidências dos controles

Em telas largas, cada cartão de nota usa raio de 16px e espaçamento interno de 24px. As tags apresentam o tópico, a citação aparece em um tamanho de texto maior e o contexto expansível fica antes da ação de salvar. O caderno ocupa uma superfície mais discreta ao lado das notas. Essas são escolhas originais de composição expressas com os valores de Wanda, não uma alegação de que exista um componente nativo de cartão de pesquisa.

### Mantenha a sequência de leitura no celular

Em 768px, o caderno passa para depois das observações e o preenchimento dos cartões diminui para 16px. Os controles de tópico e sentimento ocupam linhas de largura total. O contexto expandido permanece no fluxo do documento; não sobrepõe nem encobre outra nota. Os cartões não têm altura fixa, então citações mais longas continuam legíveis.

## Sistema de design Wonderflow Wanda: configuração nativa em React e limites da versão HTML

### Considere toda a cadeia de ferramentas do Wanda

A instalação oficial usa react-components, themes, symbols e tokens, com @wonderflow/config fornecendo a configuração PostCSS necessária para o componente CSS. A entrada React importa core.css e o pacote themes. Instalar apenas react-components e presumir que todas as funções de tema estejam disponíveis é uma integração incompleta. A página pública de instalação também alerta sobre a compatibilidade com Tailwind em versões posteriores à 10.6.

### Use este exemplo sem alegar que ele contém componentes nativos

A prévia executada usa o tema CSS do Wanda 16.0.0 com HTML semânticos originais. Ela não executa os componentes Button, Select ou de expansão de conteúdo de React. Esse limite é intencional e visível: o código-fonte completo pode ser executado com um servidor estático, enquanto uma migração para React nativo deve verificar as APIs atuais dos componentes e a configuração de build.

## Código-fonte completo e revisão pelo agente do sistema de design Wonderflow Wanda

### Reproduza a prévia real

Instale o pacote de tema com versão fixada, copie o arquivo themes.css gerado para a mesma pasta de index.html e wanda.css e disponibilize o diretório em um servidor. O código-fonte inclui todas as cinco notas, a filtragem, a expansão de conteúdo, o estado salvo e o feedback. A prévia inclui a mesma folha de estilos localmente para evitar dependência de rede durante a execução.

1. Instale @wonderflow/themes 16.0.0 e copie o CSS gerado.

2. Salve os arquivos completos index.html e wanda.css.

3. Filtre até não haver resultados, redefina os filtros e salve uma nota.

4. Troque o tema e confirme que o caderno permanece intacto.

### Revise os estados de falha e transição

Peça ao agente para manter o denominador do filtro, a recuperação para resultados vazios, a persistência das notas salvas e a invalidação da revisão. Confira as duas aparências e uma nota longa expandida. A revisão local apenas resume as amostras selecionadas; ela não deve ser apresentada como análise de IA nem como validação de clientes sem uma implementação separada e uma fonte de evidências.

- Não trate token() como CSS em tempo de execução.

- Mantenha os canais HSL primitivos separados das cores completas do tema.

- Mantenha as amostras redigidas separadas das evidências de pesquisas reais.

## Exemplos de componentes do sistema de design Wonderflow Wanda

### index.html — espaço de trabalho completo para feedback

HTML semânticos originais e todo o estado da aplicação. Usa a folha de estilos do tema Wanda copiada.

```
<!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>
```

Referência de código

- Salve como index.html na mesma pasta de wanda.css e wanda-theme.css.

### wanda.css — composição com funções reais de tema

Os cartões responsivos e o layout do caderno usam as propriedades personalizadas publicadas.

```
*{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}}
```

Referência de código

- Os valores do tema vêm do pacote instalado, não de uma paleta sintética.

## Configuração do agente de IA do sistema de design Wonderflow Wanda

### Ponto de partida para implementação

A prévia local inclui o mesmo CSS de tema publicado. A aplicação HTML não precisa de PostCSS nem de 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
```

### Um prompt para seu projeto

```
Crie um caderno de feedback com as funções de tema do Wanda 16.0.0 usando o exemplo original completo de HTML. Preserve a filtragem AND, o denominador explícito de cinco notas, o contexto expandido, a persistência do estado salvo e a limpeza de revisões obsoletas. Mantenha separado o uso de token() em tempo de build das variáveis CSS e nunca apresente observações redigidas como pesquisa com clientes.
```

## Fontes e escopo do sistema de design Wonderflow Wanda

Um estudo de aplicação OpenDesign que usa os temas e tokens 16.0.0 do Wanda. A interface é um HTML original, não o runtime nativo de React do Wanda. Todas as citações são conteúdo de amostra redigido, não evidências de clientes nem resultados de pesquisa.

- Tokens de design Formato de canais HSL, token(), CSS e acesso a JavaScript.

- Instalação Conjunto nativo de pacotes, configuração PostCSS e notas de compatibilidade.

- Uso de temas Chaves de tema, data-theme e responsabilidades de quem consome.

- Visão geral do Wanda Escopo do sistema e entrada para a documentação pública.

## Recursos relacionados ao sistema de design Wonderflow Wanda

### Workday Canvas

Crie um plano de aprendizagem local com o FormField composto, o TextInput controlado e o PrimaryButton do Canvas Kit, diferenciando as fontes atuais de tokens semânticos dos exemplos antigos de migração de space.x4.

### Zendesk Garden

Um guia Garden para tarefas de suporte, com aliases de tema reais, escalas de tipografia e raio, um editor de resposta completo, rascunhos locais que levam em conta a visibilidade e recuperação de campos.

### Adeo Mozaic

Crie uma composição prática de controle de quantidade usando a unidade mágica de 16 px da Mozaic, controles correspondentes de 48 px, imports SCSS reais e classes BEM. O planejador de prateleiras permite observar limites, erros tipados e um resumo local de materiais.


- [Referência de implementação](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Fonte](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Fonte](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Referência de código](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Tokens de design Formato de canais HSL, token(), CSS e acesso a JavaScript.](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Instalação Conjunto nativo de pacotes, configuração PostCSS e notas de compatibilidade.](https://design.wonderflow.ai/get-started/documentation/develop/installation)
- [Uso de temas Chaves de tema, data-theme e responsabilidades de quem consome.](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Visão geral do Wanda Escopo do sistema e entrada para a documentação pública.](https://design.wonderflow.ai/)