Case study 03 · Design systems · AI-ready
A design system that humans and AI agents can both follow
Defined the foundations, components and accessibility rules for Ciena's custom applications — then translated them into machine-readable instructions so AI design agents produce on-standard, accessible UI.
- Role
- Design-system architect
- Timeline
- 2023 – Present
- Platforms
- Responsive web · Custom enterprise apps
- Partners
- Core UX, engineering, product teams, application owners
Type
Aa
Color tokens
Data table · status
+ New request# DESIGN.md
- Status uses token.status.*, never raw hex
- Tables: sticky header, 44px rows, AA contrast
- 13
- foundation & component families documented
- WCAG
- accessibility expectations built into every pattern
- AI-ready
- DESIGN.md instructions consumed by design agents
Context
Each custom-app team was reinventing tables, forms and status states. The result: inconsistent experiences, duplicated effort, and accessibility gaps discovered late in audits.
The question
“How might we give every team one shared language — and make it usable by the AI tools they're beginning to design with?”
Approach
- 01
Set the principles
Defined principles grounded in research across the app portfolio: clarity over density, status you can trust, accessible by default.
- 02
Build the foundations
Typography, color, spacing and a responsive grid, expressed as tokens engineers can consume directly.
- 03
Design for data-dense work
Tables, inputs, actions, navigation, page headers, cards, modals and a unified status and feedback model for operational tools.
- 04
Write the rules down
Accessibility expectations and content conventions documented alongside every component, not in a separate PDF.
- 05
Make it agent-ready
Converted the system into DESIGN.md and instruction artifacts so AI design agents generate prototypes that already follow the standard.
Key insight
Design systems used to be written for people. Now the fastest-growing consumers are AI agents — and they follow instructions literally.
Design decisions
Data-dense first
Optimized for operational screens — tables, filters, statuses — rather than marketing pages.
Status is a system
One consistent model for success, warning, error and progress across every app.
Docs as instructions
Guidance written precisely enough that both a junior designer and an AI agent get the same result.
Outcome
The system now underpins new prototypes such as the AI Marketplace and FAST revamp work, giving teams a shared starting point. Next up: instrumenting component reuse, cycle time and accessibility conformance to prove the efficiency gains.