Our challege was define the visual style, modularity, rejection and adoption in addition to the governance model, updating and contributions.
To achieve this goal, we created foundations based on the brand, previously defined by the marketing team. We also created the components with variations, formats, and states. Applying all good practices in the creation of a scalable design system with pixel perfect.
Here’s a brief sample of the documentation we developed with all the rules for using the components, variants, states, and other elements of the Design System. We also involved the IT team in defining tokens, topologies, and nomenclatures, guaranteeing correct implementation.
We also included an Accessibility section in the documentation, providing guidance on usage, software development, and design patterns to support inclusive experiences. It covers various user types, assistive technologies, high contrast, ARIA, screen readers, among others. Writing without barriers, correct application of color and possible combinations, reading order and good development practices.
