28Sign up

Create-account card: the shortest form that can honestly create an account — name, email, password with LIVE rules (not a strength bar), and the legal line. Every extra field costs signups; ask later, in the app.

Use it for

The one create-account screen

Not for

Collecting profile details — onboarding, after the account exists

Sign-up card

create account

Start learning free

By continuing you agree to the terms. Already learning? Sign in

markup

<div class="ns-auth__card" style="max-inline-size:22rem">
  <p class="ns-auth__kicker">create account</p>
  <h2 class="ns-auth__title" style="font-size:var(--size-h3)">Start learning free</h2>
  <form class="ns-auth__form" onsubmit="return false">
    <div class="ns-field">
      <label class="ns-field__label" for="su-n">Name</label>
      <input class="ns-input" id="su-n" type="text" autocomplete="name">
    </div>
    <div class="ns-field">
      <label class="ns-field__label" for="su-e">Email address</label>
      <input class="ns-input" id="su-e" type="email" autocomplete="email">
    </div>
    <div class="ns-field">
      <label class="ns-field__label" for="su-p">Password</label>
      <input class="ns-input" id="su-p" type="password" autocomplete="new-password" aria-describedby="su-rules">
    </div>
    <ul class="ns-auth__rules" id="su-rules" style="list-style:none;padding:0;margin:0">
      <li><span class="ns-status ns-status--success">At least 8 characters</span></li>
      <li><span class="ns-status ns-status--success">Contains a number</span></li>
      <li><span class="ns-status ns-status--idle">Contains a symbol</span></li>
    </ul>
    <button class="ns-btn ns-btn--primary ns-btn--block" type="submit">Create account</button>
  </form>
  <p class="ns-auth__alt">By continuing you agree to the <a href="#">terms</a>. Already learning? <a href="#">Sign in</a></p>
</div>

Live password rules

Not a strength bar — "add a symbol" is actionable, a yellow bar is a mood.

At least 8 characters
Contains a number
Contains a symbol

markup

<ul class="ns-auth__rules" style="list-style:none;padding:0;margin:0">
  <li><span class="ns-status ns-status--success">At least 8 characters</span></li>
  <li><span class="ns-status ns-status--success">Contains a number</span></li>
  <li><span class="ns-status ns-status--idle">Contains a symbol</span></li>
</ul>

Accessibility contract

autocomplete="new-password" tells password managers to OFFER a password
Password rules are a live list the user can satisfy one by one — announced as they flip