Use Wanda’s real theme roles and token syntax in a complete feedback-reading workspace with topic filters, expandable evidence context and a persistent local notebook.
Wonderflow Wanda Design System Primitives, Themes and CSS Usage
Understand the two levels of color
Wanda’s primitive color tokens are HSL channels such as 214 66% 44%, without the hsl() wrapper. Theme roles such as --global-interactive-text resolve to a complete CSS color. Wrapping a complete theme value again would be invalid; omitting hsl() around primitive channels is also invalid. The table records complete role values and ordinary dimensions separately.
Choose build-time or runtime tokens deliberately
The documented token() notation is processed by Wanda’s PostCSS configuration. It is not a browser CSS function. A plain HTML project can instead import the published tokens.css and use var(). The working specimen uses the published themes.css with standard custom properties, so it does not require a hidden PostCSS build step.
Wonderflow Wanda Design System Light and Dark Theme Roles
Switch the semantic surface together
Wanda exposes light and dark theme mappings. The specimen changes data-theme on the root and lets the theme stylesheet replace foreground, surface, border and highlight roles together. Selection and saved notes remain unchanged because a theme switch is presentation state, not a reset of research state.
Reserve the CTA role for the main local action
The red CTA pair is used once for reviewing saved notes. Topic tags use neutral highlight roles, while sentiment tags use green, yellow and red pairs. Each tag also has a written sentiment, so a color-vision difference does not erase meaning. The specimen does not invent a separate accent palette for each card.
Wonderflow Wanda Design System Feedback Content and Evidence Boundaries
Keep the observation separate from the interpretation
Each card contains an authored observation and an expandable context note. The context describes what the sample illustrates and explicitly avoids frequency or severity claims. A real feedback tool should preserve the source and analysis boundary instead of turning a single quote into an unsupported trend.
Do not manufacture proof with decoration
The example has no fabricated customer identities, star ratings or model confidence scores. Five authored notes are enough to demonstrate filtering, disclosure and saved state. In a live product, research provenance and access rules belong in the data contract; an attractive quotation card cannot supply them.
Wonderflow Wanda Design System Filtering and Notebook State
Combine topic and sentiment constraints
The two native selects apply an AND filter. A combination with no matching note produces a visible recovery message and a reset action. The result count states its denominator, five authored notes, rather than suggesting a count from a larger dataset. All of this is visible in the complete source.
Keep saved notes independent of visibility
Wonderflow Wanda Design System Cards, Disclosure and Responsive Layout
Use spacing to separate evidence from controls
Each note card uses a 16px radius and 24px internal spacing on a wide screen. Tags introduce the topic, the quote has a larger text size, and the expandable context sits before the save action. The notebook occupies a quieter surface beside the notes. These are original composition choices expressed with Wanda’s values, not a claim of a native research-card component.
Keep the mobile reading sequence intact
At 768px the notebook moves after the observations, and card padding reduces to 16px. The topic and sentiment controls become full-width rows. Expanded context remains in the document flow; it does not overlay or obscure another note. Cards have no fixed heights, so longer quotes remain readable.
Wonderflow Wanda Design System Native React Setup and HTML Boundary
Account for the complete Wanda toolchain
Official installation uses react-components, themes, symbols and tokens, with @wonderflow/config providing the required PostCSS setup for component CSS. The React entry imports core.css and the themes package. Installing only react-components and assuming all theme roles exist is an incomplete integration. The public installation page also warns about Tailwind compatibility for versions above 10.6.
Use this specimen without claiming native components
The executed preview uses Wanda 16.0.0 theme CSS with original semantic HTML. It does not run the React Button, Select or disclosure components. That boundary is deliberate and visible: the complete source can be run with a static server, while a native React migration must verify the current component APIs and build configuration.
Wonderflow Wanda Design System Complete Source and Agent Review
Reproduce the actual preview
Install the pinned theme package, copy its generated themes.css beside the supplied index.html and wanda.css, and serve the directory. The source includes all five notes, filtering, disclosure, saved state and feedback. The preview bundles the same stylesheet locally to avoid a runtime network dependency.
Install @wonderflow/themes 16.0.0 and copy its generated CSS.
Save the complete index.html and wanda.css files.
Filter to an empty result, reset, and save a note.
Switch the theme and confirm the notebook remains intact.
Review failure and transition states
Ask the agent to retain the filter denominator, empty recovery, saved-note persistence and review invalidation. Check both appearances and a long expanded note. The local review only summarizes selected samples; it must not be relabeled as AI analysis or customer validation without a separate implementation and evidence source.
Do not treat token() as runtime CSS.
Keep primitive HSL channels distinct from complete theme colors.
Keep authored samples distinct from real research evidence.
Wonderflow Wanda Design System Component Examples
index.html — complete feedback workspace
Original semantic HTML and all application state. Uses the copied Wanda theme stylesheet.
html
<!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>
Theme values come from the installed package, not a synthetic palette.
04
Wonderflow Wanda Design System Agent Setup
Implementation Starting Point
The local preview bundles the same published theme CSS. The HTML application needs no PostCSS or React.
sh
npm install @wonderflow/[email protected]
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
A Prompt for Your Project
Agent Prompt
Build a feedback notebook with Wanda 16.0.0 theme roles using the complete original HTML example. Preserve AND filtering, an explicit five-note denominator, expanded context, saved-state persistence and stale review clearing. Keep token() build-time usage separate from CSS variables, and never present authored observations as customer research.
05
Wonderflow Wanda Design System Sources and Scope
An OpenDesign application study using Wanda themes and tokens 16.0.0. The interface is original HTML, not the native Wanda React runtime. Every quotation is authored sample content, not customer evidence.
