# NHS 디자인 시스템

## NHS 디자인 시스템 인터페이스 미리보기

방법을 선택하고, 선택 사항인 도움말을 확인하고, 응답하지 않은 질문을 해결한 다음 선호 사항을 수정하세요.

## NHS 디자인 시스템 디자인 참조

NHS.UK frontend 10.6.1 및 NHS 디지털 서비스 매뉴얼을 참고했습니다. 미리보기는 라이선스가 필요한 Frutiger나 NHS 로고가 아니라 Arial과 공식 로컬 CSS/JS를 사용합니다. 반응형 값은 선택한 패키지에 맞춰 확인했으며 임상 콘텐츠는 제공하지 않습니다.

### 타이포그래피와 아이덴티티

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Frutiger를 사용하려면 관련 라이선스가 필요하므로 이 연구에서는 Arial을 사용합니다. |
| nhsuk-body | 16px small / 19px large | 기본 본문 텍스트. |
| nhsuk-body-l | 26px desktop | 도입부의 모든 문장이 아니라 리드 문단에 사용합니다. |
| nhsuk-body-s | 14px small / 16px large | 보조 정보는 필요한 곳에만 사용합니다. |
| nhsuk-heading-l | Transactional h1 | 다음 h2 제목에 heading-m을 사용합니다. |
### 시맨틱 색상 변수

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | 본문 콘텐츠 |
| $nhsuk-secondary-text-colour | #4c6272 | 안내 |
| $nhsuk-link-colour | #005eb8 | 연결된 페이지 |
| $nhsuk-focus-colour | #ffeb3b | 키보드 포커스 |
| $nhsuk-border-colour | #d8dde0 | 구조적 경계 |
| $nhsuk-input-border-colour | #4c6272 | 입력 경계 |
| $nhsuk-error-colour | #d5281b | 유효성 검사 피드백 |
| $nhsuk-button-colour | #007f3b | 주요 작업 |
### 반응형 간격

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-2 | 8px → 8px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-3 | 8px → 16px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-4 | 16px → 24px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-5 | 24px → 32px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-6 | 32px → 40px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-7 | 40px → 48px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-8 | 48px → 56px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
| nhsuk-u-margin-bottom-9 | 56px → 64px | 768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요. |
### 페이지 구성

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | 고정 너비 외부 컨테이너. |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | 거래형 서비스에 권장됩니다. |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | 그리드 너비는 769px부터 적용됩니다. |
| Breakpoints | 320 / 641 / 769 / 990px | 모바일, 태블릿, 데스크톱, 대형 데스크톱. |
| nhsuk-u-reading-width | Readable content measure | 주변 컨테이너가 넓을 때 사용하세요. |
## NHS 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## NHS 디자인 시스템 NHS 맥락과 글꼴

### 잘못된 정체성을 내세우지 않는 의료 인터페이스

> NHS.UK 프런트엔드는 시각적·상호작용 기반을 제공하지만, 진료 일정을 예약하거나 진료소에서 지원하는 방문 방식을 결정하지는 않습니다. 이 예시에서는 가상의 예약 정보를 보여 주고 방문자가 선호 방식을 선택할 수 있게 합니다. 선택 결과는 로컬에서 확인하는 용도일 뿐, 예약으로 이어지지 않습니다.

Frutiger는 라이선스 조건이 적용되는 NHS 브랜드 자산입니다. 이 독립 리소스에서는 문서에 명시된 대체 글꼴인 Arial을 사용하고 NHS 로고는 포함하지 않습니다. 공식 CSS는 그대로 유지하며, Frutiger 요청을 방지하도록 로컬 글꼴을 명시적으로 재정의합니다.

지원 사양 읽기

## NHS 디자인 시스템 트랜잭션 화면의 타이포그래피

### 질문이 계층 구조를 이끌도록 구성하기

페이지의 질문에는 nhsuk-heading-l을, 하위 섹션에는 nhsuk-heading-m을 사용합니다. 이는 안내 내용이 heading-xl로 시작하는 긴 편집형 페이지와 다릅니다. 라디오 필드셋에서는 그룹 의미를 유지하면서 범례에 제목 크기 스타일을 적용할 수 있습니다.

