v1.0.0

Auth

Sign in, sign up, and password reset page layouts for authentication flows.

Sign In

Minimal centered sign-in form with email and password.

html
Veritheme

Welcome back

Sign in to your account

Forgot password?

No account? Sign up

<div class="vt-min-h-screen vt-bg-surfaces-background vt-flex vt-items-center vt-justify-center vt-p-4">
  <div class="vt-w-full vt-max-w-sm">
    <div class="vt-text-center vt-mb-8">
      <img src="/logo.svg" alt="Veritheme" class="vt-w-10 vt-h-10 vt-mx-auto vt-mb-4" />
      <h1 class="vt-text-2xl vt-font-bold">Welcome back</h1>
      <p class="vt-text-sm vt-text-mains-quaternary vt-mt-1">Sign in to your account</p>
    </div>
    <div class="vt-surface-card vt-p-6 vt-space-y-4">
      <div>
        <label class="vt-label vt-mb-1.5 vt-block">Email</label>
        <input type="email" placeholder="you@example.com" class="vt-input" />
      </div>
      <div>
        <div class="vt-flex vt-items-center vt-justify-between vt-mb-1.5">
          <label class="vt-label">Password</label>
          <a href="#" class="vt-text-xs vt-text-info-primary">Forgot password?</a>
        </div>
        <input type="password" placeholder="••••••••" class="vt-input" />
      </div>
      <button class="vt-btn vt-btn-primary vt-w-full">Sign in</button>
    </div>
    <p class="vt-text-center vt-text-sm vt-text-mains-quaternary vt-mt-4">No account? <a href="#" class="vt-text-info-primary vt-font-medium">Sign up</a></p>
  </div>
</div>

Sign Up

Registration form with name, email, password, and terms.

html
Veritheme

Create an account

Start your free trial today

By creating an account you agree to our Terms and Privacy Policy.

Already have an account? Sign in

<div class="vt-min-h-screen vt-bg-surfaces-background vt-flex vt-items-center vt-justify-center vt-p-4">
  <div class="vt-w-full vt-max-w-sm">
    <div class="vt-text-center vt-mb-8">
      <img src="/logo.svg" alt="Veritheme" class="vt-w-10 vt-h-10 vt-mx-auto vt-mb-4" />
      <h1 class="vt-text-2xl vt-font-bold">Create an account</h1>
      <p class="vt-text-sm vt-text-mains-quaternary vt-mt-1">Start your free trial today</p>
    </div>
    <div class="vt-surface-card vt-p-6 vt-space-y-4">
      <div class="vt-grid vt-grid-cols-2 vt-gap-3">
        <div>
          <label class="vt-label vt-mb-1.5 vt-block">First name</label>
          <input type="text" placeholder="John" class="vt-input" />
        </div>
        <div>
          <label class="vt-label vt-mb-1.5 vt-block">Last name</label>
          <input type="text" placeholder="Doe" class="vt-input" />
        </div>
      </div>
      <div>
        <label class="vt-label vt-mb-1.5 vt-block">Email</label>
        <input type="email" placeholder="you@example.com" class="vt-input" />
      </div>
      <div>
        <label class="vt-label vt-mb-1.5 vt-block">Password</label>
        <input type="password" placeholder="Min. 8 characters" class="vt-input" />
      </div>
      <button class="vt-btn vt-btn-primary vt-w-full">Create account</button>
      <p class="vt-text-xs vt-text-mains-quaternary vt-text-center">By creating an account you agree to our <a href="#" class="vt-text-info-primary">Terms</a> and <a href="#" class="vt-text-info-primary">Privacy Policy</a>.</p>
    </div>
    <p class="vt-text-center vt-text-sm vt-text-mains-quaternary vt-mt-4">Already have an account? <a href="#" class="vt-text-info-primary vt-font-medium">Sign in</a></p>
  </div>
</div>

Forgot Password

Password reset flow — user enters email to receive a reset link.

