# GOV.UK tasarım sistemi

## GOV.UK tasarım sistemi Arayüz Önizlemesi

Boş alanlar gönderin, bağlantılı hataları izleyin, yanıtları düzeltin ve inceleme ekranından bir değeri düzenleyin. Hiçbir bilgi sayfadan ayrılmaz.

## GOV.UK tasarım sistemi Tasarım Referansı

GOV.UK Frontend 6.5.1 ve güncel v6 belgeleri, 3 Ekim 2026'da kontrol edildi. Onaltılık değerler bir referans anlık görüntüsüdür; üretimde adlandırılmış Sass işlevlerini tercih edin. Önizleme, alternatif yazı tipi ve bağımsız kimlikle resmî CSS ve JavaScript dosyalarının yerel kopyalarını yükler.

### Yazı tipi ve duyarlı tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| govuk-heading-xl | 32px / 35px → 48px / 50px | Tablet eşiğinin altında ve üstünde yazı tipi boyutu / satır yüksekliği; sayfa başlığı. |
| govuk-heading-l | 27px / 30px → 36px / 40px | Tablet eşiğinin altında ve üstünde yazı tipi boyutu / satır yüksekliği; soru başlığı. |
| govuk-heading-m | 21px / 25px → 24px / 30px | Tablet eşiğinin altında ve üstünde yazı tipi boyutu / satır yüksekliği; bölüm başlığı. |
| govuk-body-l | 21px / 25px → 24px / 30px | Tablet eşiğinin altında ve üstünde yazı tipi boyutu / satır yüksekliği; giriş metni. |
| govuk-body | 19px / 25px → 19px / 25px | Tablet eşiğinin altında ve üstünde yazı tipi boyutu / satır yüksekliği; sıradan metin. |
| govuk-body-s | 16px / 20px → 16px / 20px | Tablet eşiğinin altında ve üstünde yazı tipi boyutu / satır yüksekliği; destekleyici metin. |
### Yazı tipi uygunluğu

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| GDS Transport | service.gov.uk services | Resmî yazı tipi, bu alt alan adındaki hizmetler için gereklidir. |
| Independent preview | Helvetica Neue, Helvetica, Arial, sans-serif | Markasız Frontend yönergelerinin önerdiği alternatif yazı tipi grubu; Transport dosyaları yüklenmez. |
### Duyarlı ve sabit aralıklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| unit 0 | 0px → 0px; static 0px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 1 | 5px → 5px; static 5px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 2 | 10px → 10px; static 10px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 3 | 15px → 15px; static 15px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 4 | 15px → 20px; static 20px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 5 | 15px → 25px; static 25px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 6 | 20px → 30px; static 30px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 7 | 25px → 40px; static 40px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 8 | 30px → 50px; static 50px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
| unit 9 | 40px → 60px; static 60px | Duyarlı küçük → büyük; govuk-spacing(unit) sabit kalır. |
### İşlevsel renk adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| govuk-functional-colour("text") | #0b0c0c | Okunabilir ana içerik |
| govuk-functional-colour("secondary-text") | #484949 | İpuçları ve destekleyici bilgiler |
| govuk-functional-colour("link") | #1a65a6 | Sıradan bağlantılar |
| govuk-functional-colour("link-hover") | #0f385c | Bağlantı üzerine gelme durumu |
| govuk-functional-colour("link-visited") | #54319f | Ziyaret edilmiş hedefler |
| govuk-functional-colour("border") | #cecece | Yapısal ayırıcılar |
| govuk-functional-colour("input-border") | #0b0c0c | Giriş alanı sınırı |
| govuk-functional-colour("focus") | #ffdd00 | Yalnızca klavye odağı |
| govuk-functional-colour("focus-text") | #0b0c0c | Sarı odak üzerindeki metin |
| govuk-functional-colour("error") | #ca3535 | Doğrulama bildirimi |
| govuk-functional-colour("success") | #0f7a52 | Başarı bildirimi |
| govuk-functional-colour("body-background") | #ffffff | Okuma yüzeyi |
### Düzen temel öğeleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| govuk-width-container | 1020px maximum | Varsayılan dış içerik genişliği; gerçek bir içerik gereksinimi varsa değiştirilebilir. |
| govuk-grid-row + govuk-grid-column-two-thirds | 2/3 at wider widths | Soru ve metinleri okunabilir bir sütunda tutun; dar genişliklerde alt alta dizin. |
| govuk-main-wrapper | Main content region | Genişlik kapsayıcısının içindeki ana işaret öğesinde kullanın. |
### Kesme noktaları ve denetim kenarlıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $govuk-breakpoints.mobile | 320px | Sass kesme noktası anahtarıdır; ek bir düzen zorunluluğu değildir. |
| $govuk-breakpoints.tablet | 641px | Varsayılan duyarlı tipografi, aralık ve ızgara sınırı; stiller kılavuzunda bu değer 640 pikselden geniş olarak tanımlanır. |
| $govuk-breakpoints.desktop | 769px | Ek bir adlandırılmış kesme noktası. |
| $govuk-focus-width | 3px | Odak dış çizgisinin genişliği; belgelenmiş odak görünümüyle birlikte kullanın. |
## GOV.UK tasarım sistemi Eksiksiz Rehber

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

