Starting point
For the design system, the team and I decided it would be best to adopt an existing design system due to the push for a quick-turnaround. After some research, it was agreed that we would use Vuetify as our base. To customize this base, we implemented a theme sheet
Design system
Defining styles
Developing a theme sheet
This theme sheet contained typography, colors, appearance variables, along with many other customizable details. In developing this theme sheet, a Figma library filled with primitives and components was established
Specific needs
Expanding for custom components
While the now customized Vuetify design system had many features, time was spent creating custom components specific to Studio products such as an action panel, text editors for standardized medical materials, and controls for the Story framework
