Articles in this section
Category / Section

Design Neostore Registration Form

Published:
Updated:

Design Capacities of the Neostore Registration Form

The Neostore 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.

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:

Untitled (50).png

Untitled (51).png

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:

Untitled (52).png

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.

Access denied
Access denied