# KERN Tasarım Sistemi

## KERN Tasarım Sistemi Arayüz Önizlemesi

Notu düzenleyin, silme işlemini iptal edin veya onaylayın, notu geri yükleyin ve görünümü değiştirin.

## KERN Tasarım Sistemi Tasarım Referansı

@kern-ux/native 2.8.2’den çıkarılmıştır; uygulama düzenine ilişkin tercihler ayrıca etiketlenmiştir.

### Tipografi ve geometri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Default font | Fira Sans | Paketlenmiş yazı tipi yüzü dosyasını yükleyin; CSS tek başına yazı tipi dosyalarını yüklemez. |
| Static sizes | 16 / 18 / 21px | Küçük, orta ve büyük statik metin boyutları. |
| Adaptive sizes below 768px | 21 / 26 / 32 / 48px | Orta boyuttan 2x-büyük boyuta kadar uyarlanabilir tipografi. |
| Adaptive sizes from 768px | 24 / 32 / 48 / 72px | Paket, bu medya sorgusunda uyarlanabilir belirteçleri değiştirir. |
| Font weights | 400 / 500 / 600 | Normal, orta ve yarı kalın. |
| Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | Adlandırılmış boşluk belirteçleri; eşit aralıklı bir artış ölçeği değildir. |
| Border widths | 0 / 1 / 2 / 4 / 8px | Varsayılan kenarlık 2px’tir. |
| Radii | 0 / 2 / 4 / 8px / 50% | Yok, küçük, varsayılan, büyük ve daire. |
| Focus outline | 4px | Varsayılan focus-visible ana hattı, bağlama uygun eylem odağı rolünü kullanır. |
| Specimen width | 800px | Özgün uygulama tercihi; KERN kapsayıcı belirteci değildir. |
### Anlamsal renk eşlemesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Light text | neutral-950 | --kern-color-layout-text-default |
| Dark text | neutral-025 | Aynı anlamsal rol, temaya göre değişir. |
| Light action | darkblue-700 | --kern-color-action-default; on-action beyazdır. |
| Dark action | darkblue-300 | On-action siyaha dönüşür. |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | Açık tercih sistemi terciğine göre önceliklidir. |
## KERN Tasarım Sistemi Eksiksiz Kılavuz

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ı.

## KERN Tasarım Sistemi Yerel HTML, CSS ve tarayıcı davranışı

### Paketin sağladıkları

> KERN native 2.8.2, bileşen CSS dosyasını ve yazı tiplerini içerir. Örnek, bu dosyaları doğrudan içe aktarır: düğme, metin alanı, Details ve Dialog, KERN sınıflarına sahip yerel öğelerdir. React sağlayıcısına veya JavaScript bileşen oluşturucusuna gerek yoktur. Dialog çevresindeki karar mantığını uygulama sağlar; yalnızca stil vermek bir girdiyi temizlemez.

1. Sabitlenmiş yerel paketi yükleyin.

2. Göreli yolları koruyarak stil sayfasını ve yazı tiplerini birlikte kopyalayın.

3. Aşağıdaki eksiksiz örneği kaydedin ve dizini HTTP üzerinden sunun.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Fira Sans ve uyarlanabilir tipografi

### Tipografiyi açıkça yükleyin

kern.min.css, Fira Sans’ı belirtir; fonts/fira-sans.css ise gerçek yazı tipi yüzlerini ve göreli WOFF2 varlıklarını tanımlar. Yazı tipi dizinini olduğu gibi korumak, görünüşte doğru bir stil sayfasının sessizce başka bir yazı tipine geçmesini önler. Statik metin boyutları 16, 18 ve 21px olarak kalırken uyarlanabilir başlık belirteçleri 768px’de değişir. Hiyerarşi için bir başlık öğesi, görsel stil için de uygun KERN sınıfını kullanın. Örnek tek bir h1 kullanır ve dialog için ayrı bir h2 tanımlar.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Boşluk, genişlik ve duyarlı düzen

### Belirteçleri düzen kompozisyonundan ayırın

KERN, küçük boyutlarda 2px ve 4px artışlar da içeren, 0 ile 192px arasındaki adlandırılmış boşluk belirteçlerini sunar. Kenarlık ve köşe yarıçapı belirteçleri ayrı ölçeklerdir. Örnek, 24px’lik dikey ritim ve satır kaydırabilen bir eylem satırı kullanır. 800px’lik içerik üst sınırı ve 560px’lik dialog sınırı, uygulamaya özgü açık tercihlerdir; hiçbiri evrensel bir KERN kapsayıcısı olarak sunulmaz. Dar ekranlarda sayfa dolgusu 16px’e iner ve dialog genişliği görüntü alanı içinde kalır. Belgede görüntü alanı yüksekliğine ilişkin bir minimum uygulanmaz; böylece gömülü kullanımda yeniden boyutlandırma geri bildirim döngüsü oluşmaz.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Anlamsal renk ve görünüm

