# Sainsbury's tasarım sistemi

## Sainsbury's tasarım sistemi Arayüz Önizlemesi

Gün ve saat seçin, örnek ücreti inceleyin, ardından yerel seçiminizi gözden geçirin.

## Sainsbury's tasarım sistemi Tasarım Referansı

Sainsbury’s’in kamuya açık renk, boyut belirteci, tipografi ve bileşen yönergeleri. Yayımlanmış çakışan kesme noktası tabloları birleştirilmek yerine belirtilir.

### Sainsbury’s renk paletindeki roller

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Primary brand base | #F06C00 | Bu çalışmada marka vurgusu ve koyu metinli düğme dolgusu. |
| Primary hover | #E55000 | Üzerine gelme dolgusu; beyaz üzerinde küçük metin rengi olarak kullanılmamalıdır. |
| Primary pressed | #C15100 | Basılma durumu. |
| Primary light | #FEF5F0 | Seçim ve özet arka planı. |
| Secondary base | #7F0442 | Ölçülü kullanılan dekoratif vurgu. |
| Monochrome darker | #262626 | Birincil içerik. |
| Monochrome dark | #404040 | Destekleyici içerik. |
| Monochrome light | #D8D8D8 | Kenarlıklar. |
| Monochrome lighter | #F2F2F2 | Kullanılamayan seçenek yüzeyi. |
| Success lighter | #E6F4ED | Yerel inceleme geri bildirimi yüzeyi. |
| Success darker | #246127 | Geri bildirim metni. |
| Info darker | #135CA3 | Uygulama odak çerçevesi. |
### Yayımlanmış boyut belirteçleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| xs | 2px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| sm | 4px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| md | 8px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| lg | 16px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| xl | 24px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| 2xl | 32px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| 3xl | 40px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| 4xl | 48px | Kamuya açık boyut belirteci tablosundaki aralık değeri. |
| width-sm | 1px | Kenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun. |
| width-base | 2px | Kenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun. |
| radius-base | 2px | Kenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun. |
| radius-xl | 12px | Kenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun. |
| min-width-sm | 576px | Belirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır. |
| min-width-md | 768px | Belirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır. |
| min-width-lg | 992px | Belirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır. |
| min-width-xl | 1200px | Belirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır. |
### Sainsbury’s tipografi ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Body 1 | 1rem / 1.5 / Arial Regular | Ana metin. |
| Caption | 0.875rem / 1.571 / Arial Regular | Destekleyici notlar. |
| Label 1 | 1rem / 1.5 / Arial Bold | Denetim etiketleri. |
| Display 1 | 1.25rem / 1.3 | Resmî yönergelerdeki marka başlık yazı tipi; burada yedek yazı tipi kullanılır. |
| Display 2 | 1.5rem / 1.333 | Duyarlı tasarım alternatifi Display 3’tür. |
| Display 3 | 1.875rem / 1.333 | Duyarlı tasarım alternatifi Display 4’tür. |
| Display 4 | 2.375rem / 1.316 | Duyarlı tasarım alternatifi Display 5’tir. |
| Display 5 | 3rem / 1.292 | Duyarlı tasarım alternatifi Display 6’dır. |
| Display 6 | 3.75rem / 1.267 | Belgelenmiş en büyük başlık boyutu. |
| Responsive type threshold | larger than 720px | 768px boyut belirteci kesme noktasından bağımsızdır. |
## Sainsbury's 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ı.

## Sainsbury's tasarım sistemi Sainsbury's tasarım sistemi Çok Markalı Sistem ve Erişim

### Tek bir marka teması seçin

> Fable; paylaşılan bileşen yapıları ve markaya özgü değerler aracılığıyla Sainsbury’s, Argos, Nectar, Tu ve Habitat’ı destekler. Bu kılavuzda yalnızca Sainsbury’s renk paleti kullanılır. Nectar morunu Sainsbury’s etkileşimine karıştırmak veya tüm markaların aynı yazı tipini kullandığını varsaymak, sistemler arasındaki açık sınırı ortadan kaldırır. Seçilen temayı uygulamanın giriş noktasına bağlı tutun.

