Curbcut
The design system behind Baseline, the AI-native platform for municipal websites. Every component meets WCAG AAA — not as an audit afterthought, but as a build gate.
Why "Curbcut"?
Curb cuts were carved into sidewalks for wheelchair users. Then everyone with a stroller, a delivery cart, a bike, or a rolling suitcase started using them. Access built for some serves everyone — that's the curb-cut effect, and it's the working principle of this system: 7:1 contrast helps aging eyes, 44-pixel targets help gloved hands, plain focus states help keyboard power-users.
The rules every component follows
- Text contrast is at least 7:1 against its background (WCAG 1.4.6). Decorative color never carries meaning (1.4.1).
- Interactive targets are at least 44×44 pixels (2.5.5).
- Everything works with a keyboard, with a visible focus indicator.
- Motion respects
prefers-reduced-motion(2.3.3); nothing is time-limited (2.2.3). - HTML first: native elements before ARIA, ARIA before JavaScript, JavaScript only where a component genuinely needs it.
- Continuous integration runs axe (levels A, AA and AAA) over every page of this site. A violation blocks deployment.
Using Curbcut
Include the stylesheet and (for interactive components) the script, then use the documented markup. There is no framework dependency.
Show the markup
<link rel="stylesheet" href="https://curbcut.baseline.city/assets/curbcut.min.css">
<script src="https://curbcut.baseline.city/assets/curbcut.min.js" defer></script>