Design systems
Design System Checklist I have spent 13+ years building and governing design systems. This is the checklist I use to plan, build and maintain one: 230 checks across design language, foundation, components and maintenance. Tick what you already have in place. Your progress stays in this browser and is never sent anywhere.
Back to the portfolio · Book a 30-min call
All To do Done
230 items
Reset progress Foundation The visual building blocks every component is made from: colour, space, type, depth, motion and icons.
Core components The reusable interface parts, from accordions to tooltips: what each one needs to look consistent, work for everyone and stay maintainable.
Calendar 0/7 Decide between a date picker, a typed field or both Typing is often faster than clicking, and offering both serves more people. Support keyboard navigation across days, weeks and months Arrow keys, Page Up, Page Down, Home and End make a mouse-heavy widget usable for everyone. Define how selected, today, range and unavailable dates look Distinct states keep a dense grid readable. Handle week start, month names and date formats by locale Dates are read differently around the world. Set rules for minimum and maximum dates and disabled days Impossible choices should be prevented, with a clear reason shown. Support range selection with clear start and end feedback Range pickers confuse users unless both ends stay visible. Announce the selected date and month changes to screen readers A grid of numbers means little without its month and day context. Text field 0/9 Always show a visible label, not only a placeholder Placeholders vanish as soon as typing starts and are often too faint to read. Use the right input type, keyboard mode and autocomplete token The correct type brings the right keyboard on phones and lets browsers fill the field. Define default, hover, focus, filled, disabled, read-only and error states Every state left unspecified becomes a different one-off in each product. Write helper and error text that explains how to fix the problem "Invalid input" tells people nothing, while a clear instruction helps them move on. Connect hints and errors to the field and mark invalid fields for assistive technology Screen readers should announce the message together with the field it belongs to. Decide when validation runs: on blur, on submit or while typing Early errors annoy people who are still typing, and late ones waste their time. Support inline actions such as clearing and showing a password Small controls inside the field save time and reduce mistakes. Specify prefixes, suffixes, icons and their spacing Adornments such as currency signs and units need rules so text never collides with them. Set widths that hint at the expected length of the input A narrow box for a postcode and a wide one for an address tell users what to type.