{"id":"govuk-design-system","no":526,"name":"GOV.UK Design System","ja":"GOV.UK デザインシステム","era":"2012–","family":"デザインシステム","kind":"スタイル","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"GOV.UK Design System — Styles（英国政府 Government Digital Service）","url":"https://design-system.service.gov.uk/styles/"},"reference":{"status":"verified","pageUrl":"https://design-system.service.gov.uk/styles/","credit":"GOV.UK Design System — Styles（英国政府 Government Digital Service）","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Use%20of%20the%20font%20GDS%20Transport%20on%20the%20gov.uk%20website%20(2025).png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Use%20of%20the%20font%20GDS%20Transport%20on%20the%20gov.uk%20website%20(2025).png","credit":"GOV.UK のトップページに組まれた GDS Transport 2025年 — Wikimedia Commons / Public domain"}]},"essence":"英国政府の Government Digital Service が公開し維持する設計言語。装飾のない一列左寄せに GDS Transport を組み、角を丸めない緑のボタンは下辺の濃い帯で厚みを持ち、押すとその分だけ沈む。焦点の当たった要素は黄色い地と黒い下線で示す。","cues":["装飾のない一列の左寄せで、囲みも影もほとんど使われない","角を丸めない緑のボタンの下辺に濃い緑の帯が敷かれ、押すとその厚みの分だけ沈む","焦点の当たった要素だけが黄色い地に変わり、その下に黒い線が引かれる","文字は 48 / 36 / 24 / 19 / 16px という粗い段しか持たず、中間の大きさが存在しない"],"intents":["信頼","静けさ","技術"],"works":["行政や公共サービスの申請画面を、一画面につき一問の左寄せ一列で組み直すとき","キーボードだけで操作する人に、いまどこに焦点があるかを疑いなく伝えたいとき"],"recipe":{"type":"サンセリフ一種だけを使い、大きさは五段に固定して中間を作らない。見出しは太く、本文は 19px を基準に置く。","layout":"内容の幅を一列に絞り、すべてを左端の一本の線に揃える。段組も囲みも使わず、話題の切れ目は横罫だけで示す。","material":"色は意味に結びつけてだけ使い、飾りに回さない。ボタンは角丸をゼロにし、自身の暗い色の帯を下辺に敷いて厚みを作る。焦点は黄色い地と黒い下線に固定する。"},"avoid":"見栄えを整えようとしてボタンの角を丸めたり入力欄の枠を細くしたりすると、押せる厚みと焦点の位置という、この様式が唯一頼っている合図が消える。","colors":["#0B0C0C","#FFDD00","#0F7A52"],"motif":"graphic","pair":["din-1451","swiss"],"study":["GOV.UK Design System の Styles にある色の使用規則","govuk-frontend の focused ヘルパーが黄色い地と黒い下線をどう作っているか","GDS Transport という書体の出自と、なぜ政府サービス向けに限って配られるのか"],"en":{"essence":"The design language the UK government's Government Digital Service publishes and maintains for public services. Everything runs in one undecorated left aligned column set in GDS Transport, and the green button keeps square corners while carrying a darker green band along its bottom edge, dropping by exactly that depth when pressed. Whatever holds keyboard focus turns yellow with a black rule under it.","cues":["One undecorated left aligned column, with almost no boxes and no shadows","A green button with square corners and a darker green band along its bottom edge, which drops by that exact depth when pressed","Whatever holds keyboard focus turns yellow with a black rule drawn beneath it","Type sizes step coarsely through 48, 36, 24, 19 and 16px with nothing in between"],"works":["Rebuilding a government or public service form as a single left aligned column asking one question per screen","Making the current focus position unmistakable for someone operating the service by keyboard alone"],"recipe":{"type":"One sans serif only, in five fixed sizes with nothing in between. Headings are bold and body text sits at 19px.","layout":"Hold the content to a single narrow column and align every element to one left rule. No multi column layouts and no boxes, because a horizontal rule is the only break between topics.","material":"Colour is tied to meaning and never used decoratively. Buttons keep a corner radius of zero and gain their thickness from a band of their own darker shade along the bottom edge. The focus state is always yellow ground with a black underline."},"avoid":"Tidying the look by rounding button corners or thinning the borders on form inputs deletes the two signals this style relies on entirely, the pressable thickness and the position of focus.","study":["GOV.UK Design System の Styles にある色の使用規則","govuk-frontend の focused ヘルパーが黄色い地と黒い下線をどう作っているか","GDS Transport という書体の出自と、なぜ政府サービス向けに限って配られるのか"]}}