Design 🤝 Development
Designers and Software Engineers have a single source of truth through the combination of mockups, styles, and components. I worked directly with the developers first at the component level and then at the page level. This made it easier for both designers and developers as we continued building out pages by using shared components and sections.
Foundations
These are the base elements that support the development of the visual elements of the system. This includes Color, Typography, Spacing & Layout, and Iconography. The foundational tokens are used to build out individual components or as references to semantic tokens that make it easier to maintain consistency and scalability.
Colors
We found that it would be more feasible for our team to manage a base set of colors without attributing any semantic meaning and only adding another layer of semantic usage if we found clear patterns. They were named to be conventional and flexible to the color the developer or designing may be thinking of. We could leverage TailwindCSS' conventions but set them to shades and tints that are on brand for Avery.
Typography
We utilize type styles and sizes based on usage and breakpoint. What we call it in Figma is what developers also have them implemented as. At scale, we are able to make changes quickly on the specific class being used along with semantically updating color, size, font family, all in one place that can permeate into anywhere they are being used.
Components
Components serve as the reusable building blocks for our design system. Each component is built using typographic and color variables where applicable. These are a few snippets from the system.
