# Digital Agency tasarım sistemi

## Digital Agency tasarım sistemi Arayüz Önizlemesi

Kurgusal bir durum kaydını görüntülemek için önce geçersiz bir referans, sonra eşleşmeyen bir referans ve son olarak 123456 girin.

## Digital Agency tasarım sistemi Referansı

DADS beta v2.18.0 belgeleri; yerel HTML örnek stilleri 3 Ekim 2026'da incelendi; design-tokens 2.0.1. Belgelerin, örnek deposunun ve belirteç paketinin sürüm geçmişleri birbirinden ayrıdır. Aşağıdaki düzen tercihleri, resmî bileşen değerlerinden açıkça ayrılmıştır.

### Tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Sans family | Noto Sans JP, system fallbacks | Önizleme, herhangi bir yazı tipi indirmeden belgelenmiş yedek yazı tipi yığınını kullanır. |
| Std-17N-170 | 17px / 1.7; weight 400 | Standart okuma metni; belirteç adlandırması boyutu, ağırlığı ve satır yüksekliğini tanımlar. |
| Body / UI baseline | 16px or greater | 14px yalnızca sınırlı yardımcı metin bağlamları için ayrılmıştır. |
| Weight roles | N = 400; B = 700 | Yerel normal ve kalın yazı tipi biçimlerini kullanın. |
### Yerel girdi yapısı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| data-size sm / md / lg | 2.5rem / 3rem / 3.5rem | Denetim yüksekliklerini üç farklı metin boyutuna göre değil, kök yazı tipi boyutuna göre ayarlayın. |
| Input border / radius | 1px / 0.5rem | Kenarlıkta neutral-solid-gray-600 kullanılır; köşe yarıçapı bileşen CSS değeridir. |
| Input padding | 0.75rem 1rem | Blok ve satır içi dolgu; maksimum genişlik %100. |
| Focus | 4px black outline, 2px offset, 2px yellow shadow | Yerel focus-visible stili; kapsayıcı kenarlarında kırpmayı önleyin. |
### Belirteç paketinin renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --color-key-900 | #0017c1 | Varsayılan anahtar takma adı primitive-blue-900 değerine işaret eder. |
| --color-semantic-error-1 | #ec0000 | Takma ad primitive-red-800 değerine işaret eder; bir hata mesajıyla birlikte kullanın. |
| --color-neutral-solid-gray-900 | #1a1a1a | Girdi metni. |
| --color-neutral-solid-gray-600 | #666666 | Varsayılan girdi kenarlığı. |
| --color-primitive-yellow-300 | #ffd43d | Siyah dış çizginin arkasındaki odak gölgesi. |
### Düğmeler ve uygulama aralıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Large minimum | 136 × 56px | Etiketlerin genişlemesine ve satır kaydırmasına izin verin. |
| Medium minimum | 96 × 48px | İkincil eylem için uygundur. |
| Small / extra-small minimum | 80 × 36px / 72 × 28px | Görünür denetim daha kısa olsa bile 44 CSS px'lik bir hedef alan sağlayın. |
| Preview rhythm | 8 / 24 / 64px | Aralık kılavuzu örneklerinden uygulama için seçilmiştir; zorunlu bir DADS ölçeği değildir. |
## Digital Agency 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ı.

## Digital Agency tasarım sistemi Kaynaklar ve kapsam

### HTML kaynak yolunu seçin

> Resmî kaynak dizini HTML/CSS/JavaScript örnekleri, React/Tailwind örnekleri, bir Tailwind eklentisi ve Figma tasarım verileri sunar. Bu örnek, yalın HTML yolunu seçer: girdi ve düğme CSS bileşenleri değiştirilmeden kopyalanırken çevresindeki durum sorgulama ve istemci tarafı doğrulama uygulama koduyla yazılmıştır. Her yerde kullanılabilecek uydurma bir DADS bileşen paketi yoktur.

Önizleme, kurgusal bir belediye işlem sorgulama hizmetinin bağımsız örneğidir. Bir devlet kurumu başlığını yeniden oluşturmaz, kamu veri tabanında sorgulama yapmaz ve hizmet durumunun resmî olduğunu iddia etmez. Makbuz biçimi ve durum kayıtları örnek veridir.

