CMS 디자인 시스템.

이름 / 규칙	값 / 구성	용도
`--color-base`	`#262626`	버전이 명시된 Core 텍스트 값입니다. 이전 개요 문구에는 #333으로 표기되어 있습니다.
`--color-primary / primary-darker`	`#0071bc / #004f84`	동작 및 상호작용 시 어두운 색상 참조입니다.
`--color-error / success`	`#e31c3d / #12890e`	상태 색상에는 항상 텍스트 설명을 함께 표시하세요.
`--color-border`	`#d9d9d9`	--review__border-color에도 사용됩니다.
`--color-focus-dark / focus-light`	`#bd13b8 / #ffffff`	테마의 포커스 색상 참조입니다.
`--color-background / gray-lightest`	`#ffffff / #f2f2f2`	페이지 및 밝은 보조 표면입니다.

타이포그래피

이름 / 규칙	값 / 구성	용도
`--font-family-body / heading`	`Open Sans, Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif`	18.1.0의 정확한 글꼴 순서이며, 미리보기에서는 Arial로 대체됩니다.
`--font-size-sm / md / lg / xl / 2xl`	`.875 / 1 / 1.125 / 1.3125 / 1.5rem`	루트 크기 16px 기준 14 / 16 / 18 / 21 / 24px입니다.
`--font-size-3xl--mobile / 3xl`	`1.875 / 2.25rem`	30 / 36px입니다.
`--font-size-4xl--mobile / 4xl`	`2.25 / 3rem`	36 / 48px입니다.
`--font-size-5xl--mobile / --tablet / 5xl`	`2.25 / 3 / 3.75rem`	36 / 48 / 60px입니다.
`--font-line-height-base / heading`	`1.5 / approximately 1.3`	테마의 제목 값은 1.2999999523162842로 저장됩니다.

간격, 그리드 및 모양

이름 / 규칙	값 / 구성	용도
`--spacer-half / 1 / 2 / 3`	`4 / 8 / 16 / 24px`	유틸리티의 숫자 수정자는 8px를 곱해 계산합니다.
`--spacer-4 / 5 / 6 / 7`	`32 / 40 / 48 / 56px`	더 큰 레이아웃 간격입니다.
`--grid-columns`	`12`	그리드 구성입니다.
`--grid-gutter-width / grid-form-gutter-width`	`32 / 16px`	현재 테마에서는 일반 여백과 양식 여백을 구분합니다.
`--site-max-width`	`1104px`	테마 컨테이너 참조입니다.
`--site-margins / site-margins-mobile`	`3rem / 1.5rem`	기본 루트 크기 기준 48 / 24px입니다.
`--radius-default / medium / large`	`3 / 4 / 8px`	모든 경우에 적용되는 단일 반경 값은 없습니다.

반응형 경계값

이름 / 규칙	값 / 구성	용도
`sm`	`544px`	모바일 우선 소형 접두사입니다.
`md`	`768px`	중형 접두사입니다.
`lg`	`1024px`	대형 접두사입니다.
`xl`	`1280px`	특대형 접두사입니다.

CMS 디자인 시스템 전체 가이드

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

DESIGN-cms.md

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

가이드 다운로드

CMS 디자인 시스템 Core 또는 하위 테마 선택

이 패키지는 하나의 브랜드 스킨이 아니라 여러 테마로 구성됩니다

CMS Core는 공통 인터페이스 기반을 제공하며, Healthcare.gov, Medicare.gov, CMS.gov용 하위 시스템은 별도로 제공됩니다. 이 참조 문서는 @cmsgov/design-system 18.1.0과 해당 버전의 core-theme.css를 기준으로 합니다. 하위 테마에서 제공하는 색상, 로고 또는 컴포넌트가 Core 규칙에 자동으로 포함되는 것은 아닙니다. 예제에서는 중립적인 알림 환경설정 워크플로를 사용하며 공식 정부 배너와 브랜드 식별 표시는 제외했습니다.
이 OpenDesign 가이드에서

React, Preact, 웹 컴포넌트, 수동 HTML/CSS 통합 경로가 있습니다. 문서에서는 내장 동작이 유용한 경우 JavaScript 컴포넌트를 권장하며, 웹 컴포넌트 모음은 일부 항목만 포함합니다. 독립형 예제에서는 실제 Core CSS와 편집·저장·취소를 위한 애플리케이션 JavaScript를 사용합니다. CSS가 유효성 검사, 라우팅 또는 영속성을 구현한다고 주장하지 않습니다.

CMS 디자인 시스템 버전이 명시된 테마 읽기

스타일시트 두 개 모두 포함

