> For the complete documentation index, see [llms.txt](https://docs.appmysite.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.appmysite.com/app/access/login/design-login-screen.md).

# Design login screen

### How to design the login screen?

Designing the native login screen on AppMySite can be divided broadly into three steps: designing the background, social login button and theme. Let’s take a look at designing your onboarding screens:

{% embed url="<https://scribehow.com/shared/Design_login_screen__2J1NxI-USUW8EmWZvfJ3Kg>" %}

#### Step 1: Navigate to login screen

* Navigate to [**Access < Login**](https://app.appmysite.com/app/login) from your app dashboard.&#x20;

#### Step 2: Set the layout

* Select the layout for the placement of elements on the login screen: top, centre or bottom

#### Step 3: Customise the background&#x20;

Expand the background section and click on Upload to set up a background image for your login screen. Customise your login screen using the following design options:

* Choose an image from the in-built image stock library by simply searching for it.
* Upload your own design by clicking on the “Upload” button. Click anywhere on the Upload media pop up to upload an image from your device. You can also drag and drop the image file.
* Use the link option to enter a web link to upload an image.
* Click on the “Create” button to design the login screen. You can design your login screen on a blank canvas using templates, uploads, photos, texts, and background images, all from scratch.&#x20;

{% hint style="warning" %}
Make sure the image file meets the required specifications.

* File format: PNG, JPG
* File size: 1242 x 2208 px
  {% endhint %}

#### Step 4: Customise button appearance

Customise the appearance of the social login button here. Choose the desired shape of your social login button.&#x20;

* Stack buttons: Display social login options vertically (one above the other) rather than horizontally (side by side).
* Button shape: Choose the desired shape for your social login buttons from circle, square, rectangle or squircle.

#### Step 5: Select the color theme

Follow the steps below to choose the color of the fields and buttons of the login, signup, and forgot password screens.

Primary Text Color

* Choose the primary color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Secondary Text Color

* Choose the secondary color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Button Background Color

* Choose a button background color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Button Text Color

* Choose a button text color from the color panel.
* Alternatively, enter a hex code or RGB values to select a specific color.

Click on **SAVE** when you’ve selected the color for your onboarding screens.&#x20;

{% hint style="success" %}
Preview the design on the demo app or the [**Preview emulator.** ](/app/preview.md)
{% endhint %}

{% content-ref url="/pages/3WKbCOc4JzzksI716ov1" %}
[Preview app](/app/preview/preview-app.md)
{% endcontent-ref %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.appmysite.com/app/access/login/design-login-screen.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.