1. İki bileşen stilinden önce design-tokens paketini yükleyin.

2. Belgelenmiş sınıfları ve veri özniteliklerini yerel HTML denetimlerinde koruyun.

3. Hizmete özgü doğrulamayı, durum içeriğini ve odak hareketini uygulama koduna ekleyin.

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Tipografi ve dil

### Metin stili adını okuyun

Std-17N-170, 1,7 birimsiz satır yüksekliğine sahip 17 px normal metni tanımlar. Önizlemede bu okuma ritmi paragraf metnine uygulanır; başlıkta ise 1,5 satır yüksekliğine sahip 32 px kalın metin kullanılır. Belgelenen sans yazı tipi Noto Sans JP’dir; web yazı tipi yüklenmediğinde sistem yazı tipleri yedek olarak kullanılabilir. Bu yerel örnekte özellikle bu yedek yazı tipleri kullanılmıştır.

Japonca ve İngilizce metinler eşit genişlikte yer kaplamaz. Etiketleri denetimlerin üzerinde görünür tutun, başlığın satırlara bölünmesine izin verin ve düğme boyutunu varsayılan karakter sayısına göre belirlemeyin. Çeviri, bileşenin rolü değişmeden daha fazla dikey alan gerektirebilir.

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Anlamsal renk ve odak

### CSS tarafından gerçekten kullanılan takma adları tercih edin

Örnek düğmenin varsayılan rengi --color-key-900 üzerinden tanımlanır. Dağıtılan belirteç stil sayfası bu takma adı blue-900, #0017c1 değerine çözümler. Üzerine gelme ve etkin durum kurallarında rastgele opaklık uygulanmaz; bunun yerine key-1000 ve key-1200 seçilir. Girdi alanının hata kenarlığı --color-semantic-error-1 değerini kullanır.

Denetim klavye odağı aldığında siyah dış çizgi ve sarı gölge görünür kalır. Denetimi kırpma yapan kapsayıcılardan uzağa yerleştirin; overflow-hidden kullanan bir kart, bileşen CSS doğru olsa bile odak halkasını kesebilir. Hata metni ve aria-invalid, kırmızı kenarlığı destekler.

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Boşluk ve duyarlı akış

### Uygulamaya uygun bir boşluk ritmi seçin

DADS boşluk kılavuzu, her arayüz için zorunlu tek bir sıra öngörmek yerine örnekler sunar. Bu yerleşimde ilişkili öğeler arasında 8 px, form bölümleri arasında 24 px ve masaüstü sayfa kenar boşluğu olarak geniş bir 64 px kullanılır. 52rem’lik içerik üst sınırı, DADS belirteci değil, uygulamaya özgü bir tercihtir.

Dar ekranlarda sonuç tanımları alt alta dizilir ve denetimler kullanılabilir alanın tamamını kaplar. 768 px medya sorgusu yalnızca bu örnekte kullanılır. Bu değer evrensel bir DADS kesme noktası olarak sunulmaz; değişikliğin gerekçesi içerik satırlarının kayması ve düğmelerin asgari boyutudur.

```
.lookup { max-width:52rem; margin-inline:auto; padding:64px 24px; }
@media(max-width:767px) { .lookup { padding:24px; } .actions { align-items:stretch; } }
```

Kod referansı

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Girdi yapısı ve hatalar

### Etiketi, ipucunu ve hatayı ayrı tutun

Yerel .dads-input-text sarmalayıcısı metin varsayılanlarını tanımlar. .dads-input-text__input alt öğesi boyutu, kenarlığı, iç boşluğu, köşe yuvarlaklığını ve odak durumlarını yönetir. Eşlik eden etiket, for/id ile açıkça ilişkilendirilmiştir. Kullanıcı beklenen biçimi kaybetmesin diye hata sonrasında da ipucu görünür kalır.

Örnek, tam olarak alt ASCII rakamı kabul eder. Biçime uymayan bir girişte aria-invalid=true ayarlanır, ilişkili hata mesajı gösterilir ve odak girdi alanına geri verilir. Sözdizimi açısından geçerli olup 123456 dışında bir değer girildiğinde ayrı bir eşleşme bulunamadı mesajı gösterilir; bu durum biçim hatası olarak tanımlanmaz. Her iki davranış da yerel örneğe özgü kurallardır.

