<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
    <title>Brenner Cruvinel - neurodivergência</title>
    <subtitle>AI researcher and product designer building at the edge of computer science and mental health.</subtitle>
    <link rel="self" type="application/atom+xml" href="https://brennercruvinel.blog/en/tags/neurodivergencia/atom.xml"/>
    <link rel="alternate" type="text/html" href="https://brennercruvinel.blog"/>
    <generator uri="https://www.getzola.org/">Zola</generator>
    <updated>2025-05-12T00:00:00+00:00</updated>
    <id>https://brennercruvinel.blog/en/tags/neurodivergencia/atom.xml</id>
    <entry xml:lang="en">
        <title>Design systems for neurodivergent people: what the evidence says about typography, colour and layout</title>
        <published>2025-05-12T00:00:00+00:00</published>
        <updated>2025-05-12T00:00:00+00:00</updated>
        
        <author>
          <name>
            Brenner Cruvinel
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://brennercruvinel.blog/en/blog/design-system-neurodivergente/"/>
        <id>https://brennercruvinel.blog/en/blog/design-system-neurodivergente/</id>
        
        <content type="html" xml:base="https://brennercruvinel.blog/en/blog/design-system-neurodivergente/">&lt;p&gt;This is the evidence review behind the &lt;a href=&quot;https://brennercruvinel.blog/en/blog/hoff-nds/&quot;&gt;Hoff NDS&lt;/a&gt;, the design system I use in Hoff Research products, and behind the interface decisions in the &lt;a href=&quot;https://brennercruvinel.blog/en/blog/musica-aurora/&quot;&gt;Aurora app&lt;/a&gt;. For each topic: what the study measured, with how many people, and how much I trust it.&lt;/p&gt;
