83.3K+Scarica
Commercio al dettaglio · Nuova risorsa

Sistema di design Sainsbury's.

Applica le linee guida pubbliche di design di Sainsbury a un flusso completo di scelta di una fascia oraria per il ritiro: riferimenti reali a palette e dimensioni, opzioni radio accessibili, riepilogo aggiornato e riscontro locale trasparente.

Scarica OpenDesign Scarica DESIGN.md
Guida OpenDesign7 capitoli38 voci di riferimentoGuida applicativa originale
01

Anteprima dell’interfaccia di sistema di design Sainsbury's

Modifica giorno e orario, esamina il costo di esempio e poi controlla la selezione locale.

Scegli una fascia per la raccoltaApri l’esempio completo
Interpretazione originale di HTML delle linee guida pubbliche di Sainsbury’s. · Riferimento per l’implementazione
02

Riferimento di design di sistema di design Sainsbury's

Linee guida pubbliche di Sainsbury’s su colori, token dimensionali, tipografia e componenti. Le tabelle pubblicate con breakpoint discordanti sono segnalate, non accorpate.

Ruoli della palette di Sainsbury’s

Fonte
Nome / regolaValore / configurazioneUtilizzo
Primary brand base#F06C00 Colore d’accento del brand e riempimento dei pulsanti, con testo scuro in questo studio.
Primary hover#E55000 Riempimento al passaggio del mouse; non usare per testo piccolo su bianco.
Primary pressed#C15100 Stato premuto.
Primary light#FEF5F0 Sfondo di selezione e riepilogo.
Secondary base#7F0442 Accento decorativo da usare con parsimonia.
Monochrome darker#262626 Contenuto principale.
Monochrome dark#404040 Contenuto di supporto.
Monochrome light#D8D8D8 Bordi.
Monochrome lighter#F2F2F2 Superficie di un’opzione non disponibile.
Success lighter#E6F4ED Superficie per i feedback della revisione locale.
Success darker#246127 Testo del feedback.
Info darker#135CA3 Contorno di focus dell’applicazione.

Token dimensionali pubblicati

Fonte
Nome / regolaValore / configurazioneUtilizzo
xs2pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
sm4pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
md8pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
lg16pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
xl24pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
2xl32pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
3xl40pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
4xl48pxValore di spaziatura tratto dalla tabella pubblica dei token dimensionali.
width-sm1pxToken del bordo; distinguere i nomi di spessore e raggio.
width-base2pxToken del bordo; distinguere i nomi di spessore e raggio.
radius-base2pxToken del bordo; distinguere i nomi di spessore e raggio.
radius-xl12pxToken del bordo; distinguere i nomi di spessore e raggio.
min-width-sm576pxBreakpoint del token; diverso da quello della pagina editoriale sul layout.
min-width-md768pxBreakpoint del token; diverso da quello della pagina editoriale sul layout.
min-width-lg992pxBreakpoint del token; diverso da quello della pagina editoriale sul layout.
min-width-xl1200pxBreakpoint del token; diverso da quello della pagina editoriale sul layout.

Scala tipografica di Sainsbury’s

Fonte
Nome / regolaValore / configurazioneUtilizzo
Body 11rem / 1.5 / Arial RegularTesto principale.
Caption0.875rem / 1.571 / Arial RegularNote di supporto.
Label 11rem / 1.5 / Arial BoldEtichette dei controlli.
Display 11.25rem / 1.3Carattere display del brand indicato nelle linee guida ufficiali; qui è usato un carattere sostitutivo.
Display 21.5rem / 1.333L’alternativa responsive è Display 3.
Display 31.875rem / 1.333L’alternativa responsive è Display 4.
Display 42.375rem / 1.316L’alternativa responsive è Display 5.
Display 53rem / 1.292L’alternativa responsive è Display 6.
Display 63.75rem / 1.267Dimensione display massima documentata.
Responsive type thresholdlarger than 720pxIndipendente dal breakpoint di 768px dei token dimensionali.
03

Sistema di design Sainsbury's Guida completa

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

DESIGN-sainsburys.md

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

Scarica la guida

Sistema di design Sainsbury's Sistema multi-brand sistema di design Sainsbury's e accesso

Scegli un tema del brand

