# Ripple 디자인 시스템

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

준비 안내를 읽고 준비 상태를 표시한 다음, 아직 완료하지 않은 다음 단계로 바로 이동하세요.

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

이 연구를 위해 확인한 Ripple의 공개 디자인 문서: 기본 색상 역할, 간격, 글자 크기와 행간 조합, 포커스 색상. 이는 디자인 참고 자료이며, 네이티브 Ripple 릴리스를 번들로 제공한다는 의미는 아닙니다.

### 공개된 색상 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --rpl-clr-primary | #0052C2 | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-primary-alt | #003174 | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-accent | #0095EC | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-accent-alt | #E6F5FD | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-neutral-0 | #FFFFFF | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-neutral-100 | #F5F5F5 | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-neutral-200 | #E6E6E6 | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-neutral-700 | #333333 | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-neutral-800 | #1A1A1A | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-type-default | #1A1A1A | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-link | #0052C2 | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
| --rpl-clr-link-visited | #9F46B1 | 문서화된 Ripple 기본 팔레트입니다. 테마에 따라 값이 다를 수 있습니다. 테마를 적용할 때는 역할 이름을 유지하세요. |
### 공개된 간격 스케일

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --rpl-sp-1 | 4px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-2 | 8px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-3 | 12px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-4 | 16px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-5 | 20px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-6 | 24px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-7 | 28px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-8 | 32px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-9 | 40px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-10 | 48px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-11 | 56px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-12 | 64px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-13 | 80px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
| --rpl-sp-14 | 120px | 문서화된 간격 단계입니다. 뒤쪽 단계는 인덱스에 4를 곱한 값이 아닙니다. |
### 타이포그래피 역할 및 대체 글꼴

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | 공개된 타이포그래피 역할의 글자 크기와 행간 조합입니다. 독립 실행형 예제는 VIC 서체가 아닌 문서화된 Arial 대체 글꼴을 사용합니다. |
| rpl-type-h1 | 32/36px small · 56/60px large · 700 | 공개된 타이포그래피 역할의 글자 크기와 행간 조합입니다. 독립 실행형 예제는 VIC 서체가 아닌 문서화된 Arial 대체 글꼴을 사용합니다. |
| rpl-type-h2 | 24/32px small · 32/40px large · 700 | 공개된 타이포그래피 역할의 글자 크기와 행간 조합입니다. 독립 실행형 예제는 VIC 서체가 아닌 문서화된 Arial 대체 글꼴을 사용합니다. |
| rpl-type-h3 | 20/28px small · 24/32px large · 700 | 공개된 타이포그래피 역할의 글자 크기와 행간 조합입니다. 독립 실행형 예제는 VIC 서체가 아닌 문서화된 Arial 대체 글꼴을 사용합니다. |
| rpl-type-p | 16/24px | 공개된 타이포그래피 역할의 글자 크기와 행간 조합입니다. 독립 실행형 예제는 VIC 서체가 아닌 문서화된 Arial 대체 글꼴을 사용합니다. |
| rpl-type-p-small | 14/20px | 공개된 타이포그래피 역할의 글자 크기와 행간 조합입니다. 독립 실행형 예제는 VIC 서체가 아닌 문서화된 Arial 대체 글꼴을 사용합니다. |
### 포커스 대비

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --rpl-clr-focus | #FF9E1B | 공개된 포커스 색상입니다. 이 예제는 Ripple 유틸리티 클래스를 가져오는 대신 자체 포커스 CSS을 구현합니다. |
| --rpl-clr-focus-contrast | #1A1A1A | 공개된 포커스 색상입니다. 이 예제는 Ripple 유틸리티 클래스를 가져오는 대신 자체 포커스 CSS을 구현합니다. |
| --rpl-clr-dark | #1A1A1A | 공개된 포커스 색상입니다. 이 예제는 Ripple 유틸리티 클래스를 가져오는 대신 자체 포커스 CSS을 구현합니다. |
## Ripple 디자인 시스템 전체 가이드

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

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

## Ripple 디자인 시스템 기초 요소 및 런타임 범위

### 디자인 참고 자료와 컴포넌트 런타임을 구분하세요

> 참고 자료에는 공개된 Ripple 디자인 시스템이 설명되어 있습니다. 실제 워크숍 타임라인은 일부 값을 바탕으로 한 완전한 오리지널 HTML, CSS 및 JavaScript 해석입니다. Ripple Vue 컴포넌트를 실행하거나, 문서화되지 않은 패키지 미러를 사용하거나, 빅토리아주 정부 서비스라고 주장하지 않습니다. 이 범위는 미리보기에 표시되며 다운로드 가능한 소스에도 그대로 유지됩니다.