&lt;h2 id=&quot;typography&quot;&gt;Typography&lt;/h2&gt;
&lt;p&gt;Fonts for neurodivergence is a topic full of commercial promises. Controlled research takes most of them apart.&lt;/p&gt;
&lt;p&gt;Wery and Diliberto tested OpenDyslexic with elementary students with dyslexia in an alternating treatment design, against Arial and Times New Roman.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-wery-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-wery&quot;&gt;[1]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;p&gt;Kuster and colleagues did the same with Dyslexie, the font sold to schools.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-kuster-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-kuster&quot;&gt;[2]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;p&gt;Rello and Baeza-Yates used eye-tracking on 48 readers with dyslexia across 12 fonts.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-rello-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-rello&quot;&gt;[3]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-phalke-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-phalke&quot;&gt;[4]&lt;/a&gt;&lt;/sup&gt; Font type had a significant effect and size a marginal one. With five children, it is a clue, not a rule.&lt;/p&gt;
&lt;p&gt;For size, Will Soward&#39;s Neurodiversity Design System recommends body text of 16 to 20px and line height of 150% to 170%.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-ndstype-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-ndstype&quot;&gt;[5]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h2 id=&quot;spacing&quot;&gt;Spacing&lt;/h2&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-zorzi-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-zorzi&quot;&gt;[6]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;p&gt;The effect was replicated in adults. Sjoblom, Eaton and Stagg tested 24 university students with dyslexia and 24 without: wide spacing improved everyone&#39;s speed and the accuracy of the readers with dyslexia.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-sjoblom-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-sjoblom&quot;&gt;[7]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Galliussi and colleagues added nuance, with two groups of 64 children, with and without dyslexia, combining letter and word spacing.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-galliussi-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-galliussi&quot;&gt;[8]&lt;/a&gt;&lt;/sup&gt; Spacing has to be treated as a system, not as an isolated tweak.&lt;/p&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-cast-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-cast&quot;&gt;[9]&lt;/a&gt;&lt;/sup&gt; 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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-textspacing-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-textspacing&quot;&gt;[10]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h2 id=&quot;colour-and-contrast&quot;&gt;Colour and contrast&lt;/h2&gt;
&lt;p&gt;Grandgeorge and Masataka asked 29 autistic boys and 38 typically developing boys, aged 4 to 17, which of six colours they preferred.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-grandgeorge-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-grandgeorge&quot;&gt;[11]&lt;/a&gt;&lt;/sup&gt; The autistic boys chose yellow less and green and brown more. The authors link this to sensory hypersensitivity. The sample is boys only.&lt;/p&gt;
&lt;p&gt;Nair and colleagues surveyed 87 autistic children aged 6 to 16 about colour and light in the built environment.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-nair-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-nair&quot;&gt;[12]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-banaschewski-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-banaschewski&quot;&gt;[13]&lt;/a&gt;&lt;/sup&gt; 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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-kim2014-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-kim2014&quot;&gt;[14]&lt;/a&gt;&lt;/sup&gt; 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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-kimvep-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-kimvep&quot;&gt;[15]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-ndscolour-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-ndscolour&quot;&gt;[16]&lt;/a&gt;&lt;/sup&gt; The UK government accessibility blog records the same conflict: some autistic people prefer reduced contrast, people with low vision need high contrast.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-govuk-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-govuk&quot;&gt;[17]&lt;/a&gt;&lt;/sup&gt; The way out is personalization.&lt;/p&gt;
&lt;h2 id=&quot;touch-targets&quot;&gt;Touch targets&lt;/h2&gt;
&lt;p&gt;WCAG 2.5.8 sets 24 by 24 CSS pixels as the minimum.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-wcagtarget-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-wcagtarget&quot;&gt;[18]&lt;/a&gt;&lt;/sup&gt; Nielsen Norman Group recommends at least 1cm by 1cm for adults&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-nngtarget-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-nngtarget&quot;&gt;[19]&lt;/a&gt;&lt;/sup&gt; and 2cm by 2cm for young children, based on tests with children aged 3 to 12, in which precise dragging was hard.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-nngchild-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-nngchild&quot;&gt;[20]&lt;/a&gt;&lt;/sup&gt; Android recommends 48dp, about 9mm.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-material-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-material&quot;&gt;[21]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;The TIDRC framework, by Soni and colleagues, gathered 57 touch interface recommendations for children aged 2 to 11 and analysed 50 children&#39;s iPad apps: on average only 63% followed the recommendations, and 67% for the physical ones.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-tidrc-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-tidrc&quot;&gt;[22]&lt;/a&gt;&lt;/sup&gt; 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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-guo-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-guo&quot;&gt;[23]&lt;/a&gt;&lt;/sup&gt; It is a large screen and adults, but it reinforces that larger targets reduce errors.&lt;/p&gt;
&lt;h2 id=&quot;animation-and-motion&quot;&gt;Animation and motion&lt;/h2&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-flash-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-flash&quot;&gt;[24]&lt;/a&gt;&lt;/sup&gt; The Pokémon episode aired in Japan in 1997 is the case everyone cites.&lt;/p&gt;
&lt;p&gt;Alzahrani, Uitdenbogerd and Spichkova compared autistic and non-autistic people doing tasks with irrelevant animation on screen.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-alzahrani-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-alzahrani&quot;&gt;[25]&lt;/a&gt;&lt;/sup&gt; Animation hurt the performance of both groups, and more so that of autistic people, who were more distracted and reported more effort and frustration.&lt;/p&gt;
&lt;p&gt;The established technical solution is to respect &lt;code&gt;prefers-reduced-motion&lt;/code&gt;, replacing motion with a simple opacity transition.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-mdn-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-mdn&quot;&gt;[26]&lt;/a&gt;&lt;/sup&gt; Val Head sums up the WCAG guidance: avoid unnecessary animation and give control to turn off non-essential motion.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-valhead-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-valhead&quot;&gt;[27]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h2 id=&quot;what-i-apply&quot;&gt;What I apply&lt;/h2&gt;
&lt;p&gt;For an app aimed at all children, including neurodivergent ones, the order the evidence supports:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A good ordinary sans-serif, such as Open Sans, at 16 to 20px. No paid special font&lt;/li&gt;
&lt;li&gt;Spacing treated as a system, at the WCAG 1.4.12 values or above&lt;/li&gt;
&lt;li&gt;A soft palette, 7:1 contrast on text when possible, and at least three themes&lt;/li&gt;
&lt;li&gt;A minimum target of 60px for the main action in a children&#39;s app, with 8 to 16px between targets&lt;/li&gt;
&lt;li&gt;Minimal, slow, predictable animation, with &lt;code&gt;prefers-reduced-motion&lt;/code&gt; and a dedicated switch to turn it off&lt;/li&gt;
&lt;li&gt;A clean layout, clear hierarchy and navigation that does not move&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;All of this converges with &lt;a rel=&quot;external&quot; href=&quot;https://www.w3.org/WAI/standards-guidelines/wcag/&quot;&gt;WCAG&lt;/a&gt; and with the &lt;a rel=&quot;external&quot; href=&quot;https://www.w3.org/WAI/cognitive/&quot;&gt;W3C cognitive accessibility guidance&lt;/a&gt;. And nothing replaces testing with real neurodivergent children.&lt;/p&gt;
&lt;h3 id=&quot;about-learning-styles&quot;&gt;About learning styles&lt;/h3&gt;
&lt;p&gt;Many people say &quot;I am visual&quot; with the VARK model in mind, from Neil Fleming and Colleen Mills in 1992, which splits preference into visual, aural, read/write and kinesthetic.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-vark-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-vark&quot;&gt;[28]&lt;/a&gt;&lt;/sup&gt; 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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-pashler-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-pashler&quot;&gt;[29]&lt;/a&gt;&lt;/sup&gt; I use VARK as a reminder to vary the channel, not as a prescription.&lt;/p&gt;
&lt;h2 id=&quot;where-design-has-not-reached-yet&quot;&gt;Where design has not reached yet&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3 id=&quot;intent-as-a-token&quot;&gt;Intent as a token&lt;/h3&gt;
&lt;p&gt;Design tokens encode appearance: colour, space, type, radius. The Design Tokens Community Group published the first stable version of its format in October 2025.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-dtcg-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-dtcg&quot;&gt;[30]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;h3 id=&quot;motion-as-a-state-graph&quot;&gt;Motion as a state graph&lt;/h3&gt;
&lt;p&gt;Rive came close: state machines with inputs controlled from code, and runtimes for web, iOS, Android and other platforms.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-rive-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-rive&quot;&gt;[31]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;h3 id=&quot;physics-as-a-global-parameter&quot;&gt;Physics as a global parameter&lt;/h3&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-m3-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-m3&quot;&gt;[32]&lt;/a&gt;&lt;/sup&gt; 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,&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-changungar-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-changungar&quot;&gt;[33]&lt;/a&gt;&lt;/sup&gt; to Hurtienne and Israel, 2007, on image schemas.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-hurtienne-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-hurtienne&quot;&gt;[34]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h3 id=&quot;cognitive-cost-in-ci&quot;&gt;Cognitive cost in CI&lt;/h3&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-cogtool-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-cogtool&quot;&gt;[35]&lt;/a&gt;&lt;/sup&gt; Fitts&#39;s law shows up in design guidelines, but I did not find a public linter or test runner that uses it as an assertion.&lt;/p&gt;
&lt;h3 id=&quot;components-readable-by-agents&quot;&gt;Components readable by agents&lt;/h3&gt;
&lt;p&gt;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.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-webmcp-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-webmcp&quot;&gt;[36]&lt;/a&gt;&lt;/sup&gt; 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.&lt;/p&gt;
&lt;h3 id=&quot;a-design-system-with-a-rust-runtime&quot;&gt;A design system with a Rust runtime&lt;/h3&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3 id=&quot;scales-derived-from-perception&quot;&gt;Scales derived from perception&lt;/h3&gt;
&lt;p&gt;Scales like Tailwind&#39;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&#39;s contrast detection model, 2005,&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-watson-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-watson&quot;&gt;[37]&lt;/a&gt;&lt;/sup&gt; or Lubin&#39;s visual discrimination model, 1995.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-lubin-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-lubin&quot;&gt;[38]&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h3 id=&quot;emotional-state-as-a-parameter&quot;&gt;Emotional state as a parameter&lt;/h3&gt;
&lt;p&gt;There are continuous models of affect, Russell&#39;s circumplex, 1980,&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-russell-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-russell&quot;&gt;[39]&lt;/a&gt;&lt;/sup&gt; and Mehrabian&#39;s PAD space, 1996,&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-mehrabian-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-mehrabian&quot;&gt;[40]&lt;/a&gt;&lt;/sup&gt; and there is research inferring mood from mouse and keyboard, such as Zimmermann and colleagues, 2003.&lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-zimmermann-1&quot;&gt;&lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fn-zimmermann&quot;&gt;[41]&lt;/a&gt;&lt;/sup&gt; 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&#39;s baseline. Separating the baseline from the affective deviation is an online learning problem nobody has solved publicly.&lt;/p&gt;
&lt;p&gt;These gaps are why the NDS exists as a skeleton I apply, sometimes silently, in every new project. The specification is in the &lt;a href=&quot;https://brennercruvinel.blog/en/blog/hoff-nds/&quot;&gt;Hoff NDS post&lt;/a&gt;.&lt;/p&gt;
&lt;section class=&quot;footnotes&quot;&gt;
&lt;ol class=&quot;footnotes-list&quot;&gt;
&lt;li id=&quot;fn-wery&quot;&gt;
&lt;p&gt;Wery and Diliberto, &lt;a rel=&quot;external&quot; href=&quot;https://pmc.ncbi.nlm.nih.gov/articles/PMC5629233/&quot;&gt;The effect of a specialized dyslexia font, OpenDyslexic, on reading rate and accuracy&lt;/a&gt;, Annals of Dyslexia, 2017. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-wery-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-kuster&quot;&gt;
&lt;p&gt;Kuster and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://pmc.ncbi.nlm.nih.gov/articles/PMC5934461/&quot;&gt;Dyslexie font does not benefit reading in children with or without dyslexia&lt;/a&gt;, Annals of Dyslexia, 2018. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-kuster-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-rello&quot;&gt;
&lt;p&gt;Rello and Baeza-Yates, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1145/2513383.2513447&quot;&gt;Good fonts for dyslexia&lt;/a&gt;, ASSETS 2013. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-rello-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-phalke&quot;&gt;
&lt;p&gt;Phalke, Shrivastava and Sahgal, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.18848/2325-1581/CGP/v17i01/43-60&quot;&gt;Identification of Digital Font Size and Font Type to Enhance the Attention Span of Children Living with ADHD&lt;/a&gt;, International Journal of Visual Design, 2023. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-phalke-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-ndstype&quot;&gt;
&lt;p&gt;Will Soward, Neurodiversity Design System, &lt;a rel=&quot;external&quot; href=&quot;https://neurodiversity.design/principles/typography/&quot;&gt;typography&lt;/a&gt;, CC BY 4.0. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-ndstype-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-zorzi&quot;&gt;
&lt;p&gt;Zorzi and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1073/pnas.1205566109&quot;&gt;Extra-large letter spacing improves reading in dyslexia&lt;/a&gt;, PNAS, 2012. Numbers from the &lt;a rel=&quot;external&quot; href=&quot;https://www.sciencedaily.com/releases/2012/06/120607105712.htm&quot;&gt;CNRS summary&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-zorzi-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-sjoblom&quot;&gt;
&lt;p&gt;Sjoblom, Eaton and Stagg, &lt;a rel=&quot;external&quot; href=&quot;https://pubmed.ncbi.nlm.nih.gov/27629067/&quot;&gt;The effects of letter spacing and coloured overlays on reading speed and accuracy in adult dyslexia&lt;/a&gt;, British Journal of Educational Psychology, 2016. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-sjoblom-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-galliussi&quot;&gt;
&lt;p&gt;Galliussi and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1007/s11881-020-00194-x&quot;&gt;Inter-letter spacing, inter-word spacing, and font with dyslexia-friendly features&lt;/a&gt;, Annals of Dyslexia, 2020. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-galliussi-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-cast&quot;&gt;
&lt;p&gt;CAST, &lt;a rel=&quot;external&quot; href=&quot;https://cisl.cast.org/research/adjustable-line-spacing&quot;&gt;Adjustable line spacing&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-cast-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-textspacing&quot;&gt;
&lt;p&gt;W3C, &lt;a rel=&quot;external&quot; href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html&quot;&gt;Understanding SC 1.4.12: Text Spacing&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-textspacing-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-grandgeorge&quot;&gt;
&lt;p&gt;Grandgeorge and Masataka, &lt;a rel=&quot;external&quot; href=&quot;https://pmc.ncbi.nlm.nih.gov/articles/PMC5179595/&quot;&gt;Atypical Color Preference in Children with Autism Spectrum Disorder&lt;/a&gt;, Frontiers in Psychology, 2016. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-grandgeorge-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-nair&quot;&gt;
&lt;p&gt;Nair and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2022.1042641/full&quot;&gt;A case study on the effect of light and colors in the built environment on autistic children&#39;s behavior&lt;/a&gt;, Frontiers in Psychiatry, 2022. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-nair-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-banaschewski&quot;&gt;
&lt;p&gt;Banaschewski and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://pubmed.ncbi.nlm.nih.gov/16712633/&quot;&gt;Colour perception in ADHD&lt;/a&gt;, Journal of Child Psychology and Psychiatry, 2006. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-banaschewski-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-kim2014&quot;&gt;
&lt;p&gt;Kim and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1186/1744-9081-10-38&quot;&gt;Colour vision in ADHD: part 1, testing the retinal dopaminergic hypothesis&lt;/a&gt;, Behavioral and Brain Functions, 2014. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-kim2014-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-kimvep&quot;&gt;
&lt;p&gt;Kim, Banaschewski and Tannock, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1016/j.optom.2014.10.002&quot;&gt;Color vision in attention-deficit/hyperactivity disorder: a pilot visual evoked potential study&lt;/a&gt;, Journal of Optometry, 2015. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-kimvep-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-ndscolour&quot;&gt;
&lt;p&gt;Will Soward, Neurodiversity Design System, &lt;a rel=&quot;external&quot; href=&quot;https://neurodiversity.design/principles/colour/&quot;&gt;colour&lt;/a&gt;, CC BY 4.0. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-ndscolour-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-govuk&quot;&gt;
&lt;p&gt;Gov.uk, &lt;a rel=&quot;external&quot; href=&quot;https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/&quot;&gt;Dos and don&#39;ts on designing for accessibility&lt;/a&gt;, 2016. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-govuk-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-wcagtarget&quot;&gt;
&lt;p&gt;W3C, &lt;a rel=&quot;external&quot; href=&quot;https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html&quot;&gt;Understanding SC 2.5.8: Target Size (Minimum)&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-wcagtarget-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-nngtarget&quot;&gt;
&lt;p&gt;Nielsen Norman Group, &lt;a rel=&quot;external&quot; href=&quot;https://www.nngroup.com/articles/touch-target-size/&quot;&gt;Touch Targets on Touchscreens&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-nngtarget-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-nngchild&quot;&gt;
&lt;p&gt;Nielsen Norman Group, &lt;a rel=&quot;external&quot; href=&quot;https://www.nngroup.com/articles/children-ux-physical-development/&quot;&gt;Physical Development in Children&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-nngchild-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-material&quot;&gt;
&lt;p&gt;Google, &lt;a rel=&quot;external&quot; href=&quot;https://support.google.com/accessibility/android/answer/7101858&quot;&gt;Touch target size&lt;/a&gt;, Android accessibility. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-material-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-tidrc&quot;&gt;
&lt;p&gt;Soni and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://init.cise.ufl.edu/wp-content/uploads/sites/378/2019/04/TIDRC-Framework-soni-et-al-IDC19-final.pdf&quot;&gt;A Framework of Touchscreen Interaction Design Recommendations for Children (TIDRC)&lt;/a&gt;, IDC 2019. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-tidrc-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-guo&quot;&gt;
&lt;p&gt;Guo and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://pubmed.ncbi.nlm.nih.gov/36762820/&quot;&gt;Influence of size and location of buttons on the usability of interface on large touch screens&lt;/a&gt;, Ergonomics, 2023. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-guo-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-flash&quot;&gt;
&lt;p&gt;W3C, &lt;a rel=&quot;external&quot; href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html&quot;&gt;Understanding SC 2.3.1: Three Flashes or Below Threshold&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-flash-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-alzahrani&quot;&gt;
&lt;p&gt;Alzahrani, Uitdenbogerd and Spichkova, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1145/3510458.3513007&quot;&gt;Impact of animated objects on autistic and non-autistic users&lt;/a&gt;, ICSE-SEIS 2022. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-alzahrani-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-mdn&quot;&gt;
&lt;p&gt;MDN, &lt;a rel=&quot;external&quot; href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility&quot;&gt;Using media queries for accessibility&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-mdn-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-valhead&quot;&gt;
&lt;p&gt;Val Head, &lt;a rel=&quot;external&quot; href=&quot;https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/&quot;&gt;Accessible Web Animation: The WCAG on Animation Explained&lt;/a&gt;, CSS-Tricks. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-valhead-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-vark&quot;&gt;
&lt;p&gt;Fleming and Mills, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1002/j.2334-4822.1992.tb00213.x&quot;&gt;Not Another Inventory, Rather a Catalyst for Reflection&lt;/a&gt;, To Improve the Academy, 1992. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-vark-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-pashler&quot;&gt;
&lt;p&gt;Pashler and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1111/j.1539-6053.2009.01038.x&quot;&gt;Learning Styles: Concepts and Evidence&lt;/a&gt;, Psychological Science in the Public Interest, 2008. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-pashler-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-dtcg&quot;&gt;
&lt;p&gt;Design Tokens Community Group, &lt;a rel=&quot;external&quot; href=&quot;https://www.designtokens.org/faq/&quot;&gt;FAQ&lt;/a&gt;, on stable version 2025.10. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-dtcg-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-rive&quot;&gt;
&lt;p&gt;Rive, &lt;a rel=&quot;external&quot; href=&quot;https://rive.app/docs/runtimes/web/rive-parameters&quot;&gt;web runtime documentation&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-rive-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-m3&quot;&gt;
&lt;p&gt;Material Design, &lt;a rel=&quot;external&quot; href=&quot;https://m3.material.io/blog/m3-expressive-motion-theming&quot;&gt;M3 Expressive: new motion system&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-m3-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-changungar&quot;&gt;
&lt;p&gt;Chang and Ungar, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1145/168642.168647&quot;&gt;Animation: from cartoons to the user interface&lt;/a&gt;, UIST 1993. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-changungar-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-hurtienne&quot;&gt;
&lt;p&gt;Hurtienne and Israel, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1145/1226969.1226996&quot;&gt;Image schemas and their metaphorical extensions&lt;/a&gt;, TEI 2007. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-hurtienne-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-cogtool&quot;&gt;
&lt;p&gt;John and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1145/985692.985750&quot;&gt;Predictive human performance modeling made easy&lt;/a&gt;, CHI 2004. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-cogtool-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-webmcp&quot;&gt;
&lt;p&gt;W3C Web Machine Learning Community Group, &lt;a rel=&quot;external&quot; href=&quot;https://github.com/webmachinelearning/webmcp&quot;&gt;WebMCP&lt;/a&gt;. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-webmcp-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-watson&quot;&gt;
&lt;p&gt;Watson and Ahumada, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1167/5.9.6&quot;&gt;A standard model for foveal detection of spatial contrast&lt;/a&gt;, Journal of Vision, 2005. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-watson-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-lubin&quot;&gt;
&lt;p&gt;Lubin, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1142/9789812831200_0010&quot;&gt;A visual discrimination model for imaging system design and evaluation&lt;/a&gt;, 1995. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-lubin-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-russell&quot;&gt;
&lt;p&gt;Russell, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1037/h0077714&quot;&gt;A circumplex model of affect&lt;/a&gt;, Journal of Personality and Social Psychology, 1980. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-russell-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-mehrabian&quot;&gt;
&lt;p&gt;Mehrabian, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1007/bf02686918&quot;&gt;Pleasure-arousal-dominance&lt;/a&gt;, Current Psychology, 1996. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-mehrabian-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&quot;fn-zimmermann&quot;&gt;
&lt;p&gt;Zimmermann and colleagues, &lt;a rel=&quot;external&quot; href=&quot;https://doi.org/10.1080/10803548.2003.11076589&quot;&gt;Affective Computing, a Rationale for Measuring Mood With Mouse and Keyboard&lt;/a&gt;, 2003. &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/#fr-zimmermann-1&quot;&gt;↩&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>Hoff NDS: the specification of Hoff Research&#39;s neurodivergent design system</title>
        <published>2025-05-12T00:00:00+00:00</published>
        <updated>2025-05-12T00:00:00+00:00</updated>
        
        <author>
          <name>
            Brenner Cruvinel
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://brennercruvinel.blog/en/blog/hoff-nds/"/>
        <id>https://brennercruvinel.blog/en/blog/hoff-nds/</id>
        
        <content type="html" xml:base="https://brennercruvinel.blog/en/blog/hoff-nds/">&lt;p&gt;Work in progress (WIP): this specification is still changing.&lt;/p&gt;
