> **Building with AI coding agents?** If you're using an AI coding agent, install the official Scalekit plugin. It gives your agent full awareness of the Scalekit API — reducing hallucinations and enabling faster, more accurate code generation.
>
> - **Claude Code**: `/plugin marketplace add scalekit-inc/claude-code-authstack` then `/plugin install <auth-type>@scalekit-auth-stack`
> - **GitHub Copilot CLI**: `copilot plugin marketplace add scalekit-inc/github-copilot-authstack` then `copilot plugin install <auth-type>@scalekit-auth-stack`
> - **Codex**: run the bash installer, restart, then open Plugin Directory and enable `<auth-type>`
> - **Skills CLI** (Windsurf, Cline, 40+ agents): `npx skills add scalekit-inc/skills --list` then `--skill <skill-name>`
>
> `<auth-type>` / `<skill-name>`: `agent-auth`, `full-stack-auth`, `mcp-auth`, `modular-sso`, `modular-scim` — [Full setup guide](https://docs.scalekit.com/dev-kit/build-with-ai/)

---

# Brand your login page

A sign up or a login page is the first interaction your users have with your application. It's important to create a consistent and branded experience for your users. In this guide, we'll show you how to customize the Scalekit-hosted login page to match your brand.

## Access branding settings

Navigate to **Customization** > **Branding** in your Scalekit dashboard.

![](@/assets/docs/login-page-branding/login.png)

## Available customization options

| Setting | Description | Options |
|---------|-------------|---------|
| **Logo** | Upload your company logo for the sign-in box | Any image file or URL |
| **Favicon** | Set a custom favicon for the browser tab | Any image file or URL |
| **Border Radius** | Adjust the roundness of the login box corners | Small, Medium, Large |
| **Logo Position** | Choose where your logo appears | Inside or outside the login box |
| **Logo Alignment** | Align your logo horizontally | Left, Center, Right |
| **Header Text Alignment** | Align the main header text | Left, Center, Right |
| **Social Login Placement** | Control positioning of social login buttons | Various placement options |
| **Background Color** | Set the background color of the login page | Color picker selection |
| **Background Style** | Style the page background using CSS shorthand properties | Supports image, position, size, repeat, origin, clip, and attachment |

## Background Style configuration

The Background Style setting allows you to fully customize your login page background using CSS shorthand properties. This powerful feature gives you complete control over how your background appears.

### Understanding CSS background shorthand

CSS background shorthand combines multiple background properties into a single declaration. Instead of setting each property separately, you can define them all at once.

```css wrap showLineNumbers=false
background: [background-color] [background-image] [background-position] [background-size] [background-repeat] [background-origin] [background-clip] [background-attachment];
```

[Learn more on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background)

| Use case | Background Style value | Description |
|----------|---------|-------------|
| Background image | `url('https://example.com/your-image.jpg') center center/cover no-repeat` | Sets a background image that covers the entire page |
| Position and repeat | `url('https://example.com/pattern.png') top left repeat` | Creates a tiled pattern with specific positioning |
| Gradient | `linear-gradient(135deg, #4568DC, #B06AB3)` | Creates a smooth gradient transition between colors |
| Image with fallback | `#f5f5f5 url('https://example.com/image.jpg') center center/cover no-repeat` | Uses a background color that shows if the image fails to load |

<Aside title="Tips for best results" type="tip">

- Test your background style on different screen sizes to ensure it looks good on all devices
- Use high-quality images that won't pixelate when scaled
- Consider your brand colors and overall design when selecting backgrounds
- For text readability, avoid backgrounds with high contrast patterns where text will appear

</Aside>

---

## More Scalekit documentation

| Resource | What it contains | When to use it |
|----------|-----------------|----------------|
| [/llms.txt](/llms.txt) | Structured index with routing hints per product area | Start here — find which documentation set covers your topic before loading full content |
| [/llms-full.txt](/llms-full.txt) | Complete documentation for all Scalekit products in one file | Use when you need exhaustive context across multiple products or when the topic spans several areas |
| [sitemap-0.xml](https://docs.scalekit.com/sitemap-0.xml) | Full URL list of every documentation page | Use to discover specific page URLs you can fetch for targeted, page-level answers |