Efficient Design System Integration

[randelbrot]

The Problem:

The Home Unite Us application is designed to be used by numerous host home organizations, each with unique branding. Displaying the Home Unite Us application in the organization's branding is preferred as it is an important way to build trust with both Guests and Hosts.

Updating the application branding each time a new organization begins using HUU is tedious and time consuming.

This issue focuses on defining which elements and attributes will be customizable. A separate issue will track the mechanism that allows Admin Coordinators to set custom attributes.

High Level Approach:

Create a systematic approach to integrate organization branding into the Home Unite Us application.

Goals and Success

Success for this issue is if customizable attributes and elements are clearly defined and documented.

Solution Alignment

Considerations

• Any updates needed to the existing design system eg for spacing

Supported Elements and Attributes for Customization

• Primary color
• Secondary color
• Logo

Task List

• [ ] Establish a clear source of truth for the Home Unite Us design system, and include a link in this issue

Known limitations

• Only the elements and attributes listed above will be customizable (i.e., primary color, secondary color, logo), other attributes will be the same across customers in line with the HUU design system

Key Decisions

• In a future phase (not this issue), Coordinator Admin users should have the ability to assign and edit a primary color, secondary color, and logo

Notes

• MUI Theme Generator: https://bareynol.github.io/mui-theme-creator/

[randelbrot]

Hi @itzflowa, I created this issue as a follow up to the call earlier. I have outlined the problem above, but I have kept the Solution Alignment section a placeholder for now because I'm open to ideas! Let me know of any ideas you have for this one

[itzflowa]

Documenting our online discussion here.

Colors (primary and secondary) and logo will be fundamental to branding, and that is likely what we can offer. I think we should avoid typography because of the variability of it. There should be a designated user with this function. Within the Coordinator Admin dashboard's settings, there can be a section that allows for those customizations.

Let me know if I'm forgetting anything else.