A design system
for civic websites.
Curbcut provides accessible HTML components, shared styles, and five themes for public websites.
Components
View all components-
Typography
Headings, paragraphs, labels, links and lists. The reading layer of every page.
-
Actions
Buttons, and the badges and tags that say what state something is in.
-
Forms
Everything a resident fills in, built on native controls.
-
Content
Alerts, cards, tables, and what a page shows while it waits.
-
Navigation
How people move through a site: breadcrumbs, pagination, section navigation and menus.
-
Overlays & feedback
Layered UI that never traps anyone.
-
Site patterns
The hero, header and mobile menu that frame every town site.
-
Page templates
Complete examples for a town homepage, service page, and application.
-
Design tokens
Colors, typography, spacing, and themes.
Using Curbcut
Include the stylesheet and use the documented HTML. Add the script for interactive components. No framework is required.
Browse the examples<link rel="stylesheet" href="/assets/curbcut.min.css">
<script src="/assets/curbcut.min.js" defer></script>
<button class="cc-button" type="submit">
Submit application
</button>Accessibility
Named for the curb-cut effect: access built for some serves everyone.
- Text contrast of at least 7:1, with meaning that never depends on color alone.
- 44 × 44 pixel targets, keyboard access, and visible focus indicators.
- Native HTML first, with support for reduced motion.
- Automated accessibility checks across all ten theme and mode combinations.