# CFPB 디자인 시스템

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

네이티브 설명을 열고, 별도의 체크리스트를 사용하고, 로컬 상태를 초기화하세요. 화면 크기를 조정해 12열 구성이 어떻게 쌓이는지 확인하세요.

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

CFPB 패키지 5.10.2 컴파일 버전 CSS 및 ES 모듈, 최신 공개 기반 가이드입니다. 데모는 네이티브 Expandable 클래스와 JavaScript를 사용합니다. 전역 기본값 CSS은 게시된 모듈의 기본 스타일 문자열에서 원문 그대로 복사했으며, 시스템 글꼴 대체 설정을 사용합니다. 글꼴 크기 조정과 제목 행간은 문서 표와 버전이 지정된 코드가 다른 경우 코드에 따릅니다. CFPB의 로고나 제휴 관계를 암시하지 않습니다.

### 색상 및 실제 사용자 지정 속성

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --black | #101820 | 기본 텍스트에는 기본 색상을 사용하고, 녹색은 브랜드 강조색으로 사용하세요. |
| --green | #20aa3f | 슬러그 헤더 강조색 및 기관 팔레트 참조. |
| --pacific | #0072ce | 링크 및 인터랙션 표시 색상군. |
| --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | 5.10.2의 Expandable 배경과 테두리. |
| --red / --gold | #d14124 / #ff9e1b | 보조 팔레트입니다. 상태를 색상만으로 표현하지 마세요. |
### 버전별 기본 스타일의 글꼴

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Current brand font | Source Sans 3 | 2025년 7월 Avenir Next를 대체했습니다. 데모는 패키지의 system-ui 대체 글꼴을 사용합니다. |
| Body | 16px / 1.375 | 브라우저 기본 루트 글꼴 크기에서 줄 상자 높이는 22px입니다. |
| H1 | 34px / 1.25; weight 600 | 화면 너비가 600px 이하일 때 26px이며, 코드의 데스크톱 줄 높이는 42.5px입니다. |
| H2 | 26px / 1.25; weight 600 | 화면 너비가 600px 이하일 때 22px입니다. |
| H3 / H4 | 22px weight 400 / 18px weight 500 | 작은 화면에서는 18px / 16px이며 둘 다 행간은 1.25입니다. |
| H5 | 14px / 1.25; weight 600 | 대문자, 자간 1px. |
| Normalization | base .517; step .0054 | 버전별 사용자 지정 속성은 제목 크기에 따라 점진적으로 더 큰 보정값을 적용합니다. 이는 단순화된 기반 표와 다릅니다. |
### 그리드, 간격 및 반응형 구간

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Grid | 12 columns; 30px gutters | 문서 레이아웃 모델입니다. 데모는 편집용 8/4 분할로 구성합니다. |
| Maximum width | 1230px | 고정 너비 콘텐츠 대신 반응형 바깥쪽 여백을 사용하세요. |
| Edge spacing | 15px mobile; 30px tablet/desktop | 좁은 화면에서도 읽기 편한 여백을 유지하세요. |
| Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | 5.10.2 모듈에서 내보낸 varsBreakpoints를 확인했습니다. |
| Text rhythm | 15px paragraph gap; 30px stacked headings | 편집용 간격이며, 보편적인 4px 토큰 체계를 의미하지 않습니다. |
| Measure | 66 characters ideal; 45–90 range | 연속해서 읽는 콘텐츠를 위한 글꼴 가이드이며, 미리 보기의 최대 너비는 66ch입니다. |
### 확장형 구성과 런타임

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Root | o-expandable | 배경 및 테두리 수정자는 각각 독립적으로 선택할 수 있습니다. |
| Required descendants | __header, __label, __content | 헤더는 네이티브 버튼입니다. 런타임이 동작 후크와 ARIA 상태를 추가합니다. |
| Initialization | Expandable.init(container) | 일치하는 루트에 대해 초기화된 인스턴스를 반환합니다. |
| Instance API | expand(), collapse(), isExpanded(), getLabelText() | 오래된 toggleTargetState 문서 항목이 아니라 게시된 5.10.2 버전을 기준으로 확인했습니다. |
| Initial expanded state | o-expandable--onload-open | 초기화 전에 설정하세요. 런타임의 표시 클래스를 수동으로 덮어쓰지 마세요. |
| Group choice | o-expandable-group--accordion | 선택적으로 켤 수 있는 상호 배타적 동작입니다. 미리 보기에서는 열린 패널을 서로 비교할 수 있도록 허용합니다. |
## CFPB 디자인 시스템 전체 가이드

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

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