## GOV.UK tasarım sistemi Sürüm ve Kimlik

### Bağımsız kimliğe sahip v6 referansı

> Bu referans, küçük ekranlarda daha büyük yazı tiplerini ve güncellenmiş işlevsel renkleri içeren v6 belgelerini kullanır. Bu nedenle eski bir ekran görüntüsünde farklı değerler görülebilir. Yukarıdaki tabloda sürümler birbirine karıştırılmadan, belgelenmiş güncel varsayılanlar yer alır.

Canlı çalışma, kurgusal bir topluluk etkinliği başvurusudur. Taç, GOV.UK logosu, Transport yazı tipi veya gerçek bir gönderim uç noktası kullanmaz. Görev içeriği ve yerel doğrulama kuralları uygulamaya özgüdür; bileşen yapısı ise bağlantı verilen resmî örneklere dayanır.

Destekleyici belirtimi okuyun

### Doğru yazı tipi yolunu seçin

Uygun bir service.gov.uk hizmeti için GDS Transport, resmî uygulamanın parçasıdır. Diğer alan adlarındaki kamu hizmetleri başka bir yazı tipi kullanmalıdır. Bu bağımsız çalışma, önerilen Helvetica Neue, Helvetica, Arial, sans-serif alternatifini izler; yazı tipini değiştirmek sistemin hiyerarşisinden vazgeçmeyi gerektirmez.

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Yazı Tipi ve Okuma Ritmi

### Boyut ve satır yüksekliği çiftinin tamamını kullanın

Başvuru sorusu için govuk-heading-l, destekleyici metin için govuk-body kullanın. Dar ekranlarda başlık 27/30px, daha geniş ekranlarda 36/40px olur. v6'da gövde metni 19/25px olarak kalır. Küçük ekranlarda gövde metnini 16px kullanmak, bu referansı değil eski davranışı yansıtır.

Ölçek tablosu her iki boyutu da içerir; çünkü tek bir görünüm alanının ekran görüntüsü, duyarlı kuralı belirlemeye yetmez. Üretim CSS dosyası göreli birimler kullanır. govuk-heading-l gibi bir sınıf, anlamsal öğenin h1 mi yoksa h2 mi olması gerektiğini belirlemeden görünümü denetler.

```
.app-question-note {
  @include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
```

Kod referansı

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Boşluk ve Sayfa Genişliği

### Duyarlı birimler sabit piksel değerleri değildir

Birim 6, soru grupları arasındaki boşluk için kullanışlıdır: dar ekranda 20px, tablet eşiğinin üzerinde 30px verir. Statik govuk-spacing(6) yardımcısı her genişlikte 30px döndürür. İki sürüm masaüstünde aynı görünse bile yardımcıyı seçmek davranışı değiştirir.

```
.app-question-group {
  @include govuk-responsive-margin(6, "bottom");
}
.app-fixed-inset { padding: govuk-spacing(3); }
```

Kod referansı

Destekleyici belirtimi okuyun

### Kapsayıcının içine bir okuma sütunu yerleştirin

Standart genişlik kapsayıcısının maksimum genişliği 1020px'tir. İçindeki üçte iki genişliğindeki ızgara sütunu, dış sayfa yapısının hizasını korurken soru akışını sınırlar. Dar ekran görünümü doğal biçimde alt alta dizilir. Önizlememizde her alanı bir gösterge paneli kartına yaymak yerine bu okuma hiyerarşisi korunur.

