# Дизайн-система Sainsbury's

## Предварительный просмотр интерфейса дизайн-система Sainsbury's

Измените день и время, посмотрите примерную стоимость, затем проверьте выбранный вариант.

## Справочник по дизайну дизайн-система Sainsbury's

Общедоступные рекомендации Sainsbury’s по цветам, токенам размеров, типографике и компонентам. Противоречащие друг другу опубликованные таблицы контрольных точек указаны отдельно, а не объединены.

### Назначение цветов палитры Sainsbury’s

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Primary brand base | #F06C00 | Фирменный акцент и цвет заливки кнопки; в этом примере используется чёрный текст. |
| Primary hover | #E55000 | Заливка при наведении; не подходит для мелкого текста на белом фоне. |
| Primary pressed | #C15100 | Состояние при нажатии. |
| Primary light | #FEF5F0 | Фон выделения и сводки. |
| Secondary base | #7F0442 | Сдержанный декоративный акцент. |
| Monochrome darker | #262626 | Основной текст. |
| Monochrome dark | #404040 | Вспомогательный текст. |
| Monochrome light | #D8D8D8 | Границы. |
| Monochrome lighter | #F2F2F2 | Фон недоступного варианта. |
| Success lighter | #E6F4ED | Фон локального отзыва. |
| Success darker | #246127 | Текст отзыва. |
| Info darker | #135CA3 | Контур фокуса приложения. |
### Опубликованные токены размеров

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| xs | 2px | Значение отступа из общедоступной таблицы токенов размеров. |
| sm | 4px | Значение отступа из общедоступной таблицы токенов размеров. |
| md | 8px | Значение отступа из общедоступной таблицы токенов размеров. |
| lg | 16px | Значение отступа из общедоступной таблицы токенов размеров. |
| xl | 24px | Значение отступа из общедоступной таблицы токенов размеров. |
| 2xl | 32px | Значение отступа из общедоступной таблицы токенов размеров. |
| 3xl | 40px | Значение отступа из общедоступной таблицы токенов размеров. |
| 4xl | 48px | Значение отступа из общедоступной таблицы токенов размеров. |
| width-sm | 1px | Токен границы; названия толщины и радиуса следует различать. |
| width-base | 2px | Токен границы; названия толщины и радиуса следует различать. |
| radius-base | 2px | Токен границы; названия толщины и радиуса следует различать. |
| radius-xl | 12px | Токен границы; названия толщины и радиуса следует различать. |
| min-width-sm | 576px | Контрольная точка из токенов; отличается от значения на странице с рекомендациями по макету. |
| min-width-md | 768px | Контрольная точка из токенов; отличается от значения на странице с рекомендациями по макету. |
| min-width-lg | 992px | Контрольная точка из токенов; отличается от значения на странице с рекомендациями по макету. |
| min-width-xl | 1200px | Контрольная точка из токенов; отличается от значения на странице с рекомендациями по макету. |
### Типографическая шкала Sainsbury’s

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Body 1 | 1rem / 1.5 / Arial Regular | Основной текст. |
| Caption | 0.875rem / 1.571 / Arial Regular | Вспомогательные примечания. |
| Label 1 | 1rem / 1.5 / Arial Bold | Подписи элементов управления. |
| Display 1 | 1.25rem / 1.3 | Фирменный шрифт для крупных надписей согласно официальным рекомендациям; здесь используется запасной шрифт. |
| Display 2 | 1.5rem / 1.333 | Адаптивная альтернатива — Display 3. |
| Display 3 | 1.875rem / 1.333 | Адаптивная альтернатива — Display 4. |
| Display 4 | 2.375rem / 1.316 | Адаптивная альтернатива — Display 5. |
| Display 5 | 3rem / 1.292 | Адаптивная альтернатива — Display 6. |
| Display 6 | 3.75rem / 1.267 | Наибольший задокументированный размер текста для крупных надписей. |
| Responsive type threshold | larger than 720px | Не связан с контрольной точкой токена размера 768px. |
## Полное руководство дизайн-система Sainsbury's

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система Sainsbury's Мультибрендовая система и доступ дизайн-система Sainsbury's

### Выберите одну тему бренда

> Fable поддерживает Sainsbury’s, Argos, Nectar, Tu и Habitat с помощью общих структур компонентов и значений для отдельных брендов. В этом руководстве используется только палитра Sainsbury’s. Если добавить фиолетовый цвет Nectar в элемент взаимодействия Sainsbury’s или предположить, что во всех брендах используется один шрифт, чёткая граница между системами исчезнет. Закрепите выбранную тему за точкой входа приложения.

### Различайте общедоступные рекомендации и закрытые пакеты

В общедоступном руководстве для партнёров описаны компоненты React, Fable Styles и пакет дизайн-токенов, однако для доступа к кодовой базе нужны учётные данные, которые можно запросить у представителя Sainsbury’s. Для этого примера они не нужны: это завершённая оригинальная реализация HTML на основе опубликованных рекомендаций. Она не выдаёт себя за среду выполнения Fable и не содержит выдуманных команд установки для недоступного реестра.