&lt;p&gt;This is Hoff NDS, the design system I use in &lt;a href=&quot;https://brennercruvinel.blog/en/blog/poc-hoff-triagem-neuropsicologica/&quot;&gt;Hoff Research products&lt;/a&gt; and apply, sometimes silently, to every new project. The evidence behind each rule is in the &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/&quot;&gt;post on design systems for neurodivergent people&lt;/a&gt;. This post holds only the norm.&lt;/p&gt;
&lt;h2 id=&quot;purpose-and-scope&quot;&gt;Purpose and scope&lt;/h2&gt;
&lt;p&gt;The system exists to reduce cognitive load, anxiety and error in digital interfaces, putting neurodivergent people first and benefiting everyone. It covers three kinds of limitation:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Permanent, such as low vision, dyslexia and autism&lt;/li&gt;
&lt;li&gt;Temporary, such as injury, fatigue and medication effects&lt;/li&gt;
&lt;li&gt;Situational, such as a noisy place, a bad connection and stress&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The premise: learning and deciding happen in the brain, not on the screen. Every bit of effort spent decoding the interface is effort taken from the real task. Design&#39;s job is to lower the cost of reading, navigating and deciding.&lt;/p&gt;
&lt;p&gt;It is not a visual theme. It is a set of rules with reasons. Each section states the rule, the reason, the neurotypes it serves and the UX principles behind it. When a rule has a number, the number is normative.&lt;/p&gt;
&lt;h2 id=&quot;foundations&quot;&gt;Foundations&lt;/h2&gt;
&lt;p&gt;Cognitive load. People with ADHD perform worse and vary more in reaction time under high load. So only what serves the screen&#39;s goal stays visible. If an element does not inform the task, it distracts from it.&lt;/p&gt;
&lt;p&gt;Good stress and bad stress. There is a level of tension that helps focus and a level that paralyses. The interface absorbs the stress of operating, searching and making mistakes, so the person&#39;s tension goes to the content.&lt;/p&gt;
&lt;p&gt;Predictability. Unexpected changes in layout, position or naming break the mental model and drop focus, with a higher cost for autistic people and people with ADHD. Important positions stay stable across screens, an action&#39;s name persists from start to end of a flow, and nothing moves without the person&#39;s action.&lt;/p&gt;
&lt;p&gt;Personalization as a requirement. Sensory preference varies between neurotypes and within them. The system requires at least three colour themes (dark, light and high contrast), three text sizes and a control that turns animation off. These controls are in plain sight, not buried in settings.&lt;/p&gt;
&lt;p&gt;Conservation of complexity. There is a minimum complexity you cannot remove without destroying the function. Simplifying past that point only makes things more confusing. The goal is to remove excess, not function.&lt;/p&gt;
&lt;h2 id=&quot;designers-need-to-understand-colour-yes&quot;&gt;Designers need to understand colour, yes&lt;/h2&gt;
&lt;blockquote class=&quot;markdown-alert-important&quot;&gt;
&lt;p&gt;Contrast drives colour choice, not aesthetics. Running text aims for 7:1 or more (AAA level). The absolute minimum for any informative text is 4.5:1 (AA level).&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Rule. The whole palette has low saturation: no neon, no vivid colour, no extreme brightness. Colour is never the only carrier of information. Every state shown by colour also has text, an icon or a shape.&lt;/p&gt;
&lt;p&gt;Reason. Vivid colour and strong chromatic contrast cause discomfort and sensory overload in autistic people, people with ADHD and people with visual stress. In ADHD there is evidence of reduced colour discrimination, mainly on the blue-yellow axis, and red-green colour blindness is the most common form in the population. Both reinforce the ban on colour as the only signal. The dark theme is the default because much of the use happens at night, when less light from the screen bothers people less.&lt;/p&gt;
&lt;p&gt;Reference palette:&lt;/p&gt;
&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Role&lt;/th&gt;&lt;th&gt;Dark theme (default)&lt;/th&gt;&lt;th&gt;Light theme&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;Background&lt;/td&gt;&lt;td&gt;&lt;code&gt;#0C0C0E&lt;/code&gt; (near black, warm)&lt;/td&gt;&lt;td&gt;&lt;code&gt;#F3F1EC&lt;/code&gt; (warm off-white)&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Surface&lt;/td&gt;&lt;td&gt;&lt;code&gt;#141419&lt;/code&gt;&lt;/td&gt;&lt;td&gt;n/a&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Raised surface&lt;/td&gt;&lt;td&gt;&lt;code&gt;#1B1B21&lt;/code&gt;&lt;/td&gt;&lt;td&gt;n/a&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Main text&lt;/td&gt;&lt;td&gt;&lt;code&gt;#ECEAE6&lt;/code&gt; (warm off-white)&lt;/td&gt;&lt;td&gt;&lt;code&gt;#1D1D22&lt;/code&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Secondary text&lt;/td&gt;&lt;td&gt;&lt;code&gt;#9A9AA4&lt;/code&gt;&lt;/td&gt;&lt;td&gt;n/a&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Faded text, decorative only&lt;/td&gt;&lt;td&gt;&lt;code&gt;#62626C&lt;/code&gt;&lt;/td&gt;&lt;td&gt;n/a&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Accent, desaturated lavender&lt;/td&gt;&lt;td&gt;&lt;code&gt;#A8A3D8&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;code&gt;#5650A2&lt;/code&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Positive, sage green&lt;/td&gt;&lt;td&gt;&lt;code&gt;#86A99A&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;code&gt;#3C7A65&lt;/code&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Attention, desaturated terracotta&lt;/td&gt;&lt;td&gt;&lt;code&gt;#C98B86&lt;/code&gt;&lt;/td&gt;&lt;td&gt;&lt;code&gt;#A6504A&lt;/code&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;High contrast theme: black background, white text, lightened accents and reinforced borders. The contrast ratio of every pair is checked with a tool on every token change. Faded text never carries information, only hierarchy.&lt;/p&gt;
&lt;p&gt;System state has fixed semantics: positive for success, attention for error and warning, accent for action and selection. The same colour never means something different on another screen.&lt;/p&gt;
&lt;p&gt;Neurotypes: low vision, colour blindness, Irlen syndrome and visual stress, autism, ADHD. Principles: uniform connectedness and the aesthetic-usability effect, with the caveat that beauty cannot hide a problem.&lt;/p&gt;
&lt;h2 id=&quot;typography-before-spending-a-whole-day-looking-for-a-font&quot;&gt;Typography, before spending a whole day looking for a font&lt;/h2&gt;
&lt;p&gt;Rule. A humanist sans-serif with clearly distinct letters. Body text of 1rem to 1.25rem on a 16px base, that is, 16 to 20px. Line height of 150% to 170%. Letter spacing slightly increased: 0.005em to 0.02em for body text and about 0.03em for small text such as labels and captions. Headings at least 20% larger than body text, set apart by weight, never by changing family. Lines of at most 66 characters.&lt;/p&gt;
&lt;p&gt;Reason. Humanist fonts have wider apertures and more distinct letterforms, which support reading on ordinary screens and at varied sizes. More spacing reduces crowding, which hurts readers with dyslexia a lot, and it is the typographic change with the most evidence behind it. Fonts sold as &quot;for dyslexia&quot; showed no benefit in controlled studies.&lt;/p&gt;
&lt;p&gt;Characters with no look-alikes. The font distinguishes without ambiguity the capital I, the lowercase l and the 1; the mirrored letters b, d, p and q; zero and O. Alphanumeric sequences, such as passwords, codes and identifiers, appear in a font that guarantees these distinctions, with extra spacing.&lt;/p&gt;
&lt;p&gt;Serif type stays in optional editorial contexts, never in functional text, because some people use low-density screens, where serifs degrade.&lt;/p&gt;
&lt;p&gt;Neurotypes: dyslexia, dyscalculia, low vision, executive function, Irlen syndrome. Principle: Prägnanz.&lt;/p&gt;
&lt;h2 id=&quot;numbers-are-universal&quot;&gt;Numbers are universal&lt;/h2&gt;
&lt;p&gt;Rule. Long number sequences are segmented as in the real world: phone numbers in blocks, documents in blocks, cards in groups of four. Number fields fix predictable errors on the spot, such as the letter o in place of zero. Every quantity or time in digits comes with visual support: a progress bar with the percentage written out, a step counter with the current step highlighted, or a graphic of the proportion.&lt;/p&gt;
&lt;p&gt;Reason. Dyscalculia is a persistent difficulty with numbers, regardless of age and schooling. Remaining time given only as a number means nothing to some profiles. A half-filled bar with the text &quot;50%, 3 of 6&quot; carries the same data through three channels. But there is a limit: replacing the number entirely with abstract animation goes too far and confuses. The number stays, the visual comes along.&lt;/p&gt;
&lt;p&gt;Neurotypes: dyscalculia, dyslexia, executive function, low vision. Principles: Prägnanz, Tesler&#39;s law, Occam&#39;s razor.&lt;/p&gt;
&lt;h2 id=&quot;spacing-breathing-room-please-and-layout&quot;&gt;Spacing, breathing room (please) and layout&lt;/h2&gt;
&lt;p&gt;Rule. A spacing scale in steps of 4: 4, 8, 12, 16, 24, 32, 48, 64 and 96 pixels. Generous white space between groups. Related things stay close, unrelated things are visibly apart. One main reading column; content never competes in parallel columns of the same hierarchy. Navigation, content and action stay in the same region on every screen and at every viewport size.&lt;/p&gt;
&lt;p&gt;Reason. White space is information: it communicates grouping and hierarchy before reading starts. Dense layouts raise the cost of scanning, with a bigger penalty for ADHD. A fixed scale removes arbitrary decisions and keeps the rhythm predictable.&lt;/p&gt;
&lt;p&gt;Neurotypes: ADHD, dyslexia, autism, executive function. Principles: Prägnanz, uniform connectedness, Jakob&#39;s law.&lt;/p&gt;
&lt;h2 id=&quot;touch-and-click-targets&quot;&gt;Touch and click targets&lt;/h2&gt;
&lt;p&gt;Rule. A minimum target of 48 by 48 pixels on any interactive element. Primary actions at 60 by 60. Interfaces for children use 60 as the minimum and 80 to 100 pixels for critical actions, especially below age 8. At least 8 pixels between neighbouring targets, 16 when possible. The active area can be larger than the drawn element, tolerating a touch slightly outside it.&lt;/p&gt;
&lt;p&gt;Reason. Larger, closer targets reduce selection time and errors. For people with dyspraxia and for children whose fine motor control is still developing, a large area reduces physical effort. Precise dragging is hard for young children and always has a tap alternative.&lt;/p&gt;
&lt;p&gt;Neurotypes: dyspraxia, ADHD, low vision, children in motor development. Principle: Fitts&#39;s law.&lt;/p&gt;
&lt;h2 id=&quot;motion&quot;&gt;Motion&lt;/h2&gt;
&lt;blockquote class=&quot;markdown-alert-warning&quot;&gt;
&lt;p&gt;This section is about health, not aesthetics. Nothing flashes more than three times per second, no exceptions, because of the risk of photosensitive seizures.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Rule. Transitions of 200 to 500 milliseconds, slow, predictable and of the same kind across the whole product; prefer opacity and colour, avoid large displacement. Animation takes up less than a third of the screen. No animation runs on its own in a loop. The system&#39;s reduced motion preference is always respected, replacing animation with a simple opacity transition, and the interface also has its own control to turn all motion off. Forbidden: continuous rotation, parallax, autoplay carousels, elements flying in, confetti and any motion nobody asked for.&lt;/p&gt;
&lt;p&gt;Reason. On-screen motion causes nausea, dizziness and disorientation for people with vestibular disorders. Irrelevant animation hurts autistic people more than average. For ADHD, constant motion is a permanent distraction, even in peripheral vision, because the eye follows it.&lt;/p&gt;
&lt;p&gt;Neurotypes: photosensitive epilepsy, vestibular disorder, autism, ADHD, highly sensitive people. Principle: Doherty threshold.&lt;/p&gt;
&lt;h2 id=&quot;buttons-links-and-fields&quot;&gt;Buttons, links and fields&lt;/h2&gt;
&lt;p&gt;Rule. What is clickable looks clickable, visually different from any decorative element. Every interactive element has four visible states: rest, hover, focus and active. Focus is a 3-pixel ring with a 2 to 3 pixel offset, in a high-contrast colour, visible in every theme, and it is never removed. A single primary action per screen, with a clear hierarchy between primary, secondary and subtle. Icons reinforce intent but do not replace text on important actions.&lt;/p&gt;
&lt;p&gt;Form fields: the label is always visible above the field, never just a placeholder, because the placeholder disappears exactly when working memory needs it most. Helper text goes before the field when the format is not obvious. Minimum height equals the touch target. Validation happens at the right moment: not on every keystroke, not only on submit.&lt;/p&gt;
&lt;p&gt;Reason. Buttons and links are the most critical elements on a page. Accessibility goes beyond semantic HTML and screen reader labels: the visual design decides whether a person hesitates or acts. Hesitation is load, and ambiguity is a postponed error.&lt;/p&gt;
&lt;p&gt;Neurotypes: dyspraxia, dyslexia, ADHD, executive function, keyboard and screen reader users. Principles: Fitts&#39;s law, von Restorff effect, Occam&#39;s razor.&lt;/p&gt;
&lt;h2 id=&quot;forms-and-error-prevention&quot;&gt;Forms and error prevention&lt;/h2&gt;
&lt;p&gt;Rule. Heavy processes, such as sign-up, payment and initial setup, are split into short steps, one subject per step, with the position clear: current step, total and what comes next. The system is liberal in what it accepts and strict in what it returns: it accepts spaces, dashes, dots and wrong capitalization, and normalizes them on its own. Progress is saved, because interruption is the rule, not the exception, for the priority audience.&lt;/p&gt;
&lt;p&gt;Error messages do not apologize, do not blame and are not vague. They say what happened and how to fix it, in one sentence. For example: &quot;Two digits are missing. A mobile number has 11 digits with the area code.&quot;&lt;/p&gt;
&lt;p&gt;Reason. Faced with a long, opaque flow, people with ADHD or executive function difficulties tend to give up or take the cheapest path, even a wrong one. Short steps with a visible position turn one big cost into several small ones, with a sense of progress.&lt;/p&gt;
&lt;p&gt;Neurotypes: ADHD, executive function, dyscalculia, anxiety. Principles: Miller&#39;s law, Postel&#39;s law, Parkinson&#39;s law, peak-end rule.&lt;/p&gt;
&lt;h2 id=&quot;system-communication&quot;&gt;System communication&lt;/h2&gt;
&lt;p&gt;Rule. Warnings, validation, notifications and messages follow a single visual pattern per type across the whole product. Success is warm and direct. Errors are polite and solution-oriented. An action&#39;s name persists through the whole flow: the &quot;publish&quot; button produces the &quot;published&quot; confirmation, never a synonym. Notifications exist to serve the person, not to pull them back: no re-engagement, no manufactured urgency, no artificial scarcity. The person controls what they receive, and the default is the minimum.&lt;/p&gt;
&lt;p&gt;Reason. Broken conventions and inconsistent style create distrust and break focus. Onboarding does not replace clarity: a screen has to be understandable before the first interaction. A tutorial is a patch for an interface that failed.&lt;/p&gt;
&lt;p&gt;Neurotypes: ADHD, dyslexia, executive function, autism. Principles: Jakob&#39;s law, Miller&#39;s law, peak-end rule.&lt;/p&gt;
&lt;h2 id=&quot;captions-audio-and-media&quot;&gt;Captions, audio and media&lt;/h2&gt;
&lt;p&gt;Rule. All spoken media has synchronized captions, in light text on a solid dark background, in blocks of up to two lines. Audio never starts on its own. Every player has pause, rewind and speed control. Essential content never exists only as audio or only as video: there is always a text alternative.&lt;/p&gt;
&lt;p&gt;Reason. Captions serve people who are deaf or hard of hearing, people who process better by reading, people in noisy places and people who need reinforcement through both channels. Unexpected sound is a sensory assault for autistic and highly sensitive profiles.&lt;/p&gt;
&lt;p&gt;Neurotypes: deafness and hearing loss, autism, ADHD, highly sensitive people, auditory processing. Principles: channel redundancy and Prägnanz.&lt;/p&gt;
&lt;h2 id=&quot;content-and-tone-of-writing&quot;&gt;Content and tone of writing&lt;/h2&gt;
&lt;p&gt;Rule. Active voice, short sentences, one idea per sentence, one subject per paragraph. Names describe what the person controls and recognizes, never how the system was built. A button says exactly what happens: &quot;save changes&quot;, not &quot;submit&quot;. Plain language without being childish. Jargon only when it is the term the person needs to learn, and then explained the first time. Every word on screen has a job; what does not help understanding goes.&lt;/p&gt;
&lt;p&gt;Reason. For people with dyslexia, and for anyone under load, the cost of decoding the text competes with its content. Brevity is accessibility.&lt;/p&gt;
&lt;p&gt;Neurotypes: dyslexia, ADHD, executive function, non-native speakers. Principles: Occam&#39;s razor, Tesler&#39;s law.&lt;/p&gt;
&lt;h2 id=&quot;interface-patterns&quot;&gt;Interface patterns&lt;/h2&gt;
&lt;p&gt;Rule. Content first: every screen starts from the person&#39;s goal, and whatever does not serve the goal goes. Consistent navigation, with the same items in the same places. No pop-up interrupting the task unless there is real, immediate risk. No layout change without the person&#39;s action. Controlled density: show more on demand instead of dumping everything. A focus mode is available in long flows, hiding everything that is not the current task.&lt;/p&gt;
&lt;p&gt;Reason. Faced with many competing options, people with ADHD tend to freeze or pick the cheapest task. Conserving complexity means spending it where it creates value: on the content, not on the operation.&lt;/p&gt;
&lt;p&gt;Neurotypes: ADHD, autism, executive function, anxiety. Principles: complexity paradox, Hick&#39;s law, Jakob&#39;s law, aesthetic-usability effect.&lt;/p&gt;
&lt;h2 id=&quot;tokens&quot;&gt;Tokens&lt;/h2&gt;
&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Token&lt;/th&gt;&lt;th&gt;Normative value&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;Typography&lt;/td&gt;&lt;td&gt;16px base; body 1rem to 1.25rem; line height 1.5 to 1.7; lines up to 66 characters; headings at least 20% larger than body, weight 700; body tracking 0.005em, label tracking 0.03em&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Spacing&lt;/td&gt;&lt;td&gt;Steps of 4: 4, 8, 12, 16, 24, 32, 48, 64, 96 pixels&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Targets&lt;/td&gt;&lt;td&gt;Minimum 48px; primary 60px; children 60 to 100px; 8 to 16px between targets&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Border radius&lt;/td&gt;&lt;td&gt;8px on controls, 12px on cards and containers&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Motion&lt;/td&gt;&lt;td&gt;Transitions of 200 to 500ms; smooth deceleration curve; ceiling of 3 flashes per second; system reduced motion respected plus a local off switch&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Contrast&lt;/td&gt;&lt;td&gt;Body text 7:1 or more; informative minimum 4.5:1; decorative elements have no minimum as long as they carry no information&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Themes&lt;/td&gt;&lt;td&gt;Dark (default), light and high contrast, switchable in one tap; text in three sizes: 100%, 112.5% and 128%&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Colours&lt;/td&gt;&lt;td&gt;Those in the table in the colour section; any change requires a new pair-by-pair contrast check&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;h2 id=&quot;neurotypes-considered&quot;&gt;Neurotypes considered&lt;/h2&gt;
&lt;details&gt;
&lt;summary&gt;ADHD&lt;/summary&gt;
&lt;p&gt;Variation in attention, impulsivity and executive function, with hyperfocus on areas of interest. Performance drops under high load, and attention is captured involuntarily by motion and stimuli. Calls for clean screens, one task at a time, short steps, low stimulation and tolerance for interruption.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Autism&lt;/summary&gt;
&lt;p&gt;A neurodevelopmental condition that affects sensory and social processing, showing up differently in each person. Calls for predictability, consistency, no abrupt changes and control over sound, light and motion.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Dyslexia&lt;/summary&gt;
&lt;p&gt;A neurobiological difficulty in recognizing, spelling and decoding words, with an impact on comprehension and vocabulary. Calls for legible fonts, wide spacing, concise text and visual redundancy.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Dyscalculia&lt;/summary&gt;
&lt;p&gt;A specific and persistent difficulty with numbers, regardless of age and schooling. Calls for segmented numbers, visual support for quantity and time, and automatic input correction.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Dyspraxia&lt;/summary&gt;
&lt;p&gt;A coordination disorder that affects movement, balance and fine motor control, including cursor control. Calls for large targets, tolerance for imprecise touches and alternatives to precision gestures.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Executive function&lt;/summary&gt;
&lt;p&gt;Planning, organization, attention and working memory processes. It varies in neurotypical people too. Calls for short steps, a visible position in the flow, consistent names and saved progress.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Low vision&lt;/summary&gt;
&lt;p&gt;Loss of acuity that lenses do not correct. Calls for high contrast, adjustable text size and distinct shapes.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Colour blindness&lt;/summary&gt;
&lt;p&gt;Difficulty telling colours apart, most commonly red and green. Calls for colour never being the only signal.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Irlen syndrome and visual stress&lt;/summary&gt;
&lt;p&gt;A visual processing difficulty, with light sensitivity, reading fatigue and headaches, that ordinary lenses do not correct. Calls for alternative themes, low intensity and configurable contrast.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Highly sensitive people&lt;/summary&gt;
&lt;p&gt;A trait of processing sensitivity, with heightened sensory and emotional reactivity. Calls for calm, visual and auditory quiet, and a predictable pace.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Vestibular disorder&lt;/summary&gt;
&lt;p&gt;Impairment of the balance system and eye movement. On-screen motion causes dizziness, nausea and fatigue. Calls for minimal motion that can be turned off.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Photosensitive epilepsy&lt;/summary&gt;
&lt;p&gt;Risk of seizures triggered by flashing. Calls for the ceiling of three flashes per second, no exceptions.&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id=&quot;ux-principles&quot;&gt;UX principles&lt;/h2&gt;
&lt;details&gt;
&lt;summary&gt;Prägnanz&lt;/summary&gt;
&lt;p&gt;The brain interprets complex things in the simplest possible form. Deliver them already in the simple form.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Fitts&#39;s law&lt;/summary&gt;
&lt;p&gt;The time to reach a target depends on its size and distance. Larger, closer targets reduce errors.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Miller&#39;s law&lt;/summary&gt;
&lt;p&gt;Working memory holds about seven items. Group things into chunks.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Tesler&#39;s law&lt;/summary&gt;
&lt;p&gt;Some complexity cannot be removed. Simplifying past it creates confusion.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Jakob&#39;s law&lt;/summary&gt;
&lt;p&gt;People bring expectations from other products. Convention builds trust.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Hick&#39;s law and the complexity paradox&lt;/summary&gt;
&lt;p&gt;More options increase decision time and can paralyse. Fewer, well-chosen options are worth more.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Von Restorff effect&lt;/summary&gt;
&lt;p&gt;The different element is the one remembered. Save emphasis for what matters.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Peak-end rule&lt;/summary&gt;
&lt;p&gt;An experience is judged by its most intense moment and by its end.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Postel&#39;s law&lt;/summary&gt;
&lt;p&gt;Be liberal in what you accept and strict in what you return.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Parkinson&#39;s law&lt;/summary&gt;
&lt;p&gt;A task expands to fill the time perceived for it. A flow that feels short ends faster.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Doherty threshold&lt;/summary&gt;
&lt;p&gt;A response within 400 milliseconds keeps engagement. When an operation takes longer, show honest progress.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Uniform connectedness&lt;/summary&gt;
&lt;p&gt;Elements with the same visual characteristic are read as a group.&lt;/p&gt;
&lt;/details&gt;
&lt;details&gt;
&lt;summary&gt;Aesthetic-usability effect&lt;/summary&gt;
&lt;p&gt;A beautiful interface is perceived as easier to use and gets more tolerance for flaws. That is why it calls for vigilance: beauty cannot hide a serious flaw.&lt;/p&gt;
&lt;/details&gt;
&lt;h2 id=&quot;compliance-checklist&quot;&gt;Compliance checklist&lt;/h2&gt;
&lt;p&gt;Before publishing any screen:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Contrast of all informative text at 4.5:1 minimum and 7:1 for body text&lt;/li&gt;
&lt;li&gt;Humanist sans-serif, with I, l and 1, b, d, p and q, 0 and O distinct&lt;/li&gt;
&lt;li&gt;Line height of 150% or more and lines up to 66 characters&lt;/li&gt;
&lt;li&gt;Every interactive target at 48 pixels or more with 8 pixels of breathing room&lt;/li&gt;
&lt;li&gt;Visible keyboard focus on every interactive element&lt;/li&gt;
&lt;li&gt;No flashing above three per second&lt;/li&gt;
&lt;li&gt;Reduced motion respected and a local motion control present&lt;/li&gt;
&lt;li&gt;Three themes and three text sizes working&lt;/li&gt;
&lt;li&gt;A visible label on every field and solution-oriented errors&lt;/li&gt;
&lt;li&gt;Long numbers segmented and quantities with visual support&lt;/li&gt;
&lt;li&gt;Spoken media with captions and no autoplay&lt;/li&gt;
&lt;li&gt;One primary action per screen&lt;/li&gt;
&lt;li&gt;Each action&#39;s name identical from start to end of the flow&lt;/li&gt;
&lt;li&gt;No compulsive engagement mechanics&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;process&quot;&gt;Process&lt;/h2&gt;
&lt;p&gt;The system is a living document. Every new rule comes in with a reason and the neurotypes it serves, and every existing rule can be challenged with better evidence. Testing with real neurodivergent people is part of the design cycle, with a participatory method, not a final validation step. When a test contradicts a rule, the rule changes, and the change is recorded with a date and a reason.&lt;/p&gt;
&lt;p&gt;Hoff Research. Make it simple, but significant.&lt;/p&gt;
</content>
        
    </entry>
    <entry xml:lang="en">
        <title>We are divergent: Aurora&#39;s song and mission</title>
        <published>2025-01-20T00:00:00+00:00</published>
        <updated>2025-01-20T00:00:00+00:00</updated>
        
        <author>
          <name>
            Brenner Cruvinel
          </name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://brennercruvinel.blog/en/blog/musica-aurora/"/>
        <id>https://brennercruvinel.blog/en/blog/musica-aurora/</id>
        
        <content type="html" xml:base="https://brennercruvinel.blog/en/blog/musica-aurora/">&lt;p&gt;I&#39;m loving making this project for Aura, polishing every detail, all for her, because of her. I love you so much, sweetheart.&lt;/p&gt;