## CFPB 디자인 시스템 CFPB 구현 범위

### 장식보다 먼저 제공하는 소비자 정보

> CFPB는 편집형 정보 구조와 양식 및 정보 공개 컴포넌트를 결합합니다. 그리드, 타이포그래피 계층 구조, 작고 대문자로 표시되는 슬러그 제목은 익숙한 녹색만큼이나 중요한 요소입니다. 이 예시는 독창적인 읽기 워크시트입니다. 핵심 안내는 계속 표시하고, 선택적 설명에는 네이티브 Expandable을 사용합니다. 금융 권고, 민원 제출 양식 또는 정부 서비스가 아닙니다.

패키지는 공개되어 있지만 정부 인장과 CFPB의 정체성에는 별도의 사용 제한이 적용됩니다. 코드를 재사용해도 서비스가 공식 서비스가 되는 것은 아닙니다. 따라서 이 예시에는 인장, 로고, 공식 사이트 배너 또는 정부 헤더 모방 요소가 없습니다.

지원 사양 읽기

## CFPB 디자인 시스템 타이포그래피와 읽기 흐름

### Source Sans 3 및 버전별 차이

최신 글꼴 가이드는 2025년 7월 Avenir Next에서 변경된 Source Sans 3를 안내합니다. 이 로컬 예시에는 외부 호스팅 글꼴 의존성이 없으며, 컴파일된 시스템 글꼴 대체 설정을 사용합니다. 실제 브랜드 구현에서는 문서화된 라이선스 글꼴 믹스인을 통해 승인된 글꼴 파일을 제공해야 합니다.

공개된 제목 표와 현재 기본 스타일 문자열은 서로 일치하지 않습니다. 패키지 5.10.2에서 H1은 2.125em, 행간은 1.25이므로 루트 크기가 16px일 때 34/42.5가 됩니다. 표에 기재된 줄 높이 60px와는 다릅니다. 위 참고 자료는 실행 가능한 소스를 따릅니다. 제목 정규화에도 수준별 조정값이 적용되므로, 간소화된 표를 전역 재정의로 사용하지 마세요.

문단은 약 66자, 문단 간격은 15px로 유지하세요. 제목은 간결한 H5/슬러그 형식을 제외하고 문장형 대소문자를 사용합니다. 이렇게 하면 모든 문단을 카드에 넣지 않아도 가이드 문서를 훑어보기 쉽게 만들 수 있습니다.

지원 사양 읽기

## CFPB 디자인 시스템 색상과 편집 디자인의 구성

### 초록색만 보지 말고 역할을 고려하세요

컴파일된 CSS에는 --black, --green, --pacific과 단계별 보조 색상군이 포함됩니다. 텍스트에는 검은색을 사용하고, Pacific은 한눈에 알아보기 쉬운 상호작용 단서를 제공합니다. Expandable의 옅은 회색 배경은 읽기 영역의 경계일 뿐, 비활성 상태를 나타내지 않습니다. 기본 슬러그 제목은 얇은 회색 전폭 선과 짧고 두꺼운 초록색 선을 조합합니다.

워크시트의 주요 읽기 영역은 의도적으로 흰색으로 유지합니다. 섹션 구분선에는 초록색을 사용하고, 진행 횟수는 일반 텍스트로 표시합니다. 완료하거나 체크한 항목은 초록색과 빨간색을 구별하지 않아도 이해할 수 있어야 합니다. 팔레트의 모든 색상에 성공이나 오류의 의미를 임의로 부여하지 마세요.

