Calm
A reference implementation

An interface that works with your attention.

This page is a working example of every ADHD-friendly UI rule from the research synthesis — calm typography, one primary action per view, instant feedback, and no auto-playing motion. Read it, fork it, ship it.

See the 7 principles Try the live demo
// How it works

Seven principles, applied everywhere.

Each principle is enforced by code on this page. Hover or focus a card to see the rule in action; the source is the spec.

// 01

One primary action per screen

ADHD users abandon at the second decision. This page has exactly one primary button per section. Secondary actions are styled as equal-weight — but never equal-color.

In code: .btn-primary vs .btn-secondary — never two primaries.
// 02

Chunked, predictable layout

Same header on every scroll position. Same nav order. Same button positions. The user never has to relearn the page as they move.

In code: Sticky masthead with consistent nav across all sections.
// 03

Calm typography

17px body. 1.6 line height. 68ch max line length. One sans-serif family. Two weights max per view. No italics except for emphasis.

In code: --fs-300: 1.0625rem, --maxw: 68ch, Inter only.
// 04

High contrast, muted surfaces

Backgrounds are warm off-white, not pure white. Text hits AAA contrast on background. Bright colors signal "interactive" only.

In code: #1a1a1a on #f7f6f2 — 14:1 ratio.
// 05

Instant, visible feedback

Every action gets a visible result in under 120ms. Check a task — the bar moves immediately. No spinners, no loading states for things that are already done.

In code: --dur: 120ms, cubic-bezier(0.2, 0.7, 0.2, 1).
// 06

Visible state, always

The progress bar is always shown — not just on completion. The active task has a left rule. Done tasks fade to 55% opacity. No hidden state.

In code: Live <progress> with aria-valuenow.
// 07

No motion without consent

No auto-playing video. No animated carousels. No decorative parallax. Smooth scroll respects prefers-reduced-motion. Motion only ever signals state change.

In code: @media (prefers-reduced-motion: reduce) — animations drop to 0.01ms.
// Try it

Focus on one thing at a time.

This is a working focus mode. Pick one task. Complete it. The list shrinks. Your attention stays.

Today's three things

0 of 3 done
  • Send the EDF application 25 min
  • Call the garage about the brakes 5 min
  • Walk outside for ten minutes 10 min

Energy note. Tasks are tagged by time and difficulty so you can pick the one that matches how you actually feel right now, not how you hoped to feel.

Low energy → "Call the garage" (5 min, scripted).
High energy → "Send the EDF application" (25 min, deep work).

// Audit

Take this to your next design review.

Open any existing interface and run it through this list. Each item is one of the seven principles, expressed as a yes-or-no question.

// One last thing

Designed for everyone. Tuned for some.

The research is unambiguous: these patterns don't just help users with ADHD — they reduce friction for everyone. Cognitive accessibility is the floor, not the ceiling.

Fork this page. Strip the brand. Keep the rules. Ship it.

Back to the principles