Depth 14.2.1 · Product interfaces · Level 4
Design system in code
A design system in code is the set of tokens and components your product interfaces are built from, kept in a repository with tests, so a change to a colour or a button happens once and reaches every screen that uses it.
Specification
- Input
- Your current interfaces, any existing design files, and the components your team rebuilds most often.
- Method
- We extract the values actually in use into tokens, build the most repeated components first with keyboard and screen reader behaviour tested, and replace local copies screen by screen.
- Deliverable
- A component library with tokens, tests and usage notes, and a list of screens still using local copies.
- Measured by
- Screens built only from library components, and accessibility test failures in the library.
What the file contains
- Token set
- Tested components
- Usage notes
- Migration list by screen
Part of Product interfaces.
Ask about the design system in code
Tell us which systems it should cover. We reply with the access we would need and what the first version would contain.
Ask about this deliverable
A written reply, no call needed.