# Wonderflow Wanda Tasarım Sistemi

## Wonderflow Wanda Tasarım Sistemi Arayüz Önizlemesi

Yazılmış gözlemleri filtreleyin, bağlamı inceleyin, notları kaydedin ve Wanda temasını değiştirin.

## Wonderflow Wanda Tasarım Sistemi Tasarım Referansı

@wonderflow/themes 16.0.0 açık/koyu JSON ve @wonderflow/tokens 16.0.0 web token JSON; herkese açık geliştirici belgeleriyle doğrulanmıştır.

### Açık ve koyu değerleriyle tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --global-foreground | light hsl(221 10% 30%) / dark hsl(220 16% 85%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --global-background | light hsl(0 0% 100%) / dark hsl(0 0% 0%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --global-interactive-text | light hsl(214 66% 44%) / dark hsl(206 72% 67%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --cta-default | light hsl(0 100% 44%) / dark hsl(0 100% 44%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --cta-dark | light hsl(0 100% 38%) / dark hsl(0 100% 38%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --cta-foreground | light hsl(0 0% 100%) / dark hsl(0 0% 100%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --dimmed-0 | light hsl(210 20% 98%) / dark hsl(225 11% 7%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --dimmed-1 | light hsl(220 19% 91%) / dark hsl(218 11% 14%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --dimmed-2 | light hsl(220 16% 85%) / dark hsl(219 13% 22%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --highlight-green-background | light hsl(149 100% 91%) / dark hsl(166 100% 13%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --highlight-green-foreground | light hsl(156 100% 23%) / dark hsl(145 76% 75%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --highlight-red-background | light hsl(343 100% 96%) / dark hsl(350 100% 15%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --highlight-red-foreground | light hsl(351 92% 37%) / dark hsl(351 100% 81%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --highlight-yellow-background | light hsl(60 100% 89%) / dark hsl(22 100% 19%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
| --highlight-yellow-foreground | light hsl(25 100% 34%) / dark hsl(38 100% 77%) | Geri bildirim örneğinin kullandığı eşleştirilmiş tema rolü. |
### Boşluk temel değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --space-4 | 0.250rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --space-8 | 0.500rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --space-16 | 1.000rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --space-24 | 1.500rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --space-32 | 2.000rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --space-48 | 3.000rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
### Köşe yarıçapı temel değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --radius-4 | 0.250rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --radius-8 | 0.500rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --radius-16 | 1.000rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --radius-24 | 1.500rem | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
### Kesme noktası temel değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --breakpoint-extra-small | 30em | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --breakpoint-small | 48em | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --breakpoint-medium | 60em | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --breakpoint-large | 80em | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
### Süre temel değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --duration-100 | 0.10s | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --duration-200 | 0.20s | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --duration-250 | 0.25s | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
| --duration-300 | 0.30s | Derleme zamanında token() ile kullanın veya CSS özel özellik dosyasını içe aktarın. |
## Wonderflow Wanda Tasarım Sistemi Tam Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Wonderflow Wanda Tasarım Sistemi Temel Değerleri, Temalar ve CSS Kullanımı

### İki renk düzeyini anlayın

> Wanda’nın temel renk token’ları, hsl() sarmalayıcısı olmadan 214 66% 44% gibi HSL kanallarıdır. --global-interactive-text gibi tema rolleri, tam bir CSS rengine karşılık gelir. Tam bir tema değerini yeniden sarmalamak geçersiz olur; temel kanalların etrafında hsl() kullanmamak da geçersizdir. Tabloda tam rol değerleri ve standart boyutlar ayrı ayrı gösterilir.

### Derleme zamanı veya çalışma zamanı token’larını bilinçli seçin

