# 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 디자인 시스템 Sainsbury's 디자인 시스템 구현 및 에이전트 검토

### 독립 실행형 예제 실행

완성된 HTML 예제를 저장하고 로컬에서 제공하세요. 3일과 하루 3개 슬롯은 예시 데이터로 작성되어 있으며, 모든 변경 사항은 메모리에만 저장됩니다. 소스에는 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>
```

코드 참조

- 비공개 패키지나 자격 증명이 필요하지 않습니다.

## 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 디자인 시스템 출처 및 범위

Sainsbury’s의 공개 지침을 바탕으로 한 OpenDesign 애플리케이션 연구입니다. 비공개 Fable 런타임이 아니라 자체 제작한 HTML입니다. 재배포된 Mary Ann 에셋 대신 Arial을 사용하며, 수집 슬롯과 수수료는 가상의 예시입니다.

- Sainsbury’s 색상 팔레트 값과 문서화된 주황색 대비 제한 사항입니다.

- 크기 토큰 테두리, 간격, 중단점 값입니다.

- 타이포그래피 브랜드 글꼴, 크기 스케일, 반응형 동작입니다.

- 라디오 버튼 선택, 레이블, 그룹화입니다.

- Button 동작 계층 구조, 레이블, 터치 영역입니다.

- 파트너 접근 비공개 코드베이스 접근 및 구현 경로입니다.

- 레이아웃 편집용 레이아웃 그리드입니다. 크기 토큰의 중단점과는 다릅니다.

## Sainsbury's 디자인 시스템 관련 리소스

### Salesforce Lightning

밀도 높은 레코드 작업을 위한 Lightning 블루프린트 가이드입니다. 실제 간격과 타이포그래피, 의미 기반 색상, 편집 가능한 케이스 작업 공간, 필드 유효성 검사, 로컬 변경 사항을 반영하는 활동 기록을 제공합니다.

### Samsung One UI

보기 및 상호작용 구조, 24dp 여백 지침, 200% 텍스트 확대 요구사항을 살펴볼 수 있는 완성도 높은 오리지널 읽기 환경 설정 미리보기입니다. 어두운 화면과 명시적인 초기화 기능도 포함되어 있습니다.

### SAP Fiori

UI5 Web Components를 통해 SAP Fiori의 Horizon 테마를 사용하세요. 실제 테마 매개변수, 명시적인 콘텐츠 밀도, 의미 기반 값 상태, 로컬 유효성 검사를 포함한 구매 요청 구성을 활용하세요.


- [구현 레퍼런스](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/)