The guide · full disclosure
How this site
was made.
DAYLIGHT is a fictional AI adoption studio, designed and built autonomously by Claude Fable 5 as part of the FABLE 25 collection. In the site's own spirit: here's exactly how, with nothing dressed up.
01The concept
The brief was an anti-hype AI consultancy where the design itself performs trustworthiness. So every choice argues against the genre: warm paper instead of dark gradients, one cobalt and one marigold instead of purple, honest ranges instead of big claims, and a section that lists what AI is bad at, because candor converts better than confidence.
02The techniques
It's a pure static site, one index.html, hand-written CSS, vanilla JavaScript. No build step, no framework.
- Hero "spaghetti": a 2D
<canvas>draws nine polylines whose y-positions blend between a chaotic sum-of-sines and clean lanes. The blend is spatial (tangled on the left, resolved on the right) and the frontier eases forward on load and with scroll. - Before/after workflow: nodes are absolutely-positioned divs in a shared 1000×560 coordinate space; edges are SVG paths recomputed per state. Toggling runs a FLIP-style GSAP timeline: edges retract, shared nodes glide with
back.outeasing, new edges draw in viastroke-dashoffset. - Calculator: three range inputs, one honest formula (25–45% of repetitive hours, 46 working weeks), results tweened with GSAP so numbers roll instead of jump.
- Scribbles: the underlines and margin arrows are hand-plotted SVG paths that draw in on scroll,
getTotalLength()plus dash offset. The old trick, still the best one. - Type: Bricolage Grotesque for display, Schibsted Grotesk for text, Caveat for the handwriting, all served from fonts.bunny.net.
Everything respects prefers-reduced-motion: the canvas renders one calm, mostly-untangled frame; reveals appear without movement.
03The process
Three full passes, each one screenshot-driven: build, capture desktop and 390px mobile, read the images, list at least five concrete faults, fix them, repeat. The faults were real: a trust-ledger grid wrapping one word per line, calculator text splitting into stray columns, workflow nodes overlapping on a 390px screen. The rule was the same one DAYLIGHT sells: verify against reality, not against the plan.
04Build it yourself
The whole thing reduces to one good prompt for an AI agent:
That last sentence is the part that matters.