### 네이티브 통합 방식을 신중하게 선택하세요

Ripple은 코어 패키지를 통해 Vue 중심 패키지 경로와 스타일 전용 경로를 제공합니다. 공식 설치에는 GitHub Packages 액세스 권한이 필요합니다. 스타일 전용 방식을 사용해도 마크업과 동작은 애플리케이션에서 구현해야 합니다. 해당 배포판을 통합할 때는 링크된 공식 액세스 안내를 따르고 사용할 릴리스를 고정하세요. 아래의 독립 실행형 연구에는 인증이나 패키지 설치가 필요하지 않습니다.

## Ripple 디자인 시스템 색상 역할 및 키보드 포커스

### 브랜드 색상과 콘텐츠 색상을 구분하세요

타임라인 헤더에는 더 어두운 기본 색상 값을, 가장자리에는 강조 색상을, 본문에는 중립 텍스트 역할을 사용합니다. 제공된 소스에는 이들이 서로 다른 CSS 변수로 정의되어 있습니다. 오리지널 상태 패널에는 연한 강조 색상 표면을 사용합니다. 참고 자료에는 역할 이름과 값이 모두 포함되어 있어 향후 테마를 변경할 때 서로 무관한 16진수 값을 일괄 교체하는 대신 의도한 관계를 갱신할 수 있습니다.

### 키보드 포커스를 눈에 띄게 구분하세요

포커스는 기본 파란색의 다른 음영이 아니라 어두운 콘텐츠와 주황색으로 표현합니다. 오리지널 버튼과 요약 영역은 포커스 시 표면 색상이 바뀌고 어두운 윤곽선이 표시됩니다. 체크박스 포커스에는 윤곽선을 유지합니다. 이는 공개된 포커스 색상 접근 방식을 구현한 것이며, 예제가 Ripple의 네이티브 포커스 유틸리티를 가져오거나 모든 가능한 테마의 접근성을 보장한다는 뜻은 아닙니다.

## Ripple 디자인 시스템 간격 및 반응형 타이포그래피

### 실제 간격 순서를 사용하세요

소스는 읽기 흐름을 위해 이름이 지정된 8, 16, 24, 32, 48px 단계를 사용합니다. 전체 참고 자료에는 더 큰 단계도 기록되어 있습니다. 이 순서는 인덱스의 단순 배수가 아니므로 rpl-sp-9는 36px가 아니라 40px입니다. 그리드 간격과 섹션 패딩은 서로 다른 레이아웃 역할을 하지만, 의도적으로 같은 스케일 항목을 공유합니다.

### 글꼴 사용 범위를 명확히 하세요

Ripple은 VIC 글꼴의 대체 글꼴로 Arial과 Helvetica를 문서화합니다. 이 연구에는 VIC 글꼴 파일이 없으며 Arial을 명시적으로 사용합니다. 제목은 예제의 992px 중단점에서 32/36px에서 56/60px로 바뀌며, 본문은 16/24px를 유지합니다. 이 글자 크기와 행간 값은 문서에 명시된 참고 값입니다. 타임라인 구성은 오리지널이므로 네이티브 컴포넌트와 픽셀 단위까지 동일하다고 설명해서는 안 됩니다.

## Ripple 디자인 시스템 타임라인 콘텐츠 및 단계별 정보 공개

### 각 단계에 고유한 역할을 부여하세요

첫 번째 단계에서는 결정할 사항을 정하고, 두 번째 단계에서는 참여를 준비하며, 세 번째 단계에서는 실행 항목을 기록합니다. 상대적인 시간 표시는 정부의 기한이나 서비스 제공 약속을 임의로 만들어 내지 않고 단계의 순서를 전달합니다. 각 단계에는 계속 표시되는 짧은 요약과 기본 details 요소에 담긴 추가 준비 메모가 있습니다. 시각적 표시는 맞춤형이지만 단계는 순서가 있는 목록으로 유지됩니다.

- 상대적인 시간으로 워크숍의 진행 순서를 나타냅니다.

- 항상 표시되는 요약으로 각 단계의 목적을 전달합니다.

- 펼쳐 볼 수 있는 메모에 부가 정보를 담습니다.

- 준비 완료 여부는 별도의 체크박스로 표시합니다.

### 읽기와 준비 완료를 혼동하지 마세요