### Kamuya açık yönergeleri özel paketlerden ayırın

Kamuya açık iş ortağı kılavuzu React bileşenlerini, Fable Styles’ı ve tasarım belirteci paketini açıklar; ancak kod tabanına erişmek için Sainsbury’s’teki bir irtibat kişisinden istenecek kimlik bilgileri gerekir. Bu örnekte bunların hiçbiri gerekmez: yayımlanmış yönergelere dayalı, baştan oluşturulmuş eksiksiz bir HTML örneğidir. Fable’ı çalıştırdığı izlenimini vermez veya erişilemeyen bir kayıt deposu için kurulum komutları uydurmaz.

## Sainsbury's tasarım sistemi Sainsbury's tasarım sistemi Renk Paleti ve Kontrast

### Turuncuyu uygun bir metin rengiyle kullanın

Kaynakta, temel ve koyu turuncunun beyaz üzerinde normal gövde metni için yeterli kontrast sağlamadığı belirtilir. Örnekte turuncu, beyaz üzerindeki küçük turuncu metin veya turuncu üzerindeki küçük beyaz metin olarak değil, siyah düğme metni bulunan bir dolgu olarak kullanılır. Belgelerdeki marka istisnası, her renk eşleşmesinin erişilebilir olduğu iddiasına dönüşmemelidir.

### Geri bildirimin anlamsal niteliğini koruyun

İnceleme sonucu, yeşil başarı yüzeyi ve koyu yeşil metin kullanır. Kullanılamayan saat dilimleri nötr bir yüzey ve metinsel bir etiketle gösterilir; seçili saat dilimlerinde hem işaretli bir radyo düğmesi hem de turuncu bir çerçeve bulunur. Renk destekleyici bir ipucudur; saat, uygunluk veya seçim metninin yerini hiçbir zaman almaz.

## Sainsbury's tasarım sistemi Sainsbury's tasarım sistemi Aralıklar, Köşeler ve Kesme Noktası Sınırları

### Yayımlanmış boyut ölçeğini izleyin

Örnekte seçenekler arasında 8px, her saat diliminin içinde 16px, ana gruplar arasında ise 24–32px aralık kullanılır. Denetimlerde 2px köşe yarıçapı, özetteyse belgelenmiş 12px yarıçap kullanılır. Bu farklılıklar, her yerde aynı yuvarlatılmış kart görünümünü kullanmak yerine grupları ifade eder.

### Belgelendirme tutarsızlığını kaydedin

Düzen kılavuzunda 600px ve 900px cihaz eşikleri listelenirken boyut belirteci tablosunda 576px, 768px ve 992px değerleri yer alır. Tipografi kılavuzundaysa başlık boyutları ayrıca 720px’in üzerinde değişir. Bunlar aynı ölçeğin birbirinin yerine kullanılabilen adları değildir. Bu uygulama, sütunlar için boyut belirteci tablosundaki 768px eşiğini seçer ve bu tercihi açıkça belirtir.

## Sainsbury's tasarım sistemi Sainsbury's tasarım sistemi Tipografi ve Yararlı İçerik

### Marka yazı tipi sınırını koruyun

Resmî Sainsbury’s başlık stillerinde Mary Ann Extra Bold, normal gövde metnindeyse Arial kullanılır. Kamuya açık örnekte marka yazı tipi varlığı bulunmadığı için baştan sona Arial kullanılır. Yedek yazı tipinin görsel olarak birebir aynı olduğu iddia edilmeden ölçek ve satır yüksekliği ilişkisi korunur. Anlamsal başlık düzeyleri, başlık boyutlarından bağımsızdır.

### Alışveriş kararını anlaşılır kılın