index.css는 컴포넌트 규칙을 정의하고 core-theme.css는 해당 규칙에 사용할 변수를 제공합니다. 테마를 생략하면 유효한 클래스 이름에 대응하는 값이 없어질 수 있습니다. 반대로 Core 타이포그래피를 설명하면서 Medicare 테마를 가져오면 페이지가 렌더링되더라도 잘못된 결과를 보여 주게 됩니다. 이 설정은 두 에셋을 모두 동일한 18.1.0 릴리스에서 가져옵니다.

이 가이드에서 숫자 값을 확인할 때는 버전이 지정된 테마를 기준으로 합니다. 예를 들어 --color-base는 #262626이지만, 일반적인 타이포그래피 설명에는 여전히 #333이 언급됩니다. 테마에서 --grid-gutter-width는 --spacer-4(32px)이고, --grid-form-gutter-width는 --spacer-2(16px)입니다. 거터가 16px이라는 일반적인 설명을 모든 그리드 유형에 적용해서는 안 됩니다. 실제 레이아웃을 재현할 때는 이러한 차이가 중요합니다.

CMS 디자인 시스템 Core 타이포그래피와 계층 구조

하나의 글꼴 계열, 명확한 역할별 크기

Core는 제목과 본문에 Open Sans를 사용합니다. 18.1.0 테마의 대체 글꼴 목록은 Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial을 거쳐 sans-serif로 이어집니다. 로컬 견본에서는 외부 글꼴 파일을 요청하지 않도록 Arial을 명시적으로 사용하므로, 전체 공식 타이포그래피와 글꼴 메트릭이 다릅니다.

본문 기본 크기는 1rem이며 줄 높이는 1.5입니다. 크기 변수에는 16px 루트 기준 14, 16, 18, 21, 24px이 포함되며, 그보다 큰 반응형 역할도 있습니다. 3xl은 모바일에서 30px, 그 외에는 36px이고, 4xl은 모바일에서 36px, 그 외에는 48px입니다. 5xl은 모바일에서 36px, 태블릿에서 48px, 가장 큰 역할에서는 60px입니다. 이 값은 테마에 정의된 크기이지, 모든 페이지 제목에 가장 큰 크기를 사용해도 된다는 뜻이 아닙니다. 의미에 맞는 제목 요소와 적절한 유틸리티 또는 ds-content 매핑을 사용하세요.

CMS 디자인 시스템 간격과 반응형 레이아웃

8픽셀 리듬과 중간 단계

--spacer-1부터 --spacer-7까지는 8픽셀 단위로 8–56px에 대응합니다. --spacer-half는 4px이고 --spacer-none은 0입니다. 따라서 ds-u-margin--2와 같은 클래스는 2rem이 아니라 16px을 의미합니다. 리뷰 행의 기본 CSS에는 세로 여백 16px과 아래쪽 테두리 2px이 적용됩니다. 따라서 답변마다 주변 폼에 패딩이 있는 카드를 추가할 필요는 없습니다.

버전이 지정된 테마에서 Core 사이트의 최대 너비는 1104px이며, 사이트 여백은 3rem, 모바일 여백은 1.5rem입니다. 이 견본에서는 짧은 리뷰 행 두 개를 표시하기 위해 더 작은 48rem 너비의 읽기 영역을 사용합니다. 이는 애플리케이션의 너비 설정이지 새로운 CMS 토큰이 아닙니다.

CMS 중단점 접두사 사용

CMS 디자인 시스템 리뷰 행 구조와 API

레이블, 값, 맥락에 맞는 편집 이동 경로

Review는 검토 가능한 항목 하나를 감쌉니다. 제목 수준은 기본적으로 h3이며 headingLevel로 지정할 수 있고, 그 뒤에 현재 값을 나타내는 자식 요소가 옵니다. editHref는 이동할 경로를 지정하며, 값이 없으면 편집 링크를 표시하지 않습니다. editAriaLabel은 반복해서 표시되는 Edit 링크에 명확하고 구별되는 접근성 이름을 제공합니다. 18.1.0 타입 선언에는 editText, onEditClick, editContent도 있으며, 사용자 지정 editContent를 지정하면 기본 링크 대신 해당 내용이 표시됩니다.

React 예제에서는 공개된 선언에서 확인한 실제 props를 사용합니다. 예시 경로는 애플리케이션에서 구현해야 하는 임의의 경로입니다. 기본 CSS 대안은 ds-c-review, ds-c-review__content, ds-c-review__heading 구조를 보여 주지만, 탐색과 업데이트는 여전히 애플리케이션에서 관리해야 합니다.

jsx

import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}

CMS 디자인 시스템 개별 항목 편집과 섹션 편집

수정 경로를 예측하기 쉽게 유지

