forms

Monospace, tabular-nums for numbers, no rounded corners beyond the global radius. Labels sit inline with their input — a vertical stack of label-above-input wastes a row for no information.

inputs

<label class="label-row">name
  <input class="input" type="text" placeholder="usdc" />
</label>

<label class="label-row">warn
  <input class="input num" type="number" value="50" />
  <span class="unit">bps</span>
</label>

<label class="label-row">source
  <select class="select">
    <option>binance</option>
  </select>
</label>

controls row

The pattern for a dashboard control bar — flex row, wrap on small screens, gap from the spacing scale.

<div class="controls">
  <label class="label-row">warn
    <input class="input num" type="number" value="50" />
    <span class="unit">bps</span>
  </label>
  ...
</div>

textarea

<textarea class="textarea" rows="3" placeholder="prompt"></textarea>

css

.input, .select, .textarea {
  font-family: var(--font);
  font-size: var(--t-2);
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.input.num { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.label-row { display: inline-flex; align-items: center; gap: var(--s-2);
             color: var(--fg-muted); font-size: var(--t-1); }
.label-row .unit { color: var(--fg-faint); }
.controls { display: flex; flex-wrap: wrap; gap: var(--s-4); }