Starting point

Adopting > building from scratch

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.

Starting point

Adopting > building from scratch

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

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.

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.

Impact

Consistency across products

This design system was used across all Studio projects providing a cohesive visual and user experience.

Components
Components
Typography
Typography
Effects
Effects
Colors
Colors
Back to the project
Back to the project