### Yalıtılmış onaltılık değerleri değil, rolleri değiştirin

Paket; metin, eylem, arka plan ve odak için anlamsal CSS özelliklerini kullanır. Açık ve koyu paletlerde bu roller birlikte değişir. Örneğin action-default, açık modda darkblue-700 ile, koyu modda darkblue-300 ile eşleşirken ön plan rengi beyazdan siyaha döner. Örnek, html üzerinde data-kern-theme ayarlar ve basılı durumunu bildiren bir düğme sunar. Tercih yalnızca bu belge boyunca geçerlidir; kaydedilmez. Açık özniteliği kaldırmak, stil sayfasının prefers-color-scheme değerini izlemesini sağlar.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Etiketli, düzenlenebilir bir not

### Yönergeleri erişilebilir tutun

Metin alanı, kern-form-input içinde kern-form-input__input kullanır ve gerçek bir etiket, input id değerine bağlanır. İpucunun kendine ait bir id değeri vardır ve aria-describedby aracılığıyla bağlı kalır. Bu, isteğe bağlı yerel bir nottur; bu nedenle örnek, zorunlu alan hataları veya sunucuya kayıt işlevi uydurmaz. Örneği geri yükleme işlemi başlangıç değerini ayarlar ve düzenlenebilir alana odaklanır. Bir durum bölgesi, etiketi değiştirmeden veya odağı etkileşimsiz metne taşımadan sonucu duyurur.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Details ile ek bilgiler

### Açılır bölümü tarayıcının yönetmesini sağlayın

details öğesi açık durumunu yönetir; tetikleyici ise summary öğesidir. KERN, sunum amacıyla kern-details__header, küçük bir başlık span’i ve kern-details__body ekler. Örnek, saklama bilgilerini ek bilgi olarak burada gösterir. Zorunlu yönergeler, hatalar ve silme eylemi açılır bölümün dışında görünür kalır. Yerel klavye davranışı, ikinci bir tıklama işleyicisi veya yinelenen aria-expanded durumu olmadan etkinleştirme sağlar.

- Summary metnini açıklayıcı ve kısa tutun.

- Summary içine başka bir düğme veya bağlantı yerleştirmeyin.

- İlişkili açılır bölümlerden oluşan bir koleksiyon için Accordion kullanın; birbiriyle ilgisiz eylemleri Details gibi göstermeyin.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Güvenli çıkış sunan bir onay

### Yapı ve denetim

Dialog, h2 ile etiketlenir ve kısa bir sonuç açıklamasıyla tanımlanır. Üstbilgi, gövde ve altbilgide KERN’ın belgelenmiş sınıfları kullanılır. showModal(), yerel dialog’u üst katmana taşır; close() etkileşimi sonlandırır. Keep note, autofocus aracılığıyla başlangıçta odaklanır. Escape, metni değiştirmeden dialog’u kapatır ve close dinleyicisi odağı Discard note düğmesine geri verir. Değeri yalnızca Yes, discard değiştirir. Bu yıkıcı bir onay olduğundan arka plana tıklamak özellikle etkisiz bırakılmıştır. Bu yaklaşım, genel örneğin arka plana tıklayınca kapatma işleyicisini gelişigüzel kopyalamak yerine kritik kararlara ilişkin belgelenmiş yönergeleri izler.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Entegrasyon ve uygulanabilirlik

### Bağımlılık zincirinin tamamını ekleyin

Aşağıdaki kurulum, tek bir kesin sürümlü paketi yükler ve CSS dosyasını yazı tipi diziniyle birlikte kopyalar. Eksiksiz örnek; kendi düzenine ait CSS dosyasını, kök tema özniteliğini, DOM yapısını ve olay bağlantılarını içerir. Gerçek bir formla bütünleştirdikten sonra dialog’un her iki sonucunu, Escape tuşunu ve dar ekranları test edin. KERN kodu EUPL lisansına sahiptir; web sitesi metinsel ve grafik materyallerini CC BY-NC-SA kapsamında ayrı ayrı belirtir. Bu özgün örnek, herhangi bir yetkili kurumun kimliğini kopyalamaz veya bir hizmetin erişilebilirlik denetiminden geçtiği izlenimini vermez. Gerçek bir uygulama için yine de kalıcı depolama, sunucu tarafı doğrulama ve tüm kullanıcı yolculuğunun değerlendirilmesi gerekir.