일반 문단 클래스는 본문, 리드 문구, 작은 보조 문구를 구분합니다. 26px 리드 문구는 페이지 시작 부분에 한 번 사용하는 것이 적절하며, 예약 안내에는 일반 본문 텍스트를 사용합니다. 미리보기에는 날짜와 위치 이름이 줄바꿈될 수 있도록 충분한 너비를 확보합니다.

지원 사양 읽기

## NHS 디자인 시스템 간격과 컨테이너

### NHS 간격 단위는 GOV.UK 간격 단위와 다릅니다

NHS 반응형 단위는 GOV.UK와 다른 순서를 따르며 768px 초과 지점에서 전환됩니다. 예를 들어 단위 6은 32px에서 40px로 바뀝니다. 헬퍼 이름이 비슷하다는 이유만으로 GOV.UK의 단위 6 값을 NHS에 적용하지 마세요.

이 데모에서는 960px 컨테이너와 2/3 너비의 본문 열을 사용합니다. 네이티브 그리드 동작에 따라 데스크톱보다 작은 화면에서는 한 열로 표시됩니다. 레이아웃 변경은 라이브러리가 제어하며, 별도의 작은 브랜드 스트립에는 애플리케이션 스타일을 적용합니다.

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

코드 참조

지원 사양 읽기

### 반응형 경계값

문서에서는 641px을 태블릿, 769px을 데스크톱 기준으로 정의합니다. 그리드 열 너비는 데스크톱 기준에서 적용되지만, 그렇다고 모든 타이포그래피 규칙이 같은 경계값을 따르는 것은 아닙니다. 모든 속성에 전역 중단점을 하나씩 구현하는 대신 네이티브 클래스를 사용하세요.

지원 사양 읽기

## NHS 디자인 시스템 방문 방식 선택 그룹

### 필드셋 하나, 답변 하나

이 예시에서는 표시되는 범례가 있는 nhsuk-fieldset을 사용하고, 라디오 입력에 같은 name 속성값을 지정합니다. 각 입력에는 고유한 id와 라벨이 있습니다. aria-describedby를 통해 힌트를 그룹과 연결합니다. 이러한 관계를 설정하면 브라우저가 하나의 상호 배타적인 선택 항목으로 인식할 수 있습니다.

라디오 항목 구조에서는 입력과 라벨을 nhsuk-radios__item 안에 배치합니다. 기본 라디오는 주요 질문에 적합하고, 작은 변형은 필터처럼 더 촘촘한 맥락에 사용합니다. 가상의 방문 방식은 화살표 키로 조작해도 서로 배타적으로 선택됩니다.

- 범례가 결정할 내용을 알려 줍니다.

- 공통 attendance 이름으로 선택 그룹을 만듭니다.

- 각 라벨은 서로 다른 입력 ID를 대상으로 합니다.

지원 사양 읽기

## NHS 디자인 시스템 필수 정보를 숨기지 않는 도움말

### 네이티브 details 요소 사용하기

details 예시에는 nhsuk-details__summary와 summary-text span이 있으며, 그 뒤에 nhsuk-details__text가 옵니다. 브라우저의 네이티브 동작으로 열립니다. 예약 정보와 실제 예약이 이루어지지 않는다는 사실은 모든 방문자에게 중요하므로 공개 영역에 표시하세요.

10.6에서는 Nunjucks API에 summary.text 또는 summary.html을 사용하며, 이전의 summaryText 옵션은 더 이상 사용되지 않습니다. 매크로를 사용한다면 새로운 객체 형식을 선택하세요. HTML 예시는 템플릿 의존성을 추가하지 않으면서 동일한 구조를 유지합니다.

지원 사양 읽기

## NHS 디자인 시스템 선택 오류 및 확인

### 미리 선택하지 않고 그룹 유효성 검사하기

처음에는 아무 옵션도 선택되어 있지 않습니다. 답변을 선택하지 않고 계속하면 인라인 오류가 표시되고 그룹이 오류 메시지와 연결됩니다. 그러면 미리보기에서 오류에 포커스가 이동합니다. 확인 화면에서 돌아와도 선택한 항목은 그대로 표시됩니다. 이는 네이티브 컨트롤 위에 애플리케이션 상태 처리로 구현하는 동작입니다.

