Open practice / DesignA11y Design System

Designed for people.
Defined for AI.

A design system that carries inclusive intent into the instructions people and AI build from.

Explore the system

In development · Figma Community release planned

The idea / Intent that travels

More than a component library.

A component can show how something looks. It also needs to explain what it means, how it behaves, and what happens when someone uses a keyboard, enlarges text, or prefers less motion.

We’re building those decisions into DesignA11y’s foundations, components, Figma Specs and versioned contracts. Clear enough for people to review. Structured enough for agents to retrieve and apply.

A reference in progress, built for the real work of inclusive design and AI.

Adapt the system to your brand

01 / Foundations

Decisions with a purpose.

  • Color has a job.

    Petal is a surface. Aubergine carries text. Accent colors add expression. Semantic tokens name their purpose, and approved pairings explain where they can be used.

    AubergineBlushRoseCopperPetal

    A palette is not a contrast guarantee. Check the actual foreground, background and state.

  • Focus is intentional.

    Our square focus indicator uses three bands: Aubergine, a pearl treatment, and Aubergine. It stays still, has room around it, and has a system-color fallback.

    Read the focus and action Spec

    Use Tab to see the focus treatment on the links on this page.

  • Expression has a sensory role.

    Tactile surfaces, the frame and the seam connect the system to DesignA11y’s identity. Surface materials can vary. Their purpose, intensity and quiet reading zones need to be intentional.

    Microinteractions support an action or explain a change. They are finite, restrained and paired with a complete static alternative.

    Read about the DesignA11y brand

02 / Four connected sources

Carry the intent through.

The workflow connects shared requirements with product decisions, implemented components and evidence. Each source has a different job.

  1. 01 / Shared requirements

    The AI A11y Toolkit

    Full accessibility guidance for the task at hand: semantics, keyboard access, names, contrast, reflow, motion and testing.

  2. 02 / Product decisions

    Design-system Specs

    Purpose, anatomy, tokens, states, content and behavior. Specific requirements an agent can retrieve and a reviewer can check.

  3. 03 / What people use

    Implemented components

    Reuse the actual implementation where one exists. A Figma drawing does not provide keyboard behavior or screen-reader semantics.

  4. 04 / What we know

    Validation evidence

    Record what loaded, what was tested, what failed and what still needs human evaluation. Feed discoveries back into the system.

Read the article behind this workflow

03 / Testing in practice

This page is part of the test.

We’re using the system to build its own resource page. The question is whether the documented decisions survive retrieval and implementation in a real site.

  • Retrieve the requirements.

    Read the foundational Spec, relevant component contracts and full toolkit references. Record the versions and flag missing decisions.

  • Build from the system.

    Use the editorial hierarchy, semantic palette, focus treatment and responsive patterns. Keep the site’s established typography and shared navigation.

  • Test the implementation.

    Check the rendered page, keyboard paths, contrast, targets and reflow. Record automated findings separately from human and assistive-technology review.

  • Improve what the test exposes.

    Correct the page and update the relevant Spec or contract. One successful page would be useful evidence, not proof that every component or workflow works.

This is a practical case study. It does not establish that Specs outperform a condensed skill; that requires a controlled comparison using the same tasks and evaluation criteria.

Read the workflow validation report

04 / Explore the work

Start with the source.

05 / Build status

Open about what’s open.

Working status · October 18, 2026

In the working system

  • Brand identity and sensory surface guidance.
  • Color, typography and layout foundations.
  • Reusable component and responsive pattern drafts.
  • Native Figma Specs and GitHub contracts.
  • Microinteraction guidance and static alternatives.

Still to validate

  • Component behavior in production code.
  • Theme, reflow and content edge cases.
  • Keyboard and assistive-technology use.
  • Reliable agent retrieval and application.
  • Figma Community duplication and release.

Public Specs, contracts and adaptation guidance are available on GitHub. The Figma Community reference is still planned. Using the system does not make a product accessible; implementation and evaluation remain essential.

Built by Dana Randall through DesignA11y. An ongoing exploration of inclusive design, accessibility and working with AI.

Share feedback on the system