- **Epistemic status:** #seedlings For a [[Design Language System]] to be able to enforce consistency and cohesion across devices and web browsers, there needs to be a centralized hub of all the UI components. This library will help everybody in the organization scale best practices like responsiveness, accessibility, performance, UX, ergonomics, and so on helping users plug in the [[Design Language System]] reaping the rewards. When defining these different UI elements, make sure to avoid [[The division between designers and front-end developers]] since it can hurt the longevity and success of the [[Design Language System]]. When choosing tools to create this library, the following guidelines should help to pick one that works best for your team: - Allows for descriptions and annotations on components and interfaces - Displays a code snippet of the [[HTML (HyperText Markup Language)]], [[Cascading Style Sheets (CSS)]], or [[JavaScript]] for the relevant component. - Showcase variations of the component such as disabled and active buttons - Add dynamic content to the UI to be able to test the component use cases in the wild. - Provides contextual information on where a component is being used. The maintenance of the library will be an ongoing process, where over the application's lifecycle it should grow and not be considered a side project. For a smaller organization, the same users will be collaborating in this process. For bigger organizations, there might be a dedicated team in charge of building new and maintaining the existing library, while others are users. The team of maintainers must have an active, close working relationship with the users to make sure the needs of the applications are addressed. This team should be cross-disciplinary, for example UX designers, visual designers, content strategists, front-end developers, back-end developers, project managers, executives, etc. Each person will bring a unique perspective that will help shape the work. --- ## References - “Atomic Design by Brad Frost” Accessed May 3, 2022. <https://bradfrost.com/blog/post/atomic-web-design/>.