Fable supporta Sainsbury’s, Argos, Nectar, Tu e Habitat tramite strutture condivise dei componenti e valori specifici per ciascun brand. Questa guida usa solo la palette di Sainsbury’s. Inserire il viola di Nectar in un’interazione di Sainsbury’s o presumere che tutti i brand usino lo stesso font cancellerebbe un confine esplicito del sistema. Associa il tema selezionato al punto di ingresso dell’applicazione.

Da questa guida su OpenDesign

Distingui le linee guida pubbliche dai pacchetti privati

La guida pubblica per i partner descrive i componenti React, Fable Styles e il pacchetto dei design token, ma per accedere al codice servono credenziali, da richiedere tramite un contatto di Sainsbury’s. Questo esempio non ne ha bisogno: è un HTML originale e completo, basato sulle linee guida pubblicate. Non finge di eseguire Fable né inventa comandi di installazione per un registro inaccessibile.

Sistema di design Sainsbury's Palette e contrasto sistema di design Sainsbury's

Usa l’arancione con un testo abbinato adeguato

La fonte documenta che l’arancione base e quello scuro non raggiungono il contrasto richiesto per il normale testo del corpo su sfondo bianco. L’esempio usa l’arancione come riempimento con testo nero sul pulsante, anziché usarlo per testi piccoli su bianco o affiancarlo a testi piccoli bianchi su arancione. Un’eccezione del brand indicata nella documentazione non deve trasformarsi implicitamente nell’affermazione che ogni combinazione sia accessibile.

Mantieni semantici i feedback

L’esito della revisione usa la superficie verde di successo e testo verde scuro. Le fasce orarie non disponibili hanno una superficie neutra e un’etichetta testuale, mentre quelle selezionate presentano sia un pulsante di opzione selezionato sia un contorno arancione. Il colore è un indizio di supporto: non sostituisce mai il testo dell’orario, della disponibilità o della selezione.

Sistema di design Sainsbury's Spaziatura, angoli e confini dei breakpoint sistema di design Sainsbury's

Segui la scala dimensionale pubblicata

L’esempio usa 8px tra le opzioni, 16px all’interno di ogni fascia oraria e 24–32px tra i gruppi principali. I controlli hanno un raggio degli angoli di 2px, mentre il riepilogo usa il raggio documentato di 12px. Queste differenze esprimono la suddivisione in gruppi, senza applicare ovunque lo stesso stile di scheda arrotondata.

Registra la discrepanza nella documentazione

La guida al layout indica soglie per i dispositivi di 600px e 900px, mentre la tabella dei token dimensionali riporta 576px, 768px e 992px. La guida tipografica modifica separatamente le dimensioni display sopra i 720px. Non sono nomi intercambiabili per un’unica scala. Questa implementazione sceglie la soglia di 768px dei token dimensionali per le colonne e dichiara esplicitamente tale scelta.

Sistema di design Sainsbury's Tipografia e contenuti utili sistema di design Sainsbury's

Rispetta i limiti d’uso del font del brand

Gli stili display ufficiali di Sainsbury’s usano Mary Ann Extra Bold, mentre il normale testo del corpo usa Arial. L’esempio pubblico usa Arial ovunque, poiché non include risorse del font del brand. Mantiene i rapporti tra scala e interlinea senza affermare che il carattere sostitutivo sia visivamente identico. I livelli semantici delle intestazioni restano indipendenti dalle dimensioni display.

Rendi chiara la scelta del ritiro

Sistema di design Sainsbury's Opzioni a pulsante di scelta e stato locale sistema di design Sainsbury's

Usa scelte dipendenti all’interno di un gruppo

I controlli dei giorni modificano le fasce orarie disponibili e ogni orario è un pulsante di scelta nativo all’interno di un gruppo con nome. Cambiando giorno viene selezionata la prima fascia disponibile e aggiornato il riepilogo. Un’opzione non disponibile resta visibile, ma non può essere selezionata. I pulsanti di scelta nativi offrono un comportamento da tastiera familiare, senza doverlo ricreare con div cliccabili.

Evita di mostrare conferme di prenotazione non più valide

