# Design

## Design The Wallet Crew Registration Form

#### Design Capacities of The Wallet Crew Registration Form

The Wallet Crew registration form is designed with flexibility and customizability in mind, utilizing the Material-UI (MUI) theming system. Below are the design elements and their customization options.

**Material-UI Theming System**

The application leverages the Material-UI theming system, allowing for comprehensive customization. For more details, refer to the [MUI Theming Documentation](https://mui.com/customization/theming/).

#### Logo

The logo can be customized to represent your brand identity. Ensure the logo fits well within the registration form’s layout and maintains visibility across different devices.

#### Colors

The color scheme is a crucial aspect of the registration form’s design. The following images illustrate the color options:

![Colors](https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fgit-blob-0adafdc6de3c5b7fe34a6fc19dabdbd8617e68c5%2Fdesign_1.png?alt=media)

![Colors (2)](https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fgit-blob-6122652f169acaa9918ac17dfae6841141edb0e0%2Fdesign_2.png?alt=media)

These color schemes can be adapted to match your brand’s palette using the MUI theming system.

#### Typography

Typography settings are configurable to ensure consistency with your brand’s visual identity. The following image illustrates the typography options:

![Typography](https://3566051324-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWLc8AHXW4tdrAXUBfrYF%2Fuploads%2Fgit-blob-928ecd758088d9f3a687fb5baeedc2aa76454f8b%2Fdesign_3.png?alt=media)

Adjust fonts, sizes, and weights through the MUI theming system to align with your brand guidelines.

#### Subtitle

The subtitle is an optional text field where you can offer an incentive or call to action for users to sign up. Examples include:

* Get 10% off
* Receive news from \[tenant name]
* Join now!

This field should be concise and compelling to encourage user registration.

#### Header Image

The header image enhances the visual appeal of the registration form. This image can be specified in two ways:

1. As a URL: `HeaderImageConfiguration.Url`
2. As a `HeaderImageConfiguration` object

The image is displayed using the following CSS properties:

* `background-size: cover`
* `height: 200px`

The width is responsive, adjusting to the device’s screen width with a minimum width of 280px and approximately 400px on modern smartphones. Additional styles can be applied using the `HeaderImageConfiguration.AdditionalStyles` property.

#### Theme Palette

The registration form supports both dark and light themes. Choose the theme that best aligns with your brand’s look and feel.

By customizing these elements, you can create a registration form that is visually appealing and consistent with your brand identity. For further customization, refer to the [MUI Theming Documentation](https://mui.com/customization/theming/).