Her saat diliminde bir saat aralığı ve ücret ya da kullanılamama etiketi bulunur. Özet; seçilen günü, saati ve örnek konumu yineler. Ana işlem, sıradaki yerel adımı açıklayan “Teslim almayı incele” ifadesini kullanır. Örneğin daha ticari görünmesi için zamanlayıcı, sipariş toplamı veya rezervasyon başarısı uydurulmaz.

## Sainsbury's tasarım sistemi Sainsbury's tasarım sistemi Radyo Seçenekleri ve Yerel Durum

### Bir grup içindeki bağımlı seçimleri kullanın

Gün denetimleri, kullanılabilir saat seçeneklerini değiştirir ve her saat, adlandırılmış tek bir grupta yerel bir radyo düğmesidir. Gün değiştirildiğinde o günün ilk kullanılabilir saati seçilir ve özet güncellenir. Kullanılamayan bir seçenek görünür kalır ancak seçilemez. Yerel radyo düğmeleri, tıklanabilir div’lerle yeniden oluşturulmadan tanıdık klavye davranışı sağlar.

### Güncelliğini yitirmiş rezervasyon iddialarını önleyin

İnceleme işlemi, yerel bir onay gösterir ve herhangi bir saat diliminin rezerve edilmediğini belirtir. Gün veya saat değiştirildiğinde bu sonuç gizlenir. Üretim akışında rezervasyon iddiasında bulunmadan önce güncel bir uygunluk kontrolü ve sunucu yanıtı gerekir. Örnek, etkileşim sözleşmesini tek başına ortaya koyarak eksik arka uç çalışmalarının tamamlanmış bir rezervasyonla karıştırılmasını önler.

## Sainsbury's tasarım sistemi Sainsbury's tasarım sistemi Dokunma Alanları, Odak ve Duyarlı Davranış

### Seçenekler için yeterli alan bırakın

Kamuya açık düğme yönergelerinde 48px dokunma alanı önerilir. Gün düğmeleri ve inceleme işlemi bu yüksekliği karşılar; etiketli her saat diliminin tamamı da tıklanabilir. Mavi odak çerçevesi turuncu ve açık renkli yüzeylerin üzerinde görünür kalır. Dekoratif sepet işareti yardımcı teknolojilerden gizlenir.

### Uzun içeriğin satırlara bölünmesine izin verin

Dar ekranlarda özet, seçenek listesinin altına geçer ve dekoratif işaret kaybolur. Saat dilimi etiketleri ve fiyatlar normal belge akışında, esnek yükseklikle kalır. Çevrilmiş veya daha uzun bir konum adı sabit bir kartın içinde kırpılmamalıdır; bu İngilizce prototip, sonraki yerelleştirme aşaması için söz konusu alanı kullanılabilir durumda tutar.

## Sainsbury's tasarım sistemi Sainsbury's tasarım sistemi Uygulama ve Yapay Zekâ Ajanı İncelemesi

### Kendi içinde eksiksiz örneği çalıştırın

Eksiksiz HTML örneğini kaydedip yerel ortamda sunun. Gün başına üç gün ve üç saat dilimi, örnek veri olarak tanımlanmıştır ve tüm değişiklikler bellekte kalır. Kaynakta CSS, radyo düğmesi oluşturma, özet güncelleme ve güncelliğini yitirmiş geri bildirimi temizleme işlemleri bulunur; dolayısıyla önizlemenin arkasında eksik bir uygulama katmanı yoktur.

1. Eksiksiz dosyayı index.html adıyla kaydedin.

2. Salı gününü seçin ve kullanılamayan sabah saatinin seçilemediğini doğrulayın.

3. Saati değiştirip özeti inceleyin.

4. İnceleme işlemini yapın, ardından günü değiştirip önceki sonucun temizlendiğini doğrulayın.

### Yalnızca erişimi doğruladıktan sonra Fable’a geçin

