Lucid Design System
The Lucid Design System is not a style guide. It is the visual and structural encoding of Lucid Media Grammar principles into interface components and token architecture. Every component in the system is a grammar rule made interactive — a structural constraint given interactive form.
Design systems are commonly invented: assembled from aesthetic decisions, convention, and preference. The Lucid Design System is derived — from the cross-media grammar principles that govern how Lucid concepts must appear across all expressive domains, applied specifically to interactive interfaces.
The standard failure mode for design systems is invention: a team assembles a collection of visual choices — typefaces, colour palettes, spacing conventions — from aesthetic preference, market convention, or brand direction. The result is a style system: a consistent appearance without structural grounding. Consistent appearance is not the same as structural coherence.
The design system is grammar made touchable. Each token encodes a structural constraint. Each component is a grammar rule given interactive form.
The Lucid Design System is derived from cross-media grammar — the shared structural logic that governs how Lucid concepts appear across all expressive domains. Cross-media grammar defines invariants: structural properties that must be preserved regardless of medium. The design system is the application of those invariants to the interactive interface medium specifically.
This means the design system is not prior to or independent of the grammar — it is downstream of it. Changes to the grammar propagate through the design system. The design system cannot be modified on aesthetic grounds without a corresponding modification to the grammar it encodes. Form follows structural function; the system encodes that constraint in reusable, composable primitives.
Tokens are the design system's most primitive layer — named values that encode structural constraints directly. A token is not a visual preference stored in a variable; it is a structural commitment given a name. Six token categories encode the full range of epistemic structural properties the interface must express.
Three values encoding reasoning modes: divergent (open field, multiple readings held), convergent (closed field, single reading established), and ambiguous (tension structurally preserved). Signal tokens are not colour choices — they are epistemic state markers. An interface that uses them correctly communicates which reasoning mode is active, not merely which colour is present.
Two depth values — raised and elevated — encoding epistemic priority and structural depth. A raised surface carries more epistemic weight than the base. An elevated surface carries more than raised. Surface layering is a structural claim about what matters most in the current reasoning context, not a visual depth effect.
Four visibility values — primary, secondary, tertiary, muted — encoding epistemic legibility. Primary text is structurally foregrounded: it is what the reasoning must attend to first. Muted text is structurally backgrounded: it provides context without demanding attention. The visibility gradient is an epistemic hierarchy, not a typographic preference.
Structural boundary encoding. A border is not a decoration — it is a claim that two regions are epistemically distinct. Border presence and weight encode the strength of the distinction. Where there is no structural distinction, there is no border. The token carries the boundary's epistemic significance.
Relational distance as conceptual distance. The space between two elements is a claim about their conceptual proximity — how closely related they are in the reasoning structure. Tight spacing encodes tight epistemic relation. Wide spacing encodes distance or independence. Spacing is not white space; it is relational structure made visible.
Temporal structural encoding. Motion in a Lucid interface is not decorative animation — it encodes epistemic transition: the movement from one reasoning state to another, the resolution of ambiguity, the consolidation of a position. Motion timing and character are structurally determined by the epistemic transition they represent.
Components are composed from tokens and implement grammar rules at a higher structural level. Four component categories cover the full range of epistemic functions a Lucid interface must perform.
Interface elements whose primary function is to communicate epistemic state. Signal components render the system's current reasoning mode, uncertainty level, or position visibility. They implement the epistemic transparency rule at the component level. A signal component is not an indicator — it is a structural element whose form encodes reasoning state.
Container elements that establish the epistemic depth and priority of their contents. Surface components implement the surface token hierarchy — raised and elevated — in composed form. A surface component's structural role is to position its contents within the epistemic depth structure of the interface.
Elements that encode movement through the reasoning structure — between layers, positions, and epistemic states. Navigation components in Lucid interfaces are not menus; they are structural mappings of the reasoning architecture, made traversable. Position within a navigation structure encodes position within reasoning space.
Elements whose function is to make reasoning content visible and structurally legible. Reasoning display components implement interface structures — field structures, sequence structures, comparative structures — in composed form. They are the primary component class for rendering epistemic content: the content that reasoning acts on.
All Lucid interface components — whether in the design system or built from it — must satisfy four structural constraints. These are not design guidelines or preferences. They are rules derived from the grammar. A component that violates them is structurally incorrect regardless of its visual quality.
Every component must reveal its epistemic function through its form. Form that conceals function is not merely unclear — it is structurally incorrect. A component is epistemically transparent when its structural character (what state it represents, what relation it encodes) is legible from its form without requiring explanation.
Visual hierarchy must track conceptual hierarchy without deviation. What is structurally most important must be visually most prominent. Hierarchy that reflects preference or convention rather than conceptual structure introduces a discrepancy between form and content — a grammar violation.
The divergent and convergent reasoning modes must be distinguishable at the component level. An interface that presents divergent and convergent content with identical form is structurally incoherent — it has removed information that is part of the content. Mode legibility is a minimum structural requirement, not an enhancement.
When epistemic content is genuinely uncertain or holds multiple simultaneous readings, the component rendering it must not resolve that uncertainty to false clarity. Ambiguity preservation means the component form must hold the tension that the content holds. A component that forces certainty on uncertain content has changed the content.