# NSW 디자인 시스템

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

마우스 또는 키보드로 탭을 전환하면서 로컬 읽기 목록을 유지하세요.

## NSW 디자인 시스템 디자인 참고 자료

실제 nsw-design-system 3.27.0 CSS 내보내기 및 Tabs 구현, 로컬 Public Sans 글꼴 사용.

### 브랜드 및 중립 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --nsw-brand-dark | #002664 | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-brand-light | #cbedfd | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-brand-supplementary | #146cfd | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-brand-accent | #d7153a | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-brand-accent-light | #ffe6ea | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-grey-01 | #22272b | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-grey-02 | #495054 | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-grey-03 | #cdd3d6 | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-grey-04 | #ebebeb | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-off-white | #f2f2f2 | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-text-dark | #22272b | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
| --nsw-text-light | #fff | 실제 3.27.0 기본 테마입니다. Text-light는 어두운 배경 표면에 사용하는 밝은색 텍스트를 뜻하며, 흰색 배경에서 강조도가 낮은 텍스트를 뜻하지 않습니다. |
### 상태 색상 조합

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --nsw-status-success | #008a07 | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
| --nsw-status-success-bg | #e5f6e6 | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
| --nsw-status-info | #2e5299 | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
| --nsw-status-info-bg | #eaedf4 | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
| --nsw-status-warning | #c95000 | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
| --nsw-status-warning-bg | #fbeee5 | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
| --nsw-status-error | #b81237 | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
| --nsw-status-error-bg | #f7e7eb | 의미가 분명한 상태 색상을 해당 배경 역할 및 이해하기 쉬운 텍스트 설명과 함께 사용하세요. |
### 타이포그래피 및 모서리 반경

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --nsw-font-family | "Public Sans",sans-serif | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size | 16px | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-normal | 400 | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-bold | 700 | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-md-mobile | 1.125rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-md-desktop | 1.25rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-lg-mobile | 1.375rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-lg-desktop | 1.5rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-xl-mobile | 1.75rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-xl-desktop | 2rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-xxl-mobile | 2.25rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-font-size-xxl-desktop | 3rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
| --nsw-border-radius | 0.25rem | 공개된 반응형 타이포그래피 참고 자료와 공통 모서리 역할입니다. 모바일용과 데스크톱용 크기 조합은 별도의 글꼴 패밀리가 아닙니다. |
## NSW 디자인 시스템 전체 가이드

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

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

## NSW 디자인 시스템 고정된 런타임 및 테마

### 네이티브 탭 구현 사용

> 이 예시는 nsw-design-system 3.27.0을 실행합니다. 마크업을 만든 다음 패키지 CSS와 Tabs 클래스를 가져오고, 단일 탭 그룹을 초기화합니다. 이렇게 필요한 부분만 초기화하면 사용하지 않는 컴포넌트가 등록되지 않습니다. 라이브 문서에서는 더 최신 버전을 안내할 수 있지만, 여기서 다운로드할 수 있는 코드와 토큰 값은 검증된 패키지 버전을 기준으로 합니다.

### 컴포넌트와 애플리케이션 상태 분리

기본 Tabs 클래스가 탭 선택, 패널 표시 여부, 키보드 탐색을 관리합니다. 애플리케이션은 저장된 프롬프트를 Set에 보관합니다. 따라서 단계 사이를 이동해도 읽기 목록은 그대로 유지됩니다. 소스 코드에서 이러한 역할 분담을 명확히 확인할 수 있습니다. 숨겨진 전역 저장소나 백엔드 요청, 정부 계정을 흉내 내는 기능은 없습니다.

## NSW 디자인 시스템 브랜드 역할과 가독성 높은 표면

### 어두운 역할과 밝은 역할을 함께 사용하세요

기본 어두운 브랜드 색상은 #002664이고, 밝은 표면 색상은 #CBEDFD입니다. 프롬프트 패널에는 밝은 역할을, 동작 버튼에는 어두운 색상을 사용합니다. 활성 탭에는 패키지의 강조 스타일이 적용됩니다. 이는 공공 부문 사이트를 연상시키려고 임의로 선택한 파란색 팔레트가 아니라 실제 테마 역할입니다. 이 예제에서는 공식 정부 로고를 사용하지 않습니다.

