DESIGN.md · diff

git:20260829.0ee1573 to git:20260904.39b8e52

30 added, 154 removed. Audit A to A.

- ---

- name: LIghtJUNction

- description: A continuous living trace for an inspectable digital assistant.

- colors:

- outer-void: "#080908"

- obsidian-wall: "#191916"

- raised-graphite: "#20211d"

- bone-ink: "#e8e3d9"

- soft-bone: "#c8c2b8"

- evidence-muted: "#918d85"

- oxidized-signal: "#c9734f"

- instrument-ink: "#171713"

- typography:

- display:

- fontFamily: "Manrope, Arial, sans-serif"

- fontSize: "clamp(2.8rem, 5.6vw, 5rem)"

- fontWeight: 690

- lineHeight: 0.94

- letterSpacing: "-0.065em"

- identity:

- fontFamily: "Manrope, Arial, sans-serif"

- fontSize: "clamp(3.9rem, 7.5vw, 6rem)"

- fontWeight: 680

- lineHeight: 0.84

- letterSpacing: "-0.075em"

- body:

- fontFamily: "Manrope, Arial, sans-serif"

- fontSize: "clamp(0.94rem, 0.9rem + 0.16vw, 1.05rem)"

- fontWeight: 450

- lineHeight: 1.62

- evidence:

- fontFamily: "IBM Plex Mono, monospace"

- fontSize: "0.71rem"

- fontWeight: 500

- lineHeight: 1.45

- rounded:

- none: "0"

- spacing:

- gutter: "clamp(1.4rem, 5.4vw, 5rem)"

- chapter: "clamp(10rem, 16vw, 16rem)"

- components:

- action-link:

- backgroundColor: "transparent"

- textColor: "{colors.bone-ink}"

- typography: "{typography.evidence}"

- rounded: "{rounded.none}"

- padding: "0.2rem 0"

- height: "2.9rem"

- icon-control:

- backgroundColor: "transparent"

- textColor: "{colors.bone-ink}"

- rounded: "{rounded.none}"

- width: "2.55rem"

- height: "2.55rem"

- instrument-sheet:

- backgroundColor: "{colors.bone-ink}"

- textColor: "{colors.instrument-ink}"

- rounded: "{rounded.none}"

- padding: "clamp(1.2rem, 4vw, 3rem)"

- ---

- # Design System: LIghtJUNction

- ## Overview

- The creative north star is **“The Living Junction Trace.”**

- LIghtJUNction is rendered as one continuous obsidian wall crossed by an oxidized signal. The wall is not a dark-theme dashboard: it is a slowly authored field where ASCII routes, repository evidence, live shaders, and operating boundaries all belong to the same trace. Long quiet passages are intentional; density arrives only where the underlying system becomes inspectable.

- The visual world is technical without adopting generic cyberpunk, terminal rain, or Swiss-brutalist portfolio conventions. Motion explains causality: routes meet, glyphs form a portrait, the visitor disturbs the field, and the system reforms. Fable is an authority for continuity and pacing only; its assets, drawings, prose, dimensions, and scene order are never copied.

- **Key Characteristics:**

- - One continuous wall instead of alternating page templates.

- - Deterministic ASCII motion as moving evidence, not decoration.

- - One oxidized signal accent with large areas of low-chroma material.

- - Open composition around real instruments rather than ornamental cards.

- - Visible recovery, reduced-motion, keyboard, and ownership boundaries.

- ## Colors

- The palette is a low-chroma field with one rare warm signal.

- ### Primary

- - **Oxidized Signal** (`oxidized-signal`): scroll progress, active junctions, selected controls, ASCII accents, and evidence links. It should remain a minority of every viewport.

- ### Neutral

- - **Outer Void** (`outer-void`): the page surround and deepest live-media fallback.

- - **Obsidian Wall** (`obsidian-wall`): the single continuous authored surface.

- - **Raised Graphite** (`raised-graphite`): restrained tonal separation for actual instruments.

- - **Bone Ink** (`bone-ink`): identity, headings, and essential text on the wall.

- - **Soft Bone** (`soft-bone`): secondary high-contrast text and line work.

- - **Evidence Muted** (`evidence-muted`): explanatory copy, metadata, and inactive navigation.

- - **Instrument Ink** (`instrument-ink`): text inside the light repository instrument.

- **The One Signal Rule.** Oxidized Signal identifies active causality; it is not a section background, decorative gradient, or general-purpose brand fill.