## Дизайн-система Sainsbury's Палитра и контраст дизайн-система Sainsbury's

### Используйте оранжевый цвет с подходящей парой для текста

В источнике указано, что базовый и тёмный оттенки оранжевого не обеспечивают достаточный контраст для обычного текста на белом фоне. В примере оранжевый используется как цвет заливки с чёрным текстом на кнопке, а не для мелкого текста на белом фоне или мелкого белого текста на оранжевом фоне. Указанное в документации исключение для фирменных цветов не следует незаметно превращать в утверждение, будто любой цветовой паре соответствует требованиям доступности.

### Сохраняйте смысловую однозначность отзывов

Для результата проверки используется зелёный фон успешного статуса и тёмно-зелёный текст. Недоступные временные интервалы отмечены нейтральным фоном и текстовой подписью, а у выбранного интервала есть и отмеченный радиопереключатель, и оранжевый контур. Цвет служит дополнительной подсказкой, но не заменяет текст с указанием времени, доступности или выбора.

## Дизайн-система Sainsbury's Отступы, углы и контрольные точки дизайн-система Sainsbury's

### Следуйте опубликованной шкале размеров

В примере интервалы между вариантами составляют 8px, внутренние отступы в каждом временном интервале — 16px, а расстояния между основными группами — 24–32px. У элементов управления радиус угла равен 2px, а у сводки используется документированное значение 12px. Эти различия помогают обозначить группировку, а не сводят всё оформление к одинаковым скруглённым карточкам.

### Укажите расхождение в документации

В руководстве по макету указаны пороговые значения для устройств 600px и 900px, а в таблице токенов размеров — 576px, 768px и 992px. В руководстве по типографике отдельно указано изменение размеров крупных надписей при ширине свыше 720px. Это не взаимозаменяемые обозначения одной шкалы. В этой реализации для колонок выбрана контрольная точка 768px из таблицы токенов размеров, и этот выбор явно указан.

## Дизайн-система Sainsbury's Типографика и полезная информация дизайн-система Sainsbury's

### Соблюдайте границы использования фирменных шрифтов

В официальных стилях Sainsbury’s для крупных надписей используется Mary Ann Extra Bold, а для обычного текста — Arial. В общедоступном примере везде используется Arial, поскольку фирменные файлы шрифта не включены. Сохраняются соотношения размеров и высоты строки, но запасной шрифт не выдаётся за визуально идентичный оригиналу. Уровни семантических заголовков не зависят от размеров крупных надписей.

### Ясно опишите выбор интервала получения заказа

Для каждого временного интервала указаны диапазон времени и стоимость либо отметка о недоступности. В сводке повторяются выбранные день, время и пример местоположения. Основное действие называется «Проверить получение заказа» и описывает следующий локальный шаг. Чтобы пример выглядел коммерчески убедительнее, в него не добавлены выдуманные таймер, сумма заказа или сообщение об успешном бронировании.

## Дизайн-система Sainsbury's Радиоварианты и локальное состояние дизайн-система Sainsbury's

### Используйте зависимые варианты в группе

Элементы выбора дня меняют список доступных временных интервалов, а каждый интервал представлен нативным радиопереключателем в одной именованной группе. При смене дня выбирается первый доступный интервал и обновляется сводка. Недоступный вариант остаётся видимым, но выбрать его нельзя. Нативные радиопереключатели обеспечивают привычную работу с клавиатуры без необходимости воссоздавать её с помощью кликабельных div.

### Не допускайте устаревших утверждений о бронировании

При нажатии «Проверить» показывается локальное подтверждение и сообщается, что интервал не забронирован. При смене дня или времени результат скрывается. Для подтверждения бронирования в рабочем процессе потребовались бы новая проверка доступности и ответ сервера. В примере изолирован контракт взаимодействия, чтобы отсутствие серверной части нельзя было принять за завершённое бронирование.

## Дизайн-система Sainsbury's Области нажатия, фокус и адаптивное поведение дизайн-система Sainsbury's

### Оставьте достаточно места для выбора

В общедоступных рекомендациях для кнопок указана минимальная область нажатия 48px. Кнопки выбора дня и действия проверки имеют такую высоту, а нажатие на весь подписанный временной интервал выбирает его. Синий контур фокуса остаётся видимым на оранжевом и светлом фоне. Декоративный значок корзины скрыт от вспомогательных технологий.

### Обеспечьте перенос длинного текста

При узкой ширине сводка располагается после списка вариантов, а декоративный значок исчезает. Подписи интервалов и цены остаются в обычном потоке документа, а высота элементов может меняться. Переведённое или более длинное название местоположения не должно обрезаться в карточке фиксированного размера; в этом англоязычном прототипе для будущей локализации оставлено достаточно места.

## Дизайн-система Sainsbury's Реализация и проверка AI-агентом дизайн-система Sainsbury's

### Запустите автономный пример