Yetkili bir kurum içi entegrasyon için gerçek paket erişimini edinin ve mevcut tema ile bileşen API’lerini inceleyin. Örneğin davranışını korurken özgün işaretlemeyi desteklenen bileşenlerle değiştirin. Ekran görüntüsünü uygulama kanıtı saymadan önce yüklenen belirteç ölçeğinin kamuya açık kaynaklarla eşleştiğini doğrulayın.

- Tek bir marka temasını tutarlı biçimde kullanın.

- Paket erişimini ve güncel API’leri doğrulayın.

- Metin kontrastını marka renklerine uygunluktan ayrı olarak kontrol edin.

## Sainsbury's tasarım sistemi Bileşen Örnekleri

### Eksiksiz teslim alma saati akışı

Gün seçimi, radyo saat seçenekleri, devre dışı uygunluk ve canlı özet içeren bağımsız HTML/CSS/JavaScript.

```
<!doctype html>
<html lang="en">
  <meta charset="utf-8" /><meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  /><title>Collection slot study</title
  ><style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      background: #fff;
      color: #262626;
      font:
        16px/1.5 Arial,
        sans-serif;
      padding: 32px;
    }
    header {
      border-top: 8px solid #f06c00;
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      gap: 24px;
    }
    h1 {
      font-size: 38px;
      line-height: 1.316;
      margin: 8px 0 16px;
    }
    h2 {
      font-size: 24px;
      line-height: 1.333;
      margin: 0 0 16px;
    }
    .eyebrow,
    small {
      font-size: 14px;
      color: #404040;
    }
    p {
      margin: 8px 0 24px;
    }
    .basket {
      font-size: 48px;
      line-height: 1;
      background: #fef5f0;
      border-radius: 50%;
      width: 96px;
      height: 96px;
      display: grid;
      place-items: center;
      color: #7f0442;
    }
    main {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 32px;
      margin-top: 24px;
    }
    fieldset {
      border: 0;
      padding: 0;
      margin: 0 0 24px;
    }
    legend {
      font-weight: bold;
      margin-bottom: 16px;
    }
    .dates {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    button,
    select {
      font: inherit;
      min-height: 48px;
      padding: 12px 16px;
      border: 1px solid #737373;
      border-radius: 2px;
      background: white;
      color: #262626;
      cursor: pointer;
    }
    .dates button[aria-pressed="true"] {
      border: 2px solid #f06c00;
      background: #fef5f0;
      padding: 11px 15px;
    }
    .slots {
      display: grid;
      gap: 8px;
    }
    .slot {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 16px;
      border: 1px solid #d8d8d8;
      border-radius: 2px;
      cursor: pointer;
    }
    .slot:has(input:checked) {
      border: 2px solid #f06c00;
      padding: 15px;
      background: #fef5f0;
    }
    .slot:has(input:disabled) {
      background: #f2f2f2;
      cursor: default;
    }
    .slot input {
      accent-color: #c15100;
      width: 20px;
      height: 20px;
    }
    .slot strong {
      margin-left: auto;
    }
    .unavailable {
      color: #404040;
    }
    .primary {
      background: #f06c00;
      border: 2px solid #f06c00;
      font-weight: bold;
      color: #000;
    }
    .primary:hover {
      background: #e55000;
      border-color: #e55000;
    }
    .primary:active {
      background: #c15100;
      border-color: #c15100;
    }
    .summary {
      background: #fef5f0;
      border-radius: 12px;
      padding: 24px;
      align-self: start;
    }
    .summary dl {
      margin: 0;
    }
    .summary dt {
      font-size: 14px;
      margin-top: 16px;
    }
    .summary dd {
      margin: 4px 0;
      font-weight: bold;
    }
    #result {
      padding: 16px;
      background: #e6f4ed;
      color: #246127;
      margin-top: 24px;
    }
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid #135ca3;
      outline-offset: 3px;
    }
    footer {
      border-top: 1px solid #d8d8d8;
      margin-top: 32px;
      padding-top: 16px;
      font-size: 14px;
      color: #404040;
    }
    [hidden] {
      display: none !important;
    }
    @media (max-width: 767px) {
      body {
        padding: 16px;
      }
      main {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      h1 {
        font-size: 30px;
      }
      .basket {
        display: none;
      }
      .dates button {
        flex: 1;
      }
      .summary {
        padding: 16px;
      }
    }
  </style>
  <body>
    <header>
      <div>
        <span class="eyebrow">GROCERIES / ORIGINAL COLLECTION STUDY</span>
        <h1>Choose a collection slot</h1>
        <p>
          Select a sample day and time. No order or real availability is
          connected.
        </p>
      </div>
      <div class="basket" aria-hidden="true">▥</div>
    </header>
    <main>
      <section>
        <fieldset>
          <legend>Collection day</legend>
          <div class="dates" id="dates"></div>
        </fieldset>
        <fieldset>
          <legend id="slotLabel">Available times</legend>
          <div id="slots" class="slots"></div>
        </fieldset>
      </section>
      <aside class="summary">
        <h2>Collection details</h2>
        <dl>
          <dt>Sample location</dt>
          <dd>Riverside collection point</dd>
          <dt>Day and time</dt>
          <dd id="selection"></dd>
          <dt>Sample fee</dt>
          <dd id="fee"></dd>
        </dl>
        <p><small>All fees and slots are illustrative.</small></p>
        <button class="primary" id="review">Review collection</button>
        <div id="result" role="status" hidden></div>
      </aside>
    </main>
    <footer>
      Independent HTML interpretation of Sainsbury’s public guidance. Arial
      fallback; no private Fable runtime or brand font assets.
    </footer>
    <script>
      const days = [
        {
          label: "Monday",
          slots: [
            ["09:00–10:00", 1, true],
            ["12:00–13:00", 0, true],
            ["17:00–18:00", 2, false],
          ],
        },
        {
          label: "Tuesday",
          slots: [
            ["09:00–10:00", 0, false],
            ["12:00–13:00", 1, true],
            ["17:00–18:00", 1, true],
          ],
        },
        {
          label: "Wednesday",
          slots: [
            ["09:00–10:00", 0, true],
            ["12:00–13:00", 0, true],
            ["17:00–18:00", 2, true],
          ],
        },
      ];
      let day = 0,
        slot = 0;
      const $ = (id) => document.getElementById(id);
      function update() {
        const choice = days[day].slots[slot];
        $("selection").textContent = days[day].label + ", " + choice[0];
        $("fee").textContent =
          choice[1] === 0 ? "No collection fee" : "£" + choice[1].toFixed(2);
        $("result").hidden = true;
      }
      function render() {
        $("dates").replaceChildren(
          ...days.map((d, i) => {
            let b = document.createElement("button");
            b.textContent = d.label;
            b.setAttribute("aria-pressed", i === day);
            b.onclick = () => {
              day = i;
              slot = d.slots.findIndex((s) => s[2]);
              render();
            };
            return b;
          }),
        );
        $("slotLabel").textContent = days[day].label + " collection times";
        $("slots").replaceChildren(
          ...days[day].slots.map((s, i) => {
            let l = document.createElement("label");
            l.className = "slot";
            let input = document.createElement("input");
            input.type = "radio";
            input.name = "time";
            input.checked = i === slot;
            input.disabled = !s[2];
            input.onchange = () => {
              slot = i;
              update();
            };
            let text = document.createElement("span");
            text.textContent = s[0];
            let fee = document.createElement("strong");
            fee.textContent = s[2]
              ? s[1] === 0
                ? "No fee"
                : "£" + s[1].toFixed(2)
              : "Unavailable";
            l.append(input, text, fee);
            return l;
          }),
        );
        update();
      }
      $("review").onclick = () => {
        $("result").hidden = false;
        $("result").textContent =
          "Local selection ready: " +
          $("selection").textContent +
          ". No slot has been reserved.";
      };
      render();
    </script>
  </body>
</html>
```

