Sign in^page

Email and password, a way back in, one alternative and the way to sign up.

Pages

Preview: /preview/sign-in
Guidance: draft · v0.1.0

Preview

The real page, full screen, in a frame. Switch width here and mode at the foot of the side nav.

Open full screen

Guidance

Rules

Ask only for what's needed: email and password, or email alone for a magic link.
Labels above fields; autoComplete="email" and current-password so password managers fill them.
Forgot password? sits by the password label, where people look when they're stuck.
One primary button, Sign in. Alternatives (Google, a magic link) are outline buttons below a divider.
Errors don't say which half was wrong: That email and password don't match. Try again or reset your password.
Don't disable the button while fields are empty – let it show what's missing.

Layout

One column, max-w-site-xs. A brand panel can sit beside it from lg; on a phone the form is the whole screen.
The page has one main and one h1.

Built from

Form layout

Code

Copy it into a product and change the words; the layout and tokens carry over.

app/preview/sign-in/page.tsx

import Link from "next/link"
import { Text } from "@/registry/jsp/text"
import { Button } from "@/registry/ui/button"
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSeparator } from "@/registry/ui/field"
import { Input } from "@/registry/ui/input"

export const metadata = { title: "Sign in preview – jsp-ds" }

/**
 * Sign in: email and password, a way back in if the password is forgotten, one alternative (a Google account)
 * and the way to sign up. The brand panel only shows from lg; on a phone the form is the whole screen.
 */
export default function SignInPage() {
  return (
    <div className="grid min-h-dvh grid-cols-1 lg:grid-cols-2">
      <div className="flex flex-col gap-layout-md p-component-xl md:p-layout-md">
        <Link href="#" className="flex items-center gap-component-xs self-start rounded-control focus-visible:outline-2 focus-visible:outline-focus-ring">
          <span aria-hidden className="flex size-control-sm items-center justify-center rounded-control bg-surface-inverse text-text-inverse">
            <span className="ds-text-label">R</span>
          </span>
          <Text as="span" textStyle="label">
            Review Hub
          </Text>
        </Link>

        <main className="flex flex-1 items-center justify-center">
          <div className="flex w-full max-w-site-xs flex-col gap-layout-sm">
            <div className="flex flex-col gap-component-xs">
              <Text as="h1" textStyle="heading-2">
                Sign in
              </Text>
              <Text color="subtle">Welcome back. Sign in to see your reviews.</Text>
            </div>

            <form className="flex flex-col gap-component-lg" action="#">
              <FieldGroup>
                <Field>
                  <FieldLabel htmlFor="sign-in-email">Email</FieldLabel>
                  <Input id="sign-in-email" type="email" autoComplete="email" required />
                </Field>
                <Field>
                  <div className="flex items-center justify-between gap-component-sm">
                    <FieldLabel htmlFor="sign-in-password">Password</FieldLabel>
                    <Text asChild textStyle="body-sm">
                      <Link href="#" className="underline underline-offset-4 hover:text-text-subtle">
                        Forgot password?
                      </Link>
                    </Text>
                  </div>
                  <Input id="sign-in-password" type="password" autoComplete="current-password" required />
                </Field>
              </FieldGroup>
              <Button type="submit" className="w-full">
                Sign in
              </Button>
            </form>

            <FieldSeparator>or</FieldSeparator>

            <Button variant="outline" className="w-full">
              Continue with Google
            </Button>

            <FieldDescription className="text-center">
              New to Review Hub?{" "}
              <Link href="#" className="underline underline-offset-4">
                Create an account
              </Link>
            </FieldDescription>
          </div>
        </main>

        <Text textStyle="caption" color="subtle">
          By signing in you agree to the terms and privacy notice.
        </Text>
      </div>

      <aside data-mode="dark" className="hidden flex-col justify-end gap-component-lg bg-surface-page p-layout-md text-text-default lg:flex" aria-label="About Review Hub">
        <Text textStyle="heading-3" className="max-w-site-sm">
          &ldquo;Sign-off went from three weeks of email to two days in one place.&rdquo;
        </Text>
        <Text color="subtle">Product lead, a Review Hub client</Text>
      </aside>
    </div>
  )
}