Purpose
Arc is essential to consistency and delightful user experience across all WISE applications.
Meet Arc
Arc is a design system built to leverage the hard work and dedication that multiple Winsupply teams have input into their IT domains. The purpose is clear: educate and help others find, create, and clone components within the design system to save time, effort, and money.
Some of the parts of Arc include Design Guidelines, UI components, UX Patterns, UX Research templates, and existing applications that have been built to display these frameworks.
Arc is designed to be the spark of discoverability you need to find and use assets within our design system.
How to participate
Winsupply IT is made up of developers, designers, and product owners of all kinds. Your participation is what makes Arc possible as a sustainable, growing system.
There are many ways to participate:
– Suggesting a bug fix in our documentation or UI libraries, like a typo.
– Sharing ideas for process improvement in the Arc design system.
– Contributing by adding a new pattern, component, or UI kit.
– Contributing by documenting your application for others to see and compare.
Arc's parts
Arc provides a set of reusable components, icons, color, and typography resources and guidance for designers and teams to build high-quality applications.
Designer resources
The Arc UI kits are distributed through shared libraries in Figma and include all published components and foundational styles. Additional UI kits are available within each domain and can be accessed by requesting access to each library. Here in Arc, you can preview those libraries before requesting access.
Documentation
Documentation for each component, pattern and style includes design guidelines, do's and don'ts, considerations for accessibility and any necessary instructions for developers. You will find this documentation throughout the Arc website.
Design Tokens
At this time, design tokens are built into the Prime asset library. Developers can use this library to find what they need.
Components
Components use Prime's base theme to extend basic HTML elements and create reusable code for development teams. When used in your application, they will help ensure the UI remains consistent with WISE design standards. There are instances where the base component has variables in its design. To audit this please view the details of the components used to understand the flexibility and variables within.
Patterns
Patterns are common interfaces, behaviors, and flows that exist across the WISE ecosystem. They provide solutions to common design problems and a foundation for the building blocks of new applications. As new patterns are identified they will be documented in the pattern library within Arc. When there are inconsistencies in patterns we use Arc as an audit to address this across domains and suggest standardizations across teams. These patterns could range from the placement of buttons to how we handle enterprise search.
UI Kits
UI Kits are specific domain libraries that exist solely in Figma. We have captured them here for teams to preview but should be accessed via Figma. As a new component becomes standardized it can move into the component library and be available globally.
Creating with Arc
Arc should provide all of the core elements for creating consistent products and applications at Winsupply. At times, you may have specific use cases and find Arc doesn't offer the customization or elements to meet your requirements. That's normal – all design systems have limits to what they can support. They are not intended to understand business logic, domain-specific styling, or more complex UI elements. That doesn't mean you have to limit your ideas on what to create.
So, what next?
1. Reach out to the design system team: Contact Sarah McClellan (@sarahmcclellan) on Mattermost or via email (semcclellan@winsupplyinc.com). The issue will be evaluated and can help make changes in the system to better support YOU. This is the first and best option.
2. Design a new component. After talking with the design system team, we may find that Arc doesn't satisfy your requirements. At this stage, you may need to override Arc directly or replace elements with new ones.
Overriding Arc
If you feel you have a case for overriding Arc, check in with the design system team. They will guide you through considerations and risks.
There are many reasons why teams would need to deviate from Arc, however, identifying and documenting those will help build additional variables into the system. This results in maintained consistency and the creation of new components that can accommodate every team.
Examples:
– The base table component does not fit your team's needs.
– The color scheme needs adjusting to set your domain apart.
– The button bar placement isn't intuitive in your application.
– The component you need doesn't exist (yet).
All of these examples are reasons to get in touch with the Arc design system team so that we can collaborate with you and create solutions for everyone's needs.