GovKit Design System
GovKit is an accessible, formal design system designed for government portals and civic tech applications. It adheres to WCAG AAA compliance throughout, ensuring that all citizens -- including those with disabilities -- can navigate and use public services effectively. The flat, border-defined aesthetic avoids reliance on shadows or color alone, using high-contrast text, generous spacing, and large touch targets. Every component prioritizes clarity, legal compliance, and universal access above all else.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxGovKit is an accessible, formal design system designed for government portals and civic tech applications. It adheres to WCAG AAA compliance throughout, ensuring that all citizens -- including those with disabilities -- can navigate and use public services effectively. The flat, border-defined aesthetic avoids reliance on shadows or color alone, using high-contrast text, generous spacing, and large touch targets. Every component prioritizes clarity, legal compliance, and universal access above all else.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
List Item
Default
Hover
Checkbox
Unchecked
Checked
Radio Button
Unselected
Tooltip
Default
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here