Pedantic Design System
The design system for aCo. Pedantic on purpose: every color is contrast-tested, every label sits where the spec says it sits, and every component is documented with a working example and the exact code behind it.
Principles
Exact, not approximate
Tokens hold one value each. If a color, size, or space is not in the Foundations, it does not ship.
Accessible by default
Accessibility is the point of the system, not a review step. Every component meets WCAG 2.2 AA as documented — semantics, focus, contrast, and labels included.
Proven in the page
Each component page shows the live component first and its code second. What you see is literally what ships — this site is built with Pedantic.
What’s inside
Foundations
Color, typography, spacing, and the accessibility principles every aCo page follows.
Components
Buttons, Header, Footer, Table, Breadcrumbs, Search, Navigation, and Forms — each with live examples, code, and accessibility notes.
Get started
Link the stylesheet, use the tokens, and copy component markup from the component pages.
Get started
Add the Pedantic stylesheet to the <head> of your
page, then build with the documented tokens and components. Component
markup is framework-free HTML — it drops into static sites, templates,
and app shells as-is.
<link rel="stylesheet" href="https://designsystem.aco.digital/assets/pedantic.css">Current version: 1.0.0 (November 2026). Pages on this site carry the version they document; component changes are recorded on the relevant component page.