```
<div class="govuk-width-container">
  <main class="govuk-main-wrapper" id="main-content">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Tell us about the event</h1>
        <!-- Question form -->
      </div>
    </div>
  </main>
</div>
```

Kod referansı

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Renk ve Odak

### Eski ekran görüntülerini eşleştirmek yerine rolleri kullanın

v6 işlevsel bağlantı rengi #1a65a6, hata rengi ise #ca3535 değerindedir. Gerçek bir Sass derlemesinde govuk-functional-colour("link") ve govuk-functional-colour("error") kullanın; böylece yükseltme, üst sürümün renk paletini uygulamaya aktarabilir. Bu işlevsel roller, genel bir kırmızı veya mavi illüstrasyon rengi seçmekten farklıdır.

Odak sarısı yalnızca odak durumu için ayrılmıştır. Varsayılan seçim rengine veya tanıtım vurgusuna dönüşmemelidir. Önizlemede sarı, koyu metin ve belirgin koyu bir kenarlıkla eşleştirilmiştir. Hata yalnızca kırmızıyla değil, metin ve yerleşimle belirtilir.

```
.app-supporting-text { color: govuk-functional-colour("secondary-text"); }
.app-custom-error { color: govuk-functional-colour("error"); }
```

Kod referansı

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Soru Bileşenleri

### Alan, birbiriyle bağlantılı bir yapıdır

Giriş örneğinde govuk-form-group, govuk-label, govuk-hint ve govuk-input birlikte kullanılır. Etiket, girişin ID değerini hedefler; aria-describedby ise ipucuna işaret eder. Geçersiz durumda hata sınıflarına ek olarak hata mesajının ID değerini de ekleyin. Bu ilişki olmadan yalnızca görsel bir kırmızı kenarlık kullanmak, uygulamanın eksik olduğu anlamına gelir.

Bu başvuruda etkinlik adı ve iletişim e-postası birlikte yer alır. Bunlar tek bir kısa görevdeki ayrı etiketli değerlerdir; her alanın ayrı bir sayfaya konması gerektiği anlamına gelmez. Önizlemede yalnızca doğrulamayı göstermek için ikisi de zorunludur; gerçek bir izin gerekliliği belirlemez.

- Sabit etiket: Etkinlik adı.

- Sabit ipucu: Etkinlik bilgilerinizde yer alan adı kullanın.

- Düzeltilebilir hata: Etkinlik adını girin.

Destekleyici belirtimi okuyun

### Yerel işaretleme ile uygulama davranışının görevleri farklıdır

GOV.UK Frontend, bileşenleri biçimlendirir ve geliştirir. Bu hizmet için hangi e-posta adreslerinin kabul edilebilir olduğuna karar vermez, taslağı kaydetmez veya başvuruyu almaz. Önizlemede JavaScript iki alanı doğrular ve değerlerini yalnızca geçerli sayfada tutar. Sayfa yeniden yüklendiğinde çalışma verileri silinir.

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Bağlantılı Hata Düzeltme

### Özeti düzeltme yoluna dönüştürün

Geçersiz bir Devam et işleminden sonra hata özetini formun önünde gösterin ve odağı özete taşıyın. Listedeki her bağlantı ilgili yanıtı hedefler. Tek metin alanı, girişin ID değerini hedefler; gruplanmış bir seçenek ise resmî yönergelerde açıklandığı gibi uygun ilk denetimi hedeflemelidir.

Yerel özet, geliştirme için data-module="govuk-error-summary" kullanır. Önizleme özeti yalnızca doğrulama başarısız olduğunda ekler, ardından yerel 6.5.1 modülünden ErrorSummary oluşturur. Kitaplık odak davranışını ve bağlantılı gezinmeyi yönetir; mesajları sağlamak, değerleri korumak ve artık geçerli olmayan hataları kaldırmak uygulamanın sorumluluğundadır.

Destekleyici belirtimi okuyun

### Gerçek düzeltme akışını deneyin

Her iki alanı da boş bırakıp Devam et'i seçin. Etkinlik adı hatasını izleyin, kurmaca bir başlık girin, ardından geçersiz bir e-posta adresi yazın. Yeniden Devam et'i seçin: yalnızca devam eden hata gösterilmeli ve başlık korunmalıdır. Adresi düzeltip incelemeye geçin. Böylece kalıcı bir örnek hata göstermek yerine durum sözleşmesi açıkça görülür.

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Yanıtları Kontrol Et ve Değiştir

