USWDS 디자인 시스템.

이름 / 규칙	값 / 구성	용도
`0.5 / 05`	`4px`	0.5단위 간격 및 유틸리티 양식
`1`	`8px`	기본 간격 단위
`1.5 / 105`	`12px`	중간 간격
`2`	`16px`	안쪽 여백 축소
`3`	`24px`	관련 콘텐츠 간격
`4`	`32px`	섹션 간격
`5`	`40px`	더 넓은 간격
`6`	`48px`	넓은 간격
`tablet`	`640px`	이름이 지정된 너비 토큰
`desktop`	`1024px`	이름이 지정된 너비 토큰

기본 타이포그래피 매핑

이름 / 규칙	값 / 구성	용도
`sans`	`source-sans-pro`	타이포그래피 계열 토큰
`serif`	`merriweather`	타이포그래피 계열 토큰
`body / ui`	`sans`	역할 기반 매핑
`heading`	`serif`	역할 기반 매핑
`code`	`mono → roboto-mono`	코드 역할 매핑

기본 테마 색상

이름 / 규칙	값 / 구성	용도
`primary`	`blue-60v / #005ea2`	주요 색상 별칭
`primary-lighter`	`blue-10 / #d9e8f6`	주요 색상 보조 색조
`primary-dark`	`blue-warm-70v / #1a4480`	더 어두운 주요 색상 별칭
`ink`	`gray-90 / #1b1b1b`	기본 텍스트 별칭

컴포넌트 규약

이름 / 규칙	값 / 구성	용도
`aria-controls`	`Panel ID`	각 아코디언 버튼을 콘텐츠에 연결합니다.
`aria-expanded`	`true / false`	기본 JS가 열린 상태를 관리합니다.
`data-allow-multiple`	`Accordion root attribute`	패널을 각각 독립적으로 열 수 있습니다.
`usa-accordion--bordered`	`Root modifier`	테두리 변형을 제공합니다.

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

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

DESIGN-uswds.md

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

가이드 다운로드

USWDS 디자인 시스템: 구성 가능한 Foundation

기본 토큰은 구성의 출발점입니다

USWDS는 시스템 토큰, 프로젝트 테마 설정, 유틸리티 클래스, 컴포넌트를 구분합니다. 아래 레퍼런스에는 최신 문서에 따른 기본 테마 설정이 정리되어 있습니다. 연방 프로그램에서는 모든 컴포넌트를 대체하지 않고도 다른 타이포그래피 역할이나 색상 별칭을 구성할 수 있습니다.
이 OpenDesign 가이드에서

미리보기는 3.14.0 CSS 및 아코디언 JavaScript을 사용한 독립적인 연구 기회 비교 예시입니다. 정부 배너와 기관 식별 표시는 포함하지 않습니다. 프로그램 이름과 단계는 가상이며, 필터링은 전적으로 브라우저에서 이루어집니다.

USWDS 디자인 시스템 간격 및 테마 토큰

숫자 대신 단위를 읽으세요

USWDS 간격 단위 하나는 8px입니다. units(2)는 16px, units(3)는 24px를 뜻합니다. 반 단위 토큰은 더 작은 간격을 제공하며, 유틸리티 표기에서는 반 단위에 05를 사용합니다. margin-2 유틸리티는 2픽셀 여백을 의미하지 않습니다.

간격 척도에는 tablet 및 desktop과 같이 이름이 지정된 너비도 포함됩니다. 이 이름은 재사용 가능한 토큰이지, 각 너비에 맞춰 모든 페이지를 다시 디자인하라는 뜻은 아닙니다. 이 비교 예시에서는 콘텐츠에 grid-container를 사용하고, 표에는 초점을 이동해 스크롤할 수 있는 영역을 둡니다.

scss

@use "uswds-core" as *;
.opportunity-meta {
  padding: units(2);
  margin-bottom: units(3);
}

USWDS 디자인 시스템 글꼴 유형 및 역할

구성 요소 이름을 바꾸지 않고도 역할을 변경할 수 있습니다

기본 sans 토큰은 Source Sans Pro에, serif는 Merriweather에 연결됩니다. body와 UI 역할은 sans에, heading 역할은 serif에 연결됩니다. family("body") 함수는 이 연결을 따라 최종 값을 확인합니다. 프로젝트 문서를 작성할 때는 의미상 역할과 최종 글꼴 모음을 구분하세요.

로컬 미리보기에서는 글꼴을 다운로드할 필요가 없도록 본문에 Helvetica/Arial을, 제목에 Georgia를 명시적으로 사용합니다. 이는 표준 USWDS 서체 정체성이 아니라 예시를 위한 재정의입니다. 프로덕션 빌드에서는 uswds-core 설정을 통해 해당 역할을 구성하거나 배포된 글꼴 파일을 복사해야 합니다.

scss

@use "uswds-core" with (
  $theme-font-type-sans: "helvetica",
  $theme-font-type-serif: "georgia",
  $theme-font-role-body: "sans",
  $theme-font-role-heading: "serif"
);

USWDS 디자인 시스템 테마 색상 별칭

별칭을 용도에 맞게 연결하세요

기본 primary 별칭은 blue-60v, #005ea2에 연결됩니다. primary-dark는 blue-warm-70v, #1a4480에, ink는 gray-90, #1b1b1b에 연결됩니다. 이는 테마 값일 뿐, 모든 USWDS 사이트가 동일한 브랜드 색상을 사용해야 한다는 뜻은 아닙니다.

