NS Design System
v3.0.0 · 257 tokens

121Settings & sign-in

The assistant's own preferences — how it teaches, what it may read, what it remembers — as rows rather than cards, because a settings screen is a list of decisions. Plus the sign-in gate, which states the reason for the account instead of just blocking the composer.

Use it for

  • The assistant settings page; group in the order a student cares — teaching, reading, memory, deletion
  • The gate wherever an anonymous visitor meets the assistant

Not for

  • A modal over a blurred fake transcript — show the real empty state and gate the send
  • Hiding what it remembers. If memory is on, the facts it holds are printed on this screen

Settings rows

How it teaches

Default mode

Tutor explains and shows an example. Coach answers with a question first. Reviewer marks the code you paste.

Always show sources

Every answer cites the lesson it came from. An uncited answer is one you cannot check.

Forget what it remembers

Clears the facts it holds about your goals. History and saved paths are kept.

Open the full settings screen

markup
<div style="max-inline-size:42rem">
  <section class="ns-aiset">
    <h3 class="ns-aiset__legend">How it teaches</h3>
    <div class="ns-aiset__row">
      <div>
        <p class="ns-aiset__name">Default mode</p>
        <p class="ns-aiset__desc">Tutor explains and shows an example. Coach answers with a question first. Reviewer marks the code you paste.</p>
      </div>
      <div class="ns-aiset__control">
        <fieldset class="ns-segmented" aria-label="Default mode">
          <label class="ns-segmented__option"><input type="radio" name="ai-doc-mode" checked><span>Tutor</span></label>
          <label class="ns-segmented__option"><input type="radio" name="ai-doc-mode"><span>Coach</span></label>
          <label class="ns-segmented__option"><input type="radio" name="ai-doc-mode"><span>Reviewer</span></label>
        </fieldset>
      </div>
    </div>
    <div class="ns-aiset__row">
      <div>
        <p class="ns-aiset__name">Always show sources</p>
        <p class="ns-aiset__desc">Every answer cites the lesson it came from. An uncited answer is one you cannot check.</p>
      </div>
      <div class="ns-aiset__control">
        <label class="ns-choice"><input type="checkbox" role="switch" class="ns-switch" checked><span class="ns-choice__text"><span class="ns-choice__label">On</span></span></label>
      </div>
    </div>
    <div class="ns-aiset__row ns-aiset__row--danger">
      <div>
        <p class="ns-aiset__name">Forget what it remembers</p>
        <p class="ns-aiset__desc">Clears the facts it holds about your goals. History and saved paths are kept.</p>
      </div>
      <div class="ns-aiset__control">
        <button type="button" class="ns-btn ns-btn--danger ns-btn--sm">Forget memory</button>
      </div>
    </div>
  </section>
  <p style="margin-block-start:var(--space-4)"><a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-ai-settings.html" target="_blank" rel="noopener">Open the full settings screen <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a></p>
</div>

Sign-in gate

The reason first: the answers are built from this student's own progress, which an anonymous session does not have. Then what signing in buys, then the field.

Sign in to ask

Answers are built from your own progress — which lessons you have finished, where you got stuck, what you are working towards. That needs an account.

  • Answers that cite the lesson you are on
  • Learning paths saved to your dashboard
  • 30 questions a day on the free plan
Browse the courses instead

Free, no card. We do not train on your conversations.

markup
<div class="ns-aigate">
  <div>
    <h3 class="ns-aigate__title">Sign in to ask</h3>
    <p class="ns-aigate__text">Answers are built from your own progress — which lessons you have finished, where you got stuck, what you are working towards. That needs an account.</p>
  </div>
  <ul class="ns-aigate__list">
    <li><i class="ph ph-check-circle" aria-hidden="true"></i> Answers that cite the lesson you are on</li>
    <li><i class="ph ph-check-circle" aria-hidden="true"></i> Learning paths saved to your dashboard</li>
    <li><i class="ph ph-check-circle" aria-hidden="true"></i> 30 questions a day on the free plan</li>
  </ul>
  <form class="ns-auth__form" action="#">
    <div class="ns-field">
      <label class="ns-field__label" for="ai-doc-email">Email address</label>
      <input id="ai-doc-email" class="ns-input" type="email" autocomplete="email" required>
    </div>
    <div class="ns-aigate__actions">
      <button class="ns-btn ns-btn--primary ns-btn--block" type="submit">Send sign-in link</button>
      <a class="ns-btn ns-btn--quiet ns-btn--block" href="#0">Browse the courses instead</a>
    </div>
  </form>
  <p class="ns-aigate__text">Free, no card. We do not train on your conversations.</p>
</div>

The signed-out screen

Gate, empty state and disabled composer in one room — what a visitor sees before they hand over an email address.

Open the signed-out demo

markup
<p><a class="ns-btn ns-btn--outline ns-btn--sm" href="./demo-ai-signin.html" target="_blank" rel="noopener">Open the signed-out demo <i class="ph ph-arrow-up-right" aria-hidden="true"></i></a></p>

Accessibility contract

  • Each group is a section with a real heading; each row's control has its own label or aria-label
  • Destructive rows are marked in text, not by color alone, and their buttons are outline (see Button)