Belgelenen token() gösterimi Wanda’nın PostCSS yapılandırması tarafından işlenir. Bu, tarayıcıda çalışan bir CSS işlevi değildir. Bunun yerine, düz bir HTML projesi yayımlanmış tokens.css dosyasını içe aktarabilir ve var() kullanabilir. Çalışan örnek, standart özel özelliklerle yayımlanmış themes.css dosyasını kullanır; bu nedenle gizli bir PostCSS derleme adımı gerektirmez.

## Wonderflow Wanda Tasarım Sistemi Açık ve Koyu Tema Rolleri

### Anlamsal yüzeyi birlikte değiştirin

Wanda, açık ve koyu tema eşlemeleri sunar. Örnek, kökteki data-theme değerini değiştirir; tema stil sayfası da ön plan, yüzey, kenarlık ve vurgu rollerini birlikte değiştirir. Tema değişikliği sunum durumudur, araştırma durumunu sıfırlamaz; bu nedenle seçimler ve kaydedilen notlar değişmeden kalır.

### CTA rolünü ana yerel eylem için ayırın

Kırmızı CTA çifti, kaydedilen notları gözden geçirmek için bir kez kullanılır. Konu etiketlerinde nötr vurgu rolleri, duygu durumu etiketlerinde ise yeşil, sarı ve kırmızı çiftler kullanılır. Her etiketin yazılı bir duygu durumu da vardır; böylece renk algısındaki farklılıklar anlamı ortadan kaldırmaz. Örnek, her kart için ayrı bir vurgu paleti uydurmaz.

## Wonderflow Wanda Tasarım Sistemi Geri Bildirim İçeriği ve Kanıt Sınırları

### Gözlemi yorumdan ayrı tutun

Her kartta, yazılmış bir gözlem ve genişletilebilir bir bağlam notu bulunur. Bağlam, örneğin neyi gösterdiğini açıklar ve sıklık ya da önem derecesine ilişkin iddialardan özellikle kaçınır. Gerçek bir geri bildirim aracı, tek bir alıntıyı dayanaksız bir eğilime dönüştürmek yerine kaynağı ve analiz sınırını korumalıdır.

### Süslemeyle kanıt uydurmayın

Örnekte uydurma müşteri kimlikleri, yıldız puanları veya model güven skorları yoktur. Filtreleme, açılır içerik ve kaydedilen durumu göstermek için yazılmış beş not yeterlidir. Canlı bir üründe araştırmanın kaynağı ve erişim kuralları veri sözleşmesinde yer almalıdır; alıntıların hoş göründüğü bir kart bunları sağlayamaz.

## Wonderflow Wanda Tasarım Sistemi Filtreleme ve Not Defteri Durumu

### Konu ve duygu durumu koşullarını birleştirin

İki yerel seçme alanı AND filtresi uygular. Eşleşen not bulunmayan bir bileşimde kullanıcıya görünür bir kurtarma mesajı ve sıfırlama eylemi sunulur. Sonuç sayısı, daha büyük bir veri kümesinden alınmış izlenimi vermek yerine, yazılmış beş not üzerinden hesaplandığını belirtir. Bunların tümü eksiksiz kaynak kodunda görülebilir.

### Kaydedilen notları görünürlükten bağımsız tutun

Bir notu kaydetmek onu yerel bir Set’e ekler. Filtreleme bu kartı gizleyebilir ama notu defterden silmez. Kaydedilmiş bir notun durumu değiştirilince eski inceleme sonucu temizlenir ve onay, geçerli seçimle uyumlu kalır. Not defteri gerçek metni listeler; böylece yalnızca rozet sayısını göstermek yerine içeriğini incelemeyi mümkün kılar.

## Wonderflow Wanda Tasarım Sistemi Kartlar, Açılır İçerik ve Duyarlı Düzen

### Kanıtı kontrollerden ayırmak için boşluk kullanın

