Design systems for neurodivergent people: what the evidence says about typography, colour and layout

This is the evidence review behind the Hoff NDS, the design system I use in Hoff Research products, and behind the interface decisions in the Aurora app. For each topic: what the study measured, with how many people, and how much I trust it.

Typography

Fonts for neurodivergence is a topic full of commercial promises. Controlled research takes most of them apart.

Wery and Diliberto tested OpenDyslexic with elementary students with dyslexia in an alternating treatment design, against Arial and Times New Roman.^[1] There was no gain in speed or accuracy, individually or as a group, and no participant said they preferred reading in it. The sample is small, but the design is rigorous.

Kuster and colleagues did the same with Dyslexie, the font sold to schools.^[2] In the first experiment, 170 children with dyslexia did not read faster or with fewer errors in Dyslexie than in Arial. In the second, 102 children with dyslexia and 45 without read word lists in Dyslexie, Arial and Times New Roman: again no gain, and most preferred Arial or Times.

Rello and Baeza-Yates used eye-tracking on 48 readers with dyslexia across 12 fonts.^[3] Sans-serif, monospaced and roman styles improved reading; italic made it worse; OpenDyslexic brought no gain. The British Dyslexia Association style guide points the same way and recommends ordinary sans-serif, such as Arial, Verdana and Open Sans.

For ADHD the evidence is thinner. Phalke, Shrivastava and Sahgal tested five children with ADHD on nine combinations of font size and type, with remedial experts estimating attention span from video.^[4] Font type had a significant effect and size a marginal one. With five children, it is a clue, not a rule.

For size, Will Soward's Neurodiversity Design System recommends body text of 16 to 20px and line height of 150% to 170%.^[5]

Spacing

Letter spacing is the most solid finding in the field. Zorzi and colleagues increased the space between letters by 2.5 points for Italian and French children with dyslexia, aged 8 to 14, with no training at all.^[6] The CNRS summary describes the result as half the errors and 20% faster reading. The explanation is crowding: neighbouring letters interfere with recognizing the target letter, and readers with dyslexia are more affected by it.

The effect was replicated in adults. Sjoblom, Eaton and Stagg tested 24 university students with dyslexia and 24 without: wide spacing improved everyone's speed and the accuracy of the readers with dyslexia.^[7]

Galliussi and colleagues added nuance, with two groups of 64 children, with and without dyslexia, combining letter and word spacing.^[8] Spacing has to be treated as a system, not as an isolated tweak.

Line height has weaker evidence. The studies collected by CAST disagree: in one, tighter line spacing made reading slower; in another, it did not change readability.^[9] So I anchor on WCAG success criterion 1.4.12, which requires content to work with line height of 1.5, 0.12em letter spacing and 0.16em word spacing.^[10]

Colour and contrast

Grandgeorge and Masataka asked 29 autistic boys and 38 typically developing boys, aged 4 to 17, which of six colours they preferred.^[11] The autistic boys chose yellow less and green and brown more. The authors link this to sensory hypersensitivity. The sample is boys only.

Nair and colleagues surveyed 87 autistic children aged 6 to 16 about colour and light in the built environment.^[12] Preferences varied widely; neutral and soft tones tended to calm, and intense colour and bright light tended to stimulate. It is a case study, not an experiment.

In ADHD, the clue is neurobiological. Banaschewski and colleagues tested 14 children with ADHD and 13 without: those with ADHD made more errors on the Farnsworth-Munsell test, mostly on the blue-yellow axis.^[13] The hypothesis is retinal dopaminergic hypofunction, which affects S-cones. Kim and colleagues, with 30 young adults with ADHD, found poorer discrimination of blue and red saturation in women with ADHD.^[14] In a pilot visual evoked potential study with 16 adolescents with ADHD and 15 without, the P1 amplitude was larger for blue and yellow stimuli in the ADHD group, which the authors read as possible compensation.^[15]

The Neurodiversity Design System asks for a contrast of at least 4.5:1 and 7:1 for body text, warns that pure black on pure white increases fatigue for people with visual stress, and suggests a mode where the person picks hue and saturation.^[16] The UK government accessibility blog records the same conflict: some autistic people prefer reduced contrast, people with low vision need high contrast.^[17] The way out is personalization.

Touch targets

WCAG 2.5.8 sets 24 by 24 CSS pixels as the minimum.^[18] Nielsen Norman Group recommends at least 1cm by 1cm for adults^[19] and 2cm by 2cm for young children, based on tests with children aged 3 to 12, in which precise dragging was hard.^[20] Android recommends 48dp, about 9mm.^[21]

The TIDRC framework, by Soni and colleagues, gathered 57 touch interface recommendations for children aged 2 to 11 and analysed 50 children's iPad apps: on average only 63% followed the recommendations, and 67% for the physical ones.^[22] Guo and colleagues, with 31 adults on a 65-inch screen, found the best time with 70mm buttons, fewest errors with 50mm and most satisfaction with 90mm.^[23] It is a large screen and adults, but it reinforces that larger targets reduce errors.

Animation and motion

