Playground — fertig

HTML

<main class="grid gap-lg">
  <header class="page-head">
    <h1 class="page-title">Playground</h1>
    <p class="muted page-intro">Edit this HTML and CSS to see fertig in action.</p>
  </header>

  <section class="band page">
    <div class="panel">
      <h2>Buttons</h2>
      <p>A complete set of functional and semantic buttons.</p>
      <div class="cluster">
        <button type="button" class="button">Default</button>
        <button type="button" class="button primary">Primary</button>
        <button type="button" class="button success">Success</button>
        <button type="button" class="button warning">Warning</button>
        <button type="button" class="button danger">Danger</button>
      </div>
    </div>

    <div class="panel">
      <h2>Form elements</h2>
      <div class="cols">
        <div>
          <label for="pg-name">Your name</label>
          <input id="pg-name" type="text" placeholder="Ada Lovelace" required>
        </div>
        <div>
          <label for="pg-colour">Favourite colour</label>
          <select id="pg-colour">
            <option>Blue</option>
            <option>Green</option>
            <option>Purple</option>
          </select>
        </div>
      </div>
    </div>

    <div class="panel">
      <h2>Definition list</h2>
      <dl>
        <dt>Layer</dt>
        <dd>A CSS cascade layer — unlayered code beats layered code without <code>!important</code>.</dd>
        <dt>Theme</dt>
        <dd>A named palette built on the same token surface. Add <code>data-theme="forest"</code> and the whole chrome restyles.</dd>
      </dl>
    </div>
  </section>
</main>

CSS

/* fertig is layer-less: your unlayered CSS beats it without !important. */
.panel {
  border: 1px solid var(--fertig-ac);
  background: color-mix(in srgb, var(--fertig-bg) 92%, var(--fertig-ac));
}
.grid {
  display: grid;
  gap: var(--fertig-g);
  inline-size: min(var(--fertig-w), 100% - 2 * 1.15rem);
  margin-inline: auto;
}
.cluster { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--fertig-g) }
.band { padding-block: var(--fertig-g); padding-inline: 1.15rem }
.gap-lg { gap: clamp(1.5rem, 4vw, 2.5rem) }

Preview Live