- 차분한 Expandable 배경에는 --gray-5를, 테두리에는 --gray-40을 사용하세요.

- 링크는 색조뿐 아니라 밑줄이나 상호작용 표현으로도 구별되게 하세요.

- 브랜드 표시는 승인된 용도로만 사용하세요. 팔레트 사용 허가가 제휴 관계를 암시해도 된다는 뜻은 아닙니다.

지원 사양 읽기

## CFPB 디자인 시스템 12열 그리드와 적절한 콘텐츠 밀도

### 여백을 활용한 문서 레이아웃

문서화된 그리드는 12개 열, 고정된 30px 거터, 최대 너비 1230px로 구성됩니다. 모바일 바깥 여백은 15px이며, 더 큰 레이아웃에서는 30px을 사용합니다. 미리보기에서는 이를 901px 이상일 때 8열 읽기 영역과 4열 작업 체크리스트로 구성하고, 그보다 좁으면 체크리스트를 문서 아래에 배치합니다. 이 분할은 공개된 그리드를 활용한 애플리케이션 구성일 뿐, 공식 범용 페이지 템플릿은 아닙니다.

페이지 너비를 더 넓힐 수 있더라도 긴 텍스트의 최대 너비는 66ch로 유지합니다. 버튼은 줄바꿈되며, 사이드바에는 고정 높이나 중첩 스크롤 영역을 두지 않습니다. 설명을 펼치면 일반 문서의 높이가 늘어나므로, 이 구성은 리소스 페이지에 삽입된 미리보기에서도 그대로 사용할 수 있습니다.

지원 사양 읽기

## CFPB 디자인 시스템 기본 Expandable 구조

### 트리거와 선택 콘텐츠를 분리하세요

레거시 Expandable 루트에는 __header 버튼, __label, __content 영역이 포함됩니다. 버튼이 포커스 대상입니다. 이 예시에서는 span으로 레이블을 제공하고, 장식용 더하기/빼기 표시는 접근 가능한 이름에서 제외합니다. 라이브러리는 초기화 시 확장 상태와 동작 훅을 할당하며, 애플리케이션은 이를 중복으로 변경하지 않습니다.

--background 및 --border 수정자가 프레임 형태를 적용합니다. --padded 수정자는 레이블도 더 크게 표시하는 확장형 스타일이며, 모든 디스클로저에 적용해야 하는 것은 아닙니다. 핵심 워크시트 안내는 숨겨진 패널 밖에 둡니다. 독자는 선택 설명을 펼치기 전에 과업을 이해해야 합니다.

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

코드 참조

지원 사양 읽기

## CFPB 디자인 시스템 디스클로저와 체크리스트 동작

### 서로 독립적인 두 가지 상태

기본 라이브러리가 디스클로저 상태를 관리합니다. 워크시트는 일반 체크박스 세 개의 값과 그에 따른 개수를 관리합니다. 패널을 열어도 과업이 완료 처리되지 않으며, 과업을 체크해도 정보가 접히지 않습니다. 두 상태는 의도적으로 별도로 관리합니다. 콘텐츠가 보인다는 사실만으로 이해했다고 볼 수는 없습니다.

5.10.2 인스턴스는 expand, collapse, isExpanded를 제공합니다. 공개 Expandables 페이지에는 이전 버전의 toggleTargetState 참조가 있으므로, 이 가이드에서는 실제 버전의 API를 사용합니다. 모두 펼치기와 모두 접기는 초기화된 인스턴스를 순회합니다. 독자가 두 설명을 비교할 수 있도록 이 경우에는 패널을 각각 독립적으로 두는 편이 좋습니다.

초기화 동작을 통해 재설정 기능은 모든 체크박스 값을 지우고 패널을 접습니다 API. 제출 확인을 임의로 생성하지는 않습니다. 모든 체크박스 변경 후 키보드 포커스를 이동하지 않고, 정중한 알림용 상태 요소로 진행 상황을 알립니다.