CMS 양식 리뷰 패턴은 답변 하나를 편집하는 경우와 섹션 전체를 편집하는 경우를 구분합니다. 알림 형식이나 언어처럼 서로 독립적인 기본 설정은 개별 항목 편집에 적합합니다. 가구 구성원과 각 구성원의 관계처럼 서로 연관된 답변은 애플리케이션이 일관성을 함께 다시 계산할 수 있도록 섹션 단위로 편집해야 할 수 있습니다. 공식 지침에는 섹션 수준의 Edit를 제목 옆에 배치하는 기능은 Review 컴포넌트 자체에서 구현하지 않는다고 명시되어 있습니다.

미리보기에서는 선택한 행의 입력 필드만 표시합니다. Save를 선택하면 해당 값만 업데이트되고, 포커스는 편집을 시작한 Edit 컨트롤로 돌아갑니다. Cancel을 선택하면 입력 중인 변경 사항을 취소합니다. 편집기가 열린 동안에도 화면에 표시되는 기존 답변은 그대로 유지됩니다. 편집 양식이 나타났다는 이유만으로 성공을 알리지 않고, 실제 변경이 이루어진 경우에만 해당 변경을 상태 메시지로 안내합니다.

입력 단계와 리뷰 단계에서 질문 레이블과 순서를 동일하게 유지하세요.
화면에 표시되는 링크가 Edit이더라도 각 행에 맥락을 나타내는 편집 이름을 제공하세요.
관련 답변을 함께 변경해야 한다면 단일 행 컴포넌트 외부에서 섹션 편집을 구현하세요.

CMS 디자인 시스템 리뷰, 완료, 실제 처리 여부

리뷰는 제출 확인 영수증이 아닙니다

Review는 편집 가능한 양식 답변에 적합하며 검색 결과를 대신하지 않습니다. 실제 제출 흐름에서는 리뷰 후 최종 제출 작업을 제공해야 합니다. 영수증을 표시하기 전에 해당 작업이 백엔드에서 실제로 처리되었는지 확인해야 합니다. 이 견본에서는 대신 Complete local review를 제공하며, 아무것도 제출되거나 저장되지 않는다고 명시합니다.

Core는 기본 파랑 #0071bc, 오류 빨강 #e31c3d, 성공 초록 #12890e, 테두리 회색 #d9d9d9을 구분합니다. 저장된 기본 설정은 색상뿐 아니라 텍스트로도 표시합니다. 포커스에는 테마의 밝은색 및 어두운색 포커스 참조값을 사용합니다. Edit를 최소한의 컨트롤처럼 스타일링하더라도 포커스 표시를 제거하지 마세요. 키보드로 마지막 상태에 접근할 수 있으며, 해당 상태가 리뷰 행을 지우지는 않습니다.

CMS 디자인 시스템 안전한 설치와 확장

완전한 CSS 경로와 실제 컴포넌트 경로

고정된 패키지를 설치하고 패키지 내보내기를 통해 css/index.css와 css/core-theme.css를 가져오세요. React 사용자는 패키지 루트에서 Review를 가져오며, Preact 사용자는 /preact 진입점을 사용할 수 있습니다. 이 예제에는 Sass 컴파일이 필요하지 않습니다. 정적 CSS을 복사하는 경우 상대 글꼴 및 이미지 에셋 경로를 유지하거나, 이 견본처럼 지원되는 대체 글꼴을 명시적으로 선택하세요.

CMS 네임스페이스는 ds-l- 레이아웃, ds-c- 컴포넌트, ds-u- 유틸리티를 구분합니다. 애플리케이션 클래스가 문서화되지 않은 공식 컴포넌트인 것처럼 보여서는 안 됩니다. 미리 보기에서 읽기 셸과 인라인 편집기는 로컬 조합이며, 리뷰 행과 버튼은 배포된 스타일을 사용합니다.

일치하는 Core 컴포넌트와 테마 CSS를 불러온 다음 리뷰 행 두 개를 렌더링합니다.
각 편집 작업을 제어형 편집기에 연결하고, 저장하거나 취소한 뒤 포커스를 돌려줍니다.
데스크톱과 모바일 너비에서 값 변경, 임시 수정 내용 폐기, 로컬 작업 완료를 테스트합니다.

CMS 디자인 시스템 컴포넌트 예시

서로 독립적인 리뷰 행 두 개

실제 18.1.0 React 속성입니다. 이를 사용하는 애플리케이션은 연결된 편집 경로를 구현해야 합니다.

jsx

import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}

Review의 기본 제목 수준은 h3입니다.
editContent는 기본 편집 링크를 대체하며, 해당 링크를 표시하려면 editHref가 필요합니다.

