# Nord tasarım sistemi

## Nord tasarım sistemi Arayüz Önizlemesi

Beş oda kapasitesinden birini seçin, başlığı doğrulayın ve yerel bir istek özeti hazırlayın.

## Nord tasarım sistemi Tasarım Başvurusu

Nord tokenları 9.0.4 ve güncel bileşen belgeleri. Aşağıdaki değerler her Nordhealth markasını değil, varsayılan Therapy temasını açıklar. Herkese açık belgeler, Nord’u amaçlanan Nordhealth kapsamı dışında kullanma izni vermez.

### Therapy rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --n-color-accent | #3559c7 | Birincil eylem. |
| --n-color-text | #0c1a3d | Ana içerik. |
| --n-color-text-weak | #36434a | Yardımcı metin. |
| --n-color-background | #fafbfb | Sayfa. |
| --n-color-surface | #ffffff | Panel. |
| --n-color-border | #d8dee4 | Ayırıcı. |
| --n-color-border-strong | #bcc5cc | Denetim kenarlığı. |
| --n-color-text-error | #d24023 | Hata mesajı. |
### Boşluklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --n-space-xs | 4px | Sıkı. |
| --n-space-s | 8px | İlgili. |
| --n-space-m | 16px | Grup. |
| --n-space-l | 24px | Bölüm. |
| --n-space-xl | 36px | Büyük. |
| --n-space-xxl | 72px | Birincil. |
### Tipografi ve şekil

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --n-font-size-m | 0.875rem | Gövde metni. |
| --n-font-size-l | 1rem | Büyük metin. |
| --n-font-size-xl | 1.25rem | Bölüm başlığı. |
| --n-font-size-xxl | 1.5rem | Başlık. |
| --n-line-height | 1.5 | Gövde metni çarpanı. |
| --n-line-height-form | 20px | Denetim satırı. |
| --n-font-weight-heading | 600 | Başlık. |
| --n-border-radius-s | 3px | Denetim. |
| --n-border-radius | 5px | Yüzey. |
### Girdi sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| label / hint / error | Built-in field text | Bağımsız girdi, etiketini kendi sağlar. |
| expand | Boolean, default false | Üst öğenin genişliğini doldurur. |
| size | s / m / l | Varsayılan boyut: orta. |
| readonly versus disabled | Submitted versus excluded | Salt okunur alan odaklanabilir kalır. |
| --n-input-inline-size | 240px | Varsayılan genişlik sabittir; duyarlı formlarda expand kullanın. |
### Select sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Default slot | Native option elements | nord-option öğesi uydurmayın. |
| value | String | Seçimi denetleyin. |
| required | Boolean | novalidate ve uygulama hatalarını kullanın. |
| change | User selection event | component.value değerini okuyun. |
| focus() | Component method | Çağırmadan önce tanımın yüklenmesini bekleyin. |
### Button sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| type | submit by default | Gönderme dışındaki eylemler için button belirtin. |
| variant | default / primary / dashed / plain / danger | Bölüm başına bir birincil eylem kullanın. |
| href | Creates anchor semantics | Gezinme için kullanın. |
| size | s / m / l | Varsayılan boyut: orta. |
| loading | Busy presentation | Duyurulan bir durumla birlikte kullanın. |
## Nord tasarım sistemi Tam 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ı.

## Nord tasarım sistemi Nord, herkese açık referansları bulunan bir iç ürün sistemidir

### Amaçlanan kullanım kapsamını görünür tutun

> Nord’un belgeleri, Nordhealth deneyimleri için oluşturulmuş bir sistemi açıklar. Bileşenleri herkese açık olarak incelenebilir ve yararlı referanslar sunar; ancak bu örnek, markanın veya bileşen terimlerinin ticari amaçlarla sınırsız biçimde yeniden kullanılmasına izin verildiği anlamına gelmez. Buradaki oda adları ve talep iş akışı, özgün örnek verilerdir.

Varsayılan token tablosu Therapy temasını temsil eder. Veterinerlik veya sağlık uygulamaları, mavi vurgunun tüm Nordhealth ürünlerini tanımladığını varsaymak yerine amaçlanan temayı seçmelidir. Tema kararını uygulama düzeyinde tutun.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Therapy rolleri çalışma alanını sakin tutar

### Metin, kenarlık ve yüzey rollerini birbirinden ayırın

