Sign-in page

Style the sign-in page each app shows, beside a live preview of the real thing.

Every app has its own sign-in page, and you edit it on that app's Sign-in page screen. The controls sit beside a preview of the real page — the same component the platform renders, with this app's real sign-in options — so what you approve is what visitors get.

Settings belong to one app. There is no organisation-wide or global styling to inherit from or override; a new app starts from the defaults below and is changed only by editing that app.

Start from a preset

Four starting points, all built from the same palette:

Hover a preset — or move to it with the keyboard — to see it applied to the preview without committing. Move away and it reverts. Clicking one copies its values into the individual controls below, which you can then change freely.

A preset is not a thing the app remembers. Choosing one copies four values, and a preset shows as selected whenever the current four happen to match it. Change one of them and no preset is selected; change it back and the preset lights up again.

The controls

Colours. Three choices, all drawn from the DavidApps palette rather than entered as colour values, which is what keeps the page readable in both light and dark whatever you pick:

• Page — page colour or raised colour, filling the whole page.
• Panel behind the buttons — the same two choices, for the panel the sign-in options sit on.
• Mark beside the name — accent, strong, or quiet.

Layout.

• Alignment — left or centred.
• Button corners — a CSS length such as 0.5rem or 9999px.
• Movement when the page opens — fade in, rise, or no movement. Anyone who has asked their system for less movement sees none of it, whichever you pick.

Logo. A web address for an image, or empty for no logo. The image is fetched by the browser directly from the address you give.

Preview

The preview renders the app's real sign-in page at 390, 768, and 1280 pixels wide, showing the heading a visitor sees and the sign-in options the app actually has turned on. If it has none, the preview says so — and so does the real page, in the same words. The preview will not show you a Google button an app does not offer.

Saving

Nothing is saved until you press Save. While anything differs from what is stored, the screen says Unsaved changes and the browser asks before you leave the page. Discard changes puts every edited field back to the stored values — the four preset values, the button corners, the movement, and the logo address alike — and clears whatever the preview was showing.

Defaults and what happens to bad values

The defaults are the Notebook preset — page colour behind a raised panel, quiet mark, aligned left — with 0.5rem button corners and a fade in.

Stored styling is treated as untrusted every time it is read, field by field:

• An unrecognised colour or alignment falls back to the default for that field alone; the fields around it are kept.
• An unrecognised movement setting becomes no movement.
• Button corners that reduce to nothing after cleaning fall back to 0.5rem, so buttons never end up with an invalid corner.
• A logo address that is not http or https is dropped and the page renders without a logo.

The result is that a partially written or hand-edited value degrades to something that still reads correctly, rather than to a broken page.

Where this styling is used

An app's styling carries on the pages where a visitor is being asked something about that app: its sign-in page, and the consent page that says which app they are continuing to and as whom.

It does not carry on refusals or on the signed-out confirmation. Those use the platform's own styling on purpose. A page that refuses to say which app is involved cannot also wear that app's logo, and an outage is exactly the moment the app's stored styling may be the thing that could not be read.

Next

• Groups and access — who reaches the sign-in page at all.
• Protect an app — turning an app's sign-in on.