Destekleyici belirtimi okuyun

## KERN Tasarım Sistemi Bileşen Örnekleri

### Eksiksiz yerel not ve onay örneği

Belge işaretlemesinin tamamı, düzen CSS ve uygulama davranışı; varlıkları kurulum bloğunu kullanarak yükleyin.

```
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
```

Kod referansı

## KERN Tasarım Sistemi Aracısı Kurulumu

### Uygulamaya Başlangıç Noktası

Derleme adımı veya kullanıcı arayüzü çerçevesi gerekmez. Yazı tipi dizinini koruyun; bu dizindeki CSS göreli WOFF2 dosyalarını çözümler. Kaynaklardaki eksiksiz çalışan örnek ZIP dosyası, tam belgeyi ve önizleme için gereken bağımlılıkları da içerir. ZIP’i çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/kern.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.

```
npm install --save-exact @kern-ux/native@2.8.2
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
```

### Projeniz İçin Bir İstem

```
@kern-ux/native 2.8.2 CSS ve paketlenmiş Fira Sans ile yerel atölye notu örneğini oluşturun. Etiketli bir kern-form-input metin alanı, ek bilgi sunan yerel bir Details açılır bölümü ve üstbilgisi, gövdesi ve altbilgisi etiketli bir kern-dialog bir araya getirin. Dialog’u showModal() ile açın, Keep note düğmesine başlangıçta odak verin, Escape tuşunun metni değiştirmeden işlemi iptal etmesini sağlayın ve notu yalnızca Yes, discard seçildikten sonra temizleyin. Kapatıldığında odağı tetikleyiciye geri verin ve Restore example seçeneğini sunun. Yeni palet belirteçleri uydurmadan data-kern-theme değerini açık ve koyu arasında değiştirin. Özgün uygulamanın genişlik tercihlerini koruyun ve notu yerel tutun; yükleme, sunucu taslağı veya kamu hizmeti iddiası gerekmez.
```

## KERN Tasarım Sistemi Kaynaklar ve kapsam

KERN kodunu kullanan özgün tanıtım. Herhangi bir kamu kurumu kimliği, kalıcı depolama veya erişilebilirlik sertifikasyonu ima edilmez.

- KERN genel bakış Kamu yönetimi bağlamı ve kaynaklara erişim noktaları.

- Tasarım sistemi Temeller, bileşenler ve sistemin yaklaşımı.

- Entegrasyon kılavuzu Belgelenmiş yerel paket ve stil sayfası kurulumu.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## KERN Tasarım Sistemi İlgili Kaynaklar

### Michigan Forty Two

Çalışan bir rol ve araştırma filtresi örneği üzerinden Forty-Two’nun desteklenen WordPress iş akışını, web paletini ve kişi dizini örüntülerini tanıyın.

### Aksel

Aksel v8’in gerçek ax belirteçlerini, yerel tablo yoğunluğunu ve anlamsal üstbilgi yapısını kullanın. Açık ve koyu temaları karşılaştırırken kurgusal takip kayıtlarını sıralayıp seçin.

### NHS tasarım sistemi

Açık bir randevu tercihi akışı oluşturmak için NHS.UK tipografisini, duyarlı aralıkları, gruplandırılmış radyo seçeneklerini ve bağlama uygun ayrıntıları kullanın.


- [Uygulama başvurusu](https://www.kern-ux.de/komponenten/dialog/)
- [Kaynak](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Destekleyici belirtimi okuyun](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)
- [Destekleyici belirtimi okuyun](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Destekleyici belirtimi okuyun](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/)
- [Destekleyici belirtimi okuyun](https://www.kern-ux.de/komponenten/form-inputs/)
- [Destekleyici belirtimi okuyun](https://www.kern-ux.de/komponenten/details/)
- [Destekleyici belirtimi okuyun](https://www.kern-ux.de/komponenten/dialog/)
- [Destekleyici belirtimi okuyun](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/)
- [Kod referansı](https://www.kern-ux.de/komponenten/dialog/)
- [KERN genel bakış Kamu yönetimi bağlamı ve kaynaklara erişim noktaları.](https://www.kern-ux.de/)
- [Tasarım sistemi Temeller, bileşenler ve sistemin yaklaşımı.](https://www.kern-ux.de/design-system/)
- [Entegrasyon kılavuzu Belgelenmiş yerel paket ve stil sayfası kurulumu.](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)