This documentation is currently under development. Certain sections are not yet complete and will be added shortly.
Ctrlk
HomeDocumentationRessources
For the complete documentation index, see llms.txt. This page is also available as Markdown.
DesignLogoColorsTypoSubtitleHeader image

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.

The logo can be customized to represent the 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:

Colour settings for the registration form theme
Check that each configured colour maps to the intended form element.
Additional colour settings for the registration form theme
Verify the secondary and background colours against the brand palette.

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

Typography

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

Typography settings for the registration form
Confirm that font family, size, and weight match the brand guidelines.

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

Subtitle

The subtitle is an optional text field that can carry an incentive or a call to action encouraging customers to sign up. Examples include:

  • Get 10% off

  • Receive news from [tenant name]

  • Join now!

This field should be concise and compelling to encourage customer 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 the brand look and feel.

By customizing these elements, a brand manager can create a registration form that is visually appealing and consistent with the brand identity. For further customization, refer to the MUI Theming Documentation.