[feature] Front end design system

[DeanRTaylor1]

User Story

As a front-end developer, I want to implement a comprehensive design system and default layout for our React application so that the app has a consistent, modern, and user-friendly interface across all pages.

Acceptance Criteria

1. Front-End Implementation Steps

   • Step 1: Research and select a design system/framework that aligns with our app’s needs (consider Material-UI, Ant Design, or custom with Tailwind CSS).
   • Step 2: Set up the chosen design system in the React application.
   • Step 3: Develop a default layout component that includes a responsive navbar mounted to the left side.
   • Step 4: Ensure that the layout is responsive and adapts to different screen sizes.
   • Step 5: Implement a basic color scheme and typography that aligns with our brand guidelines.
   • Step 6: Create a set of reusable UI components (buttons, inputs, cards, etc.) based on the design system.
   • Step 7: Ensure accessibility standards are met in the design (color contrast, keyboard navigation, ARIA attributes).
   • Step 8: Review and finalize the design in a Pull Request (PR) before implementation, welcoming team input and ideas.

2. Back-End Implementation Steps

   • (Not applicable for this user story as it primarily focuses on front-end development.)

Is this feature request related to a problem?

Currently, our React application lacks any design implementation.

Proposed Solution

Implement a design system that provides a consistent set of design principles and reusable components. This system will guide the development of UI elements, ensuring cohesion and a better user experience.

Alternative Solutions

• Consider different design frameworks and compare their adaptability to our app's needs.
• Explore the possibility of building a custom design system if existing systems do not align with our specific requirements.

Additional Context

For inspiration and visual direction, the following design concepts can be referenced:

• Finance Dashboard UI Concept
• Analytics Dashboard
• Admin Dashboard Analytics UX
• Health App Concept

The final design must be responsive and open to team input, with a focus on usability and modern aesthetics.

[DeanRTaylor1]

Proposed Color Scheme

Light Mode

• Background (Primary): #FFFFFF (White)
• Text (Primary): #282828 (Dark Gray)
• Background (Secondary): #F3F4F6 (Gray-100)
• Text (Secondary): #282828 (Dark Gray)
• Button Hover Text (Inactive): #276EF1 (Blue)
• Button Hover Border (Inactive): #276EF1 (Blue)

Dark Mode

• Background (Primary): #282828 (Dark Gray)
• Text (Primary): #F5E8C7 (Off White)
• Background (Secondary): #454545 (Darker Gray)
• Text (Secondary): #F5E8C7 (Off White)
• Button Hover Text (Inactive): #F5E8C7 (Off White)
• Button Hover Border (Inactive): #F5E8C7 (Off White)

Common

• Primary Inverse Background: #C7D5F5 (Light Blue)
• Primary Inverse Text: #276EF1 (Blue)
• Primary Inverse Border: #276EF1 (Blue)
• Dark Mode Primary Inverse Text: #282828 (Dark Gray)
• Dark Mode Primary Inverse Border: #282828 (Dark Gray)

[DeanRTaylor1]

Done we will use a combination of custom components based upon the above colors as well as some Shoelace web components