Open-source design system · v1.2

Aa NAD Design System

A universal, monochrome, accessibility-first design system for web and mobile, written so that designers, developers and AI coding agents can all follow it.

Get started View on GitHub Figma library

45React components

3themes, incl. AAA high contrast

249design tokens

515Ionicons, outline + filled

Get started

No build step needed

Load the tokens, the stylesheet, React 18 and the bundle. Components are on window.AaNAD. Switch themes with data-theme on <html>, or follow the OS with AaNAD.watchSystemTheme().

<link rel="stylesheet" href="tokens/tokens.css">
<link rel="stylesheet" href="dist/aa-nad.css">
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="dist/aa-nad.js"></script>

const { Button } = AaNAD;
ReactDOM.createRoot(app).render(React.createElement(Button, { variant: 'primary' }, 'Continue'));

Foundations

Tokens

Every value below is read from tokens.json and reflects the theme you've chosen. Use the token names, never the raw values.

Semantic colours

Palette

Typography: Atkinson Hyperlegible Next

Spacing: 8px grid with a 4px half-step

Radius

Elevation

Components

45 components, all states

Live demos rendered from dist/aa-nad.js. Try them with the keyboard: every widget follows the WAI-ARIA patterns.

Actions

Button

5 variants · 3 sizes · icons · loading · disabled

Aa NAD Design System

No build step needed

Tokens

Semantic colours

Palette

Typography: Atkinson Hyperlegible Next

Spacing: 8px grid with a 4px half-step

Radius

Elevation

45 components, all states

Actions

Forms

Date

Data display

Media

Feedback

Overlays

Navigation

Logo, icons, illustrations and avatars

Module Aa logo

Icons: Ionicons 8

Illustrations

Avatars

Read the rules