- ## Typography

- - **Display Font:** Manrope (Arial fallback)

- - **Body Font:** Manrope (Arial fallback)

- - **Label/Mono Font:** IBM Plex Mono (monospace fallback)

- - **Rare Annotation Font:** Instrument Serif, used only when a human annotation needs contrast.

- **Character:** Identity type is dense, plainspoken, and tightly spaced. Monospace is reserved for evidence that could plausibly be read from a running system: route labels, counts, status, commands, timestamps, and controls.

- ### Hierarchy

- - **Identity** (680, fluid up to 6rem, 0.84 line-height): `LIghtJUNction` in the opening field only.

- - **Display** (690, fluid up to 5rem, 0.94 line-height): chapter propositions with deliberately short measures.

- - **Title** (650, 1.35–3.8rem): projects, studies, and operating boundaries.

- - **Body** (450, fluid around 1rem, 1.62 line-height): explanatory copy, usually no wider than 38 characters in composed scenes.

- - **Evidence** (500, 0.57–0.71rem): controls and data; never substitute it for readable body copy.

- **The Evidence Test.** Monospace must name a state, action, coordinate, value, or source. If it does none of those, use Manrope.

- ## Layout

- The desktop wall is capped at 74rem and centered inside the outer void. A route spine crosses the complete document; chapters share the same material and differ through density, offset, and scale rather than background swaps. Evidence clusters alternate left and right around the route, while real instruments may occupy a bounded light sheet.

- Chapter spacing is intentionally large. Featured work uses offset fragments rather than equal rows. The project index is the exception: its density is functional and contained inside a light instrument sheet. Below 720px, all evidence becomes single-column, the route shifts toward the left edge, actions remain at least 44px tall, and no desktop coordinate is preserved merely for visual similarity.

+ # LIghtJUNction — Open Studio

- ## Elevation & Depth

+ The profile is an ongoing creative practice: public code, live studies, and a place to begin a conversation. Its identity comes from a typographic cover, a suspended light sculpture, generous margins, and an exhibition-like sequence of real work.

- The wall is flat by default. Depth comes from tonal material, moving glyph density, and overlap with the continuous route. Shadows are not a general component treatment. The only hard offset shadow belongs to the bounded light instrument and the protected Challenge II artifact, where it distinguishes a manipulable object from the wall.

+ ## Visual language

- **The Instrument Exception.** A surface may lift only when it contains a real tool, artifact, or protected interaction. Narrative copy never becomes a raised card.

+ - The light theme uses a cool, near-white field (`#f1f2ed`) and deep olive-black ink (`#20241c`). The dark theme uses `#141613` and near-white text. Both share the same compositions and proportions.

+ - Acid yellow-green (`#d8f36a`) marks the closing correspondence page and selected controls. On light surfaces, readable links use dark olive (`#53671c`); the bright accent is never small text on a light background.

+ - Instrument Serif gives the large `LIght` word and chapter titles their character. Manrope carries `JUNction`, project names, body text, and actions. IBM Plex Mono is reserved for catalogue labels and real repository data.

+ - Type scales with the viewport. Main body copy starts at 16px; controls at 14px; secondary captions at 12–13px. Long project names wrap inside their columns.

+ - Flat rules and differences in scale establish hierarchy. Corners remain square. Shadows belong only to the movable contact panel and encrypted result.

- ## Shapes

+ ## Composition

- Corners are square. Rules are one pixel, controls are rectangular, and the continuous route supplies the only recurring curve. Circular geometry is limited to data points inside the motion systems; there are no decorative blobs, pills, or giant background circles.

+ The opening pairs a two-line identity with an original photograph-like sculpture. Its introductory sentence and two actions remain in normal document flow. The artwork moves only slightly with the pointer and has explicit dimensions to reserve its space.

- ## Components

+ The language portrait is a framed interactive exhibit beside three operating notes and actual project data. Selected projects form a ruled exhibition checklist, with large names and compact descriptions. The ASCII junction moves to the process chapter, immediately above the four existing steps.

- ### Action Links

+ Challenge II keeps its original public surface and asset. The live shader gallery occupies a dark film strip with visible controls, readable fallback states, and horizontal scroll snapping. The archive combines project filters, repository details, and the terminal in one working area.

- Underlined text actions have no fill and no radius. Hover shifts the text to Oxidized Signal; focus uses a visible two-pixel outline with offset.

