# INOOWA Draw — Design System v1

**Durum: Draft / tasarım incelemesi için aday.** Uygulamadaki mevcut CSS, renkler ve router akışları henüz global olarak migrate edilmedi. Bu branch'in amacı önce ortak sözleşmeyi oluşturmak, onaylamak ve sonra ekranları parça parça standarda taşımaktır.

Bu çalışmada temel dayanak; mevcut ürün kararı `docs/DECISIONS.md`, erişim matrisi `docs/ENTITLEMENTS.md`, 23 CURRENT/14 Archive route kayıtları `docs/SCREEN_REGISTRY.md` ve onaylı INOOWA görselleridir. Eski marka logo/Owii değiştirilmez.

## 6 teslim paketi

| Bölüm | Belge / karşılığı | Kapsam |
|---|---|---|
| 1. Foundation | [01_FOUNDATIONS.md](01_FOUNDATIONS.md) | Semantic palette, tipografi, 8px grid, spacing, radius, visual hierarchy, contrast |
| 2. UI Kit | [02_UI_KIT.md](02_UI_KIT.md) / [components.css](components/components.css) | Button, input, checkbox, choice chip, modal, status, card, empty state, navigation varyantları |
| 3. İkon & art | [03_ICONOGRAPHY_ASSETS.md](03_ICONOGRAPHY_ASSETS.md) | Onaylı 3D altı nav ikonu, fonksiyonel SVG, Owii/logo, örnek görsel, empty state ve naming |
| 4. Style / platform | [04_STYLE_PLATFORM.md](04_STYLE_PLATFORM.md) | Çocuk/ebeveyn tone of voice, Apple HIG, Material 3, platform a11y ve disclosure sınırları |
| 5. UX/flows | [05_UX_INTERACTIONS_FLOWS.md](05_UX_INTERACTIONS_FLOWS.md) | Mermaid e2e flows, gesture/back/error/permission/reduced motion davranışı |
| 6. Design tokens | [tokens/tokens.json](tokens/tokens.json) → [tokens/tokens.css](tokens/tokens.css) | 108 DTCG-style token; tek kaynak JSON, build/check ile generated CSS |

**Ek:** [06_AUDIT_MIGRATION.md](06_AUDIT_MIGRATION.md) gerçekte hâlâ farklı stiller kullanan ekranları ve sıralı migrasyon planını açıklar.

## Görsel Tasarım Sistemi Rehberi

[**Visual Design System**](index.html) sayfası, renk, tipografi, spacing, 3D ikonlar, kartlar, etkileşim, kullanıcı yolculuğu ve kod token'larını **görsel olarak açıklayan** interaktif bir HTML rehberidir. Başlangıç dosyası `design-system/index.html`; stil `guide.css`, etkileşim `guide.js`. Ürün prototipinden ayrı, Workbench üst çubuğundan erişilebilir. Bu sayfa gerçek ürün ekranlarını veya hesap/StoreKit işlemlerini yönetmez.

Yerel sunucuyla aç: `http://localhost:8000/design-system/index.html`. Altı DS dokümanı ve mevcut [canlı bileşen kütüphanesi](preview/index.html) korunmuştur.

## Canlı UI Kit önizlemesi

1. Proje kökünde `python3 -m http.server 8000` çalıştır.
2. Tarayıcı: `http://localhost:8000/design-system/preview/index.html`.
3. Renkler/type → Buttons → Forms → Cards/empty → Shared nav → Platform kuralları.
4. Tıklanabilir örnekler form doğrulama, button states, modal, chip ve nav selected state gösterir; bu sayfa gerçek hesap veya ödeme başlatmaz.

## Geliştirici kullanım

```bash
npm run ds:build   # tokens.json kaynaklı tokens.css üret
npm run ds:check   # JSON alias/type, CSS senkronu, örnek kontrast, dosya ve UI Kit sözleşmesi
npm run ds:test    # local HTTP server + Playwright Chromium ile gallery smoke/screenshot
```

HTML projesinde *yalnızca yeni/migrate edilmiş bileşenlerde* kullan:
```html
<link rel="stylesheet" href="design-system/tokens/tokens.css">
<link rel="stylesheet" href="design-system/components/components.css">
<div class="inoowa-ds">
  <button class="ds-btn ds-btn--primary" type="button">Start Drawing</button>
</div>
```

Örnek token: `var(--inoowa-gradient-primary)`, `var(--inoowa-space-3)`, `var(--inoowa-radius-lg)`, `var(--inoowa-font-size-body)`.

**Mevcut ekranları etkilememe garantisi:** `design-system/tokens/tokens.css` ve `components/components.css` şu an ana `index.html` dosyasına eklenmedi. UI Kit bileşenleri yalnız `.inoowa-ds` sınıfı altında çalışır. Global tema/kod migrasyonu ayrı karar ve PR olmalıdır.

## İlk uygulama pilotu: 07B · 13B · 14B

[Child Screen Pilot](pilot/README.md) artık ortak token’ları Dashboard, Playground ve Library ekranlarına scoped CSS üzerinden uyguluyor. 144px rail, **02C Get Started gradient'ini temel alan Primary**, üç ekranın tutarlı primary/secondary butonları, arama alanları, 8px spacing ve 3D ikonlar bu dalda karşılaştırılabilir. **Diğer ekranlara yayılmadı; yerel ekran görüntüsü onayı bekliyor.** Komutlar: `npm run ds:pilot:check`, `npm run ds:pilot:test`.

## Figma geçişi

`tokens/tokens.json`'daki aynı semantik roller Figma Variables'e eşlenmeli; CSS dosyasını elle yeniden üretmek yerine bu JSON'a dayalı token import/adapter kullan. Figma'da üç ana page: **Foundations**, **Components & States**, **Screen Templates**; ayrıca **Archive & Explorations** ayrı olmalı. Figma bileşenleri için state variants (`default/hover/pressed/focus/disabled/loading/error/selected`), 8px auto-layout, variants ve documented props tanımlanmalı. Figma dosyası bu görevde doğrudan oluşturulmadı.

## Onay/kalite kapıları

**Tasarım onayı gerekli:** 144px rail geçişi, genel button görsel dili, 02B/02C seçim kararı, çocuğun Dashboard sadeleştirmesi, full-screen art ve scrim yoğunlukları.

**Henüz production-ready değil:** Native iPadOS/Android hit targets, StoreKit, parental consent, offline/cloud veri modeli, uzun lokalizasyon metinleri, gerçek video dersleri, tüm ekranlara migration ve gerçek cihaz QA. Bunların mevcut olması CSS ile sağlanmaz.

Bu v1 ile yapılacak ilk gerçek ekran migrasyonu için önerilen pilot: **07B Dashboard + 13B Playground + 14B Library** ortak rail ve button standardı. Korunan 02B ve ebeveyn akışlarına otomatik dokunulmamalı.