A light structure layer for plain forms: fields stack under their labels, fieldsets get a border and legend, and invalid fields show in the error colour. Zero specificity, so your own styles always win.

Plain HTML

No classes. Fields stack under their labels, and invalid fields turn the error colour, either with aria-invalid="true" or after the user interacts with a field that fails the browser's validation.

Account Codes are 6 characters.
Spacing

The gap between fields follows --mdst-flow-space (the same token that spaces headings and paragraphs). Set it to 0 to turn it off. Every rule has zero specificity, so your own margins always win.

Usage
<body class="mdst-ui">
  <form>
    <fieldset>
      <legend>Account</legend>
      <label for="email">Email</label>
      <input id="email" type="email" required>
    </fieldset>
    <button>Save</button>
  </form>
</body>

<!-- Outside .mdst-ui, use the classes -->
<form class="mdst-form">…</form>
<fieldset class="mdst-fieldset"><legend class="mdst-legend">…</legend></fieldset>

<!-- Mark a field invalid -->
<input aria-invalid="true" aria-describedby="email-error">

/* Tighter or looser forms */
form { --mdst-flow-space: 0.75rem; }