Proximity Form Fields

Level 1: gap-1   (4px)    inside a label-input pair
Level 2: gap-3   (12px)   between fields in a group
Level 3: gap-6   (24px)   between groups within a section
Level 4: gap-10  (40px)   between sections

<style>
  .form { display: grid; gap: 1.5rem; max-width: 400px; }     /* Level 3 between groups */
  .field { display: grid; gap: 0.25rem; }                      /* Level 1 inside pair */
  .field-help { font-size: 0.8rem; color: hsl(0 0% 45%); }     /* tone reduction for tertiary */
</style>

<form class="form">
  <div class="field">
    <label for="email">Email address</label>
    <input id="email" type="email" required />
    <p class="field-help">We'll send a verification link.</p>
  </div>
  <div class="field">
    <label for="password">Password</label>
    <input id="password" type="password" required />
  </div>
  <button type="submit">Sign up</button>
</form>

<style>
  .form-grid {
    display: grid;
    grid-template-columns: 10rem 1fr;          /* fixed label column */
    gap: 0.75rem 1rem;                          /* row gap, column gap */
    max-width: 600px;
  }
  .form-grid label { padding-top: 0.5rem; text-align: right; }
  .form-grid .field-help { grid-column: 2; font-size: 0.8rem; color: hsl(0 0% 45%); }
</style>

<form class="form-grid">
  <label for="display-name">Display name</label>
  <input id="display-name" />

  <label for="email">Email</label>
  <input id="email" type="email" />
  <p class="field-help">Used for login and notifications.</p>

  <label for="role">Role</label>
  <select id="role">…</select>
</form>

<form style="display: grid; gap: 2.5rem; max-width: 480px;">
  <section style="display: grid; gap: 1rem;">
    <h2 style="margin-bottom: 0.25rem;">Profile</h2>
    <div class="field"><label>Display name</label><input /></div>
    <div class="field"><label>Bio</label><textarea></textarea></div>
  </section>

  <section style="display: grid; gap: 1rem;">
    <h2 style="margin-bottom: 0.25rem;">Notifications</h2>
    <div class="field"><label>Email frequency</label><select>…</select></div>
    <div class="field"><label>Quiet hours</label><input /></div>
  </section>

  <section style="display: grid; gap: 1rem;">
    <h2 style="margin-bottom: 0.25rem;">Security</h2>
    <div class="field"><label>Two-factor</label><div>…toggle…</div></div>
  </section>
</form>

<label>Email <span class="required" aria-hidden>*</span></label>

<label>Email</label> <span class="required">*</span>     <!-- detached, looks like body content -->

<div class="field" data-state="error">
  <label for="email">Email</label>
  <input id="email" type="email" aria-invalid="true" aria-describedby="email-error" />
  <p id="email-error" class="field-error">Please enter a valid email.</p>
</div>

<style>
  .field-error {
    font-size: 0.8rem;
    color: hsl(0 75% 35%);
    margin-top: 0.25rem;     /* same as label-input gap */
  }
</style>

<style>
  .field { display: grid; gap: 0.25rem; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }   /* same as field gap */
</style>

<form style="display: grid; gap: 1rem; max-width: 480px;">
  <div class="row">
    <div class="field"><label>First name</label><input /></div>
    <div class="field"><label>Last name</label><input /></div>
  </div>
  <div class="row" style="grid-template-columns: 1fr auto auto;">
    <div class="field"><label>City</label><input /></div>
    <div class="field"><label>State</label><select>…</select></div>
    <div class="field"><label>ZIP</label><input style="width: 6rem;" /></div>
  </div>
</form>