### 토큰 이름을 정확히 해석하세요

text-light 토큰은 흰색입니다. 어두운 배경에 사용해야 하며, 채도가 낮은 텍스트를 뜻하는 일반적인 표현으로 사용해서는 안 됩니다. 보조 단계 텍스트에는 더 어두운 중성 색상 역할을 사용합니다. 참고 자료에는 상태별 전경색과 배경색 쌍이 포함되어 있지만, 워크숍에서는 사용 가능한 모든 색상을 보여주기 위해 오류나 성공 알림을 임의로 추가하지 않습니다.

## NSW 디자인 시스템 Public Sans와 반응형 크기 체계

### 레이아웃을 살펴보기 전에 글꼴을 불러오세요

이 예제에서는 Public Sans의 400 및 700 굵기 글꼴을 로컬에서 불러옵니다. 패키지는 모바일과 데스크톱의 크기를 각각 정의합니다. 중간 크기 텍스트는 1.125rem에서 1.25rem으로, 가장 큰 제목 참고 크기는 2.25rem에서 3rem으로 커집니다. 이러한 크기 쌍은 사용 가능한 너비가 달라져도 읽기 순위를 유지하는 데 도움이 됩니다.

### 콘텐츠의 위계를 절제하세요

짧은 단계 레이블 다음에 설명형 제목, 소개, 안내 문단, 저장된 프롬프트 하나가 이어집니다. 각 문장을 카드로 만들 필요는 없습니다. 좁은 화면에서는 읽기 목록이 단계 패널 뒤에 배치되며, 짧은 세 개의 레이블로 이루어진 탭 목록은 텍스트를 여러 줄로 억지로 줄이지 않고도 사용할 수 있습니다.

## NSW 디자인 시스템 탭 마크업과 키보드 동작

### 실제 링크를 컴포넌트가 보강하도록 하세요

초기 탭 목록에는 고유한 콘텐츠 ID를 가리키는 링크가 포함됩니다. 초기화하면 탭 목록, 탭, 탭 패널 의미가 추가되고 선택 상태를 관리하며 포커스 가능한 탭을 설정합니다. 컴포넌트가 패널을 찾으려면 href 대상이 올바르게 지정되어 있어야 합니다. 한 페이지에 탭 그룹을 두 개 이상 배치할 때는 ID를 중복하지 마세요.

- 각 탭 링크가 하나의 패널 ID와 일치하도록 하세요.

- 마크업을 추가한 뒤 그룹을 초기화하세요.

- 선택 상태와 키보드 포커스는 기본 컴포넌트가 관리하도록 하세요.

### 클릭뿐 아니라 키보드로 선택되는지도 확인하세요

기본 구현은 화살표 키 탐색에 반응합니다. 브라우저 검사에서는 Prepare에 포커스를 두고 ArrowRight를 눌러 Discuss가 선택되는지 확인합니다. 이 동작은 마지막으로 클릭한 레이블에 스타일만 적용하는 것과 다릅니다. 독자가 동등한 단계 사이를 이동할 수 있으므로 이러한 단계에는 탭 그룹이 적합합니다. 순서대로 제출해야 하는 필수 입력 항목을 숨기는 데는 탭을 사용하지 않습니다.

## NSW 디자인 시스템 저장된 프롬프트와 정확한 피드백

### 표시 중인 탭과 저장 상태를 분리하세요

각 단계의 동작 버튼은 Set에서 해당 프롬프트를 추가하거나 제거하고, aria-pressed를 업데이트하며, 레이블을 Save 또는 Remove로 변경합니다. 읽기 목록의 개수와 항목은 이 Set을 기준으로 계산됩니다. 저장된 단계로 돌아오면 선택 상태가 올바르게 표시됩니다. Clear reading list를 누르면 모든 선택이 해제되며, 해제할 항목이 없을 때는 버튼이 비활성화됩니다.