&lt;p&gt;Super Aurora started as a Children&#39;s Day gift: an interactive children&#39;s book, made with AI, about a neurodivergent girl. The idea is for it to become a lifelong project between father and daughter, a new story every night, to read before bed. Aura is my daughter. Aurora is the character, Aura projected into the next generation, a girl with ADHD, giftedness and autism who uses her hyperfocus to defend whoever needs it.&lt;/p&gt;
&lt;p&gt;Tonight I spent the whole night brainstorming the soundtrack and the opening, still a long way from something I&#39;m happy with.&lt;/p&gt;
&lt;p&gt;The song&#39;s thesis is the same as the book&#39;s: every &lt;a href=&quot;https://brennercruvinel.blog/en/blog/design-system-neurodivergente/&quot;&gt;neurodivergent&lt;/a&gt; person carries a mission. Aurora found that out early, expanded her consciousness through meditation, and uses her divergent mind as root access to universal recursion. The lyrics exist in Portuguese and English, and the English version anchors Aurora in a lineage of minds: Hypatia, Euler, Ramanujan, Grace Hopper.&lt;/p&gt;
&lt;h3 id=&quot;the-mission&quot;&gt;The mission&lt;/h3&gt;
&lt;p&gt;I wrote the mission the way it sounds in my head, in fragments, which is how it will turn into verse.&lt;/p&gt;
&lt;p&gt;She found out early that every neurodivergent person carries a mission. A super powerful mind always carries a mission. She found her purpose in meditation, expanded her consciousness through breathing, and in meditation she connects with nous, the supreme universal consciousness. A neurodivergent mind with root access to universal recursion. She designs with the golden ratio, draws fractals in her mind.&lt;/p&gt;
&lt;p&gt;The future of the Earth is in our hands. We see the patterns.&lt;/p&gt;
&lt;h3 id=&quot;the-superpowers&quot;&gt;The superpowers&lt;/h3&gt;
&lt;p&gt;This is the raw list that came out of the brainstorm, the vocabulary the lyrics will draw their words from. Not everything will fit in the song:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;recognizing universal patterns&lt;/li&gt;
&lt;li&gt;isomorphic thinking to identify patterns&lt;/li&gt;
&lt;li&gt;anomaly detection and intuitive error detection&lt;/li&gt;
&lt;li&gt;detecting abstract inconsistencies&lt;/li&gt;
&lt;li&gt;unconventional creativity, non-linear thinking&lt;/li&gt;
&lt;li&gt;divergent ideation&lt;/li&gt;
&lt;li&gt;metacognitive awareness&lt;/li&gt;
&lt;li&gt;visuospatial advantage&lt;/li&gt;
&lt;li&gt;sensitivity to weak signals&lt;/li&gt;
&lt;li&gt;tolerance for complexity&lt;/li&gt;
&lt;li&gt;abstract modeling&lt;/li&gt;
&lt;li&gt;accelerated learning&lt;/li&gt;
&lt;li&gt;extreme specialization&lt;/li&gt;
&lt;li&gt;sensory amplification&lt;/li&gt;
&lt;li&gt;monotropic attention&lt;/li&gt;
&lt;li&gt;working memory at gigaspeed, faster than light&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;chorus&quot;&gt;Chorus&lt;/h3&gt;
&lt;p&gt;The chorus and the closing tagline are the only parts I already consider fixed. The chorus is in Portuguese: &quot;we are divergent, we are superminds&quot;.&lt;/p&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color-scheme: light dark; color: light-dark(#657B83, #839496); background-color: light-dark(#FDF6E3, #002B36);&quot; &gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;nós somos divergentes&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;nós somos supermentes&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;nós somos divergentes&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;nós somos supermentes&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;reactive aura,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hoff, deploy!&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Protected by Hoff in the hyperfocus mode. Use the drones only for defense. Hyperfocus by nature, deploy.&lt;/p&gt;
&lt;h3 id=&quot;verse-in-english&quot;&gt;Verse, in English&lt;/h3&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color-scheme: light dark; color: light-dark(#657B83, #839496); background-color: light-dark(#FDF6E3, #002B36);&quot; &gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;she&amp;#39;s got a mind that reads the patterns never seen before&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;connections at the speed of light, that&amp;#39;s what the superintelligence is for&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;descendant of Hypatia, she carries Euler&amp;#39;s code&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Ramanujan dreamed the proof, she walks the path they showed&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;she sees the math behind the stars, the rhythms in the noise&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;the drones deploy, the shields go up, defense her only choice&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;Grace Hopper wrote the first command, Aurora writes the last&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;a mind this fast connects the dots the world just walked right past&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;activate hyperfocus mode&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;we are divergents&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;we are superminds&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;the future of the earth is in our minds&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;she carries the primal code&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Draw fractals in mind, golden ratio metrics by nature, a superpowerful always carries a mission.&lt;/p&gt;
&lt;h3 id=&quot;ending&quot;&gt;Ending&lt;/h3&gt;
&lt;pre class=&quot;giallo&quot; style=&quot;color-scheme: light dark; color: light-dark(#657B83, #839496); background-color: light-dark(#FDF6E3, #002B36);&quot; &gt;&lt;code data-lang=&quot;plain&quot;&gt;&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;activate hyperfocus mode&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;reactive aura,&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;giallo-l&quot;&gt;&lt;span&gt;hoff, deploy!&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The order of the verses will still change. Who it&#39;s for won&#39;t.&lt;/p&gt;
</content>
        
    </entry>
</feed>
