Neurodiversity Design System

Guidance

Paraphrased from the Neurodiversity Design System by Will Soward. The original articles remain the source of the figures, references and full explanation. View the CC BY 4.0 licence (opens in a new tab).

• Numbers (opens in a new tab)

  Long numbers are easier to check when they follow a familiar pattern, such as a phone number or payment card. Pair a figure with words or a simple graphic so size and time are not left to digits alone.

• Font (opens in a new tab)

  Choose an open humanist sans serif whose letters do not impersonate each other, especially I, l and 1, or b, d, p and q. The site sets Atkinson Hyperlegible, and treats specialist dyslexia fonts as unproven.

• Typography (opens in a new tab)

  Body text should sit around 16–20px, with headings at least a fifth larger and in a heavier weight. Line spacing of about 1.5 to 1.7 stops lines colliding, and small captions need a little extra letter spacing. Prefer AAA contrast for text people must read.

• Colour (opens in a new tab)

  Use colour to support a meaning that is also written or shaped, and keep one colour for one kind of action. 4.5:1 is the minimum contrast; 7:1 is preferred for body text. Offer themes beyond black on white, because strong contrast can itself cause visual stress.

• Buttons, links and inputs (opens in a new tab)

  A control should look operable before anyone hovers: a button with a clear boundary, a link in its own colour and underlined, and a field that is not styled as a button. Give each a generous target and a visible hover, pressed and keyboard focus state, including on touch.

• Interface (opens in a new tab)

  Keep navigation, content and the footer where people already expect them, and show only what the page is for. Extra panels and decoration compete with the task. A calm layout can still look considered.

• Communications (opens in a new tab)

  Use the same name for the same action everywhere. Instructions should be short, human and specific about the next step. Success can sound warm; an error should be polite and point to the fix, not only name the mistake.

• Animations (opens in a new tab)

  Use motion for feedback and for small, predictable transitions, such as a fade or a progress bar. Skip parallax, scroll-jacking and anything that fills the screen. Do not loop or autoplay, and honour the reduced-motion setting.

Colour palette

Links

Details