Guidance

Neurodiversity

These notes summarise the Neurodiversity Design System for this directory. They are written in our own words. The original guidance, examples and personas stay on the source site.

How this directory applies it

The site keeps Satoshi, the face already used across these pages. The guidance is applied where it suits a directory: reading comfort, visible controls, and motion that stays out of the way.

Body text is 16px with a line height of 1.6. Long copy sits in a narrow column.
Prose and footer links use a dark blue and an underline.
Primary actions are filled, at least 44px tall, and show hover, press and focus.
Fields keep a strong border so they do not look like buttons.
Keyboard focus is a 3px outline, offset so the sticky header does not cover it.
A skip link is the first control on every page.
The “updated” mark no longer pulses. Display, in the header, can switch to a soft green-grey background or reduce motion. The site also follows your device setting.
The collection count uses tabular figures.

Numbers

Quantities are easier to judge when they resemble the thing they measure. A long digit string, or a number with no scale, is hard work for many readers, including people with dyscalculia.

Group known patterns, such as phone numbers or card numbers, the way they appear in the world.
Pair a figure with words or a simple bar, clock or progress mark so size has a context.
Keep 0, O, 1, I and l visibly different.
Do not replace a number with a picture so abstract that the quantity disappears.

Numbers on the Neurodiversity Design System (opens in a new tab)

Font

A humanist sans serif with open shapes and distinct letters is easier to decode than a decorative, tightly spaced or mirrored face. The aim is a steady reading pace, not a font that slows people down.

Prefer open apertures and letters that do not mirror each other, such as b and d or p and q.
Avoid crowded spacing that makes neighbouring words merge.
Treat very closed or ornate faces as a poor fit for body text, especially at small sizes.
A face can be pleasant and still be readable. Check that people can recognise each character quickly.

Font on the Neurodiversity Design System (opens in a new tab)

Typography

Body text should be comfortable at arm’s length on an ordinary screen. Size, line height, weight and contrast do more for reading than a clever hierarchy.

Set running text at about 16–20px.
Use a line height of roughly 1.5 to 1.7.
Make headings at least a fifth larger than the body, and heavier.
Open the letter spacing slightly on small labels.
Aim for a 7:1 contrast on body text where the layout allows, and keep long copy left aligned in a modest measure.

Typography on the Neurodiversity Design System (opens in a new tab)

Colour

Colour should support a message, not carry it alone. Strong contrast helps many people, including in glare, but pure black on pure white can also tire readers who are sensitive to visual stress.

Meet at least 4.5:1 for normal text, and prefer 7:1 for body copy.
Use the same colour for the same kind of action, so a confirm control stays recognisable.
Do not rely on red and green, or on colour by itself, to show state.
Offer a softer page background as well as the default. Informative graphics need the same care as text. Decoration does not.

Colour on the Neurodiversity Design System (opens in a new tab)

Buttons, links and inputs

People hesitate when a control does not look usable. Buttons, links and fields need different shapes, a large hit area, and a visible change for hover, press and keyboard focus.

Give buttons a fill or a clear stroke so they are not flat words.
Underline links and give them a different colour from the surrounding text.
Draw fields, selects and text areas so they cannot be mistaken for buttons.
Keep hit areas at least 44px on the short side where the layout allows. 24px is the WCAG 2.2 minimum.
Show hover, active and focus, including a change after a tap. An icon can support a label. A lone icon still needs an accessible name.

Buttons, links and inputs on the Neurodiversity Design System (opens in a new tab)

Interface

Put navigation, content and the footer where people already expect them. Extra choices compete with the task. A plain layout can still be pleasant.

Keep header, main content and footer in stable places.
Show what the page is for. Hide or omit the rest.
Use a broad area of colour to separate regions, rather than another panel of links.
If an image or label does not help the task, leave it out.

Interface on the Neurodiversity Design System (opens in a new tab)

Communications

Short, consistent wording beats a tour of the interface. Use one name for one thing, and write messages in a human voice that says what to do next.

Say what the page is for in the title and one short sentence.
Keep names stable across pages, buttons and any follow-up message.
Keep a high-stakes task in steps on the page, rather than splitting it across emails and notices.
For an error, be direct and polite, and point to the fix. Success can sound warm without adding clutter.

Communications on the Neurodiversity Design System (opens in a new tab)

Animation

Motion is useful when it shows a change, a direction or that the system is working. Large, unexpected or looping movement can disorient people with vestibular conditions.

Use a small, predictable transition for a panel, menu or progress bar.
Leave out parallax, scroll hijacking, full-screen travel, flashing and auto-playing loops.
Let the person start motion when it is not needed as immediate feedback.
Provide a reduce-motion control, and follow the device setting.

Animation on the Neurodiversity Design System (opens in a new tab)

Further on the source site

The original site also includes learner personas, definitions of neurotypes, and short notes on the user-experience laws each principle draws on. Read those there rather than here.