CAN-DEC-ADR-005 — Tasarım-Sistemi Yüzey-Konvansiyonu

1. Bağlam

Public-yüzey (PublicLayout.tsx chrome'u: header + footer + panel-driven menü, legacy-ADR-089 menü-modeli) CEO-onaylı yaşayan-tasarımdır. Auth-lane yüzeyler (Dashboard, karar-bağlamı vb.) ise "çıplak" görünür. Pre-Audit kök-teşhisi (Müdür 5/5-onay): çıplaklık = kabuk (shell) FARKIDIR, token farkı değil — stil-değerleri zaten tek-kaynakta yaşar (resources/css/app.css @theme: oklch temel-tokenlar + eventinn-brand/eventinn-accent 10-ton skalalar + semantik durum-renkleri). Sorun, auth-lane'in bu tasarım-ailesini PAYLAŞMAMASIDIR. Frontend-stack zemini legacy-ADR-038'dir (provenance; authority-vermez).

AI-CEO çift-incelemesi (11 Tem; Atlassian-token + IBM-Carbon-theme kıyaslı) problem/token/ratchet hükümlerini PASS'ledi; shell-hükmünü revize-etti: public-chrome'u auth-yüzeye AYNEN-taşımak fazla-literaldir — doğru-model kabuk-ailesidir (§3). CEO-kararı (birebir-arşivde): "EventInn AppShell diye olgun-authenticated-shell-varyantı tanımlayalım; bu bizi 'güzel-site + çıplak-dashboard' probleminden çıkarır."

CAN-REQ-UCG-004 (onboarding + hesap-sayfası + kişisel çalışma-bağlamı) ve CAN-REQ-UCG-006 (bağlam-geçişi: kişisel ↔ kurumsal workspace) auth-lane yüzeylerin ve AppShell'deki workspace-switcher'ın gereksinim-kaynağıdır; CAN-REQ-SCN-003 (hesap-kapatma yolculuğu) DangerZone-deseninin gereksinim-kaynağıdır. Bu ADR o yüzeylerin GÖRSEL-sözleşmesini karara bağlar.

2. Karar-1 — Token-tek-kaynak (temel-hüküm)

Müşteri-yüzeyindeki (public + auth-lane) TÜM stil-değerleri merkezî design-token'lardan akar (@theme, resources/css/app.css). Yeni kodda YASAK olan üç desen:

1. Inline-stil (style={{...}} / style="...") — istisnasız hesaplanan-değer zorunluluğu yoksa.
2. Token-dışı hex/renk-literal'i — renk yalnız token-sınıfından (bg-eventinn-brand-600 gibi) veya token-değişkeninden gelir.
3. Arbitrary-px değerleri (w-[347px] sınıfı keyfi-ölçüler) — spacing/radius token-skalasından.

Token-DEĞERLERİNİN kendisinin değişimi (palet/tipografi revizyonu) bu ADR'nin dışıdır; ayrı karar konusudur. Bu ADR değerlerin nereden aktığını kilitler.

3. Karar-2 — SiteChrome-family: PublicShell + EventInn-AppShell (temel-hüküm; AI-CEO ana-revizyonu)

Tek-kabuk-kopyası DEĞİL, kabuk-ailesi: iki-üye, ORTAK tasarım-DNA'sı, FARKLI bilgi-mimarisi (IA).

• PublicShell — mevcut public-chrome (PublicLayout.tsx); CEO-onaylı yaşayan-tasarım, ailenin referans-üyesi. Tam-footer ZORUNLU (legal/kurumsal kolonlar). Coded-shell + panel-driven-data ilkesi korunur (legacy-ADR-089 menü-modeli değişmez; bu ADR ona yeni-hüküm eklemez).
• EventInn-AppShell — authenticated-yüzey kabuğu (Dashboard, karar-bağlamı, hesap-sayfası...). PublicShell'le aynı-token + aynı-component-vocabulary (§4) + aynı-marka-ritmi; IA'sı uygulamaya-göre.
• AppShell'in meşru-farkları: nav-İÇERİĞİ · workspace-switcher / context-switcher (CAN-REQ-UCG-006 yüzey-karşılığı) · app-nav yoğunluğu/yerleşimi (side-nav dahil) · breadcrumbs · notifications · account-menu.
• Footer-hükmü (yumuşatılmış): AppShell'de tam-kurumsal-footer zorunlu-DEĞİL; compact legal/help-footer VEYA her-sayfadan-erişilebilir legal/help-linkleri zorunlu (hukuki-erişilebilirlik korunur, uygulama-yüzeyi boğulmaz).
• Meşru-OLMAYAN fark: token-dışı stil, ayrı-renk-dili, ayrı-tipografi-ritmi, vocabulary-dışı kopya-bileşen — bunlar aile-DNA'sını kırar (§5 ratchet + §6 kapılar yakalar).
• AppShell'in somut-IA'sı (nav-yerleşimi, switcher-konumu) ayrı mockup-turu AÇILMADAN implementasyon-önerisiyle gelir; kabul, ilk-dilim screenshot-turunda CEO-gözüyle verilir (§7).

4. Karar-3 — Component-vocabulary (10-primitive; aile-DNA'sının sözlüğü)

Her iki shell AYNI bileşen-sözlüğünden konuşur — 10-primitive:

Button · Link · Badge · Card · EmptyState · PageHeader · SideNav/AppNav · DangerZone · FormSection · Alert

• Yeni müşteri-yüzeyi bileşeni önce bu sözlükten türetilir; sözlüğe primitive-ekleme = design-system-owner-review + normal-PR; sözlük-DIŞI paralel/kopya-bileşen (ikinci-Button-sınıfı) YASAK; büyük-pattern-değişikliği = amendment.
• DangerZone = CAN-REQ-SCN-003-bağlı pattern-requirement: hesap-kapatma gibi geri-dönülemez/riskli aksiyonlar SERBEST-stilde değil, DangerZone/irreversible-action-pattern'iyle sunulur (görsel-ayrışma + onay-ritmi + CAN-DEC-ADR-004 point-of-no-return ürün-yüzü). "Riskli-hukuki-yolculukta görsel-kalite kozmetik-değildir" (AI-CEO).

5. Karar-4 — Design-ratchet: KATMANLI-fren (yalnız-regex-değil; AI-CEO revizyon-4)

Konvansiyon söze değil frene bağlanır — üç-katman:

1. Lint-katmanı: ESLint/Stylelint kuralları (inline-stil, token-dışı-renk) + Tailwind-config-kilidi (arbitrary-value sınırlaması; token-skala-dışı utility üretilmez).
2. Manifest-katmanı: allowlist-manifest — mevcut ihlal-stoku dosya-bazlı sayıyla (dosya → count) kilitlenir (satır-no kullanılmaz — kayar).
3. CI-script-katmanı: scripts/ci/check_design_system.php, tenant-ratchet emsalinin (check_tenant_id_authz.php) mekaniği birebir: yeni-dosyada-ihlal → RED · mevcut-dosyada-sayı-ARTIŞI → RED · sayı-AZALIŞI → RED + --update (ratchet yalnız SIKILAŞIR — eriyerek-küçülme kilidi; geri-genişleme yapısal-olarak imkânsız).

RED-desenleri = §2'nin üç yasağı. Kapsam: müşteri-yüzeyi kaynak-ağaçları (React/blade); istisna-alanları (§8) taramadan MUAF. Katmanlar-arası çelişkide en-sıkı-katman kazanır.

6. Karar-5 — Kalite-kapıları: visual-regression + accessibility (AI-CEO revizyon-5/6)

• Visual-regression-gate: dalga-kapsamındaki route'lar için route × viewport (desktop/tablet/mobile) öncesi/sonrası screenshot-matrisi (Playwright-diff-sınıfı araç). Dalga-kabulü bu matris ÜZERİNDEN yapılır; matris-dışı görsel-iddia kabul-kanıtı sayılmaz (evidence-first).
• Accessibility-gate (taban-çizgisi): contrast (WCAG-AA; token'larla zaten hedefleniyor) · focus-visible · keyboard-nav · aria-landmarks · skip-link · reduced-motion. Yeni-shell/yeni-dalga bu-kapıdan geçmeden kabul-edilmez.
• İki-kapının somut-araç-seçimi (Playwright/axe vb.) = implementasyon-detayı (p2_design_ratchet_ci paketi); bu ADR kapıların VARLIĞINI ve kabul-zincirindeki yerini bağlar.

7. Karar-6 — Dalga-planı + kabul-mekaniği (revize: AppShell-tasarla+giydir)

• Dalga-1: EventInn-AppShell TASARLA + Dashboard + karar-bağlamı'na (CAN-DEC-ADR-003 yüzeyi) GİYDİR. Hedef "public-chrome'u-giydirmek" DEĞİL (AI-CEO: fazla-literal), aile-DNA'lı AppShell'i var-etmektir. Kalan auth-lane yüzeyler sonraki dalgalarda (p3_dalga_yayilim).
• Görsel-kanıt Verify-lane'indedir: her dalgada §6 visual-regression-matrisi (öncesi/sonrası) + CEO-göz-kabulü (Lokal-Code kendi görselini kendi doğrulamaz).
• Ayrı eskiz/mockup-turu AÇILMAZ — referans-DNA canlıda yaşayan PublicShell + §4 sözlüğüdür; AppShell-IA-önerisi ilk-dilim screenshot-turunda değerlendirilir.

8. Karar-7 — İstisna-kapısı (kapalı-liste)

İstisna	Gerekçe	Sınır
Filament admin-paneli	Kendi tasarım-sistemini taşıyan iç-araç	Müşteri-yüzeyi değildir; ratchet/kapı-taraması dışı
Atlas	İç-araç, müşteri-yüzeyi-değil (Müdür-kararı, pre-audit ④)	Ratchet/kapı-taraması dışı; token-kullanımı TEŞVİK edilir (non-binding not)

• Liste kapalıdır: yeni istisna eklemek = bu ADR'ye amendment (CEO-onayı); kod-tarafında sessiz-muafiyet YASAK.
• E-posta-şablonları gibi chrome-dışı kanallar bu ADR'nin kapsamında değildir (kapsam-dışı, istisna değil).

9. Değerlendirilen alternatifler

• 🅐 Statüko (yüzey-başına serbest stil): drift birikir; her sprint yeni "çıplak" yüzey doğurur; makyaj-borcu döngüseldir → red.
• 🅱 Tam yeniden-tasarım + mockup-turu: token-kaynak + onaylı referans-DNA ZATEN varken sıfırdan-tasarım israftır; C3-bariyer (demand-motoru asıl-darboğaz) ile çelişir → red.
• 🅲-v1 Public-chrome'u auth-yüzeye AYNEN-taşı (ilk-taslak): token/ratchet-doğru ama shell-hükmü fazla-literal — uygulama-IA'sı (switcher/nav-yoğunluğu/bildirim) public-IA'ya sığmaz → AI-CEO-incelemesiyle revize-edildi.
• 🅲-v2 SiteChrome-family + vocabulary + katmanlı-ratchet + kapılar + kapalı-istisna (KABUL-EDİLDİ — CEO "ACCEPT GO" 12 Tem): mevcut onaylı varlıkları aile-DNA'sı-olarak yeniden-kullanır, uygulama-yüzeyine olgun-AppShell verir, hizayı katmanlı-frenle + görsel/erişilebilirlik-kapılarıyla yapısal-kilitler.

10. Kabul-kriterleri

• A1 Müşteri-yüzeyi stil-değerleri yalnız @theme token'larından; §2'nin üç-yasağı yeni-kodda RED.
• A2 Auth-lane yüzeyler EventInn-AppShell'de yaşar; AppShell = PublicShell'le aynı-token + aynı-vocabulary + aynı-marka-ritmi, farklı-IA (meşru-fark-listesi §3).
• A3 AppShell'de compact-legal/help-footer VEYA erişilebilir legal/help-linkleri var (hukuki-erişim korunur).
• A4 Component-vocabulary (10-primitive) kurulu; sözlük-dışı paralel-kopya-bileşen RED; DangerZone-pattern'i riskli/geri-dönülemez aksiyonlarda zorunlu (CAN-REQ-SCN-003-bağı).
• A5 Katmanlı-ratchet CI'da zorunlu (lint + manifest + check_design_system.php); allowlist yalnız küçülür; istisna-alanları muaf.
• A6 Visual-regression-gate: dalga-kabulü route×viewport öncesi/sonrası matris-üzerinden; matris = Verify-lane + CEO-göz.
• A7 A11y-gate: contrast/focus-visible/keyboard-nav/aria-landmarks/skip-link/reduced-motion taban-çizgisi yeni-shell/dalgada zorunlu.
• A8 İstisna-listesi kapalı (Filament + Atlas); genişletme yalnız amendment'le.
• A9 Dalga-1 = AppShell-tasarla + Dashboard + karar-bağlamı'na giydir; coded-shell + panel-driven-data ilkesi bozulmaz (legacy-ADR-089 aynen).

Kapsam-dışı

Token-DEĞERLERİNİN revizyonu (palet/tipografi seçimi) · Filament-içi tasarım · Atlas-yüzeyi · e-posta/PDF şablon-kanalları · menü-modeli değişikliği (legacy-ADR-089) · mockup/eskiz süreci (açılmaz) · visual-regression/a11y araç-seçimi (implementasyon-paketi).

---

CAN-DEC-ADR-005 · decisions/normative · governance_status: accepted (Human-CEO çift-GO 12 Tem 2026 — "ACCEPT GO — Tasarım-Sistemi Yüzey-Konvansiyonu"; çift-SHA-künye = extensions.acceptance). Kabul-zinciri TAMAMLANDI: rev-1 (AI-CEO 8-revizyon) → mikro-fix (delta) → UC-31..34-amendment'leri → covers-üçlü-bağlama → AI-CEO STRONG-DELTA-PASS → Verify ACCEPT-READY D1-D7 → CEO-imza @ source-SHA f2f540f. Kabul-sınırı: kod-başlatmaz — dalga-1-impl + screenshot-matrisi + CEO-göz AYRI-kapılar. accepted ≠ effective. Dayanak: Müdür tasarım-pre-audit 5/5 (019f4b43) + AI-CEO çift-inceleme + CEO-kararı (arşiv: aiceo_scn003_adr005_incelemesi_2026-07-11) + tenant-ratchet emsali.