확인 화면에는 선택한 방문 방식과 가상의 예약 정보가 다시 표시됩니다. 작업 버튼에는 ‘선호 방식 변경’이라고 표시합니다. 의료 서비스에서 해당 선호 방식을 수락했다는 인상을 주는 확인 문구는 없으며, 건강 관련 조언이나 준비 요건도 임의로 추가하지 않습니다.

1. 방문 방식을 선택하기 전에 계속 진행하세요.

2. 전화를 선택하고 로컬 확인 화면을 여세요.

3. 방문으로 선호 방식을 변경하고 확인 화면이 업데이트되는지 살펴보세요.

지원 사양 읽기

## NHS 디자인 시스템 로컬 프런트엔드 에셋

### 선택한 패키지와 모듈 사용하기

설정 과정에서는 10.6.1 CSS와 브라우저 모듈을 정적 에셋 디렉터리에 복사합니다. 모듈은 initAll을 내보내며, 컴포넌트 마크업이 생성된 후 이를 호출하세요. 독립형 예시에서도 동일한 배포 파일을 로컬에서 제공하고 페이지 수준에서 Arial을 재정의합니다.

스타일에는 컴포넌트 규칙과 반응형 기반 스타일이 포함됩니다. 확인 패널을 변경하는 작은 스크립트는 별도의 애플리케이션 코드입니다. 실제 서비스에서는 가상의 예약 레코드를 관리되는 데이터로 대체하고, 자체 백엔드를 통해 실제 선호 방식 요청을 처리해야 합니다.

지원 사양 읽기

## NHS 디자인 시스템 구성 검토하기

### 의료 서비스 맥락 확인하기

중점적으로 확인할 사항은 방문자가 예약 정보를 식별할 수 있는지, 방문 방식에 대한 선호가 아직 확정되지 않았음을 이해하는지, 맥락을 잃지 않고 선택한 방식을 변경할 수 있는지입니다. 일반적인 성공 토스트는 이 차이를 흐릴 수 있습니다.

키보드로 라디오 그룹과 details 요약을 조작해 보고, 진료소 이름이 긴 경우 좁은 화면에서 어떻게 표시되는지 확인하세요. 선택 항목이 없는 경우 표시되는 오류는 그룹으로 돌아갈 수 있게 해야 합니다. 라이브러리는 재사용 가능한 동작을 제공하지만, 실제 예약 규칙과 임상 정보에 대한 책임은 해당 기관에 있습니다.

지원 사양 읽기

## NHS 디자인 시스템 컴포넌트 예시

### 방문 방식 라디오 그룹

상호 배타적인 네이티브 입력과 NHS 컴포넌트 클래스를 사용한 라벨 지정 필드셋입니다.

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

코드 참조

### 선택적 추가 안내

네이티브 details 요소를 사용하면 작업 내용을 숨기지 않고 추가 정보를 표시할 수 있습니다.

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

코드 참조

### 완전한 독립 실행형 예시

