> For the complete documentation index, see [llms.txt](https://docs.thewalletcrew.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thewalletcrew.io/guides-enrolment/enrolment/enrolment-form/design.md).

# Design

Customize enrolment forms with brand logos, colors, typography, subtitles, and header images.

## 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 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:

<figure><img src="https://831874859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2FWEzc01bEh2FUD92PHta0%2Fenroll-design-colors.png?alt=media&#x26;token=02cdce27-6838-4106-8939-06705fac0f1c" alt="Colour settings for the registration form theme"><figcaption><p>Check that each configured colour maps to the intended form element.</p></figcaption></figure>

<figure><img src="https://831874859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2FKcuycQexm5r2BDJI19ge%2Fenroll-design-colors-2.png?alt=media&#x26;token=599c4f27-9849-42e2-8a92-a1f03ef47f46" alt="Additional colour settings for the registration form theme"><figcaption><p>Verify the secondary and background colours against the brand palette.</p></figcaption></figure>

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:

<figure><img src="https://831874859-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlFokgwgJiwLXu7G8MVSJ%2Fuploads%2FDszSEFZzZV8ttG0L76Wu%2Fenroll-design-typography.png?alt=media&#x26;token=33fc187b-fd0a-4f8a-b564-43360746efcd" alt="Typography settings for the registration form"><figcaption><p>Confirm that font family, size, and weight match the brand guidelines.</p></figcaption></figure>

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](https://mui.com/customization/theming/).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.thewalletcrew.io/guides-enrolment/enrolment/enrolment-form/design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.