### Veri tablosu yerine tanım listesi kullanın

Yanıtları kontrol et ekranında govuk-summary-list bulunur. Her satırda bir dt anahtarı, bir dd değeri ve bir dd işlem alanı yer alır. Değiştir bağlantısından sonraki gizli etiket, ilgili yanıtı belirtir. Uzun etkinlik adları, düzenleme bağlantısını gizlemeden değer alanında satır kaydırır.

Değiştir işlemi formu geri yükler ve seçilen alana odaklanır. Devam edildiğinde doğrulama yeniden yapılır ve güncellenmiş inceleme ekranı açılır. Geri dönüş yolu uygulama kodudur; tasarım sistemi ise sunum yapısını sağlar.

Destekleyici belirtimi okuyun

### Gerçekçi sınırda bitirin

Hiçbir hizmet bu verileri almadığı için bu çalışma inceleme ekranında biter. Gerçek bir Yanıtları kontrol et sayfasından önce gerçek gönderim işlemi gelmeli ve gönderilecek bilgiler gösterilmelidir. Beyanlar veya arka uç onayı içeren bir uygulama için ek hizmet mantığı gerekir; yeşil bir panel böyle bir sonuç oluşturamaz.

1. İki kurmaca yanıtı da doldurun ve incelemeye devam edin.

2. Etkinlik adını değiştir'i seçin; yalnızca bu yanıtı düzenleyin.

3. Devam edin ve düzeltilmiş başlığın yanı sıra e-postanın da korunduğunu doğrulayın.

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Frontend Entegrasyonu

### Markasız Sass giriş dosyasını derleyin

Aşağıdaki kurulumda govuk-frontend@6 ve Node paket içe aktarıcılı Dart Sass kullanılır. Belgelenmiş markasız yazı tipi yapılandırması derlenir ve tarayıcı JavaScript dağıtımı kopyalanır. Gerçek bir projede tam sürümün kayda geçmesi için çözümlenmiş kilit dosyasını depoya ekleyin.

Örnekte Transport veya devlet görsel varlıkları yüklenmez. Markalı bir hizmet için uygun olması durumunda resmî varlıklar, belgelenmiş varlık yolu üzerinden ayrıca sunulmalıdır. Başka bir derleme aracı kullanan uygulamalar, paketlemeyi uyarlarken aynı Sass modülünü ve initAll giriş noktasını kullanabilir.

Destekleyici belirtimi okuyun

### Bileşen işaretlemesi oluşturulduktan sonra başlatın

Statik bir sayfada kopyalanan modülü yükleyin ve initAll çağrısı yapın. İstemci tarafında oluşturulan bir uygulamada, yeni bir bölge oluşturulduktan sonra initAll({ scope: element }) çağrısıyla bu bölgeyi başlatın. Başlangıçta gizli bir hata örneğini başlatıp bunu canlı bir doğrulama akışı sanmayın.

Bağımsız önizleme, yerel olarak kopyalanmış resmî CSS ve JavaScript dosyalarını 6.5.1 sürümünde kullanır. Dar kapsamlı bir yazı tipi geçersiz kılması, çalışma boyunca Transport yazı tipinin yerine geçer. Form doğrulaması ve inceleme ekranı uygulama kodudur; Button ve ErrorSummary geliştirmeleri ise kitaplıktan gelir. Ayrı Sass derleme tarifi, tercih edilen yapılandırılabilir kurulumu açıklar; bu derleme burada çalıştırılmamıştır.

Destekleyici belirtimi okuyun

## GOV.UK tasarım sistemi Bileşen Örnekleri

### Metin girişi: etiket, ipucu ve satır içi hata

Örnek durumunda gruba ve girişe hata değiştiricisi eklenir. Girişin açıklaması, sabit ipucunu ve geçerli hatayı ID değerleriyle birleştirir.

```
<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="event-name">Event name</label>
  <div id="event-name-hint" class="govuk-hint">Use the name shown on your event information.</div>
  <p id="event-name-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter an event name
  </p>
  <input class="govuk-input govuk-input--error" id="event-name"
    name="eventName" type="text"
    aria-describedby="event-name-hint event-name-error">
</div>
```

Kod referansı

