What it is made of

GdAuthShell — the recessed page, the mark, the lit card, the fine-print footer
GdLogo — drawn by the shell, at 28px with the wordmark and an optional product sub-brand
GdField + GdInput — the email step
GdOtpInput — the six-digit verify step
GdButton block, plus a ghost “Use a different email”

The block

GRIDD

Sign in

No passwords. We'll email you a six-digit code.

Email

Live — send yourself through it. The card grows between the two steps and does not move. This is the real shell, so the specimen brings its own main and its own h1 into a page that already has both: what documenting a page template on a page costs.

Code

<GdAuthShell title="Check your email">
  <template #sub>A six-digit code is on its way to <strong>{{ email }}</strong>.</template>

  <GdOtpInput v-model="code" @complete="verify" />
  <GdButton variant="primary" block :disabled="code.length < 6">Sign in</GdButton>

  <template #fine>Invite-only during the pilot.</template>
</GdAuthShell>

The same door, another product

GRIDDCode

You've been invited

Jordan Teal added you to the Riverton City workspace.

A sub-brand beside the wordmark, and the fine print outside the card.

Code

<GdAuthShell product="Code" title="You have been invited" sub="Jordan Teal added you to Riverton City.">
  <GdButton variant="primary" block>Accept and sign in</GdButton>
  <template #fine>The invitation expires in seven days.</template>
</GdAuthShell>

Rules

Always pass title. It is required, and it is what the door is asking for: “Sign in”, “Check your email”, “You've been invited”.
Use the sub PROP for a plain sentence and the slot of the same name when it carries markup. On the verify step it always does — the address the code went to.
Put terms and pilot conditions in #fine, outside the card. They are true of the product, not part of the thing being asked for.
Add no bar, no breadcrumb, no home link. The mark says which product is asking and goes nowhere.
Keep the card top-aligned. Do not centre it vertically, and do not set a height on it.
Slot each app's own auth into the card. What is shared is the frame, the rhythm and the type scale — which is all a user perceives.

Behavior & Anatomy

No chrome, and the brand is furniture. A bar across the top offers exits that mostly bounce straight back off the auth wall. The mark says which product is asking and goes nowhere — GdLogo has no link of its own, so that is a property of the mark rather than a prop to remember.
A recessed page, one lit card. The page is --gd-surface-page and the card is raised on --gd-surface, so the card is the only lit thing on screen. A bordered card on the same white as the page reads as a form on a document rather than as a destination.
Top-aligned, not vertically centred. Email, then code, then sooner or later an error: the card grows between steps, and a centred card slides up and down as it does. That drift is the most common auth-page tell there is.

Why the specimen is the shell and not a re-composition

GdAuthShell IS the pattern, so the specimen is the shell rather than a logo, a card and a form arranged to look like one. A docs page holding its own copy of something the system ships is the copy that drifts, and it drifts silently, because nothing renders both versions side by side.

Sign-in