Design Systems Week 40: accessible states and useful AI feedback
Week 40 connects MCP App accessibility, colour-independent cues, AI response feedback, context architecture, Figma Weave, and MDS's three design lenses. Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 40-2026
article
TAG: ARCHITECTUREREAD_TIME: 10_MIN
How to test MCP Apps for accessibility, and why it matters
Deque proposes testing an MCP App by serving the exact HTML artifact that the host embeds, with a minimal local host and repeatable protocol fixtures. Each fixture should expose a meaningful state, including loading, streaming, success, empty results, errors, cancellation, and teardown, rather than only a polished successful screen. Automated checks need manual keyboard and assistive-technology testing because an accessible text summary cannot replace inaccessible interactive controls. Theme tokens should use matching foreground/background families, while host-provided safe-area insets and partial context updates need explicit handling. This turns accessibility into a contract across app and host states; use the same artifact, vary the inputs and available space, and verify that users can both operate and leave the embedded interface.
The New Big Ball of Mud: Why Agentic AI Systems Turn Fragile
Nielsen Norman Group describes how AI-assisted systems accumulate fragile structure through piecemeal growth, quick repairs, and context that nobody can confidently explain. Qualitative examples show teams extending throwaway prototypes and repeatedly recovering information that should have remained explicit. Its proposed distinction between global, local, and ambient context gives teams a way to separate durable rules, task-specific evidence, and background information. Keep global context short enough to audit, refresh local context when outcomes fail, and reconsider a system when its structure no longer fits the work. The article offers a research-informed framework rather than a measured failure rate, so use its patterns to inspect ownership and maintenance risks without treating every generated prototype as destined to collapse.
TetraLogical explains how to communicate status and meaning without requiring users to distinguish colours alone. Pair colour with labels, shapes, or patterns, such as a filled versus outlined status symbol, and review those cues throughout a component's interaction states. A palette that works in a static mockup can still fail on hover, focus, selection, or a disabled control, so colour decisions belong in component specifications as well as tokens. The article also cautions that choosing blue instead of red and green does not solve every form of colour-vision difference. Simulators can reveal problems but cannot substitute for testing with people; build redundant cues into the system and validate real tasks rather than certifying a palette from one simulated screenshot.
Workflow lab: From design system to campaign in Figma Weave
Figma demonstrates a campaign workflow in Weave using a fictional museum's design system as a set of connected references. Design frames feed layout and palette analysis, while separate nodes handle colour families, a shared visual effect, and copy for different locales. Generated material returns to editable frames for composition and critique, making reference roles and human review visible parts of the workflow. The node graph can be reused when connected design-system references change, rather than rebuilding each campaign from an isolated prompt. This is a worked example, not evidence of measured production savings or guaranteed brand consistency; adapt the reference structure and review translated copy and visual hierarchy before using the outputs in a real campaign.
Stop blaming the model for slow AI. Use Doherty’s threshold as a guideline.
Patrick Neeman argues that an AI interface should acknowledge an action before the model finishes thinking or emits its first token. He proposes 100 ms as a target and 400 ms as a ceiling for that acknowledgment, applying Doherty's threshold as a design guideline rather than a validated AI-specific law. Echoing input, changing the control state, and showing meaningful progress can make the system's work understandable during the remaining wait. Cancellation and rollback must describe what can actually be stopped or undone, instead of offering reassuring controls with misleading behavior. Instrument acknowledgment separately from answer latency and assign ownership of both, so faster model streaming does not hide the unresponsive interval immediately after a user's action.
If you want to design better interfaces, watch this (3 Ps)
MDS uses a budgeting interface to demonstrate purpose, principles, and personality as three lenses for improving a design. Purpose questions whether controls earn their interaction cost and whether a view is meant for a glance or a detailed investigation. Principles guide hierarchy, spacing, aligned numbers, and persistent context, while personality explores type and colour without sacrificing dense financial information. The lenses are iterative rather than a fixed sequence, and the before-and-after example is a design exercise rather than evidence from user testing. Use the method to explain why a component changes and to compare alternatives, then validate the resulting hierarchy and interactions with the people and tasks the product actually serves.
How to test MCP Apps for accessibility, and why it matters
Deque proposes testing an MCP App by serving the exact HTML artifact that the host embeds, with a minimal local host and repeatable protocol fixtures. Each fixture should expose a meaningful state, including loading, streaming, success, empty results, errors, cancellation, and teardown, rather than only a polished successful screen. Automated checks need manual keyboard and assistive-technology testing because an accessible text summary cannot replace inaccessible interactive controls. Theme tokens should use matching foreground/background families, while host-provided safe-area insets and partial context updates need explicit handling. This turns accessibility into a contract across app and host states; use the same artifact, vary the inputs and available space, and verify that users can both operate and leave the embedded interface.
If you want to design better interfaces, watch this (3 Ps)
MDS uses a budgeting interface to demonstrate purpose, principles, and personality as three lenses for improving a design. Purpose questions whether controls earn their interaction cost and whether a view is meant for a glance or a detailed investigation. Principles guide hierarchy, spacing, aligned numbers, and persistent context, while personality explores type and colour without sacrificing dense financial information. The lenses are iterative rather than a fixed sequence, and the before-and-after example is a design exercise rather than evidence from user testing. Use the method to explain why a component changes and to compare alternatives, then validate the resulting hierarchy and interactions with the people and tasks the product actually serves.
The New Big Ball of Mud: Why Agentic AI Systems Turn Fragile
Nielsen Norman Group describes how AI-assisted systems accumulate fragile structure through piecemeal growth, quick repairs, and context that nobody can confidently explain. Qualitative examples show teams extending throwaway prototypes and repeatedly recovering information that should have remained explicit. Its proposed distinction between global, local, and ambient context gives teams a way to separate durable rules, task-specific evidence, and background information. Keep global context short enough to audit, refresh local context when outcomes fail, and reconsider a system when its structure no longer fits the work. The article offers a research-informed framework rather than a measured failure rate, so use its patterns to inspect ownership and maintenance risks without treating every generated prototype as destined to collapse.
TetraLogical explains how to communicate status and meaning without requiring users to distinguish colours alone. Pair colour with labels, shapes, or patterns, such as a filled versus outlined status symbol, and review those cues throughout a component's interaction states. A palette that works in a static mockup can still fail on hover, focus, selection, or a disabled control, so colour decisions belong in component specifications as well as tokens. The article also cautions that choosing blue instead of red and green does not solve every form of colour-vision difference. Simulators can reveal problems but cannot substitute for testing with people; build redundant cues into the system and validate real tasks rather than certifying a palette from one simulated screenshot.
Workflow lab: From design system to campaign in Figma Weave
Figma demonstrates a campaign workflow in Weave using a fictional museum's design system as a set of connected references. Design frames feed layout and palette analysis, while separate nodes handle colour families, a shared visual effect, and copy for different locales. Generated material returns to editable frames for composition and critique, making reference roles and human review visible parts of the workflow. The node graph can be reused when connected design-system references change, rather than rebuilding each campaign from an isolated prompt. This is a worked example, not evidence of measured production savings or guaranteed brand consistency; adapt the reference structure and review translated copy and visual hierarchy before using the outputs in a real campaign.
Stop blaming the model for slow AI. Use Doherty’s threshold as a guideline.
Patrick Neeman argues that an AI interface should acknowledge an action before the model finishes thinking or emits its first token. He proposes 100 ms as a target and 400 ms as a ceiling for that acknowledgment, applying Doherty's threshold as a design guideline rather than a validated AI-specific law. Echoing input, changing the control state, and showing meaningful progress can make the system's work understandable during the remaining wait. Cancellation and rollback must describe what can actually be stopped or undone, instead of offering reassuring controls with misleading behavior. Instrument acknowledgment separately from answer latency and assign ownership of both, so faster model streaming does not hide the unresponsive interval immediately after a user's action.
Accessible systems must describe more than their successful state. Deque's MCP App workflow tests the exact embedded artifact across loading, errors, cancellation, and changing host conditions, while TetraLogical carries colour-independent cues through component states. Make the usable behavior part of the system specification, then verify it with real interactions.
AI interface clarity depends on both visible feedback and the context behind it. Patrick Neeman separates immediate acknowledgment from answer latency, and Nielsen Norman Group separates durable rules from task-specific and ambient information. Neither a reassuring spinner nor an expanding pile of instructions proves that a system is understandable or reliable.
Design judgment remains explicit in the week's practical examples. Figma Weave connects references into a reusable campaign workflow, while MDS moves iteratively between purpose, principles, and personality. These are worked examples rather than measured user outcomes; use them to make decisions traceable, then validate the resulting copy, hierarchy, and controls with the people who use them.
Key Takeaways
Test the exact embedded interface through failure, cancellation, theme, and keyboard states.
Pair colour with other cues and measure acknowledgment separately from model answer latency.
Use explicit context and design references, then validate generated or redesigned outputs with real tasks.
