83.3K+İndir
Perakende e-ticaret · Yeni Kaynak

Sainsbury's tasarım sistemi.

Gerçek palet ve boyut referansları, erişilebilir radyo seçenekleri, güncellenen bir özet ve doğru yerel geri bildirimle eksiksiz bir koleksiyon zamanı akışına Sainsbury’s’in herkese açık tasarım yönergelerini uygulayın.

OpenDesign’ı indirin DESIGN.md dosyasını indir
OpenDesign Kılavuzu7 Bölüm38 Referans KaydıÖzgün Uygulama Kılavuzu
01

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.

Koleksiyon saati seçinÖrneğin Tamamını Aç
Sainsbury’s’in herkese açık yönergelerinin özgün HTML yorumu. · Uygulama başvurusu
02

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

Kaynak
Ad / KuralDeğer / YapılandırmaKullanı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

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
xs2pxKamuya açık boyut belirteci tablosundaki aralık değeri.
sm4pxKamuya açık boyut belirteci tablosundaki aralık değeri.
md8pxKamuya açık boyut belirteci tablosundaki aralık değeri.
lg16pxKamuya açık boyut belirteci tablosundaki aralık değeri.
xl24pxKamuya açık boyut belirteci tablosundaki aralık değeri.
2xl32pxKamuya açık boyut belirteci tablosundaki aralık değeri.
3xl40pxKamuya açık boyut belirteci tablosundaki aralık değeri.
4xl48pxKamuya açık boyut belirteci tablosundaki aralık değeri.
width-sm1pxKenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun.
width-base2pxKenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun.
radius-base2pxKenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun.
radius-xl12pxKenarlık belirteci; genişlik ve yarıçap adlarını birbirinden ayrı tutun.
min-width-sm576pxBelirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır.
min-width-md768pxBelirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır.
min-width-lg992pxBelirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır.
min-width-xl1200pxBelirteç kesme noktası; editoryal düzen sayfasındakinden farklıdır.

Sainsbury’s tipografi ölçeği

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
Body 11rem / 1.5 / Arial RegularAna metin.
Caption0.875rem / 1.571 / Arial RegularDestekleyici notlar.
Label 11rem / 1.5 / Arial BoldDenetim etiketleri.
Display 11.25rem / 1.3Resmî yönergelerdeki marka başlık yazı tipi; burada yedek yazı tipi kullanılır.
Display 21.5rem / 1.333Duyarlı tasarım alternatifi Display 3’tür.
Display 31.875rem / 1.333Duyarlı tasarım alternatifi Display 4’tür.
Display 42.375rem / 1.316Duyarlı tasarım alternatifi Display 5’tir.
Display 53rem / 1.292Duyarlı tasarım alternatifi Display 6’dır.
Display 63.75rem / 1.267Belgelenmiş en büyük başlık boyutu.
Responsive type thresholdlarger than 720px768px boyut belirteci kesme noktasından bağımsızdır.
03

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.

DESIGN-sainsburys.md

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

Kılavuzu İndir

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.

Bu OpenDesign kılavuzundan

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

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.

html
<!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.
04

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.

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

Projeniz İçin Bir İstem

Ajan İstemi
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.
05

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.