전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>
```

코드 참조

- Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.

- 벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.

## NHS 디자인 시스템 에이전트 설정

### 구현 시작점

셸 명령어와 HTML를 각각 해당 파일에 배치하세요. Arial은 독립 미리보기에서만 사용하는 명시적 재정의입니다. NHS 조직은 실제 글꼴 라이선스와 브랜드 요구사항을 따라야 합니다. Sources의 전체 작동 예제 ZIP에는 정확한 미리보기 종속성과 전체 문서도 들어 있습니다. 압축을 풀고 해당 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/nhs.html을 여세요. 모듈 기반 예제는 file://로 열지 마세요.

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

### 프로젝트를 위한 프롬프트

```
NHS.UK Frontend 10.6.1을 사용해 독립적인 예약 선호도 질문을 만드세요. 상호 배타적인 참석 방법에는 fieldset과 legend를, 라디오 버튼 안내에는 연결된 힌트를, 선택 사항인 도움말에는 네이티브 Details를 사용하세요. 질문과 필수 안내는 항상 보이게 하세요. 답변하지 않은 상태로 검토 단계에 진입하면 링크가 포함된 오류 요약과 인라인 오류를 표시하고, 로컬 검토 화면에서 돌아왔을 때 선택한 방법을 유지하세요. 문서에 명시된 Arial 학습용 재정의와 함께 일치하는 CSS 및 모듈 initAll을 로드하세요. 예약 조회, 실제 예약 변경, 임상 조언 또는 NHS를 사칭하는 내용을 추가하지 마세요.
```

## NHS 디자인 시스템 출처 및 범위

NHS.UK frontend 10.6.1을 사용한 독립 예약 선호도 학습 예제입니다. NHS 로고, 라이선스가 있는 Frutiger 글꼴, 실제 예약, 임상 안내 또는 NHS의 보증을 암시하는 내용은 포함하지 않습니다.

- 타이포그래피 글꼴 사용 자격 및 거래 관련 글자 계층.

- 색상 이름이 지정된 시맨틱 변수.

- 간격 반응형 클래스 규모.

- 레이아웃 컨테이너 및 데스크톱 그리드.

- 라디오 버튼 그룹 구조 및 상태.

- 세부 정보 공개/숨김 구성 및 현재 매크로 API.

- Frontend 소스 공식 구현 및 배포.

- 완전한 작동 예시 다운로드 전체 HTML, 로컬 CSS/JavaScript 종속 항목, 제공된 라이선스와 정확한 실행 지침이 포함된 ZIP 파일입니다. 빌드 단계는 필요하지 않습니다.

## NHS 디자인 시스템 관련 자료

### NL 디자인 시스템

실제 기여자 구성 요소와 명시적인 테마를 조합해 공공 서비스 인터페이스를 구성하세요. 이 참고 자료에서는 Utrecht CSS를 사용해 토큰 매핑, 데이터 목록의 구성 요소, 동일한 편집 워크플로를 사용하는 두 가지 독자적인 테마를 보여 줍니다.

### NSW 디자인 시스템

독립적인 로컬 참고 자료 목록과 함께 NSW 디자인 토큰, Public Sans 타이포그래피, 키보드로 접근할 수 있는 네이티브 탭을 살펴보는 전체 워크숍 가이드입니다.

### ONS 디자인 시스템

서로 모순될 수 없는 설문 응답을 만드세요. 네이티브 ONS 체크박스, 상호 배타적인 응답, 정확한 글꼴 및 색상 참조, 완결된 로컬 검토 흐름을 사용합니다.


- [구현 레퍼런스](https://service-manual.nhs.uk/design-system/components/radios)
- [출처](https://service-manual.nhs.uk/design-system/styles/typography)
- [출처](https://service-manual.nhs.uk/design-system/styles/colour)
- [출처](https://service-manual.nhs.uk/design-system/styles/spacing)
- [출처](https://service-manual.nhs.uk/design-system/styles/layout)
- [지원 사양 읽기](https://service-manual.nhs.uk/design-system/styles/typography)
- [코드 참조](https://service-manual.nhs.uk/design-system/styles/spacing)
- [지원 사양 읽기](https://service-manual.nhs.uk/design-system/styles/spacing)
- [지원 사양 읽기](https://service-manual.nhs.uk/design-system/styles/layout)
- [지원 사양 읽기](https://service-manual.nhs.uk/design-system/components/radios)
- [지원 사양 읽기](https://service-manual.nhs.uk/design-system/components/details)
- [지원 사양 읽기](https://github.com/nhsuk/nhsuk-frontend)
- [코드 참조](https://service-manual.nhs.uk/design-system/components/radios)
- [코드 참조](https://service-manual.nhs.uk/design-system/components/details)
- [타이포그래피 글꼴 사용 자격 및 거래 관련 글자 계층.](https://service-manual.nhs.uk/design-system/styles/typography)
- [색상 이름이 지정된 시맨틱 변수.](https://service-manual.nhs.uk/design-system/styles/colour)
- [간격 반응형 클래스 규모.](https://service-manual.nhs.uk/design-system/styles/spacing)
- [레이아웃 컨테이너 및 데스크톱 그리드.](https://service-manual.nhs.uk/design-system/styles/layout)
- [라디오 버튼 그룹 구조 및 상태.](https://service-manual.nhs.uk/design-system/components/radios)
- [세부 정보 공개/숨김 구성 및 현재 매크로 API.](https://service-manual.nhs.uk/design-system/components/details)
- [Frontend 소스 공식 구현 및 배포.](https://github.com/nhsuk/nhsuk-frontend)