01 · Overview
We sold the mirrors and bought more plates
Every gym website looks like a spa. Soft gradients, a woman smiling at a dumbbell, a stock photo of a smoothie. For this concept, I imagined SLAB as a concrete floor in Detroit with 41 racks and no mirrors, open 115 hours a week, and the site had to be recognisably the same building.
So the page is built like the equipment: three-pixel borders, eight-pixel hard shadows offset down and right, a 48-pixel floor grid ruled across everything, and one acid yellow used as a surface — never as text. Nothing is soft, nothing is rounded, and nothing fades: reveals snap in ninety milliseconds of linear transform with no opacity change at all.
02 · The idea
The interface as equipment
Shadows are physical
A hard 8px 8px 0 offset with no blur. It reads as a plate resting on a plate, not as a UI elevation.
Acid is a surface
Yellow fills blocks and chips. It is never text, because #D8F21D on white is a contrast failure and no brand is worth that.
No easing curve
Ninety milliseconds, linear. Easing implies momentum, and momentum implies softness.
03 · Goals
What the page had to do
Filter, don't convert
The page is supposed to put some people off. The manifesto is second on the page for exactly that reason.
Publish the whole week
A full class schedule in a table you can actually read on a phone, because that is the question every prospective member has.
Price without apology
Three tiers, no annual-discount theatre, headed "pay for iron, not interior design".
Sign people up in one screen
Name, email, phone, goal, plan. Five fields, inline errors, one live region.
04 · Build order
The programme
Grid and border
The 48-pixel floor grid and the three-pixel border went in before any content. Everything after had to survive them.
Type at full volume
Anton for display, Roboto Mono for everything else — the body font is the monospace, which is what makes the page read as printed equipment labelling.
Stamp-in reveals
A 90ms linear scale with no fade, plus a post-
loadsafety net that unhides anything the observer missed.The week, in iron
The schedule table, built last because it is the hardest thing on the page to keep readable at 375 pixels.
05 · Architecture
Three files
├── index.html 33.9 KB — 8 sections, 8 duotone photographs
├── styles.css 37.4 KB — 12 custom properties, 7 media queries
└── script.js 12.2 KB — 367 lines: nav · stamp reveals · counters · form · anchors
The stack
- Semantic HTML
- CSS Grid
- Hard shadows
- requestAnimationFrame
- Anton
- Roboto Mono
Accessibility
- aria-expanded
- aria-live
- Load safety net
- Reduced motion
- Real table markup
06 · What fought back
What fought back
Acid yellow is the brand and it fails contrast against both white and black at text sizes. Using it for headings would have been a straight WCAG failure on the loudest element on the page.
Acid was defined as a surface token from the start. It fills blocks that carry black text, and never colours type. The brand is fully present and nothing on the page is unreadable.
Reveal-on-scroll hides content by default. On a page whose whole personality is bluntness, content stuck invisible because an observer never fired would be the worst possible failure.
A safety net on window.load sweeps every still-hidden element and unhides it. The reveal is an enhancement with an explicit deadline.
A seven-day class schedule is a wide table, and wide tables on a 375-pixel screen are where most gym sites simply give up and hide the content.
Real <table> markup that becomes a stack of day blocks below the breakpoint, each row keeping its header association. Most of the seven media queries in the build exist for this one component.
An in-page link that only scrolls leaves the keyboard behind. The view moves, focus does not, and the next Tab carries on from wherever the reader already was.
Scrolling stays in CSS; the script only moves focus. Every anchor gives its destination tabindex="-1" and focuses it with preventScroll once the scroll has settled — immediately under prefers-reduced-motion, where there is nothing to settle.
07 · Worth keeping
The parts worth keeping
HEAVY IS THE POINT
Three stacked stamps, the third outlined rather than filled — the whole brand in one hero, no photograph required.
Pick your poison
Programme cards with duotone photography rotated a degree and a half off true, so the grid never feels machine-set.
The loud ones
Coaches introduced with their lifts rather than their certifications.
Straight answers
An FAQ that answers "do you have a sauna" with "no". The copy and the design are doing the same job.
08 · Run it live
Run it here
The real build, embedded and running. It loads on demand — nothing is fetched until you ask for it.
Skip the live preview
The real build, running in the page. The live preview is an embedded page; press Escape to leave it.
Open full screen ↗