- Girdi türünü metin olarak tutun: başvuru numarası bir miktar değil, tanımlayıcıdır.

- Sayısal klavye ipucu olarak inputmode=numeric kullanın; sayısal girdi alanlarının artırma ve azaltma düğmelerini kullanmayın.

- Sonraki düzeltmeyi açıklarken girilen değeri koruyun.

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Düğme hiyerarşisi ve durumları

### Bu sorgu için tek bir ana eylem kullanın

Dolu Büyük düğme sorgulamayı başlatır, metin stili düğme ise örneği temizler. Yerel data-type değerleri solid-fill, outline ve text’tir; data-size ise lg, md, sm veya xs değerlerinden birini seçer. Bunlar React özellikleri değil, örnek HTML öznitelikleridir.

Büyük düğmenin asgari genişliği 136 px, yüksekliği 56 px’tir. Etiketi daha fazla alan gerektirirse genişleyebilir. Sağlanan CSS içinde küçük ve ekstra küçük türlerin tıklama alanı büyütülür; komşu hedefleri bu alana sıkıştırmayın. Demo, bu çakışmayı önlemek için daha büyük türleri kullanır.

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Kullanışlı bir durum sonucu

### Yerel durumu incelenebilir hâle getirin

123456 girildiğinde başvuru numarası, gönderim tarihi ve sonraki eylem için tanım listesinden oluşan kurgusal bir makbuz gösterilir. Sorgulamadan sonra başlık odak alır; böylece klavye kullanan kişi yeni sonuca doğrudan ulaşır. Eşleşme bulunamadı durumu da odak alır ve yeniden deneme seçeneği sunar.

Üç aşamalı liste, uygulamaya özgü özgün işaretlemedir. Alındı, inceleniyor ve karar aşamalarını metinle birlikte şekil ve renkle de ayırt eder. Gerçek bir uygulama bu değerleri hizmetinden almalı; yetkisiz, kullanılamayan ve süresi dolmuş kayıtları da ele almalıdır. Önizleme harici bir istek göndermez ve gerçek bir vatandaşa ait kaydı bulduğunu hiçbir zaman ima etmez.

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Örneği entegre edin

### Belirteçleri, stilleri ve davranışı birbirinden ayırın

Belirteç paketi dist/tokens.css dosyasını sunar. HTML örnekleri, Storybook betiklerini içeren bir kaynak deposudur; bu depoyu klonlayarak inceleme ortamı oluşturabilirsiniz. Üretime uyarlamadan önce gerekli bileşen stillerini lisans bilgileriyle birlikte kopyalayın ve kaynak revizyonunu kaydedin.

Bu sayfada belirteç paketi 2.0.1 sürümüne sabitlenmiştir ve HTML stilleri tarihli bir kaynak anlık görüntüsüdür. Bağımsız demo yerel dosyaları yüklediğinden, doğrulanmış görüntüsü canlı bir CDN’ye bağlı değildir. Storybook kurulum komutu, resmî depoya giriş için sağlanmıştır; bu önizleme için temiz bir bağımlılık kurulumu yapılmamıştır.

Destekleyici belirtimi okuyun

## Digital Agency tasarım sistemi Bileşen Örnekleri

### Etiketli bir başvuru numarası alanı

Kalıcı ipucu ve ilişkili hata mesajıyla yerel DADS girdi sınıfları.

```
<div class="dads-input-text">
  <label for="reference">Reference number (required)</label>
  <p id="reference-hint">Use the 6 digits on your example receipt.</p>
  <input class="dads-input-text__input" data-size="lg"
    id="reference" inputmode="numeric" autocomplete="off"
    aria-describedby="reference-hint reference-error" aria-invalid="true">
  <span class="dads-input-text__error-text" id="reference-error">
    Enter 6 digits, for example 123456.
  </span>
</div>
```

Kod referansı

- Geçerli düzeltmeden sonra aria-invalid özniteliğini kaldırın ve hatayı gizleyin.

- Başvuru numarası doğrulaması uygulama mantığıdır.

### Birincil sorgulama ve sıfırlama eylemleri

Yerel düğme türlerini ve HTML eylem türlerini kullanın.

