Auth page

The centred single-card motif: a sign-in form in a reading measure, vertically composed with the stack. The same card works for sign-up, reset, and 2FA steps.

Composed of: center · stack · cluster · card · field · button

Page source — the whole page is the snippet

html

<main class="center" data-measure="prose">
  <div class="stack" data-gap="lg">
    <h1>Sign in</h1>
    <div class="card card-body">
      <form class="stack" data-gap="md" action="#" method="post">
        <div class="form-field">
          <label class="form-label" for="bp-auth-email">Email<span class="form-required">*</span></label>
          <input class="form-input" id="bp-auth-email" type="email" required autocomplete="email" placeholder="you@company.com">
        </div>
        <div class="form-field">
          <label class="form-label" for="bp-auth-password">Password<span class="form-required">*</span></label>
          <input class="form-input" id="bp-auth-password" type="password" required autocomplete="current-password" aria-describedby="bp-auth-password-hint">
          <p class="form-hint" id="bp-auth-password-hint">At least 12 characters.</p>
        </div>
        <div class="cluster" data-justify="between"><button type="submit" class="button" data-variant="primary">Sign in</button><a class="link" href="#">Forgot password?</a></div>
      </form>
    </div>
  </div>
</main>

Agent Implementation Guidance

The card is the only surface; the page owns no chrome. The form reuses the form-* field triad (label / input / hint) — error states key off aria-invalid exactly as the field Hyperpart documents.