준비 메모를 펼쳐도 단계가 완료로 표시되지는 않습니다. 별도의 체크박스로 준비 완료를 기록하며, 진행 횟수는 선택된 항목만을 기준으로 계산합니다. 따라서 사용자가 내용을 읽기만 했는데 실수로 작업을 완료 처리하는 일을 방지할 수 있습니다. 모든 항목과 상태 로직이 소스에 포함되어 있어 이 차이를 직접 확인하고 수정할 수 있습니다.

## Ripple 디자인 시스템 진행 상황, 다음 단계 집중 및 초기화

### 현재 상태에 따라 다음 작업을 정하세요

다음 미완료 단계로 이동을 선택하면 선택되지 않은 첫 번째 단계를 찾아 메모를 펼치고 해당 체크박스에 포커스를 둡니다. 독자가 앞서 열어 봤다는 이유만으로 단계를 건너뛰지 않습니다. 체크박스 세 개를 모두 선택하면 다음 단계 버튼이 비활성화되고 모든 준비 단계가 완료되었다는 상태가 표시됩니다. 항목의 선택을 해제하면 해당 작업을 다시 사용할 수 있습니다.

### 관련 상태를 한꺼번에 초기화하세요

초기화하면 체크박스 세 개의 선택이 해제되고, 메모가 닫히며, 진행 상태가 갱신되고, 첫 번째 체크박스로 포커스가 돌아갑니다. 완료 배너를 남겨 두거나 원격 기록이 삭제된 것처럼 표시하지 않습니다. 이 로컬 예제에서는 상태를 의도적으로 메모리에만 유지하며, 저장하거나 전송하지 않는다고 화면에 안내합니다.

## Ripple 디자인 시스템 전체 소스 및 검증

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

제공된 전체 문서를 index.html로 저장하고 해당 디렉터리를 서버로 제공하세요. 문서에 토큰, 마크업, 읽기 쉬운 예시 콘텐츠와 상호작용 코드가 모두 포함되어 있어 외부 런타임이나 글꼴을 요청하지 않습니다. 실제 서비스를 구축하기 전에 참고 링크에서 기본 Ripple API, 릴리스 선택 및 승인된 브랜드 에셋을 확인하세요.

1. 전체 HTML 예제를 index.html로 저장하세요.

2. 디렉터리를 로컬에서 제공하세요.

3. 키보드로 다음 단계 포커스 이동, 완료 처리 및 초기화를 테스트하세요.

4. 기본 Ripple와 별도로 통합하려면 공식 패키지 액세스와 고정된 버전을 사용하세요.

### 전체 상태 전환을 검증하세요

첫 번째 항목을 준비 완료로 표시하고 다음 단계로 이동을 선택한 뒤, 메모가 펼쳐진 상태에서 두 번째 체크박스로 포커스가 이동하는지 확인하세요. 모든 항목을 완료하고 다음 단계로 이동이 비활성화되는지 확인한 다음, 항목 하나의 선택을 해제해 다시 사용할 수 있는지 확인하세요. 초기화한 뒤 진행 상태와 펼침 상태를 모두 점검하세요. 휴대전화 화면 너비에서는 상태 패널이 타임라인 아래로 이동하고 모든 컨트롤을 계속 사용할 수 있습니다.

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

### index.html — 전체 워크숍 타임라인

