# Helsinki Tasarım Sistemi

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

Çok az konu seçmeyi deneyin; hata bağlantısını izleyin, seçiminizi düzeltin ve incelemeden geri dönün.

## Helsinki Tasarım Sistemi Tasarım Referansı

hds-core5.2.2 paketi CSS ve resmî form yönergeleri. Yerel stiller; Arial yedeği; özgün asgari seçim kuralı.

### Tipografi belirteçleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --font-default | HelsinkiGroteskPro, Arial, sans-serif | Telifli Helsinki yazı tipleri Core paketinde bulunmaz; demoda yerel Arial yedeği kullanılır. |
| --fontsize-body-s/m/l/xl | 14 /16 /18 /20px | Normal kök yazı tipi boyutunda; alan başına keyfî boyutlar yerine bir rol seçin. |
| --fontsize-heading-xxl/xl | 64 /48px | En büyük başlıklar. |
| --fontsize-heading-xl-mobile | 40px | Açıkça tanımlanmış belirteç; önizleme, uygulama tercihi olarak 576px'te değişir. |
| --fontsize-heading-l/m/s | 32 /24 /20px | İkincil başlıklar. |
| --lineheight-s/m/l/xl | 1 /1.2 /1.5 /1.75 | Piksel cinsinden yükseklikler değil, çarpanlar. |
### Bileşen ve düzen aralıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Component scale | 2,4,8,12,16,24,32,40,48,56,64,72px | spacing-4-xs ile spacing-5-xl arası. |
| Layout scale | 16,24,32,48,64,96,128px | spacing-layout-2-xs ile spacing-layout-2-xl arası. |
| Breakpoints | 320,576,768,992,1248,1440px | xs ile xxl arası; tanımlı belirteç değerleri kendi başlarına medya sorgusu oluşturmaz. |
| Container widths | 288,544,720,944,1200px | xs ile xl arası referans genişlikleri. |
| Checkbox geometry | 24px size;2px border;3px focus outline | Gerçek Core5.2.2 CSS. |
| Button minimum | 56px; square corners | spacing-s/l değerlerinden türetilen iç boşlukla 2px kenarlık. |
### Anlamsal renkler ve palet renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Bus | #0000bf | Varsayılan onay kutusu seçimi ve birincil düğme teması. |
| Coat of arms / focus | #0072c6 | Belirgin şehir mavisi ve odak rolü. |
| Copper | #00d7a7 | Vurgu paleti; demo başlık şeridi. |
| Error / light | #b01038 /#f6e2e6 | Doğrulama geri bildirimi; dekoratif Brick ile birbirinin yerine kullanılamaz. |
| Success / light | #007a64 /#e2f5f3 | Onaylanmış sonuç rolü. |
| Info / alert | #0062b9 /#ffda07 | Bilgi ve dikkat rolleri. |
| Text / secondary | #1a1a1a /#595959 | black-90 ve black-60. |
### Form yapısı ve hataları düzeltme

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Selection group | fieldset + legend | Legend seçimi açıklar; etiketler seçenekleri tanımlar. |
| Vertical items | hds-selection-group__items--vertical | Uzun seçenekleri tek bir yatay sıraya zorlamayın. |
| Error summary | Notification error variant with linked error list | Form başlığının altına yerleştirin; gönderim başarısız olduğunda odağı başlığa taşıyın. |
| Inline error | hds-selection-group__error-text | Düzeltme sırasında yardımcı yönergeleri görünür tutun. |
| Application rule | At least two topics | HDS onay kutusu varsayılanı değil, özgün senaryo doğrulaması. |
## Helsinki 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ı.

## Helsinki Tasarım Sistemi Core ve React sınırları

### Gerçekte çalıştırdığınız uygulamayı seçin

> HDS; Core CSS, React bileşenleri ve tasarım belirteçleri sunar. Bu örnek, örnek için indirilip incelenen hds-core5.2.2 sürümünü sabitler. Depo sürüm numaraları tek bir paketin sürümünden farklı olabilir; bu nedenle daha yeni bir depo etiketi, bu örneğin o sürümle çalıştığını göstermez.

Core, temel değişkenleri ve bileşenlere ait ayrı stilleri sağlar. Burada kullanılan form uygulama durumunu sağlamaz. Seçim, doğrulama, inceleme ve değiştirme mantığı; yerel HTML girişleri ve belgelenmiş HDS form örüntüsü üzerine kurulmuş özgün bir JavaScript uygulamasıdır.

Destekleyici belirtimi okuyun