Geniş ekranlarda her not kartında 16px köşe yarıçapı ve 24px iç boşluk kullanılır. Etiketler konuyu belirtir, alıntı daha büyük puntoyla gösterilir ve kaydetme eyleminden önce genişletilebilir bağlam yer alır. Not defteri, notların yanında daha sakin bir yüzeyde bulunur. Bunlar Wanda’nın değerleriyle ifade edilen özgün kompozisyon tercihleridir; yerel bir araştırma kartı bileşeni oldukları iddia edilmez.

### Mobilde okuma sırasını koruyun

768px genişlikte not defteri gözlemlerden sonra gelir ve kart dolgusu 16px’e düşer. Konu ve duygu durumu kontrolleri tam genişlikte satırlara dönüşür. Genişletilen bağlam belge akışında kalır; başka bir notın üzerine binmez veya onu gizlemez. Kartların yüksekliği sabit değildir, bu nedenle uzun alıntılar da okunabilir kalır.

## Wonderflow Wanda Tasarım Sistemi Yerel React Kurulumu ve HTML Sınırı

### Wanda araç zincirinin tamamını hesaba katın

Resmî kurulumda react-components, themes, symbols ve tokens kullanılır; bileşen CSS için gereken PostCSS yapılandırmasını @wonderflow/config sağlar. React giriş noktası core.css dosyasını ve themes paketini içe aktarır. Yalnızca react-components paketini kurup tüm tema rollerinin mevcut olduğunu varsaymak eksik bir entegrasyondur. Herkese açık kurulum sayfasında ayrıca 10.6 üzeri sürümlerde Tailwind uyumluluğuna ilişkin bir uyarı bulunur.

### Bu örneği yerel bileşen iddiasında bulunmadan kullanın

Çalıştırılan önizleme, özgün anlamsal HTML ile Wanda 16.0.0 tema CSS değerlerini kullanır. React Button, Select veya açılır içerik bileşenlerini çalıştırmaz. Bu sınır bilinçli olarak belirgindir: eksiksiz kaynak kodu statik bir sunucuyla çalıştırılabilir; yerel React geçişinde ise güncel bileşen API’leri ve derleme yapılandırması doğrulanmalıdır.

## Wonderflow Wanda Tasarım Sistemi Eksiksiz Kaynak Kod ve Ajan İncelemesi

### Gerçek önizlemeyi yeniden oluşturun

Sabitlenmiş tema paketini kurun, oluşturulan themes.css dosyasını sağlanan index.html ve wanda.css dosyalarının yanına kopyalayın ve dizini sunun. Kaynak kodda beş notun tamamı, filtreleme, açılır içerik, kaydedilen durum ve geri bildirim bulunur. Önizleme, çalışma zamanında ağ bağımlılığı olmaması için aynı stil sayfasını yerel olarak içerir.

1. @wonderflow/themes 16.0.0 paketini kurun ve oluşturulan CSS dosyasını kopyalayın.

2. index.html ve wanda.css dosyalarının tamamını kaydedin.

3. Sonuç vermeyen bir filtre uygulayın, sıfırlayın ve bir not kaydedin.

4. Temayı değiştirin ve not defterinin korunduğunu doğrulayın.

### Hata ve geçiş durumlarını inceleyin

Ajan’dan filtre paydasını, sonuç vermeyen filtre için kurtarma durumunu, kaydedilen notların kalıcılığını ve inceleme sonucunun geçersiz kılınmasını korumasını isteyin. Her iki görünümü ve genişletilmiş uzun bir notu kontrol edin. Yerel inceleme yalnızca seçilen örnekleri özetler; ayrı bir uygulama ve kanıt kaynağı olmadan bu sonuç AI analizi veya müşteri doğrulaması olarak adlandırılmamalıdır.

- token() işlevini çalışma zamanı CSS olarak değerlendirmeyin.

- Temel HSL kanallarını tam tema renklerinden ayrı tutun.

- Yazılmış örnekleri gerçek araştırma kanıtlarından ayrı tutun.

## Wonderflow Wanda Tasarım Sistemi Bileşen Örnekleri

### index.html — eksiksiz geri bildirim çalışma alanı

