Skip to content

Email-only login

A simple email-only login page.

Preview

Open the screen alone (new tab)

Built with

The components this screen renders, through their own templates. Changing one of them, or a token they read, changes this screen.

Design system gaps

What the design system lacks to render the original as it is. The screen fills each gap with native HTML on semantic tokens until a component or a token covers it.

  • Links are native links on semantic tokens: there is no Link component yet.
  • The "Or continue with" separator is two Dividers around a label: the Divider has no label.

Changes from the original

  • Brand logos (Apple, Google, GitHub, Meta) are dropped: Material Symbols has none and no brand icon source is decided; the buttons keep their text.
  • Rebuilt as static HTML with the design system's component templates; every color, type style, radius, border and spacing comes from its tokens.
  • The original visual design (Tailwind classes, the Geist font) is not reused.
  • Lucide and Tabler icons are remapped to Material Symbols; brand logos (Apple, Google, GitHub, Meta) are dropped, the buttons keep their text.
  • Placeholder images are drawn with semantic tokens.
  • No script: behaviour that needs JavaScript (collapsing the sidebar, toasts, drag and drop, client-side tables) is dropped or simplified, and each screen says so.

Code

The HTML the screen renders, from apps/docs/screens/shadcn-ui/login-05.screen.mjs, with the stylesheets of @quantum-ds/tokens, the reference implementation (packages/components/src/) and apps/docs/screens/screens.css.

HTML 
<div class="scr-viewport">
  <div class="scr-screen scr-auth" data-layout="centered">
    <div class="scr-auth__panel scr-stack">
      <form class="scr-form" action="#" method="post">
        <div class="scr-stack">
          <div class="scr-auth__brand">
            <a class="scr-brand" href="#">
              <span class="scr-brand__mark">
                <span
                  class="ds-icon"
                  data-size="small"
                  data-color="current"
                  aria-hidden="true"
                >view_agenda</span>
              </span>
              Acme Inc.
            </a>
          </div>
          <div class="scr-heading" data-align="center">
            <h1 class="scr-title">Welcome to Acme Inc.</h1>
            <p class="scr-hint" data-align="center">
              Don't have an account?
              <a class="scr-link" href="#">Sign up</a>
            </p>
          </div>
          <div class="ds-text-field" data-size="medium">
            <label
              class="ds-text-field__label"
              data-part="label"
              for="login-05-email"
            >Email</label>
            <input
              type="text"
              class="ds-text-field__control"
              data-part="control"
              id="login-05-email"
              name="email"
              placeholder="m@example.com"
              required
              autocomplete="email"
              inputmode="email"
            >
          </div>
          <button
            type="submit"
            class="ds-button"
            data-emphasis="accent"
            data-intent="neutral"
            data-size="medium"
          >
            <span
              class="ds-button__label"
              data-part="label"
            >Login</span>
          </button>
          <div class="scr-separator">
            <hr class="ds-divider" data-orientation="horizontal">
            <span class="scr-separator__label">Or</span>
            <hr class="ds-divider" data-orientation="horizontal">
          </div>
          <div class="scr-columns">
            <button
              type="button"
              class="ds-button"
              data-emphasis="subtle"
              data-intent="neutral"
              data-size="medium"
            >
              <span
                class="ds-button__label"
                data-part="label"
              >Continue with Apple</span>
            </button>
            <button
              type="button"
              class="ds-button"
              data-emphasis="subtle"
              data-intent="neutral"
              data-size="medium"
            >
              <span
                class="ds-button__label"
                data-part="label"
              >Continue with Google</span>
            </button>
          </div>
        </div>
      </form>
      <p class="scr-hint scr-legal" data-align="center">
        By clicking continue, you agree to our
        <a class="scr-link" href="#">Terms of Service</a>
        and
        <a class="scr-link" href="#">Privacy Policy</a>
        .
      </p>
    </div>
  </div>
</div>