Virginia Design System
The novel vision for Virginia.gov and future innovation required the foundation of a new and ever evolving design system. I created the Virginia Design system in tandem with the Virginia.gov website in an effort to create a modular, cohesive, and easily updatable design language for the Commonwealth of Virginia.
A full-featured framework
The Virginia Design System is a framework of specific design elements as well as basic style guidelines for creating consistent and accessible experiences. Components such as grids, forms, and image features are defined using HTML and SASS. Guidelines for typography and colors keeps things looking consistent across state websites.
Working in the public space for many years, accessibility and usability are paramount to my design methods. I designed and developed the Virginia Design System to exceed accessibility standards and meet section 508 requirements to help developers and users alike in the state of Virginia.
Additional functionality is added through optional vanilla Javascript plugins for mobile navigations, dropdowns, and other UI elements. A custom SVG icon system was created in SASS to write inline SVG spritesheets as icons directly in compiled CSS.
Documentation
The whole of the design system is documented and demonstrated on an internal style-guide dashboard. Code examples and use cases help to inform other developers on best practices. The Virginia Design System was created with evolution and change in mind. The living style guide that I created was made to adapt and change alongside the changing needs of users.
Coded from the ground up, the system that I created was built with both developers and users in mind. Everything was created to be easy to adapt and use in a variety of situations to enhance usability and push the goals of digital government forward.
Â