Login Page — Cayuse Design System

Examples

Login card

Cayuse

Sign in to continue

Email address

Password

Components

Component	Purpose
Login Card	The centred card: branding, fields, submit, recovery link.
Login Page	The full page — card plus background and footer.

This page is thin in the file, and the gaps are the interesting part

The Figma page contains the two components and a preview, with no annotations and no component descriptions. What it does not cover are the states a login flow actually has to handle: failed credentials, a locked account, SSO redirect, session expiry, multi-factor entry, and the “you were signed out” message.

Those states exist in the product whether or not they are designed. The guidance below is written from the rest of the system’s rules; it should be confirmed against what the product does, and the resulting states added to the Figma page.

Usage

When to use it

Use one <form> with a real submit button, so Enter works.
Set autocomplete="username" and autocomplete="current-password" so password managers work.
Show authentication failures as an error Banner Alert above the fields.
Keep the email address populated after a failed attempt.
Include the Footer — support links matter most to someone who cannot get in.

When not to use it

Do not show Product Navigation.
Do not say which of the email or password was wrong — it confirms which accounts exist.
Do not disable paste in the password field; it breaks password managers.
Do not clear the form after a failed attempt.

Accessibility

Both fields need visible, persistent labels. This is the single most common place placeholders get used as labels, and the worst place for it.
Authentication errors go in a role="alert" region, with focus moved to it so the failure is announced.
The page needs an <h1>, even if it is visually the brand lockup.
Where a “show password” toggle exists, it is a button with aria-pressed, not an icon-only div.