- Geçerli durumda hata paragrafını, hata değiştiricilerini ve aria-describedby içindeki hata ID değerini kaldırın.

- Doğrulama başarısız olduğunda gerçek değeri koruyun; sunucu çıktısını kaçış karakterleriyle işleyin veya DOM metin/değer atamasını kullanın.

### Hata özeti: yanıta yönlendirme

Özeti soru içeriğinin önüne yerleştirin. Özetteki mesaj satır içi hatayla eşleşmeli ve bağlantı, ilgisiz bir sarmalayıcı yerine girişi hedeflemelidir.

```
<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">There is a problem</h2>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li><a href="#event-name">Enter an event name</a></li>
      </ul>
    </div>
  </div>
</div>
```

Kod referansı

- Yerel bir uygulamada Frontend başlatması, özetin odak davranışını sağlar.

- Canlı çalışma, başarısız her doğrulama özetini ekledikten sonra yeni bir ErrorSummary oluşturur; uygulama doğrulaması ayrı kalır.

### Yanıtları kontrol et: anlamsal özet listesi

Tanım listesi, yanıt etiketini değeriyle ve yanıtı düzenlemeye yönlendiren bağlantıyla eşleştirir. Gizli sonek, yinelenen Değiştir bağlantılarının birbirinden ayırt edilmesini sağlar.

```
<dl class="govuk-summary-list">
  <div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">Event name</dt>
    <dd class="govuk-summary-list__value">Riverside community picnic</dd>
    <dd class="govuk-summary-list__actions">
      <a class="govuk-link" href="/event-details?returnTo=check-answers">
        Change<span class="govuk-visually-hidden"> event name</span>
      </a>
    </dd>
  </div>
</dl>
```

Kod referansı

- returnTo parametresi burada kullanılan bir uygulama geleneğidir; Frontend API değildir.

- Düzenleme sonrasında incelemeye dönün ve diğer tüm yanıtları koruyun.

### 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"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, organiser@example.com. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like name@example.com'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='organiser@example.com';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></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.

## GOV.UK tasarım sistemi AI Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Kabuk komutlarını, app.scss içeriğini ve HTML parçalarını belirtilen konumlarına ayrı ayrı yerleştirin. Önizleme, yazı tipi geçersiz kılmasıyla yerel olarak kopyalanmış resmî 6.5.1 varlıklarını kullanır; bu Sass derleme tarifi belgelenmiştir ancak bu çalışma alanında derlenmemiştir. 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. Dosyaları çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/gov-uk.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
# Run in a project directory
npm install govuk-frontend@6.5.1
npm install --save-dev sass
mkdir -p public/assets

# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
  $govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);

# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/

<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
  import { initAll } from '/assets/govuk-frontend.min.js';
  initAll();