Kod referansı

- Özel paket veya kimlik bilgisi gerekmez.

## Sainsbury's tasarım sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Fable paketine erişim, kamuya açık ve kendi içinde eksiksiz olan bu çalışmadan ayrıdır.

```
# Save the complete HTML example as index.html
python3 -m http.server 8080
# Open http://localhost:8080
```

### Projeniz İçin Bir İstem

```
Bu eksiksiz HTML örneğini temel alarak Sainsbury’s yönergelerine uygun bir teslim alma saati seçicisi oluşturun. Tek bir marka paleti, turuncu işlem düğmesinde siyah metin, etiketli yerel radyo düğmeleri, 48px dokunma alanı ve açıkça belirtilmiş 768px düzen tercihi kullanın. Seçim değiştiğinde inceleme geri bildirimini temizleyin. Kurgusal uygunluk verileri kullanın; Fable çalışma zamanının kullanıldığını veya rezervasyonun başarıyla yapıldığını iddia etmeyin.
```

## Sainsbury's tasarım sistemi Kaynaklar ve Kapsam

Sainsbury’s’in kamuya açık yönergelerini temel alan bir OpenDesign uygulama çalışmasıdır. Bu, özel Fable çalışma zamanı değil, baştan oluşturulmuş bir HTML örneğidir. Yeniden dağıtılmamış Mary Ann varlıkları yerine Arial kullanılır; teslim alma saatleri ve ücretler kurgusaldır.

