Constitution · readable surface

A laboratory, not a website.

HTML Design Lab is not a portfolio, a landing page, or a template kit. It is a library of visual thinking patterns — ways information should be seen, compared, and understood. HTML is the thinking medium. The question every specimen answers: does this form make the structure of the information clearer?

The pipeline

Knowledge does not start as UI. A reference is observed, then deconstructed, then named as a pattern, then tested as live HTML, then — only if it survives — adapted into a project. Interfaces are never copied. Forms are derived from information structure.

01 Reference inspires
A paper, a book, a site. Specimen, not source file. Observe before you interpret.
02 Pattern implemented as
A named principle that can travel. Maturity is explicit. Copies are not patterns.
03 Experiment adapted to
Isolated HTML. One question. Own CSS. The lab shell never bleeds in.
04 Project reflects back
Composition of surviving patterns. Built last. Recorded under Own HTML while it iterates.

The same chain is a graph in Knowledge. Markdown notes remain in DESIGN_KNOWLEDGE.md for git, not for reading in a browser.

Architecture

The repository is a small operating system for visual thought. Tokens stay global. The lab shell is quiet chrome. Experiments never import lab CSS. Languages and modes are lenses, not pages.

tokens/: Control, not brand. Type, color, space, motion. Language overlays live under tokens/languages/.
lab/: Quiet operating surface — gallery, knowledge graph, playground, own-HTML index, JSON catalogs.
experiments/: Isolated thinking pieces, versioned in place. One folder, one question.
patterns/: Named principles extracted from experiments. Markdown records, not a UI kit.
references/: Specimens. Observation and interpretation kept apart.
languages/: Interaction, motion, visualization, translation vocabularies.
modes/: Critique, adaptation, implementation, reverse engineering.
projects/: First-party HTML still under iteration. Not experiments, not third-party copies.
dna/: Compact visual-language sketches, including the lab shell itself.
briefs/: Project design briefs written before another repository is touched.

Visualization thesis

Form follows information structure. If the underlying structure is a relationship, the interface should not flatten it into a list. If it is a sequence, it should not be shuffled into cards.

This is the contract every experiment is judged against. Structure on the left, form in the middle, live specimen on the right. Empty cells are honest: the lab has not tested them yet.

Structure	Form	Specimen
Relationship	Graph	Interactive Knowledge Graph
Sequence	Timeline	Progressive Timeline
Process / causality	Flow, traced path	Animated Process Diagram
Comparison	Matrix, shared frame	Interactive Comparison
Mechanism	Simulation	Negative-Feedback Loop
Spatial relationship	Map, field	Spatial Information Map
Overview → detail	Zoomable canvas	Infinite Canvas
Emergence	Progressive construction	Scroll Narrative
Structure-in-image	In-situ annotation	Layered Image Annotation
Hierarchy in language	Syntactic entrance	Kinetic Typography
Hierarchy as tree	Tree, nested frames	Not yet — the spatial map is a field, not a tree
Uncertainty	Opacity, range, branching	Not yet a dedicated specimen

When an experiment is valid

A specimen is not done when it looks finished. It is valid when it addresses at least one of these questions, and produces a reusable insight rather than a polished page.

Representation How can this concept become a visual structure?
Explanation How can interaction make a mechanism easier to understand?
Navigation How can a large information space be explored without overwhelm?
Relationship How can relationships between concepts become visible?
Time How can change, evolution, or chronology be represented?
Mechanism How can a process be animated instead of merely described?
Comparison How can two or more systems be visually compared?
Scale How can users move between overview and detail?
Uncertainty How can ambiguity, confidence, or incomplete knowledge be shown?
Emergence How can complex structures emerge from simple elements?

Eight visual languages

Languages are lenses, not themes. The lab shell currently speaks Notebook + Editorial: warm paper, ruled type, quiet chrome. Experiments are allowed to contradict the shell. That contradiction is the point of isolation.

A Editorial Long argument, hierarchy of type, restrained chrome.
B Scientific Technical precision, labeled parts, accuracy before mood.
C Spatial Territory, legend, scale, you-are-here.
D Data Shared axes, comparison, distribution without decoration.
E Kinetic Motion as claim, not ornament.
F Exhibition Plate, label, in-situ pointing.
G Notebook Annotation, residue, thinking in public.
H Simulator Control, disturbance, readout.

Pattern maturity

Naming a pattern too early freezes a guess. Nothing is promoted by taste alone.

Discovered Seen in an external reference.
Deconstructed Mechanism understood.
Experimental Reimplemented independently here.
Validated Used in a meaningful project context.
Reusable Stable across more than one project.
Core pattern Part of the personal design language.

Four modes of use

Critique

Analyze a site, screenshot, or HTML. Do not recreate it. Observation is not interpretation.

Adaptation

Take a pattern into another domain. Name what remains and what changes before implementing.

Implementation

Build the next specimen. Smallest change. Preserve existing behavior. No unrelated rewrites.

Reverse engineering

Infer Design DNA. Do not restyle the source. Decompose website → principle, never the reverse.

Seed state

The laboratory opened 15 August 2026. Everything here is a first cut, not a canon. Exploration before standardization.

10 Experiments, all v01, still isolated questions
10 Patterns at EXPERIMENTAL — none validated yet
1 Composite deconstructed, not yet a single specimen
Own HTML Recorded for iteration; not composed from core patterns

Enter here

HTML is the reading surface. Markdown is the note behind it. Start with a live page, then open the source if you need the text.