Johnattan's Laboratory
← All experiments

Building the lab: a design system and a website with AI

This site is an experiment too. With AI I designed a brand, a design system and a working website, from the first sketch to the last pixel.

  • Design
  • Images

Updated22 Oct 2026

The problem

I had dozens of personal AI projects and nowhere to share them. Decilion's website is for the company's work, and most of these projects have nothing to do with it.

What was out there

Website builders and portfolio templates would have made it look like every other personal site, and none of them is built around a running log of experiments.

What I built

This site: a brand, a design system with tokens and a contrast check, an illustrated lab, a logo, and a small build script that turns one Markdown file per experiment into these pages.

Contact sheet of six generated concept images in three columns, A Secret Lab, B Lab Console and C Lab Notebook, each showing a homepage on top and an experiment page below, in purple, lime green and orange.
Round one: three directions generated as whole pages before any code. The image model invented the titles, charts and dates in them.
Contact sheet of round two concepts combining the notebook pages with the illustrated lab: two homepage takes, two experiment page takes, the second with a pipe running from the header machine down to the results chart, and a phone view.
Round two combined the notebook pages with the secret-lab hero, and the project page with the pipe became the locked reference. The text in these images is invented too.
Test sheet of six logo ideas (door, keyhole, machine, J-tube, beaker chart and goggles) in lime and ink, each shown on paper, on the purple lab wall, blurred as if seen across the room, and at 32 and 16 pixels.
I tested every logo idea on paper, on the purple wall, blurred and at favicon size. The J-tube held up best and won.

Equipment

How I built it

  1. I explored three visual directions as whole-page concept images before writing any code.
  2. I locked one combination as the visual reference and wrote design tokens with a contrast check.
  3. I generated the lab's artwork, then traced it to vectors and upscaled it in Magnific.
  4. I built the pages in plain HTML and CSS, generated from these notes by a short Python script.

What I learned

Real data catches invented content. The first concept images gave this site's first experiment the title "Why do Colombians pay more out of pocket than Brazilians?", and WHO data says the opposite.

A logo has to survive being small and far away. I now test every mark blurred and at 16 pixels before choosing.

Lab notes

  1. The equipment page is now a wall where every tool hangs as a plate with its logo or initials, and a pinned note opens with what I use it for and where. Model versions are grouped into one entry per family, and each entry links to its product, its source project or the experiment.

  2. I moved the lab to j-garciaruiz.github.io/lab and rewrote every page in the first person, since this is my journal; the AI is still named wherever it did the work.

  3. I turned the site into a lab journal with tags, lab equipment, these lab notes and an about page. Then I surveyed 219 project folders, picked 27 to write up, and reshaped every experiment page around the problem first: what I needed, why nothing out there was good enough, then what I built.

  4. I built the design tokens with a build step that fails on any colour contrast below WCAG AA; it caught the bright orange stamps and the focus ring. In Magnific I set up a brand kit for the lab, traced the machines to vectors and upscaled the hero, and the J-tube won a test of six logo ideas on paper, on the purple wall, blurred at a distance and at favicon size.

  5. I picked the concept, Johnattan's Laboratory: an original cartoon lab inspired by Dexter's Laboratory and kept fully separate from Decilion. Codex generated three visual directions, and I combined the notebook pages of one with the secret-lab hero of another.

© 2026 Johnattan García-Ruiz Last updated