U.S. Web Design System (USWDS)

合衆国ウェブデザインシステム / 2015– / 양식 / 디자인 시스템

미국 총무청이 공개하는 연방 정부 사이트의 설계 언어다. 색도 여백도 글자 치수도 자유로운 수치가 아니라 띄엄띄엄 못 박은 단계로 양자화되어 있고, Libre Franklin에서 일으킨 중립적인 글꼴 Public Sans와 짙은 파랑과 빨강의 조합으로 어느 부처의 화면이든 같은 목소리로 말한다.

본문이 크고 한 줄이 45자에서 90자 사이에서 접힌다 / 짙은 파랑 #005EA2와 경고의 빨강 #D83933이라는 정해진 두 색이 어느 부처의 화면에나 나타난다 / 여백이 임의의 수치가 아니라 정해진 눈금 위에만 나타난다 / 제목부터 본문까지 Public Sans로 통하고 자폭이 넓으며 버릇이 없는 윤곽이다

Vote.gov のベンガル語版画面 2026年 — Wikimedia Commons / CC0

사전 항목

적합한 용도
행정이나 공공 기관의 사이트를 부서마다 흩어지지 않도록 하나의 체계로 만들 때 · 회선도 기기도 고를 수 없는 상대에게 확실히 읽어 낼 수 있는 신청 서식을 마련할 때
타이포그래피
Public Sans를 기본으로 하고 본문은 16px 이상, 한 줄은 45자에서 90자에 담는다. 긴 글의 줄 간격은 1.5 이상을 지킨다.
구성
여백도 치수도 정해진 단계에서만 고른다. 한 단을 기본으로 하고 요소 사이의 간격은 같은 눈금을 되풀이한다.
재료
짙은 파랑 #005EA2를 주로, 빨강 #D83933을 보조로 삼고, 회색은 #1B1B1B에서 #F0F0F0까지 정해진 단계만 쓴다. 중간 색은 만들지 않는다.
주의
단과 단 사이를 메우는 중간값을 하나 더한 순간 체계가 무너지고, 그 뒤로는 어느 페이지나 제 나름의 치수를 만들기 시작한다.
더 읽을거리
USWDSのdesign tokensのページ(段の刻み方そのものが書いてある) / Public Sansと元になったLibre Franklinを並べ、字形をどこで整理したか見る / 実際の連邦サイトを数枚開き、余白と文字寸法が本当に段の上に載っているか測る

관련 항목

이 항목을 인용하기

사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.

Link
https://indexstyle.org/ko/styles/uswds
Markdown
[U.S. Web Design System (USWDS) — IndexStyle](https://indexstyle.org/ko/styles/uswds)
HTML
<a href="https://indexstyle.org/ko/styles/uswds">U.S. Web Design System (USWDS) — IndexStyle</a>

색인의 원래 위치로