### 저장 범위를 명확히 안내하세요

읽기 목록은 페이지의 로컬 상태이며 새로고침하면 사라집니다. 인터페이스에서 이를 직접 안내합니다. 실제로 목록을 유지하려면 명시적인 저장 모델과 복원 동작이 필요하지만, 여기서는 어느 쪽도 암시하지 않습니다. 이 콘텐츠는 독자적으로 작성한 디자인 토론용 자료이며, 서비스 자격 안내서가 아니고 공식 NSW 절차를 재현했다고 주장하지도 않습니다.

## NSW 디자인 시스템 전체 구현 및 검토

### 필요한 의존성을 포함해 소스 코드를 재현하세요

Vite 바닐라 프로젝트를 만들고 nsw-design-system 3.27.0 및 Public Sans를 설치한 다음, 제공된 엔트리 파일과 nsw.css를 저장하세요. 루트 마운트 요소를 유지하세요. 세 단계 전체 콘텐츠와 독창적인 프롬프트, 기본 Tabs 초기화, 읽기 목록 핸들러가 모두 포함되어 있습니다. 저장 및 초기화 동작을 의사 코드로 대체하지 않습니다.

1. 버전을 고정한 NSW 패키지와 Public Sans 글꼴 파일을 설치하세요.

2. 루트 마운트 요소를 포함해 전체 엔트리 파일과 nsw.css를 저장하세요.

3. 서로 다른 두 탭에서 프롬프트를 저장하고 상태가 유지되는지 확인하세요.

4. ArrowRight를 사용하고 목록을 비운 뒤 빈 상태를 확인하세요.

### 탭 탐색과 저장된 콘텐츠를 분리하세요

링크 대상과 패널이 존재한 뒤에만 기본 Tabs 클래스를 초기화하세요. 프래그먼트 ID가 일치해야 보강 기능이 올바르게 동작합니다. 탭 레이블이 여전히 정상적으로 보여도 패널 ID를 변경하면서 href를 바꾸지 않으면 연결이 끊어집니다. 한 페이지에서 여러 그룹을 사용하는 경우 각 그룹에 고유한 ID를 지정하세요.

읽기 목록은 탭 인스턴스와 별개인 애플리케이션 상태로 관리하세요. 패널을 전환해도 프롬프트의 저장 상태가 유지되어야 하며, 해당 패널로 돌아왔을 때 aria-pressed가 그 상태를 반영해야 합니다. 독자가 다시 방문할 수 있는 동등한 콘텐츠에는 탭을 사용하세요. 완료된 단계를 요구하는 순차적 양식에는 다른 탐색 모델이 필요합니다. 이 예제는 페이지 내에서만 상태를 유지하므로, 저장 기능을 추가하려면 명시적인 저장 및 복원 정책이 필요합니다.

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

### main.js — 기본 탭 및 읽기 목록 전체 예제

기존 단계 콘텐츠 전체, 탭 초기화, 저장·삭제·초기화 로직을 포함합니다.

```
import Tabs from 'nsw-design-system/src/components/tabs/tabs.js';
import 'nsw-design-system/css';
import '@fontsource/public-sans/latin-400.css';
import '@fontsource/public-sans/latin-700.css';
import './nsw.css';
const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']];
document.getElementById('root').innerHTML=`<main><p class="eyebrow">NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY</p><h1>Plan a focused discussion</h1><p class="nsw-intro">Move between three stages and save useful prompts to a local reading list.</p><div class="layout"><section class="nsw-tabs js-tabs"><ul class="nsw-tabs__list">${sessions.map(([name],i)=>`<li><a href="#session-${i}">${name}</a></li>`).join('')}</ul>${sessions.map(([name,title,lead,body],i)=>`<section id="session-${i}" class="nsw-tabs__content"><p class="step">STAGE ${i+1} / 3</p><h2>${title}</h2><p class="nsw-intro">${lead}</p><p>${body}</p><div class="prompt"><h3>Prompt to keep</h3><blockquote>${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}</blockquote><button class="nsw-button nsw-button--dark save" data-index="${i}" aria-pressed="false">Save this prompt</button></div></section>`).join('')}</section><aside><h2>Your reading list</h2><p id="count" role="status">0 prompts saved</p><ul id="saved"></ul><p id="empty">Save a prompt from any stage. Changing tabs keeps your selection.</p><button class="nsw-button nsw-button--white" id="clear" disabled>Clear reading list</button><p class="note">This is an original local study using NSW 3.27.0 tabs and CSS. Nothing is stored after reloading.</p></aside></div></main>`;
new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()});
```