지원 사양 읽기

## CFPB 디자인 시스템 컴파일된 에셋과 기본 스타일

### 클래식 스크립트가 아닌 ES 모듈

고정된 버전의 패키지를 설치하고, 컴파일된 에셋 두 개를 정적 디렉터리에 복사한 다음 모듈 스크립트로 Expandable을 가져오세요. 공개된 5.10.2 index.js에는 ES 내보내기가 포함되어 있으므로, 이전 통합 예시의 클래식 스크립트 태그를 그대로 복사하면 구문 오류가 발생합니다. 또한 레거시 Expandable 루트를 자동으로 초기화하지도 않습니다.

컴포넌트 스타일시트만으로는 페이지 전체에 적용되는 제목 및 본문 규칙을 제공하지 않습니다. 프로덕션 프로젝트에서는 공식 통합 가이드에 나온 대로 패키지의 기본 SCSS를 컴파일할 수 있습니다. 이 독립형 예시는 대신 동일하게 공개된 모듈에 포함된 정확한 기본 CSS 문자열을 별도로 문서화된 로컬 파일에 보관합니다. 이는 로컬 패키징 방식일 뿐, 새로 공개된 CFPB 진입점이 아닙니다.

아이콘 참조가 포함된 소스 SCSS를 빌드한다면, 프로젝트 문서에 안내된 PostCSS SVG 대체 기능을 포함하세요. 컴파일된 스냅샷에서는 이미 해당 참조가 처리되어 있습니다. --cfpb-background-icon-svg를 해결하지 못하는 Sass 전용 설정을 임의로 만들지 마세요.

1. 5.10.2를 설치하고 로컬에서 제공하는 에셋과 함께 TERMS.md를 보관하세요.

2. 컴포넌트 CSS와 선택한 전역 기본 스타일을 불러오고, 글꼴을 명시적으로 설정하세요.

3. 모듈을 가져온 뒤 마크업이 준비되면 컨테이너를 초기화하고, 반환된 인스턴스에 애플리케이션 동작을 연결하세요.

지원 사양 읽기

## CFPB 디자인 시스템 읽기 흐름 확인

### 디스클로저만으로 접근성을 모두 확인할 수는 없습니다

좁은 화면에서는 기본 스타일에 따라 기본 제목 크기가 줄어들고, 체크리스트가 문서 아래에 배치됩니다. 데스크톱 화면에서는 두 열 구성으로 선택적 읽기 자료와 작업 메모를 함께 볼 수 있습니다. 접힌 상태만 확인하지 말고, 모든 패널을 펼친 상태에서도 두 화면을 테스트하세요.

Tab 키로 각 네이티브 버튼에 이동한 다음 Enter 또는 Space 키를 눌러 전환하세요. 라이브러리가 aria-expanded를 업데이트하고 숨겨진 콘텐츠가 탭 순서에서 제외되는지 확인하세요. 그런 다음 작업 두 개를 선택하고 모든 설명을 열었다 닫은 뒤, 초기화할 때까지 선택 개수가 2개로 유지되는지 확인하세요. 이러한 테스트로는 스크린샷만으로 확인할 수 없는 애플리케이션과 라이브러리 간 상태 충돌을 찾아낼 수 있습니다.

이 로컬 예제는 데이터를 저장하거나 분석하거나 네트워크로 전송하지 않으며, 실제 개인정보도 사용하지 않습니다. 네이티브 컴포넌트를 사용했다는 사실만으로 결과 사이트의 적합성이 보장되지는 않습니다. 이를 도입하는 서비스에서 대비, 콘텐츠, 브라우저 지원, 보조 기술 동작을 계속 검토해야 합니다.

지원 사양 읽기

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

### 네이티브 Expandable

필수 레거시 구조, 장식 요소, 선택형 설명 콘텐츠.

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

코드 참조

### 접기·펼치기 항목 초기화 및 제어

5.10.2 모듈과 반환된 인스턴스를 사용하세요. 전역 기본 스타일 적용 여부는 별도로 결정해야 합니다.

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

