As we get more UI pages in HydroServer, it will become more important to have a design system we can reference so that every new page is consistent with the system. Vuetify establishes a set of tools we can use, but even those have so many options that two hand crafted Vuetify pages will come out looking like different websites.
- Write down no more than 3 fonts we'll use everywhere in HydroServer apps. These should be free and open source and highly readable for dense data tables. Commit them to @hydroserver/design-tokens as the single source of truth. Since the QC app is still in beta, just update the data management app with these fonts for now. Once the design is proven, we can loop back to the QC app in a future issue to apply the design system.
- Create @hydroserver/ui for shared primitives like submit buttons. Move components into this new directory. Update the data management app everywhere to use those components instead declaring bespoke components for each page.
- Go back and polish each Data Management App page to look consistent and professional.
As we get more UI pages in HydroServer, it will become more important to have a design system we can reference so that every new page is consistent with the system. Vuetify establishes a set of tools we can use, but even those have so many options that two hand crafted Vuetify pages will come out looking like different websites.