WorkspaceRepair Circle — tool library
Find your next idea/Create
TEMPLATE

Repair Circle — tool library

An industrial lending-library design with stencil-like typography, a practical inventory and reservation controls.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
GOV.UK: https://www.gov.uk/
Task-led public information, clear headings, strong rules and direct service navigation.
suckless.org: https://suckless.org/
Plain-document hierarchy, typographic navigation and very little decorative UI.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header>
    <b>REPAIR<br />CIRCLE®</b><span>OWN LESS.<br />FIX MORE.</span
    ><a href="#tools">THE TOOL INDEX ↘</a>
  </header>
  <section class="repair-intro">
    <div>
      <h1>GOOD THINGS<br />DESERVE<br /><span>ANOTHER GO.</span></h1>
      <p>A shared shed for a more resourceful neighborhood.</p>
    </div>
    <div class="wrench" aria-label="Original wrench illustration">
      <svg viewBox="0 0 160 250">
        <path
          d="M95 15L88 63 57 76 34 56 47 10Q-6 38 27 91L87 204Q98 228 118 217Q139 207 127 185L68 73Q112 68 95 15Z"
          fill="#252722"
        />
        <circle cx="111" cy="200" r="7" fill="#d0d349" /></svg
      ><span>USE. RETURN. REPEAT.</span>
    </div>
  </section>
  <section id="tools">
    <div class="inventory-head">
      <h2>On the shelf today</h2>
      <span>LOCAL DEMO / 03 TOOLS</span>
    </div>
    <article>
      <span>01</span>
      <div>
        <h3>CORDLESS DRILL</h3>
        <p>For putting things together.</p>
      </div>
      <button id="change" data-tool="CORDLESS DRILL">RESERVE ↗</button>
    </article>
    <article>
      <span>02</span>
      <div>
        <h3>SANDING KIT</h3>
        <p>For a smoother second chance.</p>
      </div>
      <button data-tool="SANDING KIT">RESERVE ↗</button>
    </article>
    <article>
      <span>03</span>
      <div>
        <h3>BIKE REPAIR STAND</h3>
        <p>For getting back out there.</p>
      </div>
      <button data-tool="BIKE REPAIR STAND">RESERVE ↗</button>
    </article>
  </section>
  <output data-status aria-live="polite"></output>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:29 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?