Why Workbench Makerspace looks the way it does
A site for a member-run workshop that wants people who have never held a router to walk in on a Thursday night. It reads like a well-labeled tool room: every page has a contents column, every time is exact, and the photography shows hands at work rather than finished objects.
- Built for
- Olneyville and West End neighbors, RISD and trade-school students, retired machinists and jewelers, and anyone with a broken lamp.
- Navigation
- Contents column. A right-hand contents list tracks where you are on long pages, the way a well-made book or report does.
- Pages
- Home, The shops, Classes, Membership, Repair Café, Open night
- Hero
- A full-bleed photograph left completely free of words, with the headline set underneath it like a museum caption and a small column of place, date and photo credit. Variants: a = catalogue entry (plate number, headline, details column); b = the details run as a ruled strip above one wide headline; c = the photo bleeds off the left edge and the details hang in the right-hand margin beside it
Typography
Space Mono sets the headings. Its fixed-width letters have the look of a stamped part number or a label-maker strip on a drawer of drill bits, which is the visual language of every good shop. IBM Plex Sans carries the reading text, because it comes from the same engineering family and stays readable through long safety notes.
Color
Blueprint blue and safety-line yellow, the two colors painted on every workshop floor. The light ground has a faint green cast, like pegboard under fluorescent tubes. In the dark theme the blue lifts to the color of a welding flash on a night shift and the yellow stays as the only warm note.
Layout and navigation
The contents column on the right works like the index card pinned to each machine: it shows where you are on long pages such as the shop list and the safety steps. The main pages sit in a slim bar on top, so the column can do its one job.
The hero
The home page opens on a photograph with no words on it: an older machinist showing a younger man how to set a cut. The headline sits underneath like a catalog caption, with the place, date and the member who took the picture. The point of the place is that someone shows you, so the picture shows it.
Calls to action
The main action is 'Come to open night', because the Thursday tour is free and nobody can use the tools before it. After that come 'Book a safety class' and 'Join from $15 a month', in the order people actually do them. The Repair Café gets its own plain verb: bring something broken.
Photography
Benches, aprons, safety glasses and work in progress: a jeweler's bench in morning light, teenagers soldering a robot, a glass furnace. People of every age and background, mostly mid-task and not posing.
Accessibility
All text passes WCAG AA on both themes, and the yellow is never used for text on the light ground. Shop hours are a real table, the contents column is a labeled list, and the open-night countdown is written out in words.
Type system
- DisplaySpace MonoSpace Mono has the even, stencilled rhythm of a part number stamped on a drawer label, which is exactly the voice of a tool room.
- TextIBM Plex SansIBM Plex Sans was drawn from the same engineering tradition as the mono, so long safety notes and class descriptions read calmly beside it.
- AccentSpace MonoLabels, times and bench numbers are set in the mono at small sizes, like the tags on the tool wall.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 14.13:1 | AAA |
| Body text on cards | Aa | 15.76:1 | AAA |
| Secondary text | Aa | 5.67:1 | AA |
| Links | Aa | 7.36:1 | AAA |
| Button text | Aa | 8.66:1 | AAA |
| Accent label text | Aa | 10.39:1 | AAA |
| Text on dark bands | Aa | 14.13:1 | AAA |
| Muted text on dark bands | Aa | 7.54:1 | AAA |
| Text on brand bands | Aa | 8.66:1 | AAA |
| Muted text on brand bands | Aa | 5.69:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.44:1 | AAA |
| Body text on cards | Aa | 13.81:1 | AAA |
| Secondary text | Aa | 6.88:1 | AA |
| Links | Aa | 8.85:1 | AAA |
| Button text | Aa | 9.13:1 | AAA |
| Accent label text | Aa | 11.64:1 | AAA |
| Text on dark bands | Aa | 16.41:1 | AAA |
| Muted text on dark bands | Aa | 8.24:1 | AAA |
| Text on brand bands | Aa | 9.13:1 | AAA |
| Muted text on brand bands | Aa | 5.51:1 | AA |
Most chosen