We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 11 · Precision manufacturing · Concept

Tolvane

Within tolerance. Every part.

Tolvane, a fictional CNC machining shop. The whole site is one drawing sheet: numbered sheets, lettered zones you can click, and a revision log that records what you did.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Tolvane site on a wide display: Within tolerance. Every part.
Opening screen, desktop

01 The brief

The brand
Tolvane is a fictional small-batch CNC machining company. Its line is "Within tolerance. Every part."
The problem
A buyer needs to know what the shop can make and how precisely. The site presents capabilities, a catalogue of sample parts and a quote request, with every figure marked as illustrative.

02 The idea

The drawing sheet is the site

What you see
The browser window is the sheet. A double-line frame, zone letters A to F down the left edge and a header that is the sheet index turn every page into a numbered sheet, and each of the twelve parts is a sub-sheet from 3.01 to 3.12. The footer is a title block with the sheet identity, a first-angle projection symbol, a zone finder where C4 is a real link, and a revision log that adds a line each time you open a sheet, pin a callout, change a filter or download a datasheet.
How it works
Sheets and zones come from one small table, so the rail, the finder, the sheet index and the keys [ and ] all agree. The revision log lives in the tab session only. Part drawings are SVG with a separate layer of square tolerance frames, and part data drives the pages, the catalogue and the datasheet PDFs.

03 Design system

  • Drafting Film#FBFCFE groundThe sheet.
  • Navy Ink#0C1A3A inkText, the heavy frame and zone rules.
  • Dykem Cobalt#1F3FD1 accentControls, the rail, tolerance frames and zone tags.
  • Slate#44506B mutedSecondary text and control borders.
Type
  • Barlow Condensed
    Drawing lettering for titles, table heads and buttons.
  • IBM Plex Sans and IBM Plex Mono
    Plex Sans for reading, Plex Mono for figures, references and the revision log.
Edges
Square, with a double-line sheet frame and zone rules. The only cut is a chamfered corner on filled buttons. No shadows.
Motion
Dimension lines draw in briefly and the page scrolls smoothly to a zone. All of it is switched off under reduced motion.

04 Process

  1. Pre-production

    Pre-production set the thesis, eighteen routes and the callout behaviour; a later uniqueness pass rebuilt the site as a drawing sheet and replaced the grey and orange palette. It also fixed that no certification, customer or measured capability could be claimed.

  2. Build

    The build followed a written plan covering the callout layer, the catalogue filters, the datasheets and the enquiry flow.

  3. Finish review

    Impeccable finish-review rounds compared the built pages with the direction contract and returned an ordered list of fixes.

  4. Fixes

    The fixes were applied and checked again, and the design system was documented from the finished build.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • SVG part drawings with a separate layer of tolerance frames
  • A sheet and zone map shared by the rail, finder, index and keys
  • A revision log kept in the tab session
  • Filterable catalogue of twelve sample parts
  • Datasheet PDFs written by a small dependency-free PDF generator
Access
  • Zone letters and the zone finder are real links named like "Zone C4: Capabilities"; the finder is one tab stop with arrow keys
  • Sheets turn with the [ and ] keys, and previous and next links sit in the title block
  • Callout frames are real buttons in order, with aria-expanded and a label naming the feature
  • Escape closes an open callout, and touch needs no hover
  • A callouts table repeats every figure, and the SVG is hidden from assistive technology. On a phone the zone rail becomes a sheet index
  • The callout layer has a switch
  • Catalogue result count is announced in a polite live region
  • Skip link, visible focus and reduced-motion handling
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Tolvane is a fictional brand and this site is a concept by Artlogic. All specifications are illustrative and no certification or customer is claimed.

The enquiry form is a demo. It stores nothing and says so on the page.

Photographs are free Unsplash stock, printed in cobalt ink and labelled as stock. Five of the twelve parts have a photo. The rest are shown as drawings only, because there was no honest picture of them to use.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.