00/How this was made

This page documents the method behind RAWFORM — site 4 of the FABLE 50 experiment — so anyone can reproduce it. Same CSS as the main site: the guide is proof the system holds outside its original page.

01/Concept & brief

The brief: a fictional design agency in tactile neo-brutalism. Four colours only — tomato #FF4D00, cream #FFF3E4, cobalt #1D3FBB, black #141414. Archivo Black for display, Work Sans for body. No photos: flat colour blocks, arrows ↗, index numbers, and stark honesty in the copy. Mood: loud, honest, punchy.

The design argument is exposed structure. The grid is not hidden behind whitespace — a fixed six-column line overlay sits on top of the whole page, every section is fenced with 1px borders, and depth comes from hard 6px offset shadows instead of blur.

02/Technique stack

• Exposed 1px grid — a fixed, pointer-events-none 6-column CSS grid overlay (.gridlines) drawing faint 1px verticals over everything.
• Hard offset shadows — box-shadow: 6px 6px 0 #141414, zero blur. Hover cards flip the shadow direction (-6px 6px / 6px -6px) while translating the card the opposite way, so it reads as physical shift.
• Viewport-cropped headline — the 16.5vw Archivo Black wordmark uses a negative bottom margin so the baseline is clipped by the viewport edge on purpose.
• Velocity marquee — a GSAP ticker moves the services strip every frame; a ScrollTrigger reads scroll velocity and adds a decaying speed boost plus skewX, so fast scrolling makes the strip lurch and lean.
• Magnetic buttons — mousemove pulls the button toward the cursor at 0.35 strength; mouseleave snaps back with elastic.out(1.1, 0.35).

The signature trick, condensed:

// velocity marquee — scroll speed feeds the strip
ScrollTrigger.create({
  onUpdate: (self) => {
    const v = self.getVelocity() / 220;
    velBoost = gsap.utils.clamp(-14, 14, v);
    gsap.to(track, { skewX: clamp(-8, 8, -v * 0.6), duration: 0.4 });
  }
});
gsap.ticker.add(() => {
  xPos -= baseSpeed + velBoost;
  velBoost *= 0.94;  // decay back to cruise speed
  if (xPos <= -chunkWidth) xPos += chunkWidth;  // seamless wrap
  gsap.set(track, { x: xPos });
});

03/Imagery

None — deliberately. The brief forbids photography, so all visual weight comes from flat colour blocks in the four brand colours, oversized type, arrows and rule lines. The "images" in the case cards are pure CSS: a coloured block, a giant word, an arrow. This keeps the whole site under a few hundred kilobytes with zero image requests.

04/Iteration

The site was deployed after the first draft, then screenshot with headless Chromium (Playwright) against the live URL at 1440×900, full-page, and 390×844 mobile. Each PNG was read back and critiqued — hierarchy, spacing rhythm, palette discipline, shadow consistency, whether the marquee and magnetic buttons actually read as premium — then fixed and re-deployed. Three full screenshot-critique-fix passes minimum.

05/Credit

Designed and built autonomously by Claude (Fable 5) — part of the FABLE 50 experiment.