{ "schema": "brand-kit@2", "palette": { "paper": "#ffffff", "surface": "#f0f0f0", "ink": "#1b1b1b", "ink_muted": "#565c65", "accent": "#005ea2", "on_accent": "#ffffff", "accent_secondary": "#d83933", "accent_vivid": "#0050d8", "night": "#252f3e", "on_night": "#ffffff", "link": "#005ea2", "focus": "#2491ff", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/", "note": "Default theme: primary blue-60v #005ea2, secondary red-50 #d83933, ink gray-90 #1b1b1b, base-lightest gray-5 #f0f0f0 (published). night #252f3e is the docs site's header (observed). ink_muted base-dark #565c65 is our reading: the guide names no muted-text role.", "extras": [ { "name": "base-lightest", "hex": "#f0f0f0", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base-lightest = system 'gray-5'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "base-lighter", "hex": "#dfe1e2", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base-lighter = system 'gray-cool-10'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "base-light", "hex": "#a9aeb1", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base-light = system 'gray-cool-30'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "base", "hex": "#71767a", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base = system 'gray-cool-50'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "base-dark", "hex": "#565c65", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base-dark = system 'gray-cool-60'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "base-darker", "hex": "#3d4551", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base-darker = system 'gray-cool-70'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "base-darkest", "hex": "#1b1b1b", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base-darkest = system 'gray-90'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "ink", "hex": "#1b1b1b", "role": "Base: the neutral family, usually the text color throughout. Default theme token $theme-color-base-ink = system 'gray-90'; the body text color", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "primary-lighter", "hex": "#d9e8f6", "role": "Primary: about 60% of non-base color. Default theme token $theme-color-primary-lighter = system 'blue-10'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "primary-light", "hex": "#73b3e7", "role": "Primary: about 60% of non-base color. Default theme token $theme-color-primary-light = system 'blue-30'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "primary", "hex": "#005ea2", "role": "Primary: about 60% of non-base color. Default theme token $theme-color-primary = system 'blue-60v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "primary-vivid", "hex": "#0050d8", "role": "Primary: about 60% of non-base color. Default theme token $theme-color-primary-vivid = system 'blue-warm-60v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "primary-dark", "hex": "#1a4480", "role": "Primary: about 60% of non-base color. Default theme token $theme-color-primary-dark = system 'blue-warm-70v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "primary-darker", "hex": "#162e51", "role": "Primary: about 60% of non-base color. Default theme token $theme-color-primary-darker = system 'blue-warm-80v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "secondary-lighter", "hex": "#f3e1e4", "role": "Secondary: about 30% of non-base color. Default theme token $theme-color-secondary-lighter = system 'red-cool-10'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "secondary-light", "hex": "#f2938c", "role": "Secondary: about 30% of non-base color. Default theme token $theme-color-secondary-light = system 'red-30'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "secondary", "hex": "#d83933", "role": "Secondary: about 30% of non-base color. Default theme token $theme-color-secondary = system 'red-50'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "secondary-vivid", "hex": "#e41d3d", "role": "Secondary: about 30% of non-base color. Default theme token $theme-color-secondary-vivid = system 'red-cool-50v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "secondary-dark", "hex": "#b50909", "role": "Secondary: about 30% of non-base color. Default theme token $theme-color-secondary-dark = system 'red-60v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "secondary-darker", "hex": "#8b0a03", "role": "Secondary: about 30% of non-base color. Default theme token $theme-color-secondary-darker = system 'red-70v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-cool-lighter", "hex": "#e1f3f8", "role": "Accent cool: part of the 10% accent share. Default theme token $theme-color-accent-cool-lighter = system 'blue-cool-5v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-cool-light", "hex": "#97d4ea", "role": "Accent cool: part of the 10% accent share. Default theme token $theme-color-accent-cool-light = system 'blue-cool-20v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-cool", "hex": "#00bde3", "role": "Accent cool: part of the 10% accent share. Default theme token $theme-color-accent-cool = system 'cyan-30v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-cool-dark", "hex": "#28a0cb", "role": "Accent cool: part of the 10% accent share. Default theme token $theme-color-accent-cool-dark = system 'blue-cool-40v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-cool-darker", "hex": "#07648d", "role": "Accent cool: part of the 10% accent share. Default theme token $theme-color-accent-cool-darker = system 'blue-cool-60v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-warm-lighter", "hex": "#f2e4d4", "role": "Accent warm: part of the 10% accent share. Default theme token $theme-color-accent-warm-lighter = system 'orange-10'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-warm-light", "hex": "#ffbc78", "role": "Accent warm: part of the 10% accent share. Default theme token $theme-color-accent-warm-light = system 'orange-20v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-warm", "hex": "#fa9441", "role": "Accent warm: part of the 10% accent share. Default theme token $theme-color-accent-warm = system 'orange-30v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-warm-dark", "hex": "#c05600", "role": "Accent warm: part of the 10% accent share. Default theme token $theme-color-accent-warm-dark = system 'orange-50v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "accent-warm-darker", "hex": "#775540", "role": "Accent warm: part of the 10% accent share. Default theme token $theme-color-accent-warm-darker = system 'orange-60'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" }, { "name": "info-lighter", "hex": "#e7f6f8", "role": "State: info alerts and messages. Default $theme-color-info-lighter = system 'cyan-5'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "info-light", "hex": "#99deea", "role": "State: info alerts and messages. Default $theme-color-info-light = system 'cyan-20'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "info", "hex": "#00bde3", "role": "State: info alerts and messages. Default $theme-color-info = system 'cyan-30v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "info-dark", "hex": "#009ec1", "role": "State: info alerts and messages. Default $theme-color-info-dark = system 'cyan-40v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "info-darker", "hex": "#2e6276", "role": "State: info alerts and messages. Default $theme-color-info-darker = system 'blue-cool-60'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "error-lighter", "hex": "#f4e3db", "role": "State: errors and validation. Default $theme-color-error-lighter = system 'red-warm-10'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "error-light", "hex": "#f39268", "role": "State: errors and validation. Default $theme-color-error-light = system 'red-warm-30v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "error", "hex": "#d54309", "role": "State: errors and validation. Default $theme-color-error = system 'red-warm-50v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "error-dark", "hex": "#b50909", "role": "State: errors and validation. Default $theme-color-error-dark = system 'red-60v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "error-darker", "hex": "#6f3331", "role": "State: errors and validation. Default $theme-color-error-darker = system 'red-70'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "warning-lighter", "hex": "#faf3d1", "role": "State: warnings. Default $theme-color-warning-lighter = system 'yellow-5'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "warning-light", "hex": "#fee685", "role": "State: warnings. Default $theme-color-warning-light = system 'yellow-10v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "warning", "hex": "#ffbe2e", "role": "State: warnings. Default $theme-color-warning = system 'gold-20v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "warning-dark", "hex": "#e5a000", "role": "State: warnings. Default $theme-color-warning-dark = system 'gold-30v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "warning-darker", "hex": "#936f38", "role": "State: warnings. Default $theme-color-warning-darker = system 'gold-50v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "success-lighter", "hex": "#ecf3ec", "role": "State: success confirmation. Default $theme-color-success-lighter = system 'green-cool-5'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "success-light", "hex": "#70e17b", "role": "State: success confirmation. Default $theme-color-success-light = system 'green-cool-20v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "success", "hex": "#00a91c", "role": "State: success confirmation. Default $theme-color-success = system 'green-cool-40v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "success-dark", "hex": "#008817", "role": "State: success confirmation. Default $theme-color-success-dark = system 'green-cool-50v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "success-darker", "hex": "#216e1f", "role": "State: success confirmation. Default $theme-color-success-darker = system 'green-cool-60v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "disabled-lighter", "hex": "#c9c9c9", "role": "State: disabled controls. Default $theme-color-disabled-lighter = system 'gray-20'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "disabled-light", "hex": "#919191", "role": "State: disabled controls. Default $theme-color-disabled-light = system 'gray-40'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "disabled", "hex": "#757575", "role": "State: disabled controls. Default $theme-color-disabled = system 'gray-50'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "disabled-dark", "hex": "#454545", "role": "State: disabled controls. Default $theme-color-disabled-dark = system 'gray-70'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "disabled-darker", "hex": "#1b1b1b", "role": "State: disabled controls. Default $theme-color-disabled-darker = system 'gray-90'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "emergency", "hex": "#9c3d10", "role": "State: emergency alerts. Default $theme-color-emergency = system 'red-warm-60v'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "emergency-dark", "hex": "#332d29", "role": "State: emergency alerts. Default $theme-color-emergency-dark = system 'red-warm-80'", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/state-tokens/" }, { "name": "blue-warm-80 (docs header)", "hex": "#252f3e", "role": "Dark header band behind the logo, search and top buttons on designsystem.digital.gov (.site-header--dark). System token blue-warm-80", "prov": "observed", "source": "https://designsystem.digital.gov/design-tokens/color/system-tokens/", "source_note": "2026-10-30" }, { "name": "blue-40v (focus)", "hex": "#2491ff", "role": "Focus outline: 0.25rem solid on every focusable element. $theme-focus-color default 'blue-40v'", "prov": "published", "source": "https://designsystem.digital.gov/documentation/settings/" }, { "name": "violet-70v (visited link)", "hex": "#54278f", "role": "Visited link color. $theme-link-visited-color default 'violet-70v'", "prov": "published", "source": "https://designsystem.digital.gov/documentation/settings/" }, { "name": "gray-10 (header rule)", "hex": "#e6e6e6", "role": "Hairline under the header (border-top 1px on the first section). System token gray-10", "prov": "observed", "source": "https://designsystem.digital.gov/design-tokens/color/system-tokens/", "source_note": "2026-10-30" }, { "name": "red-50v", "hex": "#e52207", "role": "System token red-50v (vivid red); listed for reference", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/system-tokens/" }, { "name": "logo blue (blue-warm-30v)", "hex": "#81aefc", "role": "USWDS logo star, light blue point. Matches system token blue-warm-30v", "prov": "observed", "source": "https://designsystem.digital.gov/design-tokens/color/system-tokens/", "source_note": "2026-10-30" }, { "name": "logo indigo (indigo-60)", "hex": "#4d52af", "role": "USWDS logo star, indigo point. Matches system token indigo-60", "prov": "observed", "source": "https://designsystem.digital.gov/design-tokens/color/system-tokens/", "source_note": "2026-10-30" }, { "name": "logo orange", "hex": "#ee601d", "role": "USWDS logo star, orange point (from the logo SVG; not a system color token)", "prov": "observed", "source": "https://designsystem.digital.gov/assets/img/uswds-logo/4c-lg-on-white.svg", "source_note": "2026-10-30" }, { "name": "logo peach (red-warm-20v)", "hex": "#f6bd9c", "role": "USWDS logo star, peach point. Matches system token red-warm-20v", "prov": "observed", "source": "https://designsystem.digital.gov/design-tokens/color/system-tokens/", "source_note": "2026-10-30" }, { "name": "logo charcoal (gray-80)", "hex": "#2e2e2e", "role": "USWDS logo star, dark point on light grounds (becomes #e6e6e6 gray-10 on dark). Matches gray-80", "prov": "observed", "source": "https://designsystem.digital.gov/assets/img/uswds-logo/4c-lg-on-white.svg", "source_note": "2026-10-30" }, { "name": "page ground (gray-1)", "hex": "#fcfcfc", "role": "Body background of the docs site; the graphic-list band sits on it", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "search input (header)", "hex": "#13171f", "role": "Header search field fill on the dark #252f3e header", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "blue-50v (nav hover, search button)", "hex": "#2672de", "role": "Search submit button fill; primary-nav hover text and 4px hover bar", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "identifier muted / v1 strip (base-light on this site)", "hex": "#adadad", "role": "Identifier domain line and required links; ground of the \"Looking for USWDS v1\" strip", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "community link (blue-warm-70v)", "hex": "#2f4668", "role": "Footer community link text", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "icon light red (red-warm-40v-ish, illustration)", "hex": "#e9695f", "role": "Inner fills in the four red 70px circle icons (from the SVG)", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "GSA blue", "hex": "#00538e", "role": "GSA logo square in the identifier (from the SVG)", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "GitHub mark source fill", "hex": "#161514", "role": "Source fill of the GitHub mark; rendered rgba(255,255,255,0.7) in the header", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "phone menu link gray", "hex": "#5c5c5c", "role": "Phone drawer primary-nav link text", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "hero ink on gray", "hex": "#303030", "role": "rgba(0,0,0,0.8) text composited on #f0f0f0 (hero h1/lead, showcase h2)", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "ink on page ground", "hex": "#323232", "role": "rgba(0,0,0,0.8) text composited on #fcfcfc (graphic-list heads and body)", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "illustration charcoal", "hex": "#171717", "role": "Most-used stroke/fill in the hero illustration SVG", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "name": "illustration blue (blue-50)", "hex": "#0076d6", "role": "Accent in the hero illustration SVG", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" } ] }, "typography": { "display": { "family": "Public Sans", "css_family": "Public Sans Web", "steal_family": "Public Sans", "weight": 200, "line_height": 1.35, "tracking": 0, "fallback_stack": "'Public Sans Web', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif", "real": "Public Sans (USWDS's own typeface, derived from Libre Franklin; SIL OFL 1.1, GSA changes CC0)", "stand_in": false, "prov": "published", "source": "https://designsystem.digital.gov/components/typography/", "also": [ "https://github.com/uswds/public-sans", "https://public-sans.digital.gov/" ], "site": { "size_px": "36 hero h1 (font-lang-13, 2.25rem); 24 hero lead (font-lang-10)", "weight": "200 (text-thin) for hero h1 and lead; 700 for section heads like \"Sites built with USWDS\"", "line_height": "line-height-sans-3 (1.35) for the h1, sans-4 (1.5) for the lead", "note": "Docs site loads Public Sans Web 100-900 from /assets/fonts/public-sans/", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30", "weights_rendered": "document.fonts on the homepage (2026-10-30) loads exactly: Public Sans Web 200 (PublicSans-ExtraLight.woff2: hero h1 and lead), 400 (PublicSans-Regular: nav, body, buttons in the hero, links), 700 (PublicSans-Bold: site title, section heads, header buttons, showcase links); Source Sans Pro Web 400 only in the search input and skip link. The hero is weight 200 (ExtraLight), not 300 Light. All files are the real open faces; no stand-in." } }, "body": { "family": "Public Sans", "css_family": "Public Sans Web", "steal_family": "Public Sans", "weight": 400, "line_height": 1.6, "tracking": 0, "scale": 1, "fallback_stack": "'Public Sans Web', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif", "real": "Public Sans (SIL OFL 1.1)", "stand_in": false, "prov": "observed", "source": "https://designsystem.digital.gov/assets/css/styles.css", "source_note": "2026-10-30; .site-prose, .site-nav, .site-header and .site-footer set Public Sans Web 1rem / 1.6", "theme_default": { "heading": "Merriweather (serif role)", "body": "Source Sans Pro (sans role)", "ui": "Source Sans Pro", "code": "Roboto Mono", "source": "https://designsystem.digital.gov/documentation/settings/" } }, "mono": { "family": "Roboto Mono", "css_family": "Roboto Mono Web", "steal_family": "Roboto Mono", "weight": 400, "fallback_stack": "'Roboto Mono Web', 'Roboto Mono', 'Bitstream Vera Sans Mono', Consolas, Courier, monospace", "real": "Roboto Mono (Apache 2.0); the default code role", "stand_in": false, "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/typesetting/font/" }, "calibration": "Published: theme scale 3xs 12, 2xs 14, xs 16, sm 17, md 18, lg 24, xl 32, 2xl 40, 3xl 56px (targets, normalized per face; Public Sans normalization 1.0). Line-height tokens 1, 1.15, 1.35, 1.5, 1.62, 1.75. Default theme weights light 300, normal 400, bold 700. Body default size sm (17px) at line-height 5 (1.62); headings line-height 2 (1.15); h1 2xl (40px), h2 xl (32px), display 3xl (56px).", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/typesetting/font/" }, "style": { "button_shape": "rounded", "button_radius_px": 4, "button_note": "$theme-button-border-radius default 'md' = 4px (0.25rem). Default button: Source Sans Pro Bold 1.06rem, padding 12px 20px, primary #005ea2 fill, white text; hover primary-dark #1a4480, active primary-darker #162e51; outline variant = 2px inset stroke.", "corners": "Radius tokens 0, sm 2px, md 4px, lg 8px, pill 99rem; components default to md (4px)", "shadows": "shadow 1-5: 0 1px 4px, 0 4px 8px, 0 8px 16px, 0 12px 24px, 0 16px 32px, all rgba(0,0,0,0.1)", "spacing": "8px unit (1 = 8px), with 1px, 2px, 4px, 12px, 20px half steps; named widths card 160, mobile 320, mobile-lg 480, tablet 640, tablet-lg 880, desktop 1024, desktop-lg 1200, widescreen 1400", "focus": "0.25rem solid #2491ff (blue-40v) outline, offset 0", "linework": "Icons are Material Icons-based filled glyphs in currentColor", "prov": "published", "source": "https://designsystem.digital.gov/components/button/", "also": [ "https://designsystem.digital.gov/utilities/border/", "https://designsystem.digital.gov/design-tokens/shadow/", "https://designsystem.digital.gov/design-tokens/spacing-units/", "https://designsystem.digital.gov/documentation/settings/" ] }, "voice": { "tone": [ "reliable", "consistent", "honest", "plain" ], "tone_source": "https://designsystem.digital.gov/design-principles/", "notes": [ "Plain language is a trust practice: the Earn trust principle asks whether content is clear and easy to follow (paraphrase).", "Write for the web: expect readers to skim and scan (Earn trust practical actions).", "The site speaks as \"we\" (the USWDS team) to \"you\" (government teams), e.g. \"We make it easier to build...\" (observed on the homepage).", "Headings and button labels are sentence case on the docs site; button guidance makes it a rule.", "Explain, then list: guidance pages pair a bold imperative lead (\"Lead with a verb.\") with one or two plain sentences.", "USWDS publishes no separate voice and tone guide; these notes come from the design principles, product values, and component guidance." ], "rules": [ { "id": "button-case", "kind": "guidance", "text": "Use sentence case for button labels", "prov": "published", "source": "https://designsystem.digital.gov/components/button/" }, { "id": "button-verb", "kind": "guidance", "text": "Lead button labels with a verb (\"File a complaint\", not \"Complaint filing\")", "prov": "published", "source": "https://designsystem.digital.gov/components/button/" }, { "id": "button-short", "kind": "guidance", "text": "Keep button text as short as possible, with action words like Download, View, Sign up", "prov": "published", "source": "https://designsystem.digital.gov/components/button/" }, { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "id": "person", "kind": "person", "value": "we_you", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "id": "plain-language", "kind": "guidance", "text": "Write in plain language; label headings, images and links accurately", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "id": "no-long-caps", "kind": "guidance", "text": "No uppercase text longer than a few words unless the law requires it", "prov": "published", "source": "https://designsystem.digital.gov/components/typography/" }, { "id": "no-long-bold-italic", "kind": "guidance", "text": "Avoid long stretches of bold or italic text; use a callout or heading instead", "prov": "published", "source": "https://designsystem.digital.gov/components/typography/" }, { "id": "flush-left", "kind": "guidance", "text": "Set type flush left; no justified text", "prov": "published", "source": "https://designsystem.digital.gov/components/typography/" }, { "id": "icon-with-text", "kind": "guidance", "text": "Pair icons with text; only home, print and search are widely understood alone", "prov": "published", "source": "https://designsystem.digital.gov/components/icon/" }, { "id": "banner-verbatim", "kind": "guidance", "text": "Use the official banner text unaltered (\"An official website of the United States government\")", "prov": "published", "source": "https://designsystem.digital.gov/components/banner/" }, { "id": "identify-gov", "kind": "guidance", "text": "Identify the site as a federal government site on every page", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "id": "link-not-button", "kind": "guidance", "text": "Link between pages with links; reserve buttons for important actions", "prov": "published", "source": "https://designsystem.digital.gov/components/button/" }, { "id": "color-not-alone", "kind": "guidance", "text": "Never use color alone to convey meaning", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/overview/" } ], "approved": { "phrases": [ "accessible, mobile-friendly government websites", "built by government, for government, with government", "start with real user needs", "earn trust", "consistency is not necessarily conformity" ], "words": [ "accessible", "mobile-friendly", "user needs", "trust", "continuity", "plain language" ] }, "banned": [], "banned_note": "No banned-word list published.", "is_not": [ [ "Consistent", "Static" ], [ "Consistent", "Conformist" ] ], "prov": "published", "source": "https://designsystem.digital.gov/design-principles/", "also": [ "https://designsystem.digital.gov/about/product-values/", "https://designsystem.digital.gov/components/button/", "https://designsystem.digital.gov/components/typography/" ] }, "spec": { "source": "https://designsystem.digital.gov/", "how": "Read from designsystem.digital.gov guidance pages (fetched 2026-10-30) and the site stylesheet /assets/css/styles.css", "provenance": "published", "motion": [], "motion_note": "No motion tokens, easings or durations are published. The only guidance: avoid flashing and repetitive animation, and header transitions respect prefers-reduced-motion.", "icons": { "grid": "not published (Material Icons-derived glyphs)", "sizes": [ { "name": "size-3", "px": 24, "use": ".usa-icon--size-3 (3 units)" }, { "name": "size-4", "px": 32, "use": ".usa-icon--size-4 (4 units)" }, { "name": "size-5", "px": 40, "use": ".usa-icon--size-5 (5 units)" }, { "name": "size-6", "px": 48, "use": ".usa-icon--size-6 (6 units)" }, { "name": "size-7", "px": 56, "use": ".usa-icon--size-7 (7 units)" }, { "name": "size-8", "px": 64, "use": ".usa-icon--size-8 (8 units)" }, { "name": "size-9", "px": 72, "use": ".usa-icon--size-9 (9 units)" } ], "stroke": "not published (filled glyphs)", "color": "currentColor: icons take the text color of their parent", "default_size": "scales with font size (1em) unless a size variant is set", "contrast": "at least 3:1 against the background", "rule": "Don't alter, combine or customize icons other than their color", "set": "243 icons from Google Material Icons (Apache 2.0) plus USWDS icons", "prov": "published", "source": "https://designsystem.digital.gov/components/icon/" }, "signature": [ { "id": "gov-banner", "name": "Official government banner", "where": "top of every page, directly after the skip link", "spec": "thin strip on $theme-banner-background-color (default base-lightest #f0f0f0; the docs site runs it dark) with the small US flag, 12-13px text \"An official website of the United States government\" and a \"Here's how you know\" accordion that explains .gov and HTTPS (lock icon). Text used unaltered", "dont": "customize the banner text, use it on a non-.gov/.mil or non-HTTPS site, or style it to draw attention", "example": { "text": "An official website of the United States government" }, "prov": "published", "source": "https://designsystem.digital.gov/components/banner/" }, { "id": "identifier", "name": "Identifier footer", "where": "the very bottom of every page, below the site footer", "spec": "dark band (primary or base grade 80+, or black) with the parent agency logo, the domain, \"An official website of the [agency]\" and the federally required links (About, Accessibility statement, FOIA, No FEAR Act, OIG, Performance reports, Privacy policy), then the USA.gov line", "dont": "delete required links, add a product logo in place of the agency logo, or use colors that draw attention", "example": { "text": "Looking for U.S. government information and services? Visit USA.gov" }, "prov": "published", "source": "https://designsystem.digital.gov/components/identifier/" }, { "id": "token-palette", "name": "Token-only, grade-checked color", "where": "every color on the page", "spec": "pick only USWDS tokens; pair text and ground by grade difference (\"magic number\") of 50+ for AA body text (40+ for large text, 70+ for AAA); primary/secondary/accent in roughly 60/30/10 proportion of non-base color", "dont": "use custom hexes, or rely on color alone to carry meaning", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/overview/", "also": [ "https://designsystem.digital.gov/design-tokens/color/theme-tokens/" ] }, { "id": "blue-red-buttons", "name": "Solid 4px-radius buttons in primary blue and secondary red", "where": "primary actions; the homepage hero pairs secondary red #d83933 and primary-vivid #0050d8", "spec": "flat fill, white bold sentence-case label that starts with a verb, 4px radius, 12px x 20px padding, darker shade on hover, visible 4px #2491ff focus outline", "dont": "use buttons for page-to-page links, or crowd a page with many buttons", "example": { "text": "Download" }, "prov": "published", "source": "https://designsystem.digital.gov/components/button/" } ], "page": { "source": "https://designsystem.digital.gov/", "date": "2026-10-30", "prov": "observed", "voices": "Two voices. The homepage is the plain institutional docs voice: \"we\" (the USWDS team) to government teams, one-sentence descriptions, sentence-case heads with no full stop except the hero h1, verbs on links (\"Browse components\", \"Explore pattern guidance\"). The guide's rule voice (plain language, lead with a verb, sentence case buttons) governs components and content everywhere. A landing page follows this homepage anatomy and voice. Precedence: the guide (default theme: Source Sans Pro, Merriweather, 1024px container) is the law for USWDS-built sites; the docs site's own theme (Public Sans 200/400/700, #252f3e header, 1400px container) is how USWDS presents itself. A USWDS landing page reproduces the docs-site theme measured here.", "announcement": { "summary": "The official government banner (usa-banner): a thin #1b1b1b strip above the header on every page. Not marketing; text is fixed.", "text": "An official website of the United States government", "link": "\"Here's how you know\" (12px/14.4px Public Sans 400, #c9c9c9, underlined) followed by a 16px expand_more chevron in #2491ff (mask icon, absolutely placed 2px after the label)", "ground": "#1b1b1b", "desktop": "height 22px (padding-top 4px); 16x11 US flag at x 52, y 6; text 12px/14.4px 400 #FFFFFF at x 76; link at x 371 on the same line", "phone": "height 48px (padding 8px 0); flag at x 16, y 8; text at x 40 on line 1 (y 8), link on line 2 (y 24) with the chevron", "resting_state": "Collapsed. Expanded (on click) it opens a 144px panel on the same #1b1b1b with two media blocks: icon-dot-gov.svg + \"Official websites use .gov\" / \"A .gov website belongs to an official government organization in the United States.\" and icon-https.svg + \"Secure .gov websites use HTTPS\" / \"A lock ( ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.\" Build the collapsed state." }, "nav": { "summary": "Extended header in two rows. Row 1: dark #252f3e bar with the USWDS star and \"U.S. Web Design System (USWDS)\" at left, and search, two outlined buttons and a GitHub mark at right. Row 2: a white primary-nav bar with eight links. Phone: one 48px dark bar with star + \"USWDS\" and a blue MENU button.", "ground": "row 1 #252f3e; row 2 #FFFFFF with a 2px solid rgba(0,0,0,0.1) bottom border", "height": "row 1 80px (y 22-102), row 2 48px (y 102-150); phone 48px (y 48-96)", "border": "none on row 1; 2px solid rgba(0,0,0,0.1) under row 2", "logo": { "variant": "USWDS star 4c-lg-on-black.svg (five-colour star: #81aefc, #4d52af, #ee601d, #f6bd9c, #e6e6e6) as a 24x24 ::before, then the wordmark set in type, not an image", "px": "star 24x24; title \"U.S. Web Design System (USWDS)\" 20px Public Sans 700, tracking -0.2px, #FFFFFF; phone title \"USWDS\" 15.04px 700", "position": "desktop star x 52 (margin-left -2px), title x 82, vertically centred in the 80px row (title y 48); phone star x 16, title x 45", "file": "https://designsystem.digital.gov/assets/img/uswds-logo/4c-lg-on-black.svg" }, "links": { "count": 8, "labels": [ "How to use USWDS", "Design principles", "Components", "Patterns", "Design tokens", "Utilities", "Templates", "About" ], "hrefs": [ "/how-to-use-uswds/", "/design-principles/", "/components/", "/patterns/", "/design-tokens/", "/utilities/", "/templates/", "/about/" ], "size": "15.04px/15.04px (text-sm), hit area 48px tall with 16px padding all round", "weight": 400, "color": "#1b1b1b; hover #2672de text plus a 4px #2672de bar along the bottom inset 16px each side", "alignment": "left aligned, first link box x 36 (text x 52, flush with the logo), boxes adjacent with no gap: x 36, 205, 357, 477, 568, 699, 785, 890; no dropdown chevrons on desktop" }, "actions": [ "Search: input 169x38 fill #13171f, no border, radius 0; submit button 48x38 fill #2672de, radius 0 4px 4px 0, white 24px search--white.svg icon; hover fill #0050d8. Group starts x 718, y 43", "Read website standards: outline button 219x38 at x 951, transparent fill, text 16px Public Sans 700 #e5a000, 2px inset ring #e5a000 (box-shadow inset 0 0 0 2px), radius 4px, padding 12px 16px 12px 20px; hover text and ring #FFFFFF", "Download v3.14.0: outline button 170x38 at x 1178, text 16px 700 rgba(255,255,255,0.7) with 2px inset ring rgba(255,255,255,0.7), radius 4px; hover text and ring #FFFFFF. Label verbatim \"Download v3.14.0\"", "GitHub: 32x32 GitHub mark at x 1360 (link box 40x56 at x 1356), fill rgba(255,255,255,0.7) at rest, #FFFFFF on hover; screen-reader text \"View on GitHub\", href https://github.com/uswds/uswds" ], "sticky": "row 2 (white primary nav) is position sticky; the dark row 1 and the banner scroll away", "phone": "Banner 48px, then a 48px #252f3e bar: star x 16 + \"USWDS\" 15.04px 700 #FFFFFF; at right a 62x48 \"MENU\" button, fill #005ea2, 12.96px 400 #FFFFFF uppercase, radius 0. MENU opens a 240px white drawer from the right over a dimmed page: a 48x48 close X (#f0f0f0 square) at top right, then the eight links (16px 400 #5c5c5c, ~43px rows with 1px #dfe1e2 dividers, \"+\" toggles on all but Design principles), then the search field (#005ea2 button), \"Read website standards\" and \"Download v3.14.0\" as outline buttons with #005ea2 text and ring, and a solid #005ea2 \"View on GitHub\" button with the white GitHub mark." }, "hero": { "summary": "Light-gray band. Left: a thin 2-line h1, a thin 2-line lead and two flat solid buttons side by side. Right: a large line illustration of UI screens, set as the section background and cropped by the band bottom.", "desktop": { "band": "y 150-501 (351px), padding 48px top, 64px bottom, ground #f0f0f0", "columns": "single text column 480px wide (x 52-532); the illustration is a CSS background, not a column: background-position calc(50% + 240px) 12px, background-size auto 400px, no-repeat, so at 1440 the art spans roughly x 750-1170 (left edge about 30px right of the page centre) and is cut off at the band bottom (400px tall from y 162, band ends y 501)", "anchors_y": "h1 y 198, lead y 312, buttons y 399", "gaps": "h1 (94px, 2 lines) -> 20px -> lead (67px, 2 lines) -> 20px -> buttons", "text_max_width": 480, "media_frame": "no frame, no radius, no shadow; illustration sits on the #f0f0f0 ground", "cta": "two 38px buttons, 12px apart: \"Introducing USWDS 3.0\" 215px at x 52, \"Migrating to USWDS 3.0\" 221px at x 279" }, "phone": { "order": "illustration first (feature-image-phone.webp, background-size 100% at background-position 0 16px, i.e. 390x228 from y 112), then h1, lead, buttons", "band": "y 96-759, padding-top 265.2px (68% of width, reserving the illustration), 32px bottom", "alignment": "left, 16px gutters, text 358px wide", "sizes": "h1 36px/46.8px 200 (3 lines, y 362), lead 24px/33.6px 200 (3 lines, y 522), buttons full width 358x38 stacked 8px apart (y 643 and 689)" }, "at_rest": "Static. Nothing animates.", "media": { "desktop": "https://designsystem.digital.gov/assets/img/introducing-uswds-2-0/feature-image-homepage.svg", "phone": "https://designsystem.digital.gov/assets/img/webp/introducing-uswds-2-0/feature-image.webp", "note": "Line illustration of phone, tablet and desktop UI fragments in #171717 strokes on #f0f0f0 with flat accents (#ee601d orange, #252f3e navy, #ffbe2e yellow, #2672de/#0076d6 blues, a small US flag). viewBox 486x453." }, "type": "h1 36px/46.8px (line-height 1.3) Public Sans 200, rgba(0,0,0,0.8) (#303030 on the gray), sentence case ending with a full stop; lead 24px/33.6px Public Sans 200, same color", "cta": "Primary pair: \"Introducing USWDS 3.0\" fill #d83933 (secondary), hover #b50909; \"Migrating to USWDS 3.0\" fill #0050d8 (primary-vivid), hover #162e51. Both 16px/14.4px Public Sans 400 #FFFFFF, padding 12px 20px, radius 4px, no border, no shadow; focus ring 4px solid #2491ff, offset 4px. Note weight 400 here, not the default 700.", "proof": "none in the hero" }, "sections": [ { "name": "Graphic list (four entry points)", "summary": "Four equal columns, each a red 72px circle icon, a bold head, one sentence and an underlined link.", "ground": "#fcfcfc (page ground)", "desktop": "y 502-846; padding 64px top and bottom; 4 columns of 342px (x 36, 378, 720, 1062) with 16px inner padding, so content x 52, 394, 736, 1078, 310px wide. Icon 72x72 at y 566 stacked above the text; head at y 654 (16px below the icon), body at y 683, link 6px under the body.", "phone": "y 760-1408; padding 32px 16px; one column; each item is a row: 72px icon at x 16, text block at x 108 (20px gap), 266px wide; items 151px apart (heads at y 792, 943, 1072, 1224).", "anatomy": [ "Icon: 70x70 SVG circle #d83933 with white line glyph and #e9695f inner fills, rendered 72x72; order Components (ui-component.svg), Patterns (page-templates.svg), Design tokens (design-tokens.svg), Utilities (utilities.svg)", "Head (h2): 16.96px/25.44px Public Sans 700, rgba(0,0,0,0.8) (#323232 on #fcfcfc), labels \"Components\", \"Patterns\", \"Design tokens\", \"Utilities\"", "Body: 15.04px/22.56px 400, rgba(0,0,0,0.8); 2-3 lines in 310px", "Link: 15.04px 400 #005ea2 underlined, hover #1a4480; labels in order \"Browse components\" (/components/), \"Explore pattern guidance\" (/patterns/), \"View design tokens\" (/design-tokens/), \"Build with utilities\" (/utilities/)", "No cards, borders, backgrounds or shadows: the columns sit straight on the ground" ], "components": [ "usa-graphic-list", "usa-media-block", "link" ] }, { "name": "Sites built with USWDS (showcase)", "summary": "Gray band with a bold h2 and a 3x2 grid of 16:9 site screenshots, each captioned by a bold underlined external link.", "ground": "#f0f0f0", "desktop": "y 845-1627; padding-top 64px, 64px below the last row. h2 \"Sites built with USWDS\" 28px/33.6px 700 at y 909, x 52. Row 1 images at y 967 (24px below the h2), row 2 at y 1289 (48px between rows). 3 columns at x 52, 508, 964 (456px stride, 32px gutter), each image 424x239 (16:9), no radius, box-shadow 0 1px 4px rgba(0,0,0,0.1). Caption link 10px below the image (y 1216 / 1538).", "phone": "y 1408-2945; padding 32px 0; h2 at y 1440, x 16; one column, images 358x201 at x 16, 237px rhythm (image, 10px, link, ~5px, next image).", "anatomy": [ "Order, left to right then row 2: National Institutes of Health Library (https://www.nihlibrary.nih.gov/), U.S. Department of Veterans Affairs (https://www.va.gov/), NASA Glenn Research Center (https://www1.grc.nasa.gov/), PubMed | U.S. National Library of Medicine (https://pubmed.ncbi.nlm.nih.gov/), vote.gov (https://vote.gov/), America’s Seed Fund (https://seedfund.nsf.gov/)", "Caption link: 16.96px/27.136px Public Sans 700 #005ea2 underlined, hover #1a4480, followed by a 15px launch (external-link) icon in #005ea2 with 2px left margin (mask of launch.svg, currentColor); hidden \"External.\" text for screen readers", "Screenshots are real site captures (webp), not illustrations; no frame beyond the 4px soft shadow" ], "components": [ "grid", "external link" ] } ], "footer": { "summary": "Three stacked parts: a light-gray community band with four contact media blocks, a mid-gray v1 strip, then the dark USWDS identifier with the GSA logo, required links and the USA.gov line.", "ground": "#e6e6e6 community band; #adadad v1 strip; #1b1b1b identifier", "anatomy": [ "Community band (#e6e6e6), desktop y 1627-1892, padding-top 32px: h2 \"Become part of the community\" 20px/24px 700 #1b1b1b at y 1659; paragraph 16px/25.6px 400 #1b1b1b, 596px wide, 3 lines: \"USWDS is an active open source community of government engineers, content specialists, and designers. Our contributors both in and out of government support dozens of agencies and nearly 200 sites.\"", "Contact row at y 1808: 4 columns at x 52, 390, 728, 1066 (338px stride); each a 40px #00bde3 circle (accent-cool) holding a 24px white Material icon, 8px gap, then h3 14.08px/19.7px 400 #1b1b1b and a 14.08px underlined link in #2f4668", "Contact items in order: \"Have an idea or an issue?\" / \"Reach out in GitHub\" (https://github.com/uswds/uswds/issues/new/choose, help icon); \"Engage with the community\" / \"Find a channel that works for you\" (/about/community/, people icon); \"Subscribe to our newsletter\" / \"Sign up for USWDS updates\" (govdelivery, mail icon); \"Get support\" / \"Email the USWDS team\" (mailto:uswds@gsa.gov, support icon). External ones carry the launch icon", "v1 strip (#adadad, padding 8px 0, 36px tall): 15.04px #1b1b1b \"Looking for USWDS v1 documentation?\" then bold underlined #1b1b1b link \"Visit v1.designsystem.digital.gov\" (https://v1.designsystem.digital.gov)", "Identifier (#1b1b1b, padding-bottom 16px), masthead padding-top 16px: 48x48 GSA logo (gsa-logo.svg, #00538e square, white letters) at x 52, then at x 116 the domain \"designsystem.digital.gov\" 16px/22.4px 400 #adadad and \"An official website of the General Services Administration\" 16px 700 #FFFFFF with \"General Services Administration\" a #e6e6e6 underlined link to https://gsa.gov plus launch icon", "Required links (nav, padding-top 8px): 15.04px/21px 400 #adadad underlined, hover #e6e6e6, in a 4-column grid flowing down: column 1 \"About GSA\", \"Accessibility statement\"; column 2 \"FOIA requests\", \"No FEAR Act data\"; column 3 \"Office of the Inspector General\", \"Performance reports\"; column 4 \"Privacy policy\". Rows at y 2016 and 2046, columns x 52, 394, 736, 1078. Each carries the launch icon", "USA.gov line (padding-top 16px): \"Looking for U.S. government information and services?\" 16px 400 #FFFFFF then \"Visit USA.gov\" 16px 700 #e6e6e6 underlined (https://www.usa.gov/) with launch icon", "No copyright line, no postal address and no phone number appear on the page" ], "phone": "Community band y 2944-3440 with 16px gutters: h2 y 2960, paragraph 128px tall, contact items stacked one per row (icon x 24, text x 64), 64px rhythm. v1 strip y 3440-3495 wraps to 2 lines. Identifier y 3496-4041: GSA logo above the identity text (logo y 3512, domain y 3576), required links one per row at 16px/22.4px with 35px rhythm, USA.gov line wraps to 2 lines." }, "dark_ground": { "secondary_button": "outline: transparent fill, 2px inset ring and 16px 700 text in rgba(255,255,255,0.7) (or #e5a000 for the standards CTA), radius 4px; hover ring and text #FFFFFF", "link": "#e6e6e6 underlined (identifier); required links #adadad underlined, hover #e6e6e6", "muted_text": "#adadad", "hairline": "none used on the dark grounds", "logo_variant": "USWDS star 4c-lg-on-black.svg on #252f3e; GSA logo (#00538e square) on #1b1b1b" } }, "bands": [ { "label": "Gov banner", "ground": "#1b1b1b", "content": "US flag + \"An official website of the United States government\" + \"Here's how you know\"", "desktop": "1440x22, one line, 12px text from x 52", "phone": "390x48, two lines", "anatomy": [ "Accordion; build collapsed", "Text is fixed, never restyled" ] }, { "label": "Header (row 1)", "ground": "#252f3e", "content": "star + site title; search, Read website standards, Download v3.14.0, GitHub", "desktop": "1440x80, y 22", "phone": "390x48 with star + \"USWDS\" and MENU", "anatomy": [ "Outline buttons use 2px inset box-shadow rings, not borders" ] }, { "label": "Primary nav (row 2)", "ground": "#FFFFFF", "content": "8 links", "desktop": "1440x48, y 102, sticky, 2px rgba(0,0,0,0.1) bottom rule", "phone": "in the 240px MENU drawer", "anatomy": [ "15.04px 400 #1b1b1b; hover #2672de with 4px bar" ] }, { "label": "Hero", "ground": "#f0f0f0", "content": "h1 200 36px, lead 200 24px, red + blue buttons, line illustration at right", "desktop": "1440x351, text column 480px at x 52; illustration background at calc(50% + 240px) 12px, 400px tall, cropped", "phone": "illustration on top (padding-top 265px), stacked full-width buttons", "anatomy": [ "No frame or shadow around the illustration" ] }, { "label": "Graphic list", "ground": "#fcfcfc", "content": "4 x (red circle icon, bold head, sentence, link)", "desktop": "4 columns, 64px top and bottom padding, icons stacked above text", "phone": "icon left, text right, one item per row", "anatomy": [ "No cards" ] }, { "label": "Showcase", "ground": "#f0f0f0", "content": "h2 \"Sites built with USWDS\" + 6 screenshots with bold external links", "desktop": "3x2 grid of 424x239 images, 32px gutter, 48px between rows", "phone": "1 column 358x201", "anatomy": [ "Image shadow 0 1px 4px rgba(0,0,0,0.1), radius 0" ] }, { "label": "Community footer", "ground": "#e6e6e6", "content": "h2, paragraph, 4 contact media blocks with #00bde3 circles", "desktop": "300px incl. v1 strip; 4 columns of 338px", "phone": "stacked", "anatomy": [ "Links #2f4668 underlined" ] }, { "label": "v1 strip", "ground": "#adadad", "content": "Looking for USWDS v1 documentation? Visit v1.designsystem.digital.gov", "desktop": "36px, 15.04px text", "phone": "55px, wraps", "anatomy": [ "Bold underlined ink link" ] }, { "label": "Identifier", "ground": "#1b1b1b", "content": "GSA logo, domain, agency line, 7 required links, USA.gov line", "desktop": "1440x220", "phone": "390x545", "anatomy": [ "Required links never removed or restyled to stand out" ] } ], "layout": { "page_margin": { "desktop": 52, "phone": 16 }, "section_padding": { "desktop": 64, "phone": 32 }, "container_max": 1400, "container_padding": 32, "hero_text_max": 480, "columns": 4, "columns_showcase": 3, "columns_phone": 1, "gutter": 32, "gutter_phone": 16, "card_gap": 32, "nav_height": 128, "note": "Measured 2026-10-30 at 1440 and 390. .grid-container max-width 1400px (the docs site's widescreen container; the default USWDS theme container is 1024px) centred with 32px inner padding, so content runs x 52-1388 (1336px) at 1440. grid-row gutters are 32px (16px padding per column). Section padding 64px desktop, 32px phone (usa-section). Header total 128px (80 dark + 48 white nav) under a 22px banner; phone 48px banner + 48px header. Spacing follows the 8px unit (8/16/24/32/48/64).", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, "type": [ { "role": "Hero H1", "id": "hero-h1", "face": "Public Sans", "size": { "desktop": 36, "phone": 36 }, "line_height": 1.3, "tracking_px": 0, "weight": 200, "color": "rgba(0,0,0,0.8)", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Hero lead", "id": "hero-lead", "face": "Public Sans", "size": { "desktop": 24, "phone": 24 }, "line_height": 1.4, "tracking_px": 0, "weight": 200, "color": "rgba(0,0,0,0.8)", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Section H2 (showcase)", "id": "h2-xl", "face": "Public Sans", "size": { "desktop": 28, "phone": 28 }, "line_height": 1.2, "tracking_px": 0, "weight": 700, "color": "rgba(0,0,0,0.8)", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Footer H2", "id": "h2-footer", "face": "Public Sans", "size": { "desktop": 20, "phone": 20 }, "line_height": 1.2, "tracking_px": 0, "weight": 700, "color": "#1b1b1b", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Site title (header)", "id": "site-title", "face": "Public Sans", "size": { "desktop": 20, "phone": 15.04 }, "line_height": 1.2, "tracking_px": -0.2, "weight": 700, "color": "#FFFFFF", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Graphic list head", "id": "h2-md", "face": "Public Sans", "size": { "desktop": 16.96, "phone": 16.96 }, "line_height": 1.5, "tracking_px": 0, "weight": 700, "color": "rgba(0,0,0,0.8)", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Showcase caption link", "id": "link-lg", "face": "Public Sans", "size": { "desktop": 16.96, "phone": 16.96 }, "line_height": 1.6, "tracking_px": 0, "weight": 700, "color": "#005ea2", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Body (footer paragraph)", "id": "body", "face": "Public Sans", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.6, "tracking_px": 0, "weight": 400, "color": "#1b1b1b", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Graphic list body / link", "id": "body-sm", "face": "Public Sans", "size": { "desktop": 15.04, "phone": 15.04 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "color": "rgba(0,0,0,0.8)", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Primary nav link", "id": "nav", "face": "Public Sans", "size": { "desktop": 15.04, "phone": 16 }, "line_height": 1, "tracking_px": 0, "weight": 400, "color": "#1b1b1b", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Required links (identifier)", "id": "identifier-link", "face": "Public Sans", "size": { "desktop": 15.04, "phone": 16 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "color": "#adadad", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Community item head / link", "id": "body-xs", "face": "Public Sans", "size": { "desktop": 14.08, "phone": 14.08 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "color": "#1b1b1b", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" }, { "role": "Button label", "id": "button", "face": "Public Sans", "size": { "desktop": 16, "phone": 16 }, "line_height": 0.9, "tracking_px": 0, "weight": 700, "color": "#FFFFFF", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)", "note": "header outline buttons 700; hero buttons 400 (text-normal)" }, { "role": "Gov banner", "id": "banner", "face": "Public Sans", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.2, "tracking_px": 0, "weight": 400, "color": "#FFFFFF", "prov": "observed", "source": "https://designsystem.digital.gov/ (2026-10-30)" } ], "components": { "button_hero_secondary": { "fill": "#d83933", "text": "#FFFFFF", "border": "none", "radius": 4, "padding": "12px 20px", "height": 38, "example": "Introducing USWDS 3.0 (215x38)", "text_style": "16px/14.4px Public Sans 400", "face": "body", "font_size": 16, "weight": 400, "padding_x": 20, "states": { "hover": { "measured": { "fill": "#b50909" }, "prov": "observed", "css": { "background-color": "#b50909" } }, "focus": { "css": { "outline": "4px solid #2491ff", "outline-offset": "4px" }, "prov": "observed" }, "active": { "css": { "background-color": "#8b0a03" }, "prov": "published", "source": "https://designsystem.digital.gov/components/button/" } }, "prov": "observed", "source": "https://designsystem.digital.gov/", "weight_note": "Labels are 400 (class text-normal), measured 2026-10-30; not bold." }, "button_hero_primary": { "fill": "#0050d8", "text": "#FFFFFF", "border": "none", "radius": 4, "padding": "12px 20px", "height": 38, "example": "Migrating to USWDS 3.0 (221x38)", "text_style": "16px/14.4px Public Sans 400", "face": "body", "font_size": 16, "weight": 400, "padding_x": 20, "states": { "hover": { "measured": { "fill": "#162e51" }, "prov": "observed", "css": { "background-color": "#162e51" } }, "focus": { "css": { "outline": "4px solid #2491ff", "outline-offset": "4px" }, "prov": "observed" } }, "prov": "observed", "source": "https://designsystem.digital.gov/", "weight_note": "Labels are 400 (class text-normal), measured 2026-10-30; not bold." }, "button_outline_on_dark": { "fill": "transparent", "text": "rgba(255,255,255,0.7)", "border": "none; ring is box-shadow inset 0 0 0 2px currentColor", "ring_px": 2, "ring": "rgba(255,255,255,0.7)", "radius": 4, "padding": "12px 16px 12px 20px", "height": 38, "example": "Download v3.14.0 (170x38)", "text_style": "16px Public Sans 700", "face": "body", "font_size": 16, "weight": 700, "padding_x": 18, "variant_gold": "Read website standards: text and ring #e5a000 (warning-dark)", "states": { "hover": { "measured": { "text": "#FFFFFF", "ring": "#FFFFFF" }, "prov": "observed", "css": { "color": "#FFFFFF", "box-shadow": "inset 0 0 0 2px #FFFFFF" } } }, "prov": "observed", "source": "https://designsystem.digital.gov/" }, "button_outline_on_light": { "fill": "transparent", "text": "#005ea2", "ring_px": 2, "ring": "#005ea2", "radius": 4, "height": 38, "example": "Phone drawer: Read website standards / Download v3.14.0", "text_style": "16px Public Sans 700", "prov": "observed", "source": "https://designsystem.digital.gov/", "face": "body", "font_size": 16, "weight": 700, "padding_x": 18 }, "search_small": { "input": "169x38, fill #13171f on the dark header (white field with #005ea2 button in the phone drawer), radius 0, no border, Source Sans Pro Web 16.96px", "button": "48x38, fill #2672de, radius 0 4px 4px 0, 24px white magnifier (search--white.svg); hover #0050d8", "prov": "observed", "source": "https://designsystem.digital.gov/" }, "link": { "color": "#005ea2", "hover": "#1a4480", "visited": "#54278f (published)", "decoration": "underline always", "external": "launch icon after the text, same color as the link, ~0.9em, 2px gap", "prov": "observed", "source": "https://designsystem.digital.gov/" }, "graphic_list_item": { "icon": "72px red circle SVG", "head": "16.96px 700", "body": "15.04px 400", "link": "15.04px #005ea2 underlined", "gap": "icon->head 16px (desktop, stacked); 20px icon->text (phone, side by side)", "prov": "observed", "source": "https://designsystem.digital.gov/" }, "contact_media_block": { "icon": "40px circle #00bde3 (accent-cool), 24px white Material icon", "gap": 8, "head": "14.08px 400 #1b1b1b", "link": "14.08px #2f4668 underlined", "prov": "observed", "source": "https://designsystem.digital.gov/" }, "nav_link": { "text": "15.04px 400 #1b1b1b", "padding": 16, "height": 48, "hover": "text #2672de plus a 4px #2672de bar at the bottom, inset 16px left and right", "prov": "observed", "source": "https://designsystem.digital.gov/" } } }, "system": { "fixed": [ "Official banner on top and identifier at the bottom of every page, text unaltered", "Only USWDS tokens for color, type, spacing; contrast by grade difference", "Plain, flush-left, sentence-case copy; buttons start with a verb", "Visible 4px blue-40v focus outline and WCAG 2.1 AA components" ], "flex": "Which token families fill the theme roles: agencies swap primary/secondary/accent families and typefaces in settings (the docs site itself uses Public Sans where the default theme uses Source Sans Pro and Merriweather).", "traits": [ { "is": "Reliable", "not": "Flashy", "text": "Earn trust: be reliable, consistent and honest (paraphrase).", "source": "https://designsystem.digital.gov/design-principles/", "prov": "published" }, { "is": "Consistent", "not": "Static", "text": "Product value: be consistent, not static.", "source": "https://designsystem.digital.gov/about/product-values/", "prov": "published" }, { "is": "Continuous", "not": "Conformist", "text": "Consistency is not necessarily conformity (Promote continuity).", "source": "https://designsystem.digital.gov/design-principles/", "prov": "published" }, { "is": "Accessible", "not": "An afterthought", "text": "Accessibility isn't an optional enhancement (product values, paraphrase).", "source": "https://designsystem.digital.gov/about/product-values/", "prov": "published" }, { "is": "Open", "not": "Closed", "text": "Share what we do; work in the open.", "source": "https://designsystem.digital.gov/about/product-values/", "prov": "published" }, { "is": "Practical", "not": "Emotional first", "text": "Put the practical before the emotional (color guidance).", "source": "https://designsystem.digital.gov/design-tokens/color/overview/", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "Follow kit.spec.page (the designsystem.digital.gov homepage, observed 2026-10-30): official #1b1b1b gov banner; #252f3e header with the USWDS star, \"U.S. Web Design System (USWDS)\" in Public Sans 700, search and two 2px-ring outline buttons; white 48px sticky nav of 8 links; #f0f0f0 hero with a Public Sans 200 36px h1, 200 24px lead and two flat 4px-radius buttons (#d83933, #0050d8) beside the line illustration; a 4-up graphic list of 72px red circle icons with bold heads and underlined #005ea2 links on #fcfcfc; a #f0f0f0 3x2 showcase of 16:9 screenshots with bold external links; a #e6e6e6 community band with #00bde3 icon circles; a #adadad v1 strip; the #1b1b1b GSA identifier with required links. 1400px container with 32px padding, 64px section padding, 8px unit.", "flex": "theme families and typeface (the default theme uses Source Sans Pro/Merriweather and a 1024px container), number of graphic list items and showcase sites, hero illustration" }, { "format": "Documentation page", "level": 1, "must": "Banner, header, side navigation, Public Sans prose at 16px/1.6 within measure 2-5, tokens tables, identifier", "flex": "section depth" }, { "format": "Form or transaction", "level": 0, "must": "Default components untouched, step indicator, plain labels, primary button with a verb", "flex": "none beyond theme color" }, { "format": "Slide deck", "level": 1, "must": "White or #f0f0f0 grounds, Public Sans, primary blue and secondary red used 60/30, sentence case", "flex": "accent use" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the star. It should still read as USWDS: the flag banner on top, blue and red flat buttons, Public Sans, and the dark identifier at the foot." }, { "name": "Contrast by grade", "text": "Every text/ground pair differs by 50+ grades (40+ for large text); no meaning carried by color alone." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Download", "button": true, "button_fill": "#005ea2" }, "do_caption": "Primary blue fill, white bold label: grade 60 on white clears AA.", "dont": { "ground": "paper", "text": "Download", "ink": "#97d4ea" }, "dont_caption": "accent-cool-light (grade 20) text on white: magic number below 40 fails contrast." }, { "chapter": "voice", "do": { "ground": "paper", "text": "File a complaint", "button": true, "button_fill": "#005ea2" }, "do_caption": "Verb first, sentence case (button guidance).", "dont": { "ground": "paper", "text": "COMPLAINT FILING", "button": true, "button_fill": "#005ea2" }, "dont_caption": "Noun first and in capitals." } ], "make_it_yours": { "note": "Everything above transfers. These are U.S. Web Design System's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Shaping the future of government digital services.", "prov": "published", "source": "https://designsystem.digital.gov/about/" }, "vision": { "text": "Empowered and supported digital service teams. Familiar and easy-to-use digital services.", "prov": "published", "source": "https://designsystem.digital.gov/about/" }, "polestar": { "text": "We help government teams align, design, and keep their websites and services up to date.", "prov": "published", "source": "https://designsystem.digital.gov/about/" }, "story": { "text": "Created in 2015 by 18F and the U.S. Digital Service, guided by staff from CFPB, FDA, VA, SSA, Education, IRS and GSA. Now maintained by GSA TTS's Digital Services Division.", "prov": "published", "source": "https://designsystem.digital.gov/about/", "paraphrase": true }, "values": [ { "name": "Start with real user needs", "means": "Research and test with real people from the start of every decision.", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "name": "Earn trust", "means": "Be reliable, consistent and honest; identify as government; protect data.", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "name": "Embrace accessibility", "means": "Build accessibility into every decision, beyond the legal minimum.", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "name": "Promote continuity", "means": "Start from shared solutions so experiences stay consistent across agencies and devices.", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "name": "Listen", "means": "Measure, collect feedback and keep improving.", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "name": "Be consistent, not static", "means": "Product value: specific enough to be practical, general enough to extend.", "prov": "published", "source": "https://designsystem.digital.gov/about/product-values/" } ] }, "positioning": { "statement": { "text": "The design system for the federal government.", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, "category": { "text": "A government design system: principles, guidance and code (a toolkit), maintained as open source by GSA.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/" }, "audience": { "text": "Federal digital service teams: content managers, designers and developers, plus the agencies and contractors who build government sites.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/" }, "problem": { "text": "Federal requirements (Section 508, 21st Century IDEA) are confusing, and every team rebuilding basic components wastes public money.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "also": [ "https://designsystem.digital.gov/about/product-values/" ] }, "promise": { "text": "Accessible, mobile-friendly, compliant sites from the start, improving as the system improves.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/" }, "differentiators": [ { "text": "Built by government, for government, with government.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/" }, { "text": "Compliance (508, 21st Century IDEA) designed in from the start.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/" }, { "text": "Color grades regularized so a \"magic number\" guarantees contrast.", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/overview/" }, { "text": "Type normalized so each size token looks the same in any supported face.", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/typesetting/overview/" }, { "text": "Adopt incrementally: principles, then guidance, then code (maturity model).", "prov": "published", "source": "https://designsystem.digital.gov/maturity-model/" } ], "alternatives": [ { "text": "Building components and patterns from scratch for each site (the \"redesign treadmill\").", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/" } ] }, "messaging": { "taglines": [ { "text": "The design system for the federal government.", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30", "where": "Homepage hero h1" }, { "text": "We make it easier to build accessible, mobile-friendly government websites.", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30", "where": "Homepage hero lead" }, { "text": "Focus on your mission, not your markup.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "where": "Key benefits: Mission focus" } ], "attributes": [ "accessible", "mobile-friendly", "consistent", "open" ], "key_messages": [], "boilerplate": { "text": "USWDS gives government teams principles, guidance and code for building accessible, mobile-friendly websites. It was created in 2015 by 18F and the U.S. Digital Service and is a product of GSA's Technology Transformation Services.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "also": [ "https://designsystem.digital.gov/about/" ], "paraphrase": true }, "pillars": [ { "name": "Compliance from the start", "claim": "Principles, guidance and code meet Section 508 and 21st Century IDEA requirements out of the box.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "proof": [ "p-components", "p-wcag" ] }, { "name": "Proven design solutions users expect", "claim": "Don't reinvent buttons and forms; consistent experiences across government build trust.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "proof": [ "p-sites", "p-pageviews" ] }, { "name": "Team alignment", "claim": "Five design principles give any team a shared starting agreement.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "proof": [ "p-principles" ] }, { "name": "Mission focus", "claim": "Spend less time building from scratch; every system improvement reaches every site.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "proof": [ "p-icons", "p-tokens" ] }, { "name": "A cross-government community", "claim": "Content managers, designers and developers share solutions in the open.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "proof": [ "p-community" ] }, { "name": "Stewardship of public resources", "claim": "Any team's improvement is shared, multiplied and compounded across government.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/", "proof": [ "p-history" ] } ], "proof_points": [ { "id": "p-components", "kind": "stat", "text": "Over 40 accessible, mobile-friendly components out of the box (47 listed on the components page).", "prov": "published", "source": "https://designsystem.digital.gov/how-to-use-uswds/", "also": [ "https://designsystem.digital.gov/components/overview/" ] }, { "id": "p-wcag", "kind": "fact", "text": "Components are tested against WCAG 2.1 AA, above the 2.0 AA legal baseline.", "prov": "published", "source": "https://designsystem.digital.gov/documentation/accessibility/" }, { "id": "p-sites", "kind": "stat", "text": "Contributors support dozens of agencies and nearly 200 sites.", "prov": "observed", "source": "https://designsystem.digital.gov/", "source_note": "2026-10-30" }, { "id": "p-pageviews", "kind": "stat", "text": "Sites using USWDS topped 1.4 billion pageviews in Q2 2018.", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/overview/" }, { "id": "p-principles", "kind": "fact", "text": "Five design principles: start with real user needs, earn trust, embrace accessibility, promote continuity, listen.", "prov": "published", "source": "https://designsystem.digital.gov/design-principles/" }, { "id": "p-icons", "kind": "stat", "text": "243 icons in the icon component.", "prov": "published", "source": "https://designsystem.digital.gov/components/icon/" }, { "id": "p-tokens", "kind": "stat", "text": "24 color families in the system palette, each graded 5-90 for predictable contrast.", "prov": "published", "source": "https://designsystem.digital.gov/design-tokens/color/overview/" }, { "id": "p-community", "kind": "fact", "text": "Open source on GitHub with public GitHub Discussions.", "prov": "published", "source": "https://designsystem.digital.gov/about/key-benefits/" }, { "id": "p-history", "kind": "fact", "text": "Created in 2015 by 18F and the U.S. Digital Service with an advisory board from seven agencies.", "prov": "published", "source": "https://designsystem.digital.gov/about/" } ], "claim_boundaries": [ { "text": "Never claim 100% accessibility: USWDS says nothing can ever be fully accessible, and teams must test their own work.", "prov": "published", "source": "https://designsystem.digital.gov/documentation/accessibility/" }, { "text": "Use the banner and identifier only on real official government sites, never on test or non-official sites.", "prov": "published", "source": "https://designsystem.digital.gov/components/banner/", "also": [ "https://designsystem.digital.gov/components/identifier/" ] } ] } } } }