</script>
```

### Projeniz İçin Bir İstem

```
Bu kılavuzdaki GOV.UK Frontend v6'yı ve markasız Helvetica yazı tipi yapılandırmasını kullanarak iki alanlı etkinlik başvurusunu uygulayın. Gerçek form-group, input, error-summary ve summary-list yapılarını; bağlantılı satır içi hataları, korunan yanıtları, hedefli Değiştir bağlantılarını ve yalnızca incelemeyle tamamlanan akışı kullanın. Belgelenmiş duyarlı yazı tipi boyutu ve boşluklarını Frontend sınıflarıyla uygulayın. Gerçek proje kimliğini koruyun; resmî bir gönderim işlemi veya uydurma bir arka uç sonucu oluşturmayın. Boş, geçersiz e-posta, düzeltilmiş yanıt, inceleme ve yanıt değiştirme durumlarını doğrulayın.
```

## GOV.UK tasarım sistemi Kaynaklar ve Kapsam

GOV.UK Frontend 6.5.1 bileşen CSS ve JavaScript kullanan bağımsız bir OpenDesign uygulama çalışmasıdır. Devlet logosu, Transport yazı tipi, resmî hizmet, gerçek gönderim veya uygunluk sertifikası ima edilmez. Form kuralları ve inceleme gezinmesi özgün uygulama kodudur.

- v6 yazı tipi ölçeği Küçük ve büyük ekranlar için boyut/satır yüksekliği çiftleri.

- Duyarlı boşluklar Sabit ve duyarlı birimler ile Sass yardımcıları.

- İşlevsel renkler Geçerli roller ve Sass erişim işlevleri.

- Düzen Kapsayıcı ve ızgara düzeni.

- Metin girişi Etiket, ipucu ve hata yapısı.

- Hata özeti Bağlantılı düzeltme ve odak davranışı.

- Özet listesi Anahtarlar, değerler ve bağlama duyarlı değiştirme işlemleri.

- GOV.UK markalaması olmadan Yazı tipi, kimlik ve Sass yapılandırması.

- CSS öğesini ekleyin Dart Sass ve paket entegrasyonu.

- JavaScript öğesini içe aktarın Tarayıcı modülleri ve initAll.

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

## GOV.UK tasarım sistemi İlgili Kaynaklar

### HarvardSites tasarım sistemi

HarvardSites’ı editoryal bir platform olarak tanıyın: site stillerini karşılaştırın, belgelenmiş yazı tipi eşleşmelerini seçin ve üniversite sayfalarını belirli içerik bileşenleriyle oluşturun.

### Helsinki

Eksiksiz bir yerel inceleme ve düzeltme akışıyla yerel HDS seçim gruplarını, anlamsal geri bildirim renklerini ve bağlantılı hata özetlerini bir araya getirin.

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


- [Uygulama başvurusu](https://design-system.service.gov.uk/components/error-summary/)
- [Kaynak](https://design-system.service.gov.uk/styles/type-scale/)
- [Kaynak](https://design-system.service.gov.uk/styles/typeface/)
- [Kaynak](https://design-system.service.gov.uk/styles/spacing/)
- [Kaynak](https://design-system.service.gov.uk/styles/colour/)
- [Kaynak](https://design-system.service.gov.uk/styles/layout/)
- [Kaynak](https://frontend.design-system.service.gov.uk/sass-api-reference/)
- [Destekleyici belirtimi okuyun](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/styles/typeface/)
- [Kod referansı](https://design-system.service.gov.uk/styles/type-scale/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/styles/type-scale/)
- [Kod referansı](https://design-system.service.gov.uk/styles/spacing/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/styles/spacing/)
- [Kod referansı](https://design-system.service.gov.uk/styles/layout/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/styles/layout/)
- [Kod referansı](https://design-system.service.gov.uk/styles/colour/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/styles/colour/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/components/text-input/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/patterns/question-pages/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/components/error-summary/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/components/summary-list/)
- [Destekleyici belirtimi okuyun](https://design-system.service.gov.uk/patterns/check-answers/)
- [Destekleyici belirtimi okuyun](https://frontend.design-system.service.gov.uk/include-css/)
- [Destekleyici belirtimi okuyun](https://frontend.design-system.service.gov.uk/import-javascript/)
- [Kod referansı](https://design-system.service.gov.uk/components/text-input/)
- [Kod referansı](https://design-system.service.gov.uk/components/error-summary/)
- [Kod referansı](https://design-system.service.gov.uk/components/summary-list/)
- [v6 yazı tipi ölçeği Küçük ve büyük ekranlar için boyut/satır yüksekliği çiftleri.](https://design-system.service.gov.uk/styles/type-scale/)
- [Duyarlı boşluklar Sabit ve duyarlı birimler ile Sass yardımcıları.](https://design-system.service.gov.uk/styles/spacing/)
- [İşlevsel renkler Geçerli roller ve Sass erişim işlevleri.](https://design-system.service.gov.uk/styles/colour/)
- [Düzen Kapsayıcı ve ızgara düzeni.](https://design-system.service.gov.uk/styles/layout/)
- [Metin girişi Etiket, ipucu ve hata yapısı.](https://design-system.service.gov.uk/components/text-input/)
- [Hata özeti Bağlantılı düzeltme ve odak davranışı.](https://design-system.service.gov.uk/components/error-summary/)
- [Özet listesi Anahtarlar, değerler ve bağlama duyarlı değiştirme işlemleri.](https://design-system.service.gov.uk/components/summary-list/)
- [GOV.UK markalaması olmadan Yazı tipi, kimlik ve Sass yapılandırması.](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/)
- [CSS öğesini ekleyin Dart Sass ve paket entegrasyonu.](https://frontend.design-system.service.gov.uk/include-css/)
- [JavaScript öğesini içe aktarın Tarayıcı modülleri ve initAll.](https://frontend.design-system.service.gov.uk/import-javascript/)