모든 토큰 값, 반응형 스타일, 콘텐츠, 진행 상황 및 포커스 동작을 하나의 실행 가능한 문서에 담았습니다.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop planning timeline</title><style>
:root{--rpl-clr-primary:#0052c2;--rpl-clr-primary-alt:#003174;--rpl-clr-accent:#0095ec;--rpl-clr-accent-alt:#e6f5fd;--rpl-clr-type-default:#1a1a1a;--rpl-clr-neutral-0:#fff;--rpl-clr-neutral-100:#f5f5f5;--rpl-clr-neutral-200:#e6e6e6;--rpl-clr-focus:#ff9e1b;--rpl-clr-focus-contrast:#1a1a1a;--rpl-sp-2:8px;--rpl-sp-4:16px;--rpl-sp-6:24px;--rpl-sp-8:32px;--rpl-sp-10:48px;--rpl-type-font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--rpl-clr-neutral-0);color:var(--rpl-clr-type-default);font:16px/1.5 var(--rpl-type-font-family)}main{max-width:1160px;margin:auto;padding:var(--rpl-sp-8)}header{background:var(--rpl-clr-primary-alt);color:white;padding:var(--rpl-sp-8);border-bottom:8px solid var(--rpl-clr-accent)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}h1{font-size:32px;line-height:36px;margin:16px 0;max-width:20ch}header p:last-child{max-width:65ch;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:var(--rpl-sp-10);margin-top:var(--rpl-sp-8)}h2{font-size:24px;line-height:32px;margin:0 0 16px}h3{font-size:20px;line-height:28px;margin:0}.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rpl-clr-primary);}.timeline>li{position:relative;padding:0 0 32px 8px}.timeline>li:before{content:'';position:absolute;width:14px;height:14px;background:var(--rpl-clr-primary);border:3px solid white;outline:2px solid var(--rpl-clr-primary);border-radius:50%;left:-32px;top:6px}.when{font-size:14px;font-weight:700;color:var(--rpl-clr-primary);margin:0 0 8px}.timeline p{margin:8px 0 16px}.timeline label{display:flex;align-items:flex-start;gap:8px;font-weight:700}.timeline input{width:20px;height:20px;flex-shrink:0;margin:2px 0;accent-color:var(--rpl-clr-primary)}details{background:var(--rpl-clr-neutral-100);margin:16px 0;padding:16px}summary{font-weight:700;cursor:pointer}details ul{padding-left:24px}.progress{background:var(--rpl-clr-accent-alt);padding:24px;align-self:start;border-top:4px solid var(--rpl-clr-primary)}progress{width:100%;height:16px;accent-color:var(--rpl-clr-primary)}button{font:700 16px/24px var(--rpl-type-font-family);padding:12px 16px;cursor:pointer;border:2px solid var(--rpl-clr-primary);background:var(--rpl-clr-primary);color:white;text-align:left;max-width:100%}button:hover{background:var(--rpl-clr-primary-alt)}.secondary{color:var(--rpl-clr-primary);background:white;margin-top:16px}button:disabled{cursor:default;opacity:.6}.progress button{width:100%;margin-top:16px}button:focus-visible,summary:focus-visible{outline:3px solid var(--rpl-clr-focus-contrast);outline-offset:2px;background:var(--rpl-clr-focus);color:var(--rpl-clr-focus-contrast);border-radius:0}input:focus-visible{outline:3px solid var(--rpl-clr-focus);outline-offset:3px}.note{font-size:14px;border-top:1px solid var(--rpl-clr-neutral-200);padding-top:24px;margin-top:8px;max-width:80ch}[hidden]{display:none!important}@media(min-width:992px){h1{font-size:56px;line-height:60px}h2{font-size:32px;line-height:40px}}@media(max-width:760px){main{padding:20px}header{padding:24px}.layout{grid-template-columns:1fr;gap:24px}.eyebrow{overflow-wrap:anywhere}}
</style></head><body><main><header><p class="eyebrow">OpenDesign · Workshop practice</p><h1>Make room for a useful conversation</h1><p>A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.</p></header><div class="layout"><section aria-labelledby="plan-heading"><h2 id="plan-heading">Your preparation timeline</h2><ol class="timeline">
<li><p class="when">One week before</p><h3>Define the decision</h3><p>Agree on the question the workshop should answer and the people who need to take part.</p><details><summary>Preparation notes</summary><ul><li>Write a one-sentence outcome.</li><li>Invite people with different perspectives on the decision.</li><li>Explain what is already decided and what is still open.</li></ul></details><label><input type="checkbox" data-step="0">The purpose and invitations are ready</label></li>
<li><p class="when">Two days before</p><h3>Prepare for participation</h3><p>Share a short agenda and offer a way to contribute before the session.</p><details><summary>Preparation notes</summary><ul><li>Send readable material in advance.</li><li>Check access needs and remote participation.</li><li>Choose someone to capture decisions.</li></ul></details><label><input type="checkbox" data-step="1">The agenda and access arrangements are ready</label></li>
<li><p class="when">On the day</p><h3>Leave with a next step</h3><p>Close with a clear decision, an owner and a date to review what happens next.</p><details><summary>Preparation notes</summary><ul><li>Leave time to compare different views.</li><li>Record unanswered questions separately.</li><li>Read back the agreed action before closing.</li></ul></details><label><input type="checkbox" data-step="2">The action and follow-up are recorded</label></li>
</ol></section><aside class="progress" aria-labelledby="progress-heading"><h2 id="progress-heading">Preparation status</h2><p id="count" role="status">0 of 3 steps ready</p><progress max="3" value="0" aria-label="Preparation progress"></progress><p id="next-note">Next: Define the decision</p><button id="next" type="button">Go to next unfinished step</button><button class="secondary" id="reset" type="button">Reset checklist</button></aside></div><p class="note">An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.</p></main><script>
const checks=[...document.querySelectorAll('[data-step]')],names=['Define the decision','Prepare for participation','Leave with a next step'];const next=document.querySelector('#next');
function update(){let count=checks.filter(c=>c.checked).length,first=checks.findIndex(c=>!c.checked);document.querySelector('#count').textContent=`${count} of 3 steps ready`;document.querySelector('progress').value=count;document.querySelector('#next-note').textContent=first<0?'All three preparation steps are ready.':'Next: '+names[first];next.disabled=first<0;}
checks.forEach(c=>c.addEventListener('change',update));next.addEventListener('click',()=>{let check=checks.find(c=>!c.checked);if(check){check.closest('li').querySelector('details').open=true;check.focus();}});document.querySelector('#reset').addEventListener('click',()=>{checks.forEach(c=>c.checked=false);document.querySelectorAll('details').forEach(d=>d.open=false);update();checks[0].focus();});update();
</script></body></html>
```

코드 참조

- 이 코드는 직접 작성한 애플리케이션 코드이며 Ripple Vue 컴포넌트의 소스가 아닙니다.

- 외부 런타임, 글꼴 요청, 계정 또는 데이터 제출이 필요하지 않습니다.

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

### 구현 시작점

이 명령은 독립 실행형으로 구현한 예제를 제공합니다. 기본 Ripple를 사용하려면 출처에 링크된 공식 GitHub Packages 액세스 및 Vue 또는 스타일 전용 설정을 따르세요.

```
# Save the complete example as index.html in an empty directory.
python3 -m http.server 8000
# Open http://localhost:8000/
```

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

```
제공된 문서를 바탕으로 직접 작성한 전체 워크숍 타임라인을 구현하세요. Ripple의 문서화된 역할 값과 간격, 명시적인 Arial 폴백, 서로 구분되는 읽기 및 준비 완료 상태, 다음 미완료 단계로의 포커스 이동, 완료 처리와 전체 초기화를 유지하세요. 결과물은 기본 Ripple Vue 구현이 아니라 HTML/CSS 기반의 구현임을 표시하세요.
```

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

게시된 Ripple 디자인 값과 문서화된 Arial 폴백을 사용한 OpenDesign HTML/CSS 기반 구현입니다. 이 미리보기는 Ripple Vue 컴포넌트를 실행하지 않으며 VIC 글꼴 에셋을 포함하지 않습니다.

- 색상 역할 기본 팔레트와 콘텐츠 역할.

- 간격 게시된 전체 간격 체계.

- 타이포그래피 VIC, 폴백 및 반응형 글꼴 크기 조합.

- 포커스 상태 주황색/어두운색 포커스 스타일.

- 기본 스타일 전용 설정 패키지 액세스 및 스타일 전용 설정의 범위.

- 디자인 토큰 역할 이름 및 테마 간 관계.

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

### Scottish Government 디자인 시스템

스코틀랜드 정부의 반응형 글자 크기, 간격, 색상 역할을 적용한 네이티브 글자 수 입력 필드입니다. 제한을 초과한 텍스트를 보존하고 수정할 수 있습니다.

### Singapore Government 디자인 시스템

최신 SGDS Web Components와 실제 반응형 토큰, 주간 및 야간 테마, 로컬 계획과 동기화되는 기본 수량 제한 기능을 사용하세요.

### Decanter

Decanter Tailwind 프리셋, 반응형 글꼴 크기 체계, 유동적인 화면 가장자리를 활용해 학술 및 편집용 페이지를 구성하세요. 주제 필터가 작동하고 초록을 펼쳐 볼 수 있는 독창적인 행사 카드를 살펴보세요.


- [구현 레퍼런스](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)
- [출처](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/)
- [출처](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/)
- [출처](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/)
- [출처](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/)
- [코드 참조](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)
- [색상 역할 기본 팔레트와 콘텐츠 역할.](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/)
- [간격 게시된 전체 간격 체계.](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/)
- [타이포그래피 VIC, 폴백 및 반응형 글꼴 크기 조합.](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/)
- [포커스 상태 주황색/어두운색 포커스 스타일.](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/)
- [기본 스타일 전용 설정 패키지 액세스 및 스타일 전용 설정의 범위.](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/)
- [디자인 토큰 역할 이름 및 테마 간 관계.](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)