html
Veritheme

Forgot password?

Enter your email and we'll send a reset link

Back to sign in

<div class="vt-min-h-screen vt-bg-surfaces-background vt-flex vt-items-center vt-justify-center vt-p-4">
  <div class="vt-w-full vt-max-w-sm">
    <div class="vt-text-center vt-mb-8">
      <img src="/logo.svg" alt="Veritheme" class="vt-w-10 vt-h-10 vt-mx-auto vt-mb-4" />
      <h1 class="vt-text-2xl vt-font-bold">Forgot password?</h1>
      <p class="vt-text-sm vt-text-mains-quaternary vt-mt-1">Enter your email and we will send a reset link</p>
    </div>
    <div class="vt-surface-card vt-p-6 vt-space-y-4">
      <div>
        <label class="vt-label vt-mb-1.5 vt-block">Email</label>
        <input type="email" placeholder="you@example.com" class="vt-input" />
      </div>
      <button class="vt-btn vt-btn-primary vt-w-full">Send reset link</button>
    </div>
    <p class="vt-text-center vt-text-sm vt-text-mains-quaternary vt-mt-4"><a href="#" class="vt-text-info-primary vt-font-medium">Back to sign in</a></p>
  </div>
</div>

Split Layout

Two-column layout with a testimonial or brand panel on the left.

html

"The best UI kit I've ever worked with."

— Jane Smith, Product Designer

Sign in

Welcome back

No account? Sign up

<div class="vt-min-h-screen vt-bg-surfaces-background vt-flex">
  <div class="vt-hidden vt-lg:flex vt-flex-1 vt-bg-surfaces-moderate vt-items-end vt-p-12">
    <div>
      <p class="vt-text-lg vt-font-semibold vt-leading-snug vt-max-w-xs">"The best UI kit I have ever worked with."</p>
      <p class="vt-text-sm vt-text-mains-secondary vt-mt-2">— Jane Smith, Product Designer</p>
    </div>
  </div>
  <div class="vt-flex vt-flex-1 vt-items-center vt-justify-center vt-p-8">
    <div class="vt-w-full vt-max-w-sm vt-space-y-6">
      <div>
        <h1 class="vt-text-2xl vt-font-bold">Sign in</h1>
        <p class="vt-text-sm vt-text-mains-quaternary vt-mt-1">Welcome back</p>
      </div>
      <div class="vt-space-y-4">
        <div>
          <label class="vt-label vt-mb-1.5 vt-block">Email</label>
          <input type="email" placeholder="you@example.com" class="vt-input" />
        </div>
        <div>
          <label class="vt-label vt-mb-1.5 vt-block">Password</label>
          <input type="password" placeholder="••••••••" class="vt-input" />
        </div>
        <button class="vt-btn vt-btn-primary vt-w-full">Sign in</button>
      </div>
      <p class="vt-text-sm vt-text-mains-quaternary">No account? <a href="#" class="vt-text-info-primary vt-font-medium">Sign up</a></p>
    </div>
  </div>
</div>

API Reference

Utility classes used across auth page layouts.

Class Type Description
vt-surface-card Container Card wrapper with border, radius, and background
vt-input Form Text input field with consistent styling
vt-btn vt-btn-primary vt-w-full Button Full-width primary submit button
vt-min-h-screen Layout Full viewport height container
vt-bg-surfaces-background Color Page background color
vt-text-info-primary Color Link and accent color
vt-max-w-sm Container Constrains form width to ~384px

Accessibility

Requirements for accessible authentication forms.

Feature Details
Labels Every input must have an associated <label> with matching for/id attributes
Autocomplete Use autocomplete="email", "current-password", "new-password" on relevant inputs
Error messages Use aria-describedby to link error messages to inputs
Submit button Use <button type="submit"> inside a <form> element
Focus Auto-focus the first input on page load for keyboard users
Password visibility Toggle button should have aria-label="Show password" / "Hide password"