동작이나 제목 스타일에는 의미를 나타내는 별칭을 사용하고, 실제 디자인 결정이 시스템 색상 토큰을 사용하는 것일 때만 해당 토큰을 사용하세요. 컴파일된 CSS에서 일치하는 모든 16진수 문자열을 바꾸기보다 설정에서 primary 별칭을 재정의하는 편이 관리하기 쉽습니다.

USWDS 디자인 시스템 기회 비교 행

표의 의미 구조를 유지하세요

예시에서는 캡션과 scope="col"이 지정된 열 머리글, scope="row"가 지정된 기회 이름을 사용합니다. 각 항목에서 동일한 주제와 단계 필드를 비교하므로 표가 적합합니다. 영역을 스크롤하더라도 이러한 관계는 유지됩니다.

스크롤 가능한 래퍼에 tabindex="0"을 지정하면 키보드 사용자가 해당 영역으로 이동할 수 있습니다. 이렇게 하면 넓은 데이터를 그 영역 안에 담아 문서 전체의 너비가 늘어나지 않도록 할 수 있습니다. 미리보기에는 일반 텍스트 셀이 들어 있습니다. 프로그램 데이터가 없는 경우에는 숫자를 지어내지 말고 명시적인 콘텐츠 상태를 제공해야 합니다.

정렬은 별도의 기능입니다

USWDS에서는 data-sortable을 통해 정렬 가능한 머리글을 지원합니다. 정렬 가능한 표에는 aria-live="polite"가 지정된 usa-table__announcement-region도 필요합니다. 숫자로 표시되는 값은 서식이 적용된 금액이 알파벳순이 아닌 값으로 정렬되도록 data-sort-value를 지정해야 할 수도 있습니다. 이 비교 예시에서는 세 행으로 구성된 주제 필터를 보여주는 것이 목적이므로 정렬을 사용하지 않습니다.

USWDS 디자인 시스템 요구 사항을 공개형 섹션으로 표시

버튼과 패널의 ID를 연결하세요

각 usa-accordion__button의 aria-controls는 연결된 usa-accordion__content를 가리킵니다. 기본 제공되는 JavaScript은 aria-expanded와 표시 상태를 업데이트합니다. bordered 수정자는 테두리 스타일을 변경하고, data-allow-multiple을 사용하면 여러 섹션을 동시에 열어 둘 수 있습니다.

콘텐츠 개요를 이해하기 쉽도록 제목 안에 버튼을 배치합니다. 프로그램의 적합성을 판단하는 데 필요한 요구 사항은 공개형 섹션 위에 표시해야 합니다. 이 예시에서는 각 패널에 추가 준비 정보와 가상 데이터 세트에 대한 설명을 담습니다.

제목은 패널의 주제를 설명합니다.
버튼에는 펼침 상태와 대상 ID가 지정됩니다.
패널은 표시 상태가 바뀌어도 같은 ID를 유지합니다.

USWDS 디자인 시스템 전체 에셋 디렉터리 설치

컴파일된 CSS에서 사용하는 경로를 유지하세요

@uswds/[email protected]을 설치하고 dist 디렉터리를 복사할 때 css, js, img, fonts를 하나의 폴더에 합치지 마세요. 스타일시트는 아이콘 및 글꼴에 상대 경로를 사용합니다. 경로를 유지하지 않으면 페이지가 일부는 제대로 표시되더라도 공개형 섹션 아이콘이나 글꼴이 누락될 수 있습니다.

head에서 uswds-init.min.js를 불러오고, 그다음 스타일시트를 불러온 후 본문 마크업 뒤에서 uswds.min.js를 불러오세요. 번들 라이브러리는 아코디언 기능을 활성화합니다. 아래의 검색 입력란과 주제 필터는 사용자 지정 애플리케이션 로직이며, 원격 검색 서비스를 호출하지 않습니다.

USWDS 디자인 시스템 필터링 및 복구

검색 결과를 사용자에게 알려야 합니다

기본 label, input, select, button 스타일을 사용해 컨트롤을 표시합니다. 애플리케이션은 입력한 검색어와 선택한 주제를 가상의 세 가지 항목과 비교합니다. 결과 개수는 정중한 방식으로 공지되는 라이브 영역에 표시됩니다. 일치하는 결과가 없으면 안내와 초기화 동작을 보여 주면서 입력한 검색어는 유지합니다.

이 예시에서는 기회를 찾는 과정과 지원하는 과정을 의도적으로 구분합니다. 준비 내용을 열어도 임시 신청서가 생성되거나 요구 사항이 완료된 것으로 표시되지 않습니다. 실제 지원 절차를 만들려면 해당 프로그램의 정책, 인증 및 지속적으로 보존되는 거래 상태를 별도로 구현해야 합니다.

Environment로 필터링하고 남은 기회를 확인하세요.
일치하지 않는 문구를 검색한 다음 필터 지우기를 실행하세요.
두 준비 패널을 모두 열어 각각의 펼침 상태가 독립적으로 유지되는지 확인하세요.

USWDS 디자인 시스템 구성 요소 예시

추가 준비 정보 아코디언

버튼과 패널의 관계를 명시적으로 연결한 기본 제공 USWDS 공개형 섹션입니다.

html

<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
</div>

기회 비교 표

캡션과 행·열 머리글이 비교 관계를 유지합니다.

html

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>Illustrative research opportunities</caption>
    <thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead>
    <tbody><tr><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr></tbody>
  </table>
</div>

완전한 독립 실행형 예시

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

html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>