🧠 Neurodiversity Design System
The Neurodiversity Design System (NDS) is a collection of design principles informed by the needs of neurodiverse users and learners. These principles support users with learning differences and variations in the human brain regarding sociability, learning, attention, and mood.
Core Philosophy
"Good design is not designed for 'average' users, but for all users."
By aligning the needs of neurotypes with the psychology of user experience and human design, interactive learning media can be greatly improved and support the Universal Design for Learning (UDL).
Design Principles
| Category | Description |
|---|---|
| ✏️ Typography | Font selection, size, spacing, and readability guidelines |
| 🎨 Colour | Contrast, color blindness considerations, and theme support |
| 📐 Layout | Visual hierarchy, whitespace, and responsive design |
| 👆 Interaction | Feedback, target sizes, keyboard accessibility, and timing |
| 🎬 Animation & Motion | Reduced motion preferences, seizure prevention, and controls |
| 📝 Forms | Labels, validation, error messages, and autocomplete |
| 🧭 Navigation | Consistency, skip links, breadcrumbs, and search |
| 👁 Attention & Focus | Focus indicators, distractions, and focus mode |
| 🔊 Sensory Processing | Sensory overload prevention, audio controls, and themes |
Neurodiversity Types
Understanding different neurotypes helps designers create more inclusive experiences:
| Type | Key Considerations |
|---|---|
| 📖 Dyslexia | Reading difficulties, need for clear typography |
| 🎯 ADHD | Attention challenges, need for reduced distractions |
| 🌈 Autism Spectrum | Sensory sensitivities, need for consistency |
| 🤲 Dyspraxia | Motor coordination, need for larger targets |
| 💡 Irlen Syndrome | Visual processing, need for contrast control |
Learner Personas
NDS provides learner personas to help design teams understand real user characteristics:
| Persona | Neurotype | Key Quote |
|---|---|---|
| Alex | Dyspraxia | "I was once told this world is not made for people like me" |
| Sarah | Typical | "I need to kickstart my career again" |
| Māia | Dyslexia, ADD, Irlen Syndrome | "I can do this, I just need time" |
| James | Dyslexia, ADHD | "Just tell me what to do and I'll..." |
| Chen | Typical | "I must become qualified to get a good job..." |
Universal Design for Learning (UDL)
The Neurodiversity Design System supports the three core principles of UDL:
1. Multiple Means of Representation
Provide information in multiple formats (text, images, audio) and support customization of display options.
2. Multiple Means of Expression
Offer multiple ways to complete tasks, support assistive technologies, and allow different challenge levels.
3. Multiple Means of Engagement
Provide choices and autonomy, support different motivations, and reduce distractions and barriers.
Quick Reference
Typography Essentials
.neurodiverse-text {
font-family: system-ui, sans-serif;
font-size: 1.125rem; /* 18px minimum */
line-height: 1.75;
letter-spacing: 0.025em;
text-align: left;
}
Motion Preferences
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Focus Indicators
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
Resources
- Official Website: https://neurodiversity.design/
- Community: Mastodon @ neurodiversity-in.au
- Related Standards: WCAG 2.1, Universal Design for Learning (UDL)