La revisione mostra una conferma locale e specifica che nessuna fascia è stata prenotata. Cambiando giorno o orario, il risultato scompare. Un flusso di produzione richiederebbe un nuovo controllo della disponibilità e una risposta del server prima di poter confermare una prenotazione. L’esempio isola il contratto d’interazione, così che il lavoro backend mancante non venga scambiato per una prenotazione completata.

Sistema di design Sainsbury's Aree interattive, focus e comportamento responsive sistema di design Sainsbury's

Assicurati che le scelte abbiano spazio sufficiente

Le linee guida pubbliche sui pulsanti raccomandano un’area touch di 48px. I pulsanti dei giorni e l’azione di revisione rispettano questa altezza, mentre l’intera fascia oraria etichettata è cliccabile. Il contorno blu del focus resta visibile su superfici arancioni e chiare. Il simbolo decorativo del carrello è nascosto alle tecnologie assistive.

Consenti al contenuto lungo di andare a capo

Sugli schermi stretti, il riepilogo viene dopo l’elenco delle opzioni e il simbolo decorativo scompare. Le etichette delle fasce e i prezzi restano nel normale flusso del documento, con altezza flessibile. Il nome di una località tradotto o più lungo non dovrebbe essere tagliato all’interno di una scheda di altezza fissa; questo prototipo in inglese lascia spazio per la successiva fase di localizzazione.

Sistema di design Sainsbury's Implementazione e revisione dell’agent sistema di design Sainsbury's

Esegui l’esempio autonomo

Salva l’esempio HTML completo e servilo localmente. I tre giorni e le tre fasce orarie per giorno sono dati di esempio definiti nel codice e tutte le modifiche restano in memoria. Il sorgente contiene l’CSS, la creazione dei pulsanti di scelta, l’aggiornamento del riepilogo e la rimozione dei feedback non più validi: dietro l’anteprima non manca alcun livello applicativo.

  1. Salva il file completo come index.html.
  2. Scegli martedì e verifica che la fascia mattutina non disponibile non possa essere selezionata.
  3. Modifica l’orario e controlla il riepilogo.
  4. Rivedi, poi cambia giorno e verifica che il vecchio risultato scompaia.

Passa a Fable solo con accesso verificato

Per un’integrazione interna autorizzata, ottieni l’accesso effettivo al pacchetto e verifica i temi e le API dei componenti attuali. Mantieni il comportamento dell’esempio sostituendone il markup originale con componenti supportati. Prima di considerare uno screenshot una prova dell’implementazione, verifica che la scala dei token installata corrisponda ai riferimenti pubblici.

  • Usa un solo tema del brand in modo coerente.
  • Verifica l’accesso ai pacchetti e le API attuali.
  • Controlla separatamente il contrasto del testo e la fedeltà ai colori del brand.

Sistema di design Sainsbury's Esempi di componenti del sistema di progettazione sistema di design Sainsbury's

Flusso completo di scelta della fascia di ritiro

Esempio indipendente HTML/CSS/JavaScript con selezione del giorno, fasce orarie a pulsante di scelta, disponibilità disattivata e riepilogo aggiornato in tempo reale.

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>

Riferimento del codice

  • Non servono pacchetti privati né credenziali.
04

Sistema di design Sainsbury's Configurazione dell’agent

Punto di partenza per l’implementazione

L’accesso ai pacchetti di Fable è separato da questo studio pubblico e autonomo.

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

Un prompt per il tuo progetto

Prompt per l’agente
Crea un selettore di fasce orarie per il ritiro ispirato alle linee guida di Sainsbury’s, partendo da questo esempio completo HTML. Mantieni un’unica palette del brand, testo nero sull’azione arancione, pulsanti di scelta nativi con etichette, un’area interattiva di 48px e la scelta esplicita del layout a 768px. Rimuovi i feedback della revisione ogni volta che cambia la selezione. Usa dati di disponibilità fittizi e non affermare di eseguire il runtime di Fable né di aver completato una prenotazione.
05

Sistema di design Sainsbury's Fonti e ambito

Studio applicativo OpenDesign basato sulle linee guida pubbliche di Sainsbury’s. Si tratta di HTML originale, non del runtime privato di Fable. Usa Arial anziché risorse Mary Ann ridistribuite, con fasce orarie e tariffe di ritiro fittizie.