```
<button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">
  Show example status
</button>
<button class="dads-button" data-type="text" data-size="md" type="reset">
  Clear reference
</button>
```

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>DADS procedure receipt example</title><link rel="stylesheet" href="vendor/dads-2026-10-03/tokens.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/input-text.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/button.css"><style>
*{box-sizing:border-box}body{margin:0;color:var(--color-neutral-solid-gray-900);font:400 17px/1.7 var(--font-family-sans);background:#fff}.lookup{max-width:52rem;padding:64px 24px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.08em;border-bottom:1px solid #b3b3b3;padding-bottom:16px}h1{font-size:32px;line-height:1.5;margin:24px 0}h2{font-size:24px;line-height:1.5}p{margin:8px 0 24px}.field{margin:32px 0}label{font-weight:700;display:block}.dads-input-text__input{width:22rem}#reference-hint{margin:8px 0}.actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin:24px 0}.result{border-top:4px solid var(--color-key-900);background:#f5f5f5;padding:24px;margin-top:32px}.result:focus{outline:3px solid #111;outline-offset:4px}dl{display:grid;grid-template-columns:10rem 1fr;gap:16px}dt{font-weight:700}dd{margin:0;overflow-wrap:anywhere}ol{padding-left:24px}li{padding:8px}li.current{font-weight:700;color:var(--color-key-900)}small{display:block;font-size:14px;margin-top:32px;color:#555}[hidden]{display:none!important}@media(max-width:767px){.lookup{padding:24px}h1{font-size:28px}.actions{align-items:stretch;flex-direction:column}.actions button{width:100%}dl{grid-template-columns:1fr;gap:4px}dd{margin-bottom:16px}}
</style><main class="lookup"><div class="eyebrow">SERVICE PATTERN · DADS HTML</div><h1>Check a procedure receipt</h1><p>Use the reference from your receipt to view the next step. This is a fictional local example.</p><form id="lookup-form" novalidate><div class="dads-input-text field"><label for="reference">Reference number (required)</label><p id="reference-hint">Enter 6 digits. Try <strong>123456</strong> for the example record.</p><input id="reference" class="dads-input-text__input" data-size="lg" inputmode="numeric" autocomplete="off" aria-describedby="reference-hint reference-error"><span id="reference-error" class="dads-input-text__error-text" hidden>Enter 6 digits, for example 123456.</span></div><div class="actions"><button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">Show example status</button><button class="dads-button" data-type="text" data-size="md" type="reset">Clear reference</button></div></form><section class="result" id="missing" tabindex="-1" hidden><h2>No matching example</h2><p>This reference has the correct format, but is not in the local example data. Try 123456.</p></section><section class="result" id="found" tabindex="-1" hidden><h2>Receipt 123456</h2><dl><dt>Procedure</dt><dd>Community room request</dd><dt>Submitted</dt><dd>1 October 2026 — fictional date</dd><dt>Next action</dt><dd>Wait for the example review. No documents are currently requested.</dd></dl><ol aria-label="Procedure progress"><li>Received</li><li class="current" aria-current="step">Checking the request — current step</li><li>Decision — not started</li></ol></section><small>Independent OpenDesign demonstration. Native DADS component CSS; system font fallback. No information is sent or stored.</small></main><script>
const f=document.querySelector('form'),i=document.querySelector('input'),e=document.querySelector('#reference-error'),found=document.querySelector('#found'),missing=document.querySelector('#missing');f.addEventListener('submit',ev=>{ev.preventDefault();found.hidden=missing.hidden=true;const valid=/^[0-9]{6}$/.test(i.value.trim());e.hidden=valid;i.setAttribute('aria-invalid',String(!valid));if(!valid){i.focus();return}const target=i.value.trim()==='123456'?found:missing;target.hidden=false;target.focus()});f.addEventListener('reset',()=>{found.hidden=missing.hidden=e.hidden=true;i.removeAttribute('aria-invalid');i.focus()});
</script></html>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## Digital Agency tasarım sistemi Agent Kurulumu

### Uygulamaya Başlangıç Noktası

Resmî örnek depo iş akışı ve doğrulanmış belirteç içe aktarma yolu. Bu önizleme yerel olarak kopyalanmış CSS ile çalışır; React veya arka uç gerektirmez. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, önizlemenin tam bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/japan-dads.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
# Official HTML samples are a source repository, not a published component SDK.
git clone https://github.com/digital-go-jp/design-system-example-components-html.git
cd design-system-example-components-html
npm install
npm run storybook
# For the standalone composition, copy these component styles into your app:
# src/components/input-text/input-text.css
# src/components/button/button.css
# Install the independently versioned token package:
npm install @digital-go-jp/design-tokens@2.0.1
# In a CSS-aware bundler entry:
# import '@digital-go-jp/design-tokens/dist/tokens.css';
# import './input-text.css';
# import './button.css';
```

### Projeniz İçin Bir İstem

```
DADS HTML input-text ve düğme stilleriyle, design-tokens 2.0.1 kullanarak kurgusal bir kamu hizmeti makbuz sorgulama arayüzü oluşturun. Görünür etiketi, biçim ipucunu, aria-describedby özniteliğini ve geçersiz durumunu koruyun. Paragraf metninde Std-17N-170 ritmini, birincil eylemde ise Büyük boyutu kullanın. Biçim hatası, eşleşme bulunamadı ve kayıt bulundu durumlarını ayrı ayrı gösterin. Girilen metni koruyun, yeni durum başlıklarına odak verin, gerçek kişisel verilerden ve resmî kurum kimliği işaretlerinden kaçının. 52rem içerik genişliğini ve 8/24/64 px boşlukları uygulamaya özgü tercihler olarak ele alın.
```

## Digital Agency tasarım sistemi Kaynaklar ve Kapsam

Resmî örnek CSS ve belirteçler kullanılarak hazırlanmış bağımsız bir eğitim çalışmasıdır. Devlet onayı, canlı sorgulama veya kopyalanmış kurum kimliği içermez. Yazı tipi, yerel olarak kullanılabilen sistem sans yazı tiplerine geri düşer. Uygulama yerleşimi ve kayıt verileri resmî DADS belirtimleri değildir.

- Resmî sistem Sistemin kapsamı, kılavuzu ve güncel sürüm bilgileri.

- Temel ilkeler Tipografi, renk, yerleşim ve diğer görsel temeller.

- Uygulama kaynakları Resmî tasarım verileri, kod örnekleri ve Markdown belgeleri.

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

## Digital Agency tasarım sistemi İlgili Kaynaklar

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

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


- [Uygulama başvurusu](https://github.com/digital-go-jp/design-system-example-components-html)
- [Kaynak](https://design.digital.go.jp/dads/foundations/typography/)
- [Kaynak](https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/input-text/input-text.css)
- [Kaynak](https://github.com/digital-go-jp/design-tokens)
- [Kaynak](https://design.digital.go.jp/dads/components/button/)
- [Destekleyici belirtimi okuyun](https://design.digital.go.jp/dads/resources/)
- [Destekleyici belirtimi okuyun](https://design.digital.go.jp/dads/foundations/typography/)
- [Destekleyici belirtimi okuyun](https://github.com/digital-go-jp/design-tokens)
- [Kod referansı](https://design.digital.go.jp/dads/foundations/spacing/)
- [Destekleyici belirtimi okuyun](https://design.digital.go.jp/dads/foundations/spacing/)
- [Destekleyici belirtimi okuyun](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text)
- [Destekleyici belirtimi okuyun](https://design.digital.go.jp/dads/components/button/)
- [Destekleyici belirtimi okuyun](https://design.digital.go.jp/dads/components/description-list/)
- [Destekleyici belirtimi okuyun](https://github.com/digital-go-jp/design-system-example-components-html)
- [Kod referansı](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text)
- [Kod referansı](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/button)
- [Kod referansı](https://github.com/digital-go-jp/design-system-example-components-html)
- [Resmî sistem Sistemin kapsamı, kılavuzu ve güncel sürüm bilgileri.](https://design.digital.go.jp/dads/)
- [Temel ilkeler Tipografi, renk, yerleşim ve diğer görsel temeller.](https://design.digital.go.jp/dads/foundations/)
- [Uygulama kaynakları Resmî tasarım verileri, kod örnekleri ve Markdown belgeleri.](https://design.digital.go.jp/dads/resources/)