네이티브 CSS 리뷰 구조

애플리케이션이 상호작용을 담당하는 경우 유용한 수동 HTML 통합입니다.

html

<div class="ds-c-review">
  <div class="ds-c-review__content">
    <h3 class="ds-c-review__heading">Notice format</h3>
    <p>Large print</p>
  </div>
  <a href="/preferences/notice-format" aria-label="Edit notice format">Edit</a>
</div>

완전한 독립 실행형 예시

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

html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Notice preferences — CMS Core specimen</title><link rel="stylesheet" href="vendor/cms-18.1.0/index.css"><link rel="stylesheet" href="vendor/cms-18.1.0/core-theme.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{margin:0;border-top:8px solid #0071bc}.shell{max-width:48rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:16px 0 24px}h2{font-size:24px;margin:32px 0 16px}.intro{margin-bottom:32px}.ds-c-review__content p{margin:8px 0}.edit{align-self:flex-start;min-width:48px;border:0;background:none;color:#0071bc;text-decoration:underline;font-size:16px;padding:4px;cursor:pointer}.editor{margin:24px 0;padding:24px;background:#e6f1f8;border-left:4px solid #0071bc}fieldset{padding:0;border:0;margin:0}legend{font-size:20px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;margin:16px 0}.choice input{width:20px;height:20px;accent-color:#0071bc}.actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}footer{margin-top:40px;padding-top:24px;border-top:1px solid #d9d9d9}#status{margin-top:24px;font-weight:bold}button:focus-visible,input:focus-visible{outline:3px solid #bd13b8;outline-offset:3px}[hidden]{display:none!important}@media(max-width:543px){.editor{padding:16px}.actions{flex-direction:column;align-items:flex-start}}</style></head><body><main class="shell"><p>CMS Core component example</p><h1>Review your notice preferences</h1><p class="intro">Check these fictional preferences before completing the local review. This example does not collect health information or contact details.</p><section aria-labelledby="preferences"><h2 id="preferences">Notice preferences</h2><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Notice format</h3><p id="format-value">Standard print</p></div><button class="edit" data-field="format" aria-label="Edit notice format">Edit</button></div><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Preferred language</h3><p id="language-value">English</p></div><button class="edit" data-field="language" aria-label="Edit preferred language">Edit</button></div></section><form class="editor" id="editor" hidden><fieldset><legend id="legend"></legend><div id="choices"></div></fieldset><div class="actions"><button class="ds-c-button ds-c-button--solid" type="submit">Save preference</button><button class="ds-c-button" id="cancel" type="button">Cancel</button></div></form><div class="actions"><button class="ds-c-button ds-c-button--solid" id="complete">Complete local review</button><button class="ds-c-button" id="reset">Reset example</button></div><p id="status" role="status"></p><footer>Native CMS Core 18.1.0 CSS · Arial fallback<br>Changes exist only on this page. Nothing is submitted or saved after you leave.</footer></main><script>const values={format:'Standard print',language:'English'},options={format:['Standard print','Large print','Electronic text'],language:['English','Spanish']},labels={format:'Notice format',language:'Preferred language'};let field,opener;const editor=document.querySelector('#editor'),status=document.querySelector('#status');function close(){editor.hidden=true;opener?.focus()}document.querySelectorAll('.edit').forEach(button=>button.addEventListener('click',()=>{field=button.dataset.field;opener=button;document.querySelector('#legend').textContent='Edit '+labels[field].toLowerCase();document.querySelector('#choices').replaceChildren(...options[field].map((text,i)=>{const label=document.createElement('label');label.className='choice';const input=document.createElement('input');input.type='radio';input.name='preference';input.value=text;input.checked=text===values[field];label.append(input,document.createTextNode(text));return label}));editor.hidden=false;editor.querySelector('input:checked').focus();status.textContent=''}));editor.addEventListener('submit',event=>{event.preventDefault();values[field]=editor.querySelector('input:checked').value;document.querySelector('#'+field+'-value').textContent=values[field];status.textContent=labels[field]+' updated to '+values[field]+'.';close()});document.querySelector('#cancel').addEventListener('click',close);document.querySelector('#complete').addEventListener('click',()=>{if(!editor.hidden){status.textContent='Save or cancel the open edit before completing the review.';editor.querySelector('input:checked').focus();return}status.textContent='Local review complete. No data was submitted.'});document.querySelector('#reset').addEventListener('click',()=>{values.format='Standard print';values.language='English';Object.entries(values).forEach(([key,value])=>document.querySelector('#'+key+'-value').textContent=value);editor.hidden=true;status.textContent='Example reset.'});</script></body></html>