This part is about health. WCAG 2.3.1 forbids content that flashes more than three times per second, because of the risk of photosensitive seizures.^[24] The Pokémon episode aired in Japan in 1997 is the case everyone cites.

Alzahrani, Uitdenbogerd and Spichkova compared autistic and non-autistic people doing tasks with irrelevant animation on screen.^[25] Animation hurt the performance of both groups, and more so that of autistic people, who were more distracted and reported more effort and frustration.

The established technical solution is to respect prefers-reduced-motion, replacing motion with a simple opacity transition.^[26] Val Head sums up the WCAG guidance: avoid unnecessary animation and give control to turn off non-essential motion.^[27]

What I apply

For an app aimed at all children, including neurodivergent ones, the order the evidence supports:

• A good ordinary sans-serif, such as Open Sans, at 16 to 20px. No paid special font
• Spacing treated as a system, at the WCAG 1.4.12 values or above
• A soft palette, 7:1 contrast on text when possible, and at least three themes
• A minimum target of 60px for the main action in a children's app, with 8 to 16px between targets
• Minimal, slow, predictable animation, with prefers-reduced-motion and a dedicated switch to turn it off
• A clean layout, clear hierarchy and navigation that does not move

All of this converges with WCAG and with the W3C cognitive accessibility guidance. And nothing replaces testing with real neurodivergent children.

About learning styles

Many people say "I am visual" with the VARK model in mind, from Neil Fleming and Colleen Mills in 1992, which splits preference into visual, aural, read/write and kinesthetic.^[28] The preference exists. What has no support is the hypothesis that teaching in the preferred style improves learning: the review by Pashler and colleagues, from 2008, found no solid evidence for it.^[29] I use VARK as a reminder to vary the channel, not as a prescription.

Where design has not reached yet

In 2026 I came back to this review with a different question: what does research already know that no design system implements? Reviewing it now, some of these gaps have been partly closed, and I say which.

Intent as a token

Design tokens encode appearance: colour, space, type, radius. The Design Tokens Community Group published the first stable version of its format in October 2025.^[30] The types are still visual. A destructive button that should change motion, copy and ARIA at once still depends on team convention, not on a property of the system. I did not find a specification that treats intent as a token dimension.

Motion as a state graph

Rive came close: state machines with inputs controlled from code, and runtimes for web, iOS, Android and other platforms.^[31] What is still missing is an open, text-based format where the transition is derived from the interface state, not from an animation file drawn in an editor. Framer Motion, GSAP and CSS animation are still runtime code, and moving a Framer Motion transition to SwiftUI still means rewriting it.

Physics as a global parameter

The first version of this list said that no public design system treated spring and damping as root tokens. It was wrong: Material 3 Expressive, from 2025, already did that, and component motion comes from spring tokens with stiffness and damping, in expressive and standard schemes.^[32] The gap that remains is smaller: a single physical model, with mass and friction, that applies to everything and is open outside the Android ecosystem. The academic groundwork has existed for decades, from Chang and Ungar, 1993, on cartoon animation principles applied to the interface,^[33] to Hurtienne and Israel, 2007, on image schemas.^[34]

Cognitive cost in CI

Visual regression has Chromatic, Percy and Playwright visual diffs. Cognitive regression has no equivalent. CogTool, by John and colleagues, 2004, implemented the KLM model as a standalone tool and never made it into a versioned pipeline.^[35] Fitts's law shows up in design guidelines, but I did not find a public linter or test runner that uses it as an assertion.

Components readable by agents

ARIA solves navigation for screen readers. An AI agent needs more: the precondition of an action, its effect on state, the cost of undoing it. Today agents make up for this by reading screenshots. The closest step is WebMCP, a draft from a W3C community group with editors from Google and Microsoft, which lets a page register tools with an input schema for agents.^[36] It is progress at the page level. At the component level, declaring domain effect for humans, screen readers and agents at the same time, I did not find a specification.

A design system with a Rust runtime

Every design system I know assumes the DOM. Vello renders 2D on the GPU in Rust, Tauri uses Rust but renders in a WebView, Makepad is a toolkit, and AccessKit solved portable accessibility in Rust. What is missing is the component layer with behaviour, state and accessibility on top of that, as a complete design system.

Scales derived from perception

Scales like Tailwind's or the major third are good heuristics, but they are not derived from how the eye perceives difference. OKLCH solved perceptual uniformity for colour and is in CSS Color 4. What is missing is composing colour, space, type and time into a single system derived from vision models, such as Watson and Ahumada's contrast detection model, 2005,^[37] or Lubin's visual discrimination model, 1995.^[38]

Emotional state as a parameter

There are continuous models of affect, Russell's circumplex, 1980,^[39] and Mehrabian's PAD space, 1996,^[40] and there is research inferring mood from mouse and keyboard, such as Zimmermann and colleagues, 2003.^[41] I did not find the full pipeline in any product or open project: interaction signal, position in affective space, token adjustment in real time, calibrated to each person's baseline. Separating the baseline from the affective deviation is an online learning problem nobody has solved publicly.

These gaps are why the NDS exists as a skeleton I apply, sometimes silently, in every new project. The specification is in the Hoff NDS post.