Styles
Styles let you override a set of style properties in your template, such as logo, background, typography, card, buttons, and inputs, without changing every screen across the template. One change to a style applies everywhere the property is used, which gives you flexibility and control with less effort.
Customizing the look and feel
A single template can support more than one appearance by holding more than one style set. For example, Acme serves both a summer and a winter login experience from one template:
- Create two style sets in the template, named
summerandwinter. - Configure the colors, logo, and background in each set to match the summer and winter looks.
- Mark one set as the Default so it applies when no style is requested.
- Load a specific set with the
s=parameter, for example?s=summeror?s=winter, on the Custom Domain or the Default Hosted Domain. - The same template now serves both themes, so you do not maintain two separate templates.
Creating a style in the Admin Console
Styles are created and edited visually in the template editor, with no code required.
- Open your template in Branding → Auth Studio. The Styles panel is on the left, with the live preview in the center and the Style Editor on the right.
- Click Add Styles to create a new style set. To start from an existing look, duplicate a style set and adjust it, which is useful for testing variations or building a dark variant.
- Use the Preview dropdown to choose which screen you're styling (Login, Registration, and so on), and toggle Light / Dark to edit each theme variant independently.
- Expand a property group in the Style Editor and adjust its values. Groups map to the areas of the login box: Logo, Background, Typography, Card, Buttons, Inputs, Links, Social, and Footer.
- Mark one style set as Default, which is the style applied when the template is deployed.
- Use Try to preview the live experience, then Deploy Template to publish.
You can pass a specific style to a Custom Domain or the Default Hosted Domain using the s= query parameter, for example ?s=summer or ?s=winter. The value is the name of a style set in the template.
Properties
Properties are grouped by the area of the login box they affect. Background can style the entire page, and everything else targets the login box.
| Group | Controls |
|---|---|
| Logo | Show or hide the logo, and set the logo URL. |
| Background | Page background: Solid color, Gradient (color stops and angle), or Image. |
| Typography | Font family, text alignment, and header / subheader font size and weight. |
| Card | Background, text colors, width, padding, border radius, border width, and box shadow. |
| Buttons | Primary and secondary button background, text, border, radius, and shadow. |
| Inputs | Input background, text, and border colors. |
| Links | Link text color and font weight. |
| Social | Social button layout, colors, radius, shadow, and icon-only mode. |
| Footer | Footer background, text color, and top border. |
Apply styles in code
Every style property is also exposed as a CSS variable, so you can extend the look with your own CSS and HTML in the page code and keep custom elements consistent with the login box. This is covered on the Pages page, along with the full CSS variable reference.
See Apply styles in code and CSS variables on the Pages page.
Best Practices
- Keep one strong Default style and use duplicates for experiments.
- Favor variables over hard-coded values for maintainability.
- Validate contrast and readability across desktop and mobile.
- Preview changes in the editor before publishing.