## Helsinki Tasarım Sistemi Tipografisi ve yazı tipi sınırı

### Yerel yedek yazı tipini şeffaf biçimde kullanın

Yazı tipi değişkeni önce HelsinkiGroteskPro'yu, ardından Arial ve sans-serif'i belirtir. Core README dosyası, telif hakları nedeniyle Helsinki yazı tipi dosyalarının pakete dahil olmadığını açıkça belirtir. Önizleme, kısıtlı yazı tiplerini indirmek veya markaya özgü görünümü birebir sunduğunu sessizce iddia etmek yerine yedek yazı tipini kullanır.

Temel gövde belirteci, satır yüksekliği 1.5 olan 16px'tir. heading-xl 48px, mobil belirteç ise 40px'tir; önizleme bu ikisi arasında 576px'te geçiş yapar. Bunlar adlandırılmış değerlerdir; ancak bir kesme noktasını içeren CSS değişkeni, duyarlı davranışı kendiliğinden oluşturmaz. Açık medya kuralı, uygulama bileşimine aittir.

Destekleyici belirtimi okuyun

## Helsinki Tasarım Sistemi İki aralık sistemi

### Bileşen aralıklarını sayfa ritminden ayırın

HDS, bileşen aralıkları dizisini daha geniş bir düzen aralıkları dizisinden ayırır. İlk dizi, 72px'e kadar büyümeden önce 2, 4, 8, 12, 16 ve 24px değerlerini içerir. Düzen aralıkları 128px'e kadar çıkar. spacing-layout-xl geçerli bir değişken olsa da bitişik onay kutuları arasında kullanılması grubu gereğinden fazla açar.

Onay kutusu bileşeni 24px'lik bir kontrol, 2px'lik bir kenarlık ve 3px'lik bir odak çizgisi tanımlar. Düğmenin minimum boyutu 56px'tir ve köşeleri karedir. Önizleme bu yerel şekilleri korurken form, yayımlanmış 720px referans genişliğiyle sınırlı bir uygulama kapsayıcısında yer alır.

Destekleyici belirtimi okuyun

## Helsinki Tasarım Sistemi Formdaki renk rolleri

### Palet adlarını geri bildirim rolleriyle karıştırmayın

Varsayılan etkileşim teması Bus mavisini, odak çizgisi ise Coat of arms mavisini kullanır. Hata geri bildirimi için ayrı bir böğürtlen tonu ve soluk hata yüzeyi kullanılır. Copper gibi bir palet vurgusu başlığı destekleyebilir; ancak daha belirgin göründüğü için hata rolünün yerine kullanılmamalıdır.

Seçim grubunun satır içi hata göstergesi metin, zıt renkli bir sol kenarlık ve simge stili kullanır. Yalnızca kırmızı renge dayanmaz. Hata özetindeki bağlantılar, kullanıcıların alana dönüş yolunu tanıyabilmesi için alışıldık etkileşim rengini kullanır.

Destekleyici belirtimi okuyun

## Helsinki Tasarım Sistemi Onay kutusu grubu anatomisi

### Bir grupta tek bir soru ve birkaç yanıt bulunur

Yerel yapı; fieldset, legend, öğe kapsayıcısı ve ayrı onay kutusu sarmalayıcılarından oluşur. Stil sayfası görsel durumlar için bu ilişkiden yararlandığından her giriş, hemen öncesinde gelen etiketle eşleşir. Legend, seçim görevini açıklar; her etiket ise kullanılabilir konulardan birini adlandırır.

Demo, özgün bir iş kuralı olarak en az iki konu seçilmesini ister. Birden fazla seçenek seçili kalabildiği için onay kutuları uygundur. Radyo düğmesi grubu, birbirini dışlayan bir seçimi ifade eder ve bu görevle çelişir. Fieldset ipucu, doğrulama öncesinde ve sonrasında görünür kalır.

```
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
  <legend class="hds-selection-group__legend">Topics for your afternoon</legend>
  <p id="topics-hint">Choose at least two topics.</p>
  <div class="hds-selection-group__items hds-selection-group__items--vertical">
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
      <label class="hds-checkbox__label" for="repair">Repair and reuse</label>
    </div>
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
      <label class="hds-checkbox__label" for="garden">Urban gardening</label>
    </div>
  </div>
</fieldset>
```

Kod referansı

Destekleyici belirtimi okuyun

## Helsinki Tasarım Sistemi Bağlantılı hatalar ve düzeltme

### Önce soruna odaklanın, sonra girilen bilgileri koruyun