Örnekte talep ayrıntıları için ana metin rolü, açıklamalar içinse daha silik rol kullanılır. Beyaz paneller kırık beyaz sayfa yüzeyinin üzerinde yer alır; daha belirgin bir kenarlık, düzenlenebilir alanları tanımlar. Hata metni, arayüzün tamamını kırmızıya boyamak yerine geçersiz başlığın yanında gösterilir. Önizlemede klinik veya hasta bilgisi bulunmaz.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Kompakt metin için yeterli satır aralığı gerekir

### Belgelenen punto boyutunu satır yüksekliğiyle birlikte kullanın

Token, 0.875rem gövde metni boyutunu 1.5 gövde satır yüksekliğiyle eşleştirirken form metni için ayrı bir 20px satır kutusu tanımlar. Bunlar farklı kurallardır: form değerini uzun paragraflara uygulamak, satırları gereksiz yere sıkıştırır. Canlı referansta Nordhealth Sans ailesi token’ı kullanılır; bu çevrimdışı yorumlama, lisanslı bir yazı tipinin sağlandığını iddia etmek yerine mevcut sistem yazı tiplerini kullanır.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Denetimleri uygulama ızgarasının içinde genişletin

### Bileşen, sayfa kırılma noktasını belirlemez

Input başlangıçta 240px inline-size değişkenini kullanır. Mevcut alan sütununu doldurmak için belgelenen yöntem expand kullanmaktır. Örneğimizde oda listesi masaüstünde düzenleyicinin yanında, mobilde ise altında yer alır; bu kırılma noktası Nord token’ı değil, uygulama kararıdır. Bir satır seçildiğinde oda adı, kapasite ve uygunluk etiketi görünür kalır.

Çevrimdışı yorumlamadaki seçili oda listesi, yerel bir radio grubudur. Ayrı olarak sunulan kütüphane örneğinde beş seçenekli bir Select kullanılır. Her ikisi de tek oda seçer; ancak farklı düzenleri gösterir ve çalışma zamanında aynı bileşen uygulamaları olarak sunulmaz.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Etiketlerin ve hata mesajlarının sorumluluğunu tek bir yapıya verin

### Bu form için bağımsız alanlar yeterlidir

Input veya Select, etiketini, ipucunu ve hatasını kendi içinde sunabilir. Yeni Field bileşimi kullanıldığında bu sorumlulukları devralır; dolayısıyla her iki yapıyı birden yinelemek gereksiz yönergeler oluşturur. Bu örnek bağımsız alan yaklaşımını kullanır ve başlık boşlukları kırpıldıktan sonra boşsa tek bir kısa hata gösterir.

Devre dışı alanlar gönderimden çıkarılır; salt okunur alanlar ise ilgili değerin odaklanabilir ve gönderilebilir kalmasını sağlar. Talebe eklenmesi gerekiyorsa, düzenlemeyi önlemek amacıyla oda tanımlayıcısını devre dışı bırakmayın.

- Talep başlığının etiketini görünür tutun.

- İpucunu beklenen içerik için kullanın; etiket yerine kullanmayın.

- Doğrulama mesajını geçersiz denetimle ilişkilendirin.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Select, standart option öğeleri içerir

### Değeri ana bileşenden okuyun

Varsayılan slot, yerel option öğelerini kabul eder. Her odanın sabit bir değeri ve kapasitesini içeren açıklayıcı bir görünür etiketi vardır. change olayı, uygulamaya özeti ana bileşendeki değerden yeniden hesaplamasını bildirir. Bu bileşimde özel bir nord-option etiketi yoktur.

Nord, daha fazla seçenek olduğunda Select’i; birkaç seçeneği doğrudan göstermenin yararlı olduğu durumlarda ise radio düğmelerini önerir. Örnekte beş oda sunulur; çevrimdışı radio düzeni, kapasite farklılıklarını görsel olarak kolayca incelemeyi sağlar.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Button varsayılanları form bileşimini etkiler

### Eylem, bağlantı ve yüklenme anlamlarını açıkça seçin

Nord Button bileşeninin varsayılan type değeri "submit" olur. Bu nedenle form içindeki ikincil bir önizleme veya sıfırlama benzeri eylemin formu göndermemesi gerekiyorsa type değeri açıkça belirtilmelidir. Bileşene href vermek, sunduğu anlamı bağlantı olarak değiştirir; tıklama işleyicisiyle bağlantıyı taklit etmek yerine bu yöntemi gezinme için kullanın.