코드 참조

- 탭은 NSW 클래스가 관리하고, 기존 읽기 목록은 Set이 관리합니다.

### nsw.css — 독창적인 반응형 구성

게시된 의미 기반 테마 역할을 사용하는 레이아웃과 프롬프트 표면입니다.

```
body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}}
```

코드 참조

- 보조 단계 레이블에는 어두운 중성 색상을 사용하며, --nsw-text-light는 흰색입니다.

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

### 구현 시작점

기본 탭의 클릭과 화살표 키 동작, 저장 상태 유지, 목록 비우기, 반응형 레이아웃을 로컬에서 테스트했습니다.

```
npm create vite@latest nsw-workshop -- --template vanilla
cd nsw-workshop
npm install
npm install nsw-design-system@3.27.0 @fontsource/public-sans
# Replace src/main.js and add src/nsw.css. Keep <div id="root"></div>.
npm run dev
```

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

```
3.27.0의 기본 Tabs, Public Sans, 실제 의미 기반 역할을 사용해 NSW 워크숍 안내서를 구현하세요. 고유한 패널 ID, 키보드 선택, 독립적인 프롬프트 저장 상태, 유용한 빈 읽기 목록을 유지하세요. 저장 범위가 로컬로 한정됨을 명확히 안내하고 공식 서비스에 대한 주장을 피하세요.
```

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

OpenDesign가 NSW Design System 3.27.0을 사용해 만든 워크숍 연구입니다. 기본 탭 동작은 실제 기능이며, 콘텐츠와 저장된 프롬프트 흐름은 로컬 애플리케이션 로직으로 직접 구현했습니다.

- 탭 항목 간 콘텐츠 탐색 및 기본 동작

- 개발자 통합 패키지, 스타일시트 및 JavaScript 설정

- 타이포그래피 Public Sans 및 타이포그래피 위계

- 버전이 지정된 구현 테마 내보내기 및 Tabs 소스

## NSW 디자인 시스템 관련 리소스

### ONS 디자인 시스템

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

### Ontario 디자인 시스템

실제 서체, 공개된 간격 및 색상 값, 네이티브 아코디언 동작, 버전이 일치하는 전체 소스를 갖춘 Ontario 스타일의 긴 가이드를 만드세요.

### Poncho

실행 가능한 활동 디렉터리에서 Poncho의 Bootstrap 3 그리드, 의미에 맞는 액션 색상, 전체 영역을 클릭할 수 있는 서비스 패널을 살펴보세요.


- [구현 레퍼런스](https://designsystem.nsw.gov.au/components/tabs/index.html)
- [출처](https://github.com/digitalnsw/nsw-design-system)
- [코드 참조](https://designsystem.nsw.gov.au/components/tabs/index.html)
- [코드 참조](https://designsystem.nsw.gov.au/get-started/for-developers.html)
- [탭 항목 간 콘텐츠 탐색 및 기본 동작](https://designsystem.nsw.gov.au/components/tabs/index.html)
- [개발자 통합 패키지, 스타일시트 및 JavaScript 설정](https://designsystem.nsw.gov.au/get-started/for-developers.html)
- [타이포그래피 Public Sans 및 타이포그래피 위계](https://designsystem.nsw.gov.au/core/typography/index.html)
- [버전이 지정된 구현 테마 내보내기 및 Tabs 소스](https://github.com/digitalnsw/nsw-design-system)