Сохраните пример HTML целиком и запустите его локально. Три дня и по три временных интервала на каждый день — это заданные в примере тестовые данные; все изменения хранятся в памяти. Исходный код содержит CSS, создание радиопереключателей, обновление сводки и очистку устаревших отзывов, поэтому за предварительным просмотром не скрывается недостающий слой приложения.

1. Сохраните полный файл под именем index.html.

2. Выберите вторник и убедитесь, что недоступный утренний интервал выбрать нельзя.

3. Измените время и проверьте сводку.

4. Нажмите «Проверить», затем смените день и убедитесь, что предыдущий результат исчез.

### Переходите на Fable только при подтверждённом доступе

Для авторизованной внутренней интеграции получите реальный доступ к пакету и изучите текущую тему и API компонентов. Сохраняя поведение примера, замените исходную разметку поддерживаемыми компонентами. Прежде чем считать скриншот подтверждением реализации, убедитесь, что установленная шкала токенов соответствует общедоступным источникам.

- Последовательно используйте одну тему бренда.

- Проверьте доступ к пакету и актуальность API.

- Проверяйте контраст текста отдельно от точности передачи фирменных цветов.

## Дизайн-система Sainsbury's Примеры компонентов дизайн-системы дизайн-система Sainsbury's

### Полный сценарий выбора интервала получения заказа

Самостоятельная реализация 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>
```

Справочник по коду

- Закрытый пакет и учётные данные не требуются.

## Настройка AI-агента дизайн-система Sainsbury's

### Отправная точка для реализации

Доступ к пакету Fable предоставляется отдельно от этого общедоступного автономного примера.

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

### Запрос для вашего проекта

```
Создайте по этому завершённому примеру HTML селектор временных интервалов для получения заказа, опираясь на рекомендации Sainsbury’s. Используйте одну палитру бренда, чёрный текст на оранжевой кнопке действия, нативные подписанные радиопереключатели, область нажатия 48px и явно выбранную контрольную точку макета 768px. Очищайте отзыв после каждого изменения выбора. Используйте вымышленные данные о доступности и не заявляйте, что используется среда выполнения Fable или что бронирование успешно.
```

## Дизайн-система Sainsbury's Источники и область применения

Учебный пример приложения OpenDesign на основе общедоступных рекомендаций Sainsbury’s. Это оригинальная реализация HTML, а не закрытая среда выполнения Fable. Используется Arial, а не распространяемые файлы шрифта Mary Ann; интервалы получения заказа и стоимость вымышлены.

- Цвета Sainsbury’s Значения палитры и задокументированное ограничение контраста оранжевого цвета.

- Токены размеров Значения границ, отступов и контрольных точек.

- Типографика Фирменные шрифты, типографическая шкала и адаптивное поведение.

- Радиопереключатель Выбор, подписи и группировка.

- Button Иерархия действий, подписи и области нажатия.

- Доступ для партнёров Доступ к закрытой кодовой базе и пути реализации.

- Компоновка Сетка макета из редакционного руководства; отличается от контрольных точек токенов размеров.

## Дизайн-система Sainsbury's Связанные материалы

### Salesforce Lightning

Руководство по Lightning для работы с большим количеством записей: реальные отступы, типографика и семантические цвета, редактируемая рабочая область дела, проверка полей и история действий, отражающая локальные изменения.

### Samsung One UI

Изучите структуру просмотра и взаимодействия One UI, рекомендации по полям отступов 24dp и требование масштабирования текста на 200% на примере полноценного оригинального предпросмотра предпочтений чтения с тёмным оформлением и явным сбросом настроек для восстановления.

### SAP Fiori

Используйте тему Horizon в SAP Fiori с UI5 Web Components: реальные параметры темы, явно заданная плотность контента, семантические состояния значений и сценарий оформления запроса на покупку с локальной проверкой.


- [Справочник по реализации](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Источник](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Источник](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Источник](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Справочник по коду](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Цвета Sainsbury’s Значения палитры и задокументированное ограничение контраста оранжевого цвета.](https://design-systems.sainsburys.co.uk/foundations/colour/sainsburys-colours/)
- [Токены размеров Значения границ, отступов и контрольных точек.](https://design-systems.sainsburys.co.uk/foundations/design-tokens/size-tokens/)
- [Типографика Фирменные шрифты, типографическая шкала и адаптивное поведение.](https://design-systems.sainsburys.co.uk/foundations/typography/)
- [Радиопереключатель Выбор, подписи и группировка.](https://design-systems.sainsburys.co.uk/components/radio-button/)
- [Button Иерархия действий, подписи и области нажатия.](https://design-systems.sainsburys.co.uk/components/button/)
- [Доступ для партнёров Доступ к закрытой кодовой базе и пути реализации.](https://design-systems.sainsburys.co.uk/getting-started/for-third-party-partners/)
- [Компоновка Сетка макета из редакционного руководства; отличается от контрольных точек токенов размеров.](https://design-systems.sainsburys.co.uk/foundations/layout/)