# Sistema di design Sainsbury's

## Anteprima dell’interfaccia di sistema di design Sainsbury's

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

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

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| 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

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| xs | 2px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| sm | 4px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| md | 8px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| lg | 16px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| xl | 24px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| 2xl | 32px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| 3xl | 40px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| 4xl | 48px | Valore di spaziatura tratto dalla tabella pubblica dei token dimensionali. |
| width-sm | 1px | Token del bordo; distinguere i nomi di spessore e raggio. |
| width-base | 2px | Token del bordo; distinguere i nomi di spessore e raggio. |
| radius-base | 2px | Token del bordo; distinguere i nomi di spessore e raggio. |
| radius-xl | 12px | Token del bordo; distinguere i nomi di spessore e raggio. |
| min-width-sm | 576px | Breakpoint del token; diverso da quello della pagina editoriale sul layout. |
| min-width-md | 768px | Breakpoint del token; diverso da quello della pagina editoriale sul layout. |
| min-width-lg | 992px | Breakpoint del token; diverso da quello della pagina editoriale sul layout. |
| min-width-xl | 1200px | Breakpoint del token; diverso da quello della pagina editoriale sul layout. |
### Scala tipografica di Sainsbury’s

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Body 1 | 1rem / 1.5 / Arial Regular | Testo principale. |
| Caption | 0.875rem / 1.571 / Arial Regular | Note di supporto. |
| Label 1 | 1rem / 1.5 / Arial Bold | Etichette dei controlli. |
| Display 1 | 1.25rem / 1.3 | Carattere display del brand indicato nelle linee guida ufficiali; qui è usato un carattere sostitutivo. |
| Display 2 | 1.5rem / 1.333 | L’alternativa responsive è Display 3. |
| Display 3 | 1.875rem / 1.333 | L’alternativa responsive è Display 4. |
| Display 4 | 2.375rem / 1.316 | L’alternativa responsive è Display 5. |
| Display 5 | 3rem / 1.292 | L’alternativa responsive è Display 6. |
| Display 6 | 3.75rem / 1.267 | Dimensione display massima documentata. |
| Responsive type threshold | larger than 720px | Indipendente dal breakpoint di 768px dei token dimensionali. |
## Sistema di design Sainsbury's Guida completa

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

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

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

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

Ogni fascia indica un intervallo orario e una tariffa oppure che non è disponibile. Il riepilogo ripete il giorno e l’ora selezionati e la località d’esempio. L’azione principale è «Rivedi il ritiro» e descrive il passaggio successivo nel flusso locale. Per rendere l’esempio più commerciale non vengono inventati timer, importi totali dell’ordine o conferme di prenotazione.

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

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

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

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

### Un prompt per il tuo progetto

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

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

- Colori di Sainsbury’s Valori della palette e limite di contrasto documentato per l’arancione.

- Token dimensionali Valori di bordi, spaziatura e breakpoint.

- Tipografia Font del brand, scala e comportamento responsive.

- Pulsante di scelta Selezione, etichette e raggruppamento.

- Button Gerarchia delle azioni, etichette e aree interattive.

- Accesso per i partner Accesso al codice privato e percorsi di implementazione.

- Layout Griglia editoriale del layout; diversa dai breakpoint dei token dimensionali.

## Sistema di design Sainsbury's Risorse correlate

### Salesforce Lightning

Una guida Lightning per attività con record ad alta densità: spaziature, tipografia e colori semantici reali, un’area di lavoro modificabile per i casi, convalida dei campi e cronologia delle attività che riflette le modifiche locali.

### Samsung One UI

Esamina la struttura di visualizzazione e interazione di One UI, le indicazioni sui margini di 24dp e il requisito di ridimensionamento del testo al 200% attraverso un’anteprima originale e completa delle preferenze di lettura, con aspetto scuro e ripristino esplicito.

### SAP Fiori

Usa il tema Horizon di SAP Fiori tramite UI5 Web Components: parametri tema reali, densità dei contenuti esplicita, stati semantici dei valori e composizione di una richiesta d’acquisto con convalida locale.


- [Riferimento per l’implementazione](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Fonte](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Fonte](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Fonte](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Riferimento del codice](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Colori di Sainsbury’s Valori della palette e limite di contrasto documentato per l’arancione.](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Token dimensionali Valori di bordi, spaziatura e breakpoint.](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Tipografia Font del brand, scala e comportamento responsive.](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Pulsante di scelta Selezione, etichette e raggruppamento.](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Button Gerarchia delle azioni, etichette e aree interattive.](https://design-systems.sainsburys.co.uk/components/button/)
- [Accesso per i partner Accesso al codice privato e percorsi di implementazione.](https://design-systems.sainsburys.co.uk/getting-started/for-third-party-partners/)
- [Layout Griglia editoriale del layout; diversa dai breakpoint dei token dimensionali.](https://design-systems.sainsburys.co.uk/foundations/layout/)