Blocks

Auth

Self-contained authentication cards built only from ds-card, ds-field, and ds-button. Each one is a flat ds-card capped at ~360px, with stacked ds-field inputs and a full-width ds-button--block ds-button--primary as the commit action. Drop one onto the brand background — flat, 1px, no radius, no shadow.

Sign in

Email and password, a full-width primary commit, a ghost SSO fallback, and a small forgot-password link aligned to the end.

Sign in
Diametral

Sign in

<div class="ds-card" style="max-width:360px;margin:0 auto">
  <div class="ds-card__header" style="display:flex;flex-direction:column;align-items:center;gap:14px">
    <span class="ds-wordmark">
      <svg class="ds-wordmark__mark" viewBox="0 0 56 56" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="28" cy="28" r="24"/><rect x="12" y="12" width="32" height="32"/><line x1="12" y1="44" x2="44" y2="12"/></svg>
      <span class="ds-wordmark__name">Diametral</span>
    </span>
    <h2 class="ds-card__title">Sign in</h2>
  </div>
  <div class="ds-card__body" style="display:flex;flex-direction:column;gap:16px">
    <div class="ds-field">
      <label for="si-email">Email</label>
      <input class="ds-input" id="si-email" type="email" autocomplete="email" placeholder="you@diametral.io">
    </div>
    <div class="ds-field">
      <label for="si-pass">Password</label>
      <input class="ds-input" id="si-pass" type="password" autocomplete="current-password" placeholder="••••••••">
    </div>
    <button class="ds-button ds-button--block ds-button--primary" type="button">Sign in</button>
    <button class="ds-button ds-button--block" type="button">Continue with SSO</button>
    <div style="display:flex;justify-content:flex-end">
      <a href="#" class="ds-field__hint">Forgot?</a>
    </div>
  </div>
</div>

Sign up

Name, email, and password stacked above a full-width primary Create account.

Sign up

Create your account

<div class="ds-card" style="max-width:360px;margin:0 auto">
  <div class="ds-card__header"><h2 class="ds-card__title">Create your account</h2></div>
  <div class="ds-card__body" style="display:flex;flex-direction:column;gap:16px">
    <div class="ds-field">
      <label for="su-name">Name</label>
      <input class="ds-input" id="su-name" type="text" autocomplete="name" placeholder="Ada Lovelace">
    </div>
    <div class="ds-field">
      <label for="su-email">Email</label>
      <input class="ds-input" id="su-email" type="email" autocomplete="email" placeholder="you@diametral.io">
    </div>
    <div class="ds-field">
      <label for="su-pass">Password</label>
      <input class="ds-input" id="su-pass" type="password" autocomplete="new-password" placeholder="••••••••">
    </div>
    <button class="ds-button ds-button--block ds-button--primary" type="button">Create account</button>
  </div>
</div>

Forgot password

A single email field, a full-width Send reset link, and a back link to sign in.

Forgot password

Reset password

Enter your email and we'll send a reset link.

<div class="ds-card" style="max-width:360px;margin:0 auto">
  <div class="ds-card__header"><h2 class="ds-card__title">Reset password</h2></div>
  <div class="ds-card__body" style="display:flex;flex-direction:column;gap:16px">
    <p class="ds-field__hint">Enter your email and we'll send a reset link.</p>
    <div class="ds-field">
      <label for="fp-email">Email</label>
      <input class="ds-input" id="fp-email" type="email" autocomplete="email" placeholder="you@diametral.io">
    </div>
    <button class="ds-button ds-button--block ds-button--primary" type="button">Send reset link</button>
    <div style="display:flex;justify-content:center">
      <a href="#" class="ds-field__hint">← Back to sign in</a>
    </div>
  </div>
</div>

Two-factor

A six-digit code entered across six small ds-inputs in a row, above a full-width Verify.

Two-factor

Verify it's you

Enter the 6-digit code from your authenticator app.

<div class="ds-card" style="max-width:360px;margin:0 auto">
  <div class="ds-card__header"><h2 class="ds-card__title">Verify it's you</h2></div>
  <div class="ds-card__body" style="display:flex;flex-direction:column;gap:16px">
    <p class="ds-field__hint">Enter the 6-digit code from your authenticator app.</p>
    <div class="ds-field">
      <label>Code</label>
      <div style="display:flex;gap:8px">
        <input class="ds-input" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 1" style="width:100%;text-align:center;padding-left:0;padding-right:0">
        <input class="ds-input" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2" style="width:100%;text-align:center;padding-left:0;padding-right:0">
        <input class="ds-input" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3" style="width:100%;text-align:center;padding-left:0;padding-right:0">
        <input class="ds-input" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4" style="width:100%;text-align:center;padding-left:0;padding-right:0">
        <input class="ds-input" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 5" style="width:100%;text-align:center;padding-left:0;padding-right:0">
        <input class="ds-input" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 6" style="width:100%;text-align:center;padding-left:0;padding-right:0">
      </div>
    </div>
    <button class="ds-button ds-button--block ds-button--primary" type="button">Verify</button>
  </div>
</div>