HDS, form gönderimi başarısız olduktan sonra form başlığının altına hata özeti yerleştirilmesini önerir. Özetteki bağlantılar hatalı kontrollere gider ve odak özet başlığına taşınır. Demo bu sırayı izler: hiç konu seçilmediğinde veya bir konu seçildiğinde inceleme özeti ve satır içi hata mesajı görünür; bağlantı, odağı ilk onay kutusuna taşır.

İlk denemeden sonra her seçim değişikliğinde asgari seçim sayısı yeniden doğrulanır. İki konu seçildiğinde, seçili girişler temizlenmeden her iki hata gösterimi de kaybolur. Sonraki başarısız denemede odak özet başlığına döner. Kural, inceleme sırasında yeniden denetlenir; gerçek bir hizmette istemci tarafı geri bildirimi sunucu doğrulamasının yerini tutmaz.

1. Hiç konu seçmeden incelemeyi başlatın ve özetin odak aldığını doğrulayın.

2. Bağlantıyı izleyip iki konu seçin; hatanın giderildiğini doğrulayın.

3. Yerel incelemeyi açın, konu değiştirmek için geri dönün ve iki seçimin de korunduğunu doğrulayın.

Destekleyici belirtimi okuyun

## Helsinki Tasarım Sistemi Varlıklar ve eksiksiz örnek

### Temel stilleri ve seçili bileşenleri yükleyin

Core paketi base.css dosyasını bileşen stillerinden ayırır. Yalnızca base dosyasını içe aktarmak değişkenleri ve tipografiyi sağlar; ancak onay kutusu veya bildirim yapısını sağlamaz. Kurulum, bu örnekte kullanılan dosyaları açıkça belirtir ve tüm bileşenleri içeren pakete kıyasla varlık kümesini daha küçük tutar.

Eksiksiz örnek, uygulama doğrulamasını ve sıfırlamayı içerir. Son durumu, hiçbir şey kaydedilmediği veya gönderilmediği için yerel inceleme olarak adlandırır. Seçimleri temizlemek; seçimleri ve doğrulama geçmişini sıfırlayan, ardından odağı ilk girişe taşıyan bilinçli bir eylemdir. Olağan bir alan hatası bu işlemi tetiklemez.

- base.css renkleri, aralıkları, tipografiyi ve referans ölçülerini sağlar.

- checkbox ve selection-group stilleri, gruplandırılmış kontrolleri ve satır içi geri bildirimi sağlar.

- notification ve button stilleri, hata özeti yüzeyini ve eylemleri sağlar.

Destekleyici belirtimi okuyun

## Helsinki Tasarım Sistemi Bu örnek neyi gösteriyor

### Yanlış hizmet iddiasında bulunmadan uygulama ayrıntıları

Önizleme; 1440, 768 ve 390px genişliklerde gerçek HDS bileşen stillerini, klavye odağını, düzeltmeyi ve verilerin korunmasını gösterir. Kapsamlı bir erişilebilirlik denetimi yapıldığını iddia etmez. Gerçek bir çok dilli şehir hizmeti ayrıca yerelleştirilmiş etiketlere, uygun dil üst verilerine, sunucu tarafı kurallara ve hizmet arka ucundan onaylanmış bir yanıta ihtiyaç duyar.

Kaynak kodu MIT lisanslıdır; ancak özel şehir yazı tipinin ayrı bir hak sınırı vardır. Bu bağımsız öğrenme örneği, kurgusal program konuları kullanır ve resmî Helsinki kimliği taşımaz. Görünüm ve yerel durum, gerçek bir etkinlik kaydıyla asla karıştırılmamalıdır.

Destekleyici belirtimi okuyun

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

### Yerel, gruplandırılmış onay kutusu yapısı

Fieldset ve legend soruyu belirler; girişler ve etiketler birden fazla yanıtı ifade eder.

```
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
  <legend class="hds-selection-group__legend">Topics for your afternoon</legend>
  <p id="topics-hint">Choose at least two topics.</p>
  <div class="hds-selection-group__items hds-selection-group__items--vertical">
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
      <label class="hds-checkbox__label" for="repair">Repair and reuse</label>
    </div>
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
      <label class="hds-checkbox__label" for="garden">Urban gardening</label>
    </div>
  </div>
</fieldset>
```

Kod referansı

### Hatalara bağlantılı, eksiksiz seçim akışı

