Toolcommons is an HTML website template for community makerspaces, shared workshops and fabrication studios. Its 27 pages connect the spaces, tools, training and membership choices that help a visitor take an idea from a first conversation to a prepared project. Dedicated woodshop, metal shop, textiles and digital fabrication pages give each practice room to explain its equipment, working process and preparation.

The design draws on workshop drawings and fabrication manuals: IBM Plex typography, precise rules, numbered sequences, steel-colored surfaces and amber accents. 13 original SVG drawings explain assemblies, materials, storage and the visitor journey, while 11 photographic scenes bring people, workbenches and finished projects into the page. Illustrated navigation combines 23 destination icons, short descriptions and inset panels. Blueprint, Kiln and Evergreen provide 3 complete schemes, each with Light, Dark and Auto modes.

Show what people can make

The 4 lab pages connect tools with the work they support. A woodshop assembly, metal frame, textile construction and digital fabrication drawing give each lab its own visual explanation. Equipment search helps visitors find tools by name, description and familiar workshop terms, with lab filters and training requirements beside each result.

Plywood Stool, Everyday Tote and Light Study offer 3 substantial project studies. Each combines a finished example, an editable assembly drawing, material choices, working stages and questions to bring to the workshop. The project planner links project types with a suitable lab and preparation tools, then carries that context into an inquiry.

Explain the route into the workshop

Orientation, tool checkouts and training are separate destinations, giving a makerspace useful places to describe how visitors become familiar with the space and its equipment. Workshops, materials, first-visit guidance and access information complete the preparation journey.

Shared and Studio membership pages explain 2 different ways to use the workshop. Price panels, inclusions, storage diagrams and activation steps make the choices easy to compare. Community and About pages provide space for the people, principles and project culture behind the benches.

Turn interest into a useful conversation

The 3-step inquiry collects tour, training or membership intent, relevant project choices and contact details before an editable review. Validation, pending feedback, a received example and unavailable, rejected or uncertain outcomes complete the frontend journey. Visitors can download their inquiry notes and start again with a clean form.

The supplied demonstration completes locally without sending information. A documented live mode connects the same interface to a buyer-operated receiver, with acknowledgement checks and consistent retry identity. Staff confirmation remains separate from receiving an inquiry: the form does not book equipment or grant workshop access.

What is included

• 27 complete pages: 25 substantive workshop, lab, membership, project, preparation and inquiry destinations, plus Privacy and a custom 404.
• 13 original SVG drawings: editable workshop assemblies, fabrication processes, project studies, storage, materials, arrival and inquiry graphics.
• Illustrated navigation: 23 destination icons, concise descriptions and 3 grouped menus with supporting content panels.
• A complete inquiry frontend: 3 steps, contextual choices, validation, review and editing, pending feedback, completion and recovery states, and a local notes download.
• Practical visitor tools: searchable equipment, lab filters and a project-to-lab planner.
• Original photographic assets: 11 fictional workshop scenes with 33 responsive WebP derivatives.
• Ready-made website and editable source: semantic HTML, layered CSS, vanilla JavaScript, shared partials, structured content data, readable and minified assets, local build commands and checks.
• Local typography and documentation: IBM Plex Sans and IBM Plex Mono with original license notices, plus a responsive HTML setup and customization guide.

Features

• 3 named color schemes with coordinated light and dark surfaces.
• Light, Dark and Auto appearance modes with remembered preferences.
• Desktop dropdowns with continuous pointer entry and keyboard operation.
• A styled mobile Menu button with grouped, space-conscious disclosures.
• Page-specific questions, training notes and clear preparation steps.
• Independent membership prices, image roles and business identity settings.
• Separate demonstration and live receiving behavior.
• Printable reference content and keyboard-scrollable guide examples.

Accessibility features

Semantic landmarks, structured headings, a skip link, image alternatives and labeled controls support navigation and reading. Native disclosures and visible focus treatments support keyboard use. Form errors stay associated with their fields; validation reveals an earlier step before moving focus to a detail that needs attention. Completion feedback receives focus at the beginning of the result.

Responsive layouts preserve reading order, and motion respects reduced-motion preferences. Static content and native navigation remain available without JavaScript. The guide provides named, focusable code and table regions for keyboard scrolling, with file paths that wrap on narrow screens.

Make it your workshop

Business identity, membership prices, equipment, projects, image filenames and appearance roles have defined editing locations. Shared navigation and footer partials keep repeated content consistent. Individual page fragments and SVG drawings give a workshop room to explain its own spaces, training process, membership structure and project culture.

Toolcommons gives a makerspace a complete visual and practical starting point for helping people understand the workshop, prepare their ideas and begin a conversation with its team.