Hoff NDS: the specification of Hoff Research's neurodivergent design system

Work in progress (WIP): this specification is still changing.

This is Hoff NDS, the design system I use in Hoff Research products and apply, sometimes silently, to every new project. The evidence behind each rule is in the post on design systems for neurodivergent people. This post holds only the norm.

Purpose and scope

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:

• Permanent, such as low vision, dyslexia and autism
• Temporary, such as injury, fatigue and medication effects
• Situational, such as a noisy place, a bad connection and stress

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's job is to lower the cost of reading, navigating and deciding.

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.

Foundations

Cognitive load. People with ADHD perform worse and vary more in reaction time under high load. So only what serves the screen's goal stays visible. If an element does not inform the task, it distracts from it.

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's tension goes to the content.

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's name persists from start to end of a flow, and nothing moves without the person's action.

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.

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.

Designers need to understand colour, yes

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).

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.

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.

Reference palette:

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.

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.

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.

Typography, before spending a whole day looking for a font

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.

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 "for dyslexia" showed no benefit in controlled studies.

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.

Serif type stays in optional editorial contexts, never in functional text, because some people use low-density screens, where serifs degrade.

Neurotypes: dyslexia, dyscalculia, low vision, executive function, Irlen syndrome. Principle: Prägnanz.

Numbers are universal

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.

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 "50%, 3 of 6" 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.

Neurotypes: dyscalculia, dyslexia, executive function, low vision. Principles: Prägnanz, Tesler's law, Occam's razor.

Spacing, breathing room (please) and layout

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.

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.

Neurotypes: ADHD, dyslexia, autism, executive function. Principles: Prägnanz, uniform connectedness, Jakob's law.

Touch and click targets

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.

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.

Neurotypes: dyspraxia, ADHD, low vision, children in motor development. Principle: Fitts's law.

Motion

This section is about health, not aesthetics. Nothing flashes more than three times per second, no exceptions, because of the risk of photosensitive seizures.

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'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.

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.

Neurotypes: photosensitive epilepsy, vestibular disorder, autism, ADHD, highly sensitive people. Principle: Doherty threshold.

Buttons, links and fields

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.

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.

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.

Neurotypes: dyspraxia, dyslexia, ADHD, executive function, keyboard and screen reader users. Principles: Fitts's law, von Restorff effect, Occam's razor.

Forms and error prevention

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.

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: "Two digits are missing. A mobile number has 11 digits with the area code."

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.

Neurotypes: ADHD, executive function, dyscalculia, anxiety. Principles: Miller's law, Postel's law, Parkinson's law, peak-end rule.

System communication

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's name persists through the whole flow: the "publish" button produces the "published" 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.

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.

Neurotypes: ADHD, dyslexia, executive function, autism. Principles: Jakob's law, Miller's law, peak-end rule.

Captions, audio and media

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.

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.

Neurotypes: deafness and hearing loss, autism, ADHD, highly sensitive people, auditory processing. Principles: channel redundancy and Prägnanz.

Content and tone of writing

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: "save changes", not "submit". 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.

Reason. For people with dyslexia, and for anyone under load, the cost of decoding the text competes with its content. Brevity is accessibility.

Neurotypes: dyslexia, ADHD, executive function, non-native speakers. Principles: Occam's razor, Tesler's law.

Interface patterns

Rule. Content first: every screen starts from the person'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'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.

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.

Neurotypes: ADHD, autism, executive function, anxiety. Principles: complexity paradox, Hick's law, Jakob's law, aesthetic-usability effect.

Tokens

Neurotypes considered

UX principles

Compliance checklist

Before publishing any screen:

• Contrast of all informative text at 4.5:1 minimum and 7:1 for body text
• Humanist sans-serif, with I, l and 1, b, d, p and q, 0 and O distinct
• Line height of 150% or more and lines up to 66 characters
• Every interactive target at 48 pixels or more with 8 pixels of breathing room
• Visible keyboard focus on every interactive element
• No flashing above three per second
• Reduced motion respected and a local motion control present
• Three themes and three text sizes working
• A visible label on every field and solution-oriented errors
• Long numbers segmented and quantities with visual support
• Spoken media with captions and no autoplay
• One primary action per screen
• Each action's name identical from start to end of the flow
• No compulsive engagement mechanics

Process

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.

Hoff Research. Make it simple, but significant.