Styling with semantic HTML and Oat UI

Oat styles plain HTML elements, so templates stay readable.

A button is just a <button>, a card is <article class="card">, and alerts use role="alert".

<article class="card">
  <header><h3>Hello</h3></header>
  <p>Card body.</p>
  <footer><button data-variant="primary">Save</button></footer>
</article>

Dark mode comes for free through CSS light-dark(). Use the moon icon in the top bar to toggle it.