Digital Agency tasarım sistemi.

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

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

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

<!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>