- Sainsbury’s renkleri Palet değerleri ve belgelenmiş turuncu kontrast sınırlaması.

- Boyut belirteçleri Kenarlık, aralık ve kesme noktası değerleri.

- Tipografi Marka yazı tipleri, ölçek ve duyarlı davranış.

- Radyo düğmesi Seçim, etiketler ve gruplandırma.

- Button İşlem hiyerarşisi, etiketler ve dokunma alanları.

- İş ortağı erişimi Özel kod tabanına erişim ve uygulama yolları.

- Düzen Editoryal düzen ızgarası; boyut belirteci kesme noktalarından farklıdır.

## Sainsbury's tasarım sistemi İlgili Kaynaklar

### Salesforce Lightning

Yoğun kayıt işlemleri için bir Lightning tasarım kılavuzu: gerçek aralıklar, tipografi ve anlamsal renkler, düzenlenebilir bir vaka çalışma alanı, alan doğrulaması ve yerel değişiklikleri yansıtan bir etkinlik geçmişi.

### Samsung One UI

Özgün ve eksiksiz bir okuma tercihleri önizlemesi üzerinden One UI’ın görüntüleme ve etkileşim yapısını, 24dp kenar boşluğu yönergelerini ve %200 metin ölçekleme gereksinimini inceleyin. Koyu görünüm ve açık sıfırlama kurtarma akışı da içerir.

### SAP Fiori

UI5 Web Components aracılığıyla SAP Fiori’ın Horizon temasını kullanın: gerçek tema parametreleri, açık içerik yoğunluğu, anlamsal değer durumları ve yerel doğrulama içeren bir satın alma talebi düzeni.


- [Uygulama başvurusu](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Kaynak](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Kaynak](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Kaynak](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Kod referansı](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Sainsbury’s renkleri Palet değerleri ve belgelenmiş turuncu kontrast sınırlaması.](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Boyut belirteçleri Kenarlık, aralık ve kesme noktası değerleri.](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Tipografi Marka yazı tipleri, ölçek ve duyarlı davranış.](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Radyo düğmesi Seçim, etiketler ve gruplandırma.](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Button İşlem hiyerarşisi, etiketler ve dokunma alanları.](https://design-systems.sainsburys.co.uk/components/button/)
- [İş ortağı erişimi Özel kod tabanına erişim ve uygulama yolları.](https://design-systems.sainsburys.co.uk/getting-started/for-third-party-partners/)
- [Düzen Editoryal düzen ızgarası; boyut belirteci kesme noktalarından farklıdır.](https://design-systems.sainsburys.co.uk/foundations/layout/)