Branding

Making every screen look like your product.

Set your brand once in the console, under Customisation, or override any of it from code with appearance. It applies everywhere your users see us: the SDK components, the hosted pages, and every authentication email.

What you set

A logo. An https URL you host, so you can change it without us. A wide mark works better than a square icon: it sits above the form at a fixed height, so a tall logo shrinks to nothing.

One accent colour. Not a palette. Hover, active and disabled states are derived from it, and contrast is our problem to solve rather than yours to guess at.

A radius, a font and a colour scheme.

Contrast is handled for you

Your accent is adjusted server-side so it stays legible on both light and dark surfaces, and the corrected values are what every surface paints. A colour that is beautiful on white can be invisible on near-black; a single stored hex would make one of the two unreadable.

The text on your accent is chosen the same way, so a pale yellow brand gets dark text on its buttons rather than white.

Your name under the logo

By default your app’s name prints under your logo. If your logo is already a wordmark, turn that off, or your name appears twice.

With no logo the name always shows: it is then the whole identity, and a card with no identity at all is worse than either.

Customisation → Show your name under the logo.

Hiding the logo and name entirely

If your own page already shows your logo above where you mount <SignIn />, the component shows it a second time. Turn the whole block off:

Customisation → Show your logo and name above the form.

The form, the social buttons and the badge stay exactly as they were. Only the logo and name above them go.

Where the form sits

Customisation → Layout offers three shapes: one centered card, or a split screen with the form on the left or on the right. Centered is the default.

Choose a split and a panel appears beside the form. Make it a gradient, a solid colour, or an uploaded banner, then put a heading and a line of text on it from the same page. Sign-in and sign-up both use the setting, and the reset and verification steps inherit it. Developers can replace that panel with their own markup through the aside prop; see the React SDK.

The panel is hidden on phones so the form gets the whole screen.

The words above the form

The heading and description on the sign-in and sign-up boxes are yours to write, under Customisation → Wording. Leave a title empty and ours is used (Sign in, Create your account). Write your own for different phrasing, a different tone, or a language we do not ship.

The description is empty by default and shows nothing. Type one and it appears under the title; clear it and it goes away again.

To remove a heading entirely, turn off Show the sign in title. A title has a default, so clearing the box cannot mean “hide it”; the switch is how you say that. A description needs no switch, because an empty one already means none.

The preview beside these fields reads the same values your users will, so what you see there is what the component renders.

The ZevAuth badge

“Secured by ZevAuth” appears under every card. Removing it is a paid feature, and the decision is made on the server. A client cannot turn it off.

Development always shows it, on every plan, so you never design against a screen production will not give you.

Updated at, Wednesday, October 21, 2026