Sign in to continue.

By continuing you agree to our Terms and Privacy Policy.
Set in Fraunces 96/96 SOFT 30, Geist Sans 14/21, Geist Mono 13/19. Composed in TypeScript 6. Pressed onto Tailwind v4. First impression May 2nd, 2026.
Plate № 002 · centered-signin.tsx
"use client";

import { useState } from "react";
import { Eye, EyeOff } from "lucide-react";
import { GithubIcon } from "@/components/_kit/icons";
import { cn } from "@/lib/cn";

export default function CenteredSignin() {
  const [showPw, setShowPw] = useState(false);

  return (
    <div className="grid h-full w-full place-items-center bg-[var(--color-bg)] px-4 py-10">
      <div className="w-full max-w-[380px]">
        {/* Wordmark — small, restrained. Matches app-shell brand mark. */}
        <div className="mb-10 flex items-center gap-2">
          <span
            aria-hidden
            className="grid h-7 w-7 place-items-center rounded-[var(--radius-xs)] bg-[var(--color-bg)] ring-1 ring-[var(--color-border-strong)]"
          >
            <span
              className="font-display text-[16px] italic leading-none text-[var(--color-text)]"
              style={{ fontVariationSettings: '"opsz" 24, "SOFT" 30' }}
            >
              S
            </span>
          </span>
          <span
            className="font-display text-[15px] italic leading-none text-[var(--color-text)]"
            style={{ fontVariationSettings: '"opsz" 24, "SOFT" 30' }}
          >
            stipple
            <span className="text-[var(--color-text-muted)]">.lab</span>
          </span>
        </div>

        <h1
          className="font-display text-[26px] leading-tight tracking-[-0.022em] text-[var(--color-text)]"
          style={{ fontVariationSettings: '"opsz" 36, "SOFT" 30' }}
        >
          Sign in to continue.
        </h1>
        <p className="mt-1.5 text-xs text-[var(--color-text-muted)]">
          New here?{" "}
          <a href="#" className="link text-[var(--color-text)]">
            Create an account
          </a>
          .
        </p>

        <form className="mt-8 space-y-3">
          <Field label="Work email" htmlFor="email">
            <input
              id="email"
              name="email"
              type="email"
              autoComplete="email"
              placeholder="you@company.com"
              className="h-9 w-full rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 text-sm placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-border-strong)] focus:outline-none"
            />
          </Field>

          <Field
            label="Password"
            htmlFor="password"
            aside={
              <a href="#" className="link text-[var(--color-text-muted)]">
                Forgot?
              </a>
            }
          >
            <div className="relative">
              <input
                id="password"
                name="password"
                type={showPw ? "text" : "password"}
                autoComplete="current-password"
                placeholder="••••••••"
                className="h-9 w-full rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 pr-9 text-sm placeholder:text-[var(--color-text-muted)] focus:border-[var(--color-border-strong)] focus:outline-none"
              />
              <button
                type="button"
                onClick={() => setShowPw((s) => !s)}
                aria-label={showPw ? "Hide password" : "Show password"}
                className="absolute right-1 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-[var(--radius-xs)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-text)]"
              >
                {showPw ? <EyeOff size={13} strokeWidth={1.6} /> : <Eye size={13} strokeWidth={1.6} />}
              </button>
            </div>
          </Field>

          <button
            type="submit"
            className={cn(
              "mt-2 inline-flex h-9 w-full items-center justify-center rounded-[var(--radius-sm)] text-sm font-medium",
              "bg-[var(--color-accent)] text-[var(--color-accent-fg)]",
              "border border-[color-mix(in_oklch,var(--color-accent)_70%,#000_8%)]",
              "hover:border-[color-mix(in_oklch,var(--color-accent)_60%,#000_18%)]",
              "active:translate-y-px",
            )}
          >
            Continue
          </button>
        </form>

        <div className="my-6 flex items-center gap-3 text-[10px] uppercase tracking-[0.12em] text-[var(--color-text-muted)]">
          <span className="h-px flex-1 bg-[var(--color-border)]" />
          or
          <span className="h-px flex-1 bg-[var(--color-border)]" />
        </div>

        <button
          type="button"
          className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-surface)] text-sm hover:border-[var(--color-border-strong)]"
        >
          <GithubIcon size={14} />
          Continue with GitHub
        </button>

        <p className="mt-8 text-center text-[11px] text-[var(--color-text-muted)]">
          By continuing you agree to our{" "}
          <a href="#" className="link">
            Terms
          </a>{" "}
          and{" "}
          <a href="#" className="link">
            Privacy Policy
          </a>
          .
        </p>
      </div>
    </div>
  );
}

function Field({
  label,
  htmlFor,
  aside,
  children,
}: {
  label: string;
  htmlFor: string;
  aside?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div>
      <div className="mb-1.5 flex items-center justify-between text-[11px]">
        <label htmlFor={htmlFor} className="font-medium text-[var(--color-text)]">
          {label}
        </label>
        {aside ? <span>{aside}</span> : null}
      </div>
      {children}
    </div>
  );
}