Hata özeti odağı, bağlantılı düzeltme, inceleme, değiştirme ve seçimleri temizleme.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Plan a skills afternoon</title><link rel="stylesheet" href="vendor/hds-core-5.2.2/base.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/checkbox.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/selection-group.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/notification.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/button.css"><style>*{box-sizing:border-box}body{margin:0;padding:var(--spacing-layout-s) var(--spacing-s);font-family:var(--font-default);color:var(--color-black-90)}main{max-width:720px;margin:auto}h1{margin-top:8px}header{border-top:8px solid var(--color-copper);padding-top:var(--spacing-m)}.hds-selection-group{margin:24px 0}.hds-notification{margin:24px 0}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}footer{font-size:14px;line-height:1.5;margin-top:32px;border-top:1px solid var(--color-black-20);padding-top:16px}#review{background:var(--color-silver-light);padding:24px;margin-top:24px}[hidden]{display:none!important}@media(max-width:575px){.heading-xl{font-size:var(--fontsize-heading-xl-mobile)}}button{max-width:100%}</style><main class="text-body"><header><small>COMMUNITY SKILLS · LOCAL PLAN</small><h1 class="heading-xl">Plan a skills afternoon</h1><p>Select at least two topics for an example programme. Nothing is registered or sent.</p></header><form id="form" novalidate><div id="summary" class="hds-notification hds-notification--error" hidden><div class="hds-notification__content"><h2 id="summary-heading" class="hds-notification__label" tabindex="-1">Check your topic selection</h2><div class="hds-notification__body"><ul><li><a href="#repair" id="error-link">Choose at least two topics</a></li></ul></div></div></div><fieldset class="hds-selection-group" aria-describedby="hint field-error"><legend class="hds-selection-group__legend">Topics for your afternoon</legend><p id="hint">Choose two or more. You can change your selection before reviewing the plan.</p><div class="hds-selection-group__items hds-selection-group__items--vertical"><div class="hds-checkbox"><input id="repair" type="checkbox" class="hds-checkbox__input" value="Repair and reuse"><label class="hds-checkbox__label" for="repair">Repair and reuse</label></div><div class="hds-checkbox"><input id="digital" type="checkbox" class="hds-checkbox__input" value="Everyday digital skills"><label class="hds-checkbox__label" for="digital">Everyday digital skills</label></div><div class="hds-checkbox"><input id="garden" type="checkbox" class="hds-checkbox__input" value="Urban gardening"><label class="hds-checkbox__label" for="garden">Urban gardening</label></div></div><div id="field-error" class="hds-selection-group__error-text" hidden>Choose at least two topics.</div></fieldset><p id="count" role="status">0 topics selected.</p><div class="actions"><button class="hds-button hds-button--primary" type="submit">Review local plan</button><button id="reset" class="hds-button hds-button--secondary" type="button">Clear selection</button></div></form><section id="review" hidden tabindex="-1"><h2 class="heading-m">Your selected topics</h2><ul id="selected"></ul><p>This is a local review, not a booking confirmation.</p><button id="change" class="hds-button hds-button--secondary">Change topics</button></section><footer>Native HDS Core5.2.2 styles with Arial fallback. Original selection rule and local review. No Helsinki branding, registration or backend.</footer></main><script>let attempted=false;const boxes=[...document.querySelectorAll('input[type=checkbox]')];const values=()=>boxes.filter(x=>x.checked);function validate(focus=false){const n=values().length;document.querySelector('#count').textContent=n+' topics selected.';const bad=attempted&&n<2;document.querySelector('#summary').hidden=!bad;document.querySelector('#field-error').hidden=!bad;boxes.forEach(x=>{if(bad)x.setAttribute('aria-invalid','true');else x.removeAttribute('aria-invalid')});if(bad&&focus)document.querySelector('#summary-heading').focus();return !bad}boxes.forEach(x=>x.onchange=()=>validate());document.querySelector('#error-link').onclick=e=>{e.preventDefault();boxes[0].focus()};document.querySelector('#form').onsubmit=e=>{e.preventDefault();attempted=true;if(!validate(true))return;const list=document.querySelector('#selected');list.replaceChildren();values().forEach(x=>{const li=document.createElement('li');li.textContent=x.value;list.append(li)});document.querySelector('#form').hidden=true;document.querySelector('#review').hidden=false;document.querySelector('#review').focus()};document.querySelector('#change').onclick=()=>{document.querySelector('#form').hidden=false;document.querySelector('#review').hidden=true;boxes[0].focus()};document.querySelector('#reset').onclick=()=>{boxes.forEach(x=>x.checked=false);attempted=false;validate();boxes[0].focus()};</script></html>
```

Kod referansı

## Helsinki Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Core varlıklarının tam yolları. Doğrulama ve incelemeyi uygulama kodu yönetir; HelsinkiGroteskPro pakete dahil değildir. Kaynaklardaki çalışan örneğin eksiksiz ZIP dosyası, önizlemenin tam bağımlılıklarını ve eksiksiz belgeyi de içerir. Dosyaları çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/helsinki.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install hds-core@5.2.2
# CSS imports in a bundler:
# import 'hds-core/lib/base.css';
# import 'hds-core/lib/components/checkbox/checkbox.css';
# import 'hds-core/lib/components/selection-group/selection-group.css';
# import 'hds-core/lib/components/notification/notification.css';
# import 'hds-core/lib/components/button/button.css';
# In plain HTML, copy these files into public assets and link base.css first.
# HelsinkiGroteskPro is not bundled; the native font stack falls back to Arial.
```

### Projeniz İçin Bir İstem

```
HDS Core5.2.2 temel ve seçili bileşen CSS sürümünü kullanın. İlişkili onay kutularını fieldset/legend ile gruplandırın; etiketleri ve ipuçlarını koruyun, anlamsal hata belirteçlerini kullanın. İnceleme başarısız olduğunda form başlığının altına bağlantılı hataları gösterin ve odağı özet başlığına taşıyın. Düzeltme sonrasında yeniden doğrulayın, seçili değerleri koruyun ve yerel incelemeyi sunucu tarafından onaylanmış gönderimden ayırın.
```

## Helsinki Tasarım Sistemi Kaynaklar ve Kapsam

Bağımsız OpenDesign örneği. Helsinki yazı tipi varlığı veya hizmet kimliği içermez; kayıt ya da arka uç sonucu yoktur.

- Core kurulumu Temel/bileşen CSS ayrımı ve yazı tipi telif sınırı.

- Form oluşturma Gruplandırma, kontrol seçimi ve odak sırası.

- Doğrulama örüntüsü Özetin yerleşimi, bağlantılar, düzeltme ve arka uç sınırı.

- Tasarım belirteçleri Tipografi, aralıklar ve renk rolleri.

- Resmî depo Paket mimarisi ve MIT lisansı.

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

## Helsinki Tasarım Sistemi İlgili Kaynaklar

### Rivet

Rivet’ın gerçek tasarım belirteci ölçeği, HTML bileşen anatomisi ve yerel klavye etkileşimleriyle üniversite sayfaları oluşturun. Erişilebilir ziyaret bilgisi sekmelerine sahip kompakt bir atölye ayrıntı sayfasını inceleyin.

### Digital Agency tasarım sistemi

DADS metin rolleri, anlamsal tasarım belirteçleri ve yerel HTML bileşen anatomisiyle okunaklı Japonca kamu hizmeti arayüzleri oluşturun. Biçim hatası, eşleşme bulunamaması sonucu ve incelenebilir bir durum kaydı içeren çalışan bir makbuz sorgulamasını deneyin.

### KERN

Doğrulanmış tipografi, anlamsal temalar, açılır-kapanır öğeler ve geri alınabilir bir onay akışıyla yerel bir KERN arayüzü oluşturun.


- [Uygulama başvurusu](https://hds.hel.fi/patterns/forms/form-validation/)
- [Kaynak](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens)
- [Kaynak](https://hds.hel.fi/patterns/forms/form-building/)
- [Destekleyici belirtimi okuyun](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md)
- [Destekleyici belirtimi okuyun](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens)
- [Kod referansı](https://hds.hel.fi/patterns/forms/form-building/)
- [Destekleyici belirtimi okuyun](https://hds.hel.fi/patterns/forms/form-building/)
- [Destekleyici belirtimi okuyun](https://hds.hel.fi/patterns/forms/form-validation/)
- [Destekleyici belirtimi okuyun](https://github.com/City-of-Helsinki/helsinki-design-system)
- [Kod referansı](https://hds.hel.fi/patterns/forms/form-validation/)
- [Core kurulumu Temel/bileşen CSS ayrımı ve yazı tipi telif sınırı.](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md)
- [Form oluşturma Gruplandırma, kontrol seçimi ve odak sırası.](https://hds.hel.fi/patterns/forms/form-building/)
- [Doğrulama örüntüsü Özetin yerleşimi, bağlantılar, düzeltme ve arka uç sınırı.](https://hds.hel.fi/patterns/forms/form-validation/)
- [Tasarım belirteçleri Tipografi, aralıklar ve renk rolleri.](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens)
- [Resmî depo Paket mimarisi ve MIT lisansı.](https://github.com/City-of-Helsinki/helsinki-design-system)