Typography
The primary typeface is Geist, while the secondary typeface is Space Mono, employed exclusively for monospace text. Headings utilize the primary typeface (Geist) in Bold or Semibold weights. Body text is set in the primary typeface using Regular or Semibold weights, as appropriate.
Heading 1 — 60px
Heading 2 — 48px
Heading 3 — 40px
Heading 4 — 32px
Heading 5 — 24px
Heading 6 — 20px
Body Large (18px) — The quick brown fox jumps over the lazy dog.
Body Medium (16px) — The quick brown fox jumps over the lazy dog.
Body Small (14px) — The quick brown fox jumps over the lazy dog.
Body XS (12px) — The quick brown fox jumps over the lazy dog.
Body Medium Strong (16px) — The quick brown fox jumps over the lazy dog.
Body Small Strong (14px) — The quick brown fox jumps over the lazy dog.
Default density uses standard line-height tokens; low density uses increased line spacing for enhanced readability in long-form content.
Grok 4.1 is xAI's most advanced and versatile general-purpose language model, optimized to provide balanced performance across diverse tasks—from generating text and conducting in-depth analysis to handling interactive queries and automation workflows. Its speed, precision, and efficiency make it ideal for daily operational use across government agencies.
Grok 4.1 is xAI's most advanced and versatile general-purpose language model, optimized to provide balanced performance across diverse tasks—from generating text and conducting in-depth analysis to handling interactive queries and automation workflows. Its speed, precision, and efficiency make it ideal for daily operational use across government agencies.
Grok 4.1 is xAI's most advanced and versatile general-purpose language model, optimized to provide balanced performance across diverse tasks—from generating text and conducting in-depth analysis to handling interactive queries and automation workflows. Its speed, precision, and efficiency make it ideal for daily operational use across government agencies.
Grok 4.1 is xAI's most advanced and versatile general-purpose language model, optimized to provide balanced performance across diverse tasks—from generating text and conducting in-depth analysis to handling interactive queries and automation workflows. Its speed, precision, and efficiency make it ideal for daily operational use across government agencies.
Caption (12px) — The quick brown fox jumps over the lazy dog.
Space Mono — The quick brown fox jumps over the lazy dog.
Color Palette
Base color scales from the design tokens. White and black are available as standalone tokens for backgrounds, text, and borders. Each scale runs from 50 (lightest) to 950 (darkest) across 11 steps.
Spacing Scale
Spacing tokens map t-shirt sizes to the 4px grid. Values shown are for the desktop breakpoint.
Iconography
A reference of all SVG files from src/icons. Icons are shown in alphabetical order by title. Our custom icons extend Heroicons and Lucide, matching their 24px grid, linear style, and 1.5px stroke widths—so they can integrate seamlessly and complement either set.
Text Inputs
Standard text inputs with label, hint text, error states, and three sizes. All inputs use the focus ring token.
Text Area
Multi-line text input for longer form content. Supports all standard states.
Checkbox & Radio
Styled checkboxes and radio buttons using design token colors for checked/unchecked states.
Toggle / Switch
Binary toggle controls in three sizes. Uses the secondary button color for the active state track.
Cards
Content containers in three sizes with medium corner radius. Small and medium use spacing-md; large uses spacing-lg. Background token, subtle border, and hover shadow.
Alerts
Feedback messages for info, success, warning, and error states. Colors come from the status tokens.
Avatars
User avatars in five sizes, two shapes, and seven color options. Gold 500 and Blue 400 use dark initials for contrast.
Tabs
Tab navigation for switching between views. Active tab uses the heading color with a bottom border indicator.
Overview content panel. This tab displays the main summary of information using body text tokens.
Table
Data table with header styling and hover rows. Cell content can be: Link, Checkmark, Action buttons (icon-only with ghost hover), or Chip (Steel from Chips section). Uses the muted background token for headers.
Data Visualization
Charts use design system tokens for colors, typography, and spacing. Donut and bar charts adapt to light and dark mode via chart color variables.
In all applications submitted from 2025 through to the present date, 42% remain overdue, representing the largest proportion; 21% have been approved, 13% are in review, and 8% each are submitted, pending, or rejected.
Shown when hovering over chart data. Use the same structure (title + rows with bullet, label, value) for donut and bar charts.
Compact card for a single metric with trend. Use for dashboards or alongside charts. Green for increase, red for decrease.
Modal
Dialog overlay with header, body, and footer sections. Click the button below to preview.
Progress Bar
Progress indicators in three sizes and all status variants. Fill width animates smoothly with the transition token.
Spinner
Loading indicators in three sizes. Uses the heading color for the animated arc and emphasis background for the track.
Tooltip
Contextual information displayed on hover. Uses the tooltip background and text color tokens.
Dropdown
Dropdown trigger button with chevron in three sizes. Supports default, hover, focus, and disabled states. Click to open the action menu.
Divider
Horizontal rules in default, strong, and subtle variants for separating content sections.
USG Ribbon
Official US Government banner for indicating government websites. Adapts to light and dark modes.
About
This Design System provides reusable components, tokens, and patterns for building consistent government-facing applications. All components pass WCAG 2.0 AA accessibility requirements.
Components are actively maintained and may be updated at any time to reflect ongoing improvements and feedback. The provided source code is fully customizable, allowing you to adapt and extend it to meet the specific needs of your project.
Use the design files and code references below to align your products with the system. Figma libraries support seamless design handoff, while the GitHub repository includes this showcase and all component source code.