A design system built for AI to use, and for people to trust.
Ten layers of constraint, all enforced in code: accessibility, ethics, brand, motion, agent rules. Nothing merges until it clears all ten, so shipping at AI speed never costs you compliance, brand, or trust.
What ships today
Where to start
Four entry points into the Docs tab. Pick the one that matches what you're here for.
Already have BADS installed? Copy a prompt to get started
Paste any of these into Claude Code exactly as written. Each one interviews you for the specifics, so nothing needs filling in first.
I want to design a new feature for this product. Interview me one question at a time to understand what it is, who it is for, and the problem it solves. Do not assume the answers and do not start coding yet. Once you understand it, give me 3 to 5 distinct design directions described in words (no code), each anchored to a real product reference. Wait for me to pick one before you build. Use this project's design system for every token, type style, and component.
I want to add a new component to the design system. Interview me one question at a time about what it does, its variants, its states, and where it will be used. Then build it using the system's existing tokens and primitives, and create a matching Storybook story that covers every variant and state in the same change. Run the accessibility checks before you tell me it is done. Do not hardcode colors, sizes, or fonts.
I want to change the brand colors. Interview me one question at a time to find out which colors should change and what the new values are. Make the change at the design-token source, not in individual components, and regenerate anything that needs regenerating. Show me the contrast ratios so the result stays AAA accessible. Do not hardcode hex values in components.
I want to change the typography. Interview me one question at a time about which text should change (body, headings, or code) and what typeface I want. Wire the change through the font tokens so it applies everywhere consistently, and keep everything on the system's named type roles. Do not introduce new font weights or letter-spacing that are not already in the system.
I have a wireframe I want you to build. First ask me to share it. Before writing any code, inventory every element in it, map each one to an existing component in this design system, and tell me anything that does not map or that you plan to leave out, then wait for my OK. Build exactly what is drawn, nothing added and nothing dropped. Token every color, spacing, and type choice, and run the accessibility checks when you are done.
I have a high-fidelity mockup I want matched closely. First ask me to share the image or link. Then measure the things that matter off it (widths, proportions, padding, corner radius, type sizes, colors) and tell me what you measured before writing any code. Match those measurements using this design system's tokens and components, then show me the result side by side with the original.
I want to know whether a screen is ready to show stakeholders. Ask me which screen or route. Then critique it: check it for consistency against the rest of the product, view it in light and dark and any theme variants, run the accessibility checks, and give me a prioritized list of what to fix before the review. Be specific and honest. Do not just tell me it looks good.
I want to make sure a screen meets accessibility standards. Ask me which screen or route. Then audit it against WCAG AAA: color contrast, focus states, keyboard navigation, labels, and screen-reader support. Give me a prioritized list of the issues with the specific fix for each, then offer to make the fixes.