Web Patterns
The concrete web implementations of Lucid interaction principles. Web Patterns name and specify the web-specific forms that abstract interaction structures take — bridging the interaction model into the actual patterns that appear in Lucid interfaces.
Patterns are not design conventions. They are named epistemic functions with defined failure modes. The named vocabulary is what allows patterns to be maintained, composed, and iterated across interfaces without losing structural integrity.
The interaction model defines principles. Interface structures define structural types. Web patterns define how those principles and structures are implemented in the specific medium of the web — with its layout constraints, browser capabilities, responsive breakpoints, and interaction affordances.
A pattern is the place where an abstract principle becomes a concrete decision. The named vocabulary ensures that the decision is made once, with full epistemic grounding, and then reused with consistency.
Without named patterns, every interface implementation solves the same structural problems independently — producing inconsistent results and losing the connection between individual decisions and the principles they are supposed to implement. The pattern vocabulary is what makes a collection of interface components into a coherent interaction system.
The patterns below are the current core vocabulary for the web context. They are not exhaustive — the vocabulary extends as Lucid interfaces take on new structural requirements. But each pattern is grounded: it has a named source in the interaction model or interface structures, a defined function, and a named failure mode.
Six core patterns across field, sequence, comparative, AI interface, and navigation categories. Each pattern is named, grounded, and composable.
A layout pattern derived from field structures — positions information as a spatial landscape rather than a sequential list. Items are arranged by conceptual proximity, tension, and relation. The user navigates by proximity, not by scrolling through an ordered set. Used wherever the content has genuine multi-positional structure: theory comparison, position maps, concept landscapes.
A layout pattern derived from sequence structures — organises content as an explicit epistemic progression. Each section corresponds to a phase of the reasoning arc (divergent, navigational, convergent). The user moves through structured stages, each with a distinct epistemic character. Used for guided inquiry pages, argument development, DCR-aligned content flows.
A layout pattern derived from comparative structures — places two or more positions, approaches, or claims in explicit structural contrast. Columns are not categories; they are epistemic positions. The grid makes the relation between positions visible as structure, not as prose. Used for distinction sections, approach comparisons, convergent/divergent mode contrasts.
A component pattern implementing AI interface rule 2 (mode signalling) — a persistent, visible signal of the AI system's current reasoning mode. Divergent mode carries the green signal; convergent mode the blue; navigational mode the amber. The signal is not decorative; it gives the user immediate epistemic context for any AI-generated output on the page.
A structured display pattern that wraps AI-generated output in visible reasoning context — the mode from which the output emerged, the positions that were held, what remains unresolved. The context block is the interface implementation of epistemic transparency. It prevents epistemic opacity from being the default state of AI output presentation.
A compact navigation component encoding position within the research stack — five layers (Foundations, Theory, Media Grammar, Interaction, Systems Theory), each with its signal colour and description. The active layer is highlighted. The strip encodes the vertical structure of the domain as interface furniture, keeping the user's position in the overall research architecture visible at all times.
Four properties that every pattern in the Lucid vocabulary must satisfy. These are not quality criteria; they are structural requirements. A pattern that lacks any one of them is not a Lucid pattern — it is a design convention.
Web patterns define the interface layer's structure — the named patterns that Lucid web interfaces are built from. But patterns are not self-executing. They require computational infrastructure: orchestration systems that compose patterns dynamically, reasoning environments that manage state across interaction phases, memory systems that maintain epistemic continuity across sessions.
This infrastructure is the domain of Systems Theory — the layer below Interaction in the research stack. Web patterns define what the interface must do; Systems Theory defines the computational architecture that enables it. The boundary between them is the interface layer's specification: what the patterns require from the infrastructure beneath them.
Systems Theory — Computational Infrastructure →