+ Principles use a quiet two-column spread. The closing page changes to acid green, with a large serif invitation and the existing contact actions.

- ### Icon Controls

+ ## Responsive behavior

- Theme and fullscreen controls are square 2.55rem instruments with a faint rule. Hover replaces the surface with Oxidized Signal and reverses the text color.

+ At 760px, the navigation becomes a second, fully visible row. Opening content stacks in reading order, and the artwork shifts to a narrower right-aligned figure. Portrait, selected work, challenge, principles, and shader descriptions become single-column layouts. Repository cards stack below 680px. No essential navigation item disappears.

- ### Navigation

+ Interactive controls have at least 44px targets. The gallery track is positioned so its cards and controller share an `offsetLeft` reference; trailing space lets the final narrow study align correctly. The skip-link target accounts for the sticky header.

- The navigation is a restrained fixed index inside the wall width. Active entries draw a one-pixel Oxidized Signal rule. On narrow screens it becomes a horizontally scrollable second header row rather than a hidden menu.

+ ## Motion and accessibility

- ### Project Instrument

+ Text is visible before JavaScript and before reveal observers fire. Entrance motion changes position without hiding essential content. The glyph portrait and ASCII routes retain pointer interaction, viewport observation, responsive canvas sizing, and reduced-motion behavior. Retired flock, star, and paper-tilt handlers are removed.

- The repository index is a light, square-cornered sheet containing groups, loading/failure/empty status, ruled rows, and direct links. It remains the densest component because its role is inspection, not storytelling.

+ Reduced motion disables CSS animation and transforms, and retains settled canvas output. Native keyboard focus stays visible. Theme persistence, terminal key handling, project status regions, local OpenPGP encryption, and the encrypted-result focus trap remain.

- ### ASCII Junction

+ The secure card is content-sized because its controller translates the whole card. Its content scrolls within the viewport, including on small screens. The result dialog and toast remain direct children of the body for modal isolation.

- Four deterministic character routes converge and continue through a shared point. Pointer proximity displaces characters locally, scroll advances the flow, and reduced motion renders the settled route. Labels use real operating verbs: Observe, Build, Verify, Return.

+ ## Protected surface

- ### Glyph Portrait

+ Do not reinterpret or regenerate Challenge II during presentation work. Keep `public/junction-ii.png` byte-for-byte, the public challenge text and links, the ordered process articles and existing public attributes, and the relevant theme/motion initializers. No solutions or reconstruction details belong in this document.

- Characters assemble into a human portrait, repel from the pointer, and reform. The surrounding text explains the operating behavior so the canvas is never the sole source of meaning.

+ ## Asset provenance

- ## Do's and Don'ts

+ `public/images/light-study.webp` is an original image generated for this redesign with OpenAI image generation, without reference images. The brief was a suspended brushed-aluminum ribbon and fine metallic-wire sculpture in near-black space, with white highlights, one acid green reflection, and tactile grain. There are no letters, logos, or interface elements. The original 1122 × 1402 image was encoded as WebP without changing its composition; the shipped file is approximately 45 KB. This image is a visual study, not a claimed physical artwork or project output.

- ### Do

+ Existing self-hosted fonts retain their license files. The Challenge II image and shader source assets retain their original bytes and provenance.

- - **Do** preserve one continuous material and route across the whole public page.

- - **Do** let real state, evidence, and visitor input drive motion.

- - **Do** leave large quiet intervals between dense technical scenes.

- - **Do** keep content and recovery paths visible before animation finishes.

- - **Do** keep reduced-motion output stable and complete.

+ ## Source organization

- ### Don't

+ - `src/styles.css`: reset, semantic base styles, project/terminal interfaces, contact overlays, and shared responsive rules.

+ - `src/couture.css`: fonts, both theme palettes, chapter compositions, gallery, and responsive art direction.

+ - `src/story-wall.ts`: live canvas initialization, observed entrance motion, and scroll progress.

- - **Don't** reintroduce cream-serif editorial templates, black-blue Swiss portfolios, Matrix rain, card walls, or section-by-section theme swaps.

- - **Don't** use Oxidized Signal as wallpaper or gradient text.

- - **Don't** turn prose into cards, badges, or decorative technical labels.

- - **Don't** copy Fable assets, source, drawings, prose, dimensions, or scene order.

- - **Don't** expose or weaken Challenge II while changing presentation.

+ The previous stacked visual overrides have been replaced. The dependency manifest and lockfile are unchanged.