Özgün anlamsal HTML ve uygulama durumunun tamamı. Kopyalanan Wanda tema stil sayfasını kullanır.

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

Kod referansı

- wanda.css ve wanda-theme.css dosyalarının yanına index.html adıyla kaydedin.

### wanda.css — gerçek tema rolleriyle kompozisyon

Duyarlı kart ve not defteri düzeni, yayımlanan özel özellikleri kullanır.

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

Kod referansı

- Tema değerleri, yapay bir paletten değil kurulu paketten alınır.

## Wonderflow Wanda Tasarım Sistemi Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel önizleme, yayımlanmış aynı tema CSS dosyasını içerir. HTML uygulaması PostCSS veya React gerektirmez.

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

### Projeniz İçin Bir İstem

```
Eksiksiz özgün HTML örneğiyle Wanda 16.0.0 tema rollerini kullanarak bir geri bildirim not defteri oluşturun. AND filtrelemesini, beş notluk açık paydayı, genişletilmiş bağlamı, kaydedilen durumun kalıcılığını ve eski inceleme sonuçlarının temizlenmesini koruyun. Derleme zamanı token() kullanımını CSS değişkenlerinden ayrı tutun ve yazılmış gözlemleri asla müşteri araştırması olarak sunmayın.
```

## Wonderflow Wanda Tasarım Sistemi Kaynakları ve Kapsamı

Wanda themes ve tokens 16.0.0 kullanan bir OpenDesign uygulama çalışması. Arayüz özgün HTML; yerel Wanda React çalışma zamanı değildir. Tüm alıntılar bu örnek için yazılmıştır; müşteri kanıtı veya araştırma bulgusu değildir.

- Tasarım belirteçleri HSL kanal biçimi, token(), CSS ve JavaScript erişimi.

- Kurulum Yerel paketler, PostCSS kurulumu ve uyumluluk notları.

- Temaları kullanma Tema anahtarları, data-theme ve tüketici sorumlulukları.

- Wanda’ya genel bakış Sistem kapsamı ve herkese açık belgelere giriş.

## Wonderflow Wanda Tasarım Sistemi İlgili Kaynaklar

### Workday Canvas

Canvas Kit’in birleşik FormField bileşeni, denetimli TextInput bileşeni ve PrimaryButton bileşeniyle yerel bir öğrenme planı oluşturun. Güncel anlamsal belirteç kaynaklarıyla eski space.x4 geçiş örneklerinin farkını görün.

### Zendesk Garden

Gerçek tema takma adları, tipografi ve köşe yarıçapı ölçekleri, eksiksiz bir yanıt oluşturucu, görünürlüğü gözeten yerel taslaklar ve alan kurtarma özellikleri içeren bir Garden destek çalışması kılavuzu.

### Adeo Mozaic

Mozaic’in 16px sihirli birimini, birbiriyle uyumlu 48px kontrollerini, gerçek SCSS içe aktarımlarını ve BEM sınıflarını kullanarak işlevsel bir miktar kontrolü düzeni oluşturun. Raf planlayıcı; sınırları, türü belirtilmiş hataları ve yerel malzeme özetini görünür kılar.


- [Uygulama başvurusu](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Kaynak](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Kaynak](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Kod referansı](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Tasarım belirteçleri HSL kanal biçimi, token(), CSS ve JavaScript erişimi.](https://design.wonderflow.ai/get-started/documentation/develop/design-tokens)
- [Kurulum Yerel paketler, PostCSS kurulumu ve uyumluluk notları.](https://design.wonderflow.ai/get-started/documentation/develop/installation)
- [Temaları kullanma Tema anahtarları, data-theme ve tüketici sorumlulukları.](https://design.wonderflow.ai/get-started/documentation/develop/using-themes)
- [Wanda’ya genel bakış Sistem kapsamı ve herkese açık belgelere giriş.](https://design.wonderflow.ai/)