코드 참조

- 게시된 5.10.2는 ESM입니다. 클래식 스크립트로 불러오지 마세요.

- 이 예제는 패키지에서 그대로 추출한 기본 스타일을 사용하며, 해당 스타일은 공급업체의 SOURCE.md에 기록되어 있습니다.

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

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

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CFPB reading worksheet specimen</title><link rel="stylesheet" href="vendor/cfpb-5.10.2/index.css"><link rel="stylesheet" href="vendor/cfpb-5.10.2/base-extracted.css"><style>*{box-sizing:border-box}body{margin:0;background:#fff}main{max-width:1230px;margin:auto;padding:30px}header{max-width:66ch;margin-bottom:30px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}.article{min-width:0}.o-expandable{margin:15px 0}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:15px 0}.notes{border-top:5px solid var(--gray-40);padding-top:15px}.notes label{display:flex;gap:10px;margin:20px 0;align-items:flex-start}.notes input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--pacific)}.o-expandable__content p{max-width:66ch}.eyebrow{color:var(--gray);font-size:14px}.note{font-size:14px;margin-top:30px;color:var(--gray)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pacific);outline-offset:3px}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){main{padding:20px 15px}}</style><main><header><p class="eyebrow">Independent educational specimen · CFPB components</p><h1>Make your question easier to answer</h1><p>Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.</p></header><div class="layout"><section class="article" id="guide"><div class="m-slug-header"><h2 class="m-slug-header__heading">Before a conversation</h2></div><p>A useful question identifies the document, quotes the unclear wording, and says what you want explained. Keep account numbers and other private details out of this practice worksheet.</p><div class="toolbar"><button id="open-all" class="a-btn a-btn--secondary">Open all explanations</button><button id="close-all" class="a-btn a-btn--secondary">Close all</button></div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Separate a question from a request</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>“What does this label mean?” asks for an explanation. “Please send a copy” asks for an action. Writing them separately makes the desired response easier to identify.</p>
  </div>
</div><p class="note">Original practice content. This example does not provide financial advice or represent a CFPB service.</p></section><aside class="notes"><h2>Your working notes</h2><p>Use the checklist as a local memory aid.</p><label><input type="checkbox">I can name the document I am asking about.</label><label><input type="checkbox">I have identified the wording I want explained.</label><label><input type="checkbox">I know whether I need an explanation or an action.</label><p id="count" role="status" aria-live="polite">0 of 3 notes checked</p><button id="reset" class="a-btn">Reset worksheet</button></aside></div></main><script type="module">import {Expandable} from './vendor/cfpb-5.10.2/index.js';const panels=Expandable.init(document.querySelector('#guide'));document.querySelector('#open-all').onclick=()=>panels.forEach(x=>x.expand());document.querySelector('#close-all').onclick=()=>panels.forEach(x=>x.collapse());const checks=[...document.querySelectorAll('input[type=checkbox]')];const update=()=>document.querySelector('#count').textContent=checks.filter(x=>x.checked).length+' of 3 notes checked';checks.forEach(x=>x.onchange=update);document.querySelector('#reset').onclick=()=>{checks.forEach(x=>x.checked=false);update();panels.forEach(x=>x.collapse())};window.demoReady=true;</script></html>
```

코드 참조

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

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

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

### 구현 시작점

로컬 데모는 네이티브 5.10.2 컴파일 모듈과 CSS을 실행합니다. npm 복사 절차는 프로젝트용으로 제공됩니다. 소스 SCSS를 빌드하는 경우에는 문서에 안내된 아이콘 처리도 필요합니다. Sources의 전체 실행 예제 ZIP에는 정확한 미리보기 종속 항목과 전체 문서도 포함되어 있습니다. 해당 디렉터리에 압축을 푼 다음 python3 -m http.server 8080을 실행하고 http://localhost:8080/cfpb.html을 여세요. 모듈 기반 예제는 file://로 열지 마세요.

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

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

```
실제 5.10.2 Expandable 모듈을 사용해 CFPB에서 영감을 받은 독립적인 편집용 워크시트를 만드세요. 필수 헤더·레이블·콘텐츠 구조, 전체 열기 및 전체 닫기 기능, 접기·펼치기 상태가 바뀌어도 값이 유지되는 일반 체크박스 목록을 포함하세요. 12열 그리드에서 8/4 비율로 구성하고 901px 미만에서는 세로로 쌓이도록 하세요. 모바일 여백은 15px, 본문 너비는 66ch로 설정하세요. 기본 타이포그래피는 컴포넌트 CSS과 별도로 제공하세요. CFPB 로고를 추가하거나 금융 조언 또는 가짜 제출 기능을 제공하지 마세요. ESM 번들을 클래식 스크립트로 가져오지 마세요.
```

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

독립적인 구현 참고 자료입니다. 네이티브 패키지 컴포넌트 사용이 CFPB와의 제휴를 의미하지는 않습니다. 교육용으로 새로 작성한 콘텐츠이며 금융 조언이나 제출 기능을 제공하지 않습니다. 재사용하기 전에 TERMS.md를 확인하세요.

- 글꼴 현재 글꼴, 정규화 및 읽기 리듬.

- 제목 반응형 제목 계층 구조를 확인하고 버전별 코드와 비교하세요.

- 색상 CFPB 색상 팔레트 및 사용 지침.

- 그리드 12열, 거터 및 최대 너비.

- 펼치기 컴포넌트 구조 및 변형.

- 설치 패키지 및 소스 빌드 통합.

- 토큰 새 토큰 파이프라인의 범위.

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

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

### CMS 디자인 시스템

버전이 지정된 테마 변수, 실제 Review 구성 요소 API, 사용자 답변과 포커스를 유지하는 편집 및 검토 흐름을 구현하세요.

### Det Fælles Designsystem

완전한 리소스 비교를 통해 덴마크 DKFDS 테마, 실제 Sass 척도, 접근성을 고려한 표 패턴을 살펴보세요. 숫자 정렬, 제출 방식 검색, 결과 없음 상태 복구를 포함합니다.

### 디자인 시스템 .italia

Bootstrap Italia의 실제 타이포그래피와 반응형 Stepper 구조, 복구 가능한 로컬 폼 상태를 활용해 읽기 쉬운 서비스 절차를 구현하세요.


- [구현 레퍼런스](https://cfpb.github.io/design-system/components/expandables)
- [출처](https://cfpb.github.io/design-system/foundation/color)
- [출처](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [출처](https://cfpb.github.io/design-system/foundation/grid)
- [지원 사양 읽기](https://cfpb.github.io/design-system/)
- [지원 사양 읽기](https://cfpb.github.io/design-system/foundation/fonts)
- [지원 사양 읽기](https://cfpb.github.io/design-system/foundation/color)
- [지원 사양 읽기](https://cfpb.github.io/design-system/foundation/grid)
- [코드 참조](https://cfpb.github.io/design-system/components/expandables)
- [지원 사양 읽기](https://cfpb.github.io/design-system/components/expandables)
- [지원 사양 읽기](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [지원 사양 읽기](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [코드 참조](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [글꼴 현재 글꼴, 정규화 및 읽기 리듬.](https://cfpb.github.io/design-system/foundation/fonts)
- [제목 반응형 제목 계층 구조를 확인하고 버전별 코드와 비교하세요.](https://cfpb.github.io/design-system/foundation/headings)
- [색상 CFPB 색상 팔레트 및 사용 지침.](https://cfpb.github.io/design-system/foundation/color)
- [그리드 12열, 거터 및 최대 너비.](https://cfpb.github.io/design-system/foundation/grid)
- [펼치기 컴포넌트 구조 및 변형.](https://cfpb.github.io/design-system/components/expandables)
- [설치 패키지 및 소스 빌드 통합.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [토큰 새 토큰 파이프라인의 범위.](https://cfpb.github.io/design-system/development/design-tokens)