Yüklenme durumu, yinelenen etkinleştirmeleri önlerken düğmenin odaklanabilir kalmasını sağlar. Döndürücü, yardımcı teknolojilerden gizlidir; bu nedenle uygulama ilerlemeyi sözcüklerle bildirmelidir. disabled değerini gelişigüzel kullanmayın: kullanılamayan bir eylemin odak ve geri bildirim gereksinimleri, çalışmakta olan bir eyleminkinden farklıdır.

Oda talebi örneği eşzamanlı bir taslak hesaplaması yapar, bu nedenle yüklenme aralığı gerekmez. Ana düğmesi başlığı doğrular ve seçilen odayı okur; bu iki alandan biri düzenlendiğinde eski taslak cümlesi kaldırılır. Yukarıdaki alan ve Select bölümleri, bu girdileri hangi Nord API’lerinin yönettiğini açıklar.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Bileşen yöntemlerini çağırmadan önce gerekli CSS öğesini yükleyin

### Prototip yükleme ile üretim paketlemesi farklıdır

Resmî hızlı başlangıç, bileşen modülünü CSS çerçevesiyle birlikte kullanır. İkincisi, paylaşılan token’ları ve temel stilleri sağlar. Paketlenmiş bir uygulama için @nordhealth/css ve @nordhealth/components paketlerini yükleyin, CSS öğesini bir kez içe aktarın ve yalnızca kullandığınız bileşen modüllerini içe aktarın. Paket modülleri, yan etki olarak kendi öğelerini kaydeder.

React 19 bu özel öğeleri doğrudan kullanabilir. Eski @nordhealth/react sarmalayıcısı güncel yönergelerde kullanımdan kaldırılmıştır. Sunucu tarafında oluşturma, bileşen shadow DOM’unu içermez; Next.js içe aktarımları bir istemci sınırı gerektirir. Bu entegrasyon sınırlamalarını, bileşen kitaplığı olmadan etkileşimleri çalıştıran çevrimdışı HTML önizlemesinden ayrı değerlendirin.

1. Bileşen modüllerinden önce çerçeve CSS öğesini yükleyin.

2. Başlatma sırasında focus çağırmadan önce customElements.whenDefined işleminin tamamlanmasını bekleyin.

3. Doğrulama ve yerel durum işleyicilerini ekleyin.

4. Çok sayıda CDN modül isteğine güvenmek yerine üretim bağımlılıklarını paketleyin.

Destekleyici belirtimi okuyun

## Nord tasarım sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Nord Therapy token’larının çevrimdışı HTML/CSS yorumlaması; yerel Web Component entegrasyonu ayrı olarak gösterilir.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Nord room request interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fafbfb;color:#0c1a3d;font:14px/1.5 system-ui,sans-serif}button,input{font:inherit}header{height:52px;background:white;border-bottom:1px solid #d8dee4;padding:0 24px;display:flex;align-items:center;justify-content:space-between}header small{color:#36434a}main{max-width:960px;margin:36px auto;padding:0 24px}h1{font-size:24px;line-height:1.2;margin:0 0 8px}h2{font-size:20px;line-height:1.2;margin:0 0 16px}p{margin:0 0 24px}.muted{color:#36434a}.layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.panel{background:white;border:1px solid #d8dee4;border-radius:5px;padding:24px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-weight:600;margin-bottom:16px}.room{display:flex;gap:12px;padding:12px;border:1px solid #d8dee4;border-radius:3px;margin-bottom:8px;cursor:pointer;align-items:center}.room:has(:checked){border-color:#3559c7;background:#f0f4ff}.room input{accent-color:#3559c7}.room span{flex:1}.room small{display:block;color:#36434a}.room b{font-size:12px;font-weight:500}.diagram{height:120px;background:#f6f8f8;display:grid;place-items:center;margin:-24px -24px 24px;border-radius:5px 5px 0 0;border-bottom:1px solid #d8dee4}.table{height:50px;border:2px solid #bcc5cc;border-radius:5px;background:#fff;position:relative;transition:width .2s ease}.chair{position:absolute;width:12px;height:10px;border:1px solid #bcc5cc;background:white;border-radius:3px;top:-16px}.chair.bottom{top:auto;bottom:-16px}label.field{display:block;font-weight:600;margin:16px 0 8px}#title{width:100%;border:1px solid #bcc5cc;border-radius:3px;height:36px;padding:7px 12px;color:inherit;background:white}#title[aria-invalid=true]{border-color:#d24023}.error{color:#d24023;min-height:20px;font-size:12px;margin:4px 0 12px}button{background:#3559c7;color:white;border:1px solid transparent;box-shadow:0 1px 3px #0c0c0c17;border-radius:3px;padding:7px 16px;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #3559c7;outline-offset:3px}.summary{margin-top:24px;background:#f0f4ff;border:1px solid #c6d4f9;padding:16px;border-radius:5px;overflow-wrap:anywhere}.summary:empty{display:none}.boundary{font-size:12px;color:#36434a;margin-top:24px}#selected{font-weight:600}.facts{display:flex;gap:24px;margin-bottom:24px}.facts strong{font-size:20px;display:block}.facts span{font-size:12px;color:#36434a}@media(max-width:650px){main{margin:24px auto;padding:0 16px}.layout{grid-template-columns:1fr;gap:16px}.panel{padding:16px}.diagram{margin:-16px -16px 16px}.room{padding:8px 12px}header{padding:0 16px}header small{display:none}}</style><header><strong>◈ Workplace</strong><small>Room request workspace</small></header><main><h1>A room for your next conversation</h1><p class="muted">Choose a room and prepare a request draft.</p><div class="layout"><section class="panel"><fieldset><legend>Choose a room</legend><div id="rooms"></div></fieldset></section><section class="panel"><div class="diagram" aria-hidden="true"><div class="table" id="table"></div></div><h2 id="selected">Birch</h2><div class="facts"><div><strong id="capacity">4</strong><span>Seats</span></div><div><strong>Draft</strong><span>Request status</span></div></div><form novalidate><label class="field" for="title">Request title</label><input id="title" type="text" aria-describedby="hint error" placeholder="e.g. Design review"><div id="error" class="error" role="alert"></div><p id="hint" class="muted">Use a non-sensitive meeting title. Availability is not checked in this example.</p><button type="submit">Prepare request</button></form><div class="summary" id="result" role="status"></div></section></div><p class="boundary">Independent HTML interpretation of Nord Therapy tokens. Nord is intended for Nordhealth products. This example creates a local draft only; it does not reserve a room.</p></main><script>const rooms=[['Birch',4],['Cedar',6],['Elm',8],['Maple',10],['Pine',12]],field=document.querySelector('#title'),result=document.querySelector('#result');let selected=0;document.querySelector('#rooms').innerHTML=rooms.map(([name,n],i)=>`<label class="room"><input type="radio" name="room" value="${i}" ${i===0?'checked':''}><span>${name}<small>Meeting room</small></span><b>${n} seats</b></label>`).join('');function update(){let [name,n]=rooms[selected];document.querySelector('#selected').textContent=name;document.querySelector('#capacity').textContent=n;let table=document.querySelector('#table');table.style.width=(n*12+44)+'px';table.innerHTML=Array.from({length:n},(_,i)=>`<i class="chair ${i>=n/2?'bottom':''}" style="left:${12+(i%(n/2))*24}px"></i>`).join('');result.textContent=''}document.querySelectorAll('[name=room]').forEach(input=>input.onchange=()=>{selected=Number(input.value);update()});document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!field.value.trim()){document.querySelector('#error').textContent='Enter a request title.';field.setAttribute('aria-invalid','true');field.focus();return}result.textContent='Draft prepared: '+field.value.trim()+' · '+rooms[selected][0]+' · '+rooms[selected][1]+' seats. No room is reserved.'};field.oninput=()=>{field.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};update();</script></html>
```

Kod referansı

- Bu örnekte oda seçenekleri radio düğmeleri olarak sunulur; yerel Nord örneği, standart option öğeleriyle birlikte Select kullanır. Hiçbiri gerçek bir oda ayırtmaz.

### Açık doğrulama içeren etiketli oda talebi

Bağımsız nord-input ve nord-select, isteğe bağlı Field ailesini kullanmadan etiket sağlar. Gönderim sırasında bileşen değerleri okunur ve girdi error özelliğine atanır.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

Kod referansı

- Beş oda seçeneği, Select’i kullanışlı ve kompakt bir tercih alanı hâline getirir.

- Button varsayılan olarak formu gönderir; bu örnekte type değeri açıkça belirtilir.

- Yöntemler kullanılmadan önce özel öğelerin tanımlanması beklenir. Herhangi bir rezervasyon hizmeti çağrılmaz.

## Nord tasarım sistemi Agent Kurulumu

### Uygulamaya Başlangıç Noktası

Yetkili Nordhealth kullanımı için eksiksiz, herkese açık CDN prototipi. Belgelerde şu anda CSS 5.2.4 ve components 5.3.0 belirtiliyor. Üretim ortamında npm paketleri paketlenmelidir; aşağıdaki çevrimdışı görsel yorumlama bu uzak paketleri yüklemez.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

### Projeniz İçin Bir İstem

```
Nord Therapy anlamsal rollerini etiketli denetimlerle kullanın. Duyarlı bir uygulama düzeninde alanları genişletin. Kırpılmış talep başlığını doğrulayın, seçilen tek odayı koruyun ve yalnızca yerel bir taslak sonucu gösterin. Gerçek Nordhealth uygulamalarında belgelenen paketleri ve tema kullanım izinlerini gözetin.
```

## Nord tasarım sistemi Kaynaklar ve Kapsam

Bağımsız OpenDesign referansı. Nord, kullanım amacının Nordhealth ürünleri olduğunu belirtir. Bu özgün HTML yorumlama bir oda ayırtmaz; marka veya bileşen kullanım hakkı da vermez.

- Token referansı Therapy değerleri, boşluklar ve tipografi.

- Web Components kurulumu Gerekli CSS, içe aktarımlar ve çerçeve sınırları.

- Input Etiketleme, hatalar ve duyarlı boyutlandırma.

- Select Seçenekler ve değer işleme.

- Button Gönderim anlamları ve eylem çeşitleri.

## Nord tasarım sistemi İlgili Kaynaklar

### Oracle Redwood

Eksiksiz ve özgün, düzenlenebilir bir stok inceleme çalışma sayfası üzerinden Oracle JET 19 Redwood’un gerçek paletini, anlamsal rollerini, aralıklarını ve yoğunluk sınırlarını inceleyin.

### Orange OUDS Web

Eksiksiz ve duyarlı bir karşılaştırma incelemesi üzerinden Orange OUDS 1.4’ün gerçek anlamsal belirteçlerini, tema paketlerini ve yerel Offcanvas davranışını inceleyin.

### Palantir Blueprint

Blueprint ile yoğun bir veri çalışma alanı oluşturun: doğrulanmış tür ve amaç belirteçleri, seçilebilir bir veri kümesi tablosu, inceleme paneli ve eksiksiz React kaynak kodu.


- [Uygulama başvurusu](https://nordhealth.design/core/tokens/)
- [Kaynak](https://nordhealth.design/core/tokens/)
- [Kaynak](https://nordhealth.design/components/input/)
- [Kaynak](https://nordhealth.design/components/select/)
- [Kaynak](https://nordhealth.design/components/button/)
- [Destekleyici belirtimi okuyun](https://nordhealth.design/docs/developer/web-components/)
- [Destekleyici belirtimi okuyun](https://nordhealth.design/core/tokens/)
- [Destekleyici belirtimi okuyun](https://nordhealth.design/components/input/)
- [Destekleyici belirtimi okuyun](https://nordhealth.design/components/select/)
- [Destekleyici belirtimi okuyun](https://nordhealth.design/components/button/)
- [Kod referansı](https://nordhealth.design/core/tokens/)
- [Kod referansı](https://nordhealth.design/components/input/)
- [Token referansı Therapy değerleri, boşluklar ve tipografi.](https://nordhealth.design/core/tokens/)
- [Web Components kurulumu Gerekli CSS, içe aktarımlar ve çerçeve sınırları.](https://nordhealth.design/docs/developer/web-components/)
- [Input Etiketleme, hatalar ve duyarlı boyutlandırma.](https://nordhealth.design/components/input/)
- [Select Seçenekler ve değer işleme.](https://nordhealth.design/components/select/)
- [Button Gönderim anlamları ve eylem çeşitleri.](https://nordhealth.design/components/button/)