BAUCON GALLERY / 0.1.4

Form in space & time.

What if Bauhaus and Constructivism had grown up with programmable light and arcade cabinets?

Baucon is a personal design system for making information, state and change legible across materials.

Bauhaus up front. Bacon at the end.
Try the applied studies
A solid volume above its traced footprint. Horizontal courses show how it was built.
Faceted volume · Baucon branches into Bautendo and Bautari
FIELD MANUAL / 01MATERIAL → GEOMETRY → RESPONSEPORTFOLIO PREVIEW

00 / ACCEPTED DOCTRINE

Precise at rest.

Panda UI starts with alignment, legibility, and predictable operation. A small, playful gesture can explain a change, then return to the grid.

Keep the canvas fixed

Put information beside the thing it describes. Use a compact control for entry, a contextual workspace for analysis, and a deeper layer for evidence and limits. Joined surfaces share one seam.

Make evidence legible

Preserve provenance, units, and timestamps. Distinguish observed, calculated, inferred, simulated, delayed, missing, and unavailable data. A live clock says nothing about feed health.

Sources: First Principles v1, Panda UI and Operational Doctrine and Operational Controls and Motion v1. The warm-paper palette is recorded as an earlier portfolio expression. This gallery uses a white canvas. New spatial studies remain proposals.

APPLIED STUDIES

Read the terrain. Follow the motion.

Two studies adapt techniques from earlier Baucon projects. Compare what changes with what stays fixed.

Terrain cutaway

Terrain cutaway that tilts to reveal a triangulated surface

Inspired by the SOFO Open3D terrain study. This schematic uses synthetic geometry. Relief doubles the height above the baseline. Show the mesh to see its edges, then watch the view tilt above the terrain.

Staggered text reveal

Form follows evidence.

The phrase is visible at rest.

Adapted from the JDM reveal inspired by React Bits. A yellow field sets the stage. Sound groups appear from left to right, one word at a time, and the period scales in to end the phrase.

01 / SPACE

Give depth a job.

Separate context, evidence, and selection while keeping them tied to the same point. The offset shows reading order; it doesn’t measure altitude or certainty.

01.A / Layer separationPROPOSAL
Context, evidence and selection planes share a vertical anchor
Layer rendering

Emitted color distinguishes planes on a luminous surface.

Projection
  1. Selection · active target
  2. Evidence · supporting reading
  3. Context · stable reference

02 / TIME

Make change readable.

Interface time shows how a control arrives at a new state. Event time tells you when the underlying information was recorded. Keep those clocks separate.

02.A / Timeline anticipationSOFO REFERENCE
  1. 01 · In0–120 ms
  2. 02 · Hold120–440 ms
  3. 03 · Back440–560 ms

The triangle’s flat edge pulls in 18 px, exposing an amber strip. It holds there, then returns to the dashed line. The tip stays on the dot.

000 ms

Ready · at rest

0120440560

Move the scrubber to interrupt playback.

Developer handoff

Open the example in a browser to inspect the motion. Its HTML source includes the tokens, styles, and playback code in one file.

LIVE
Clock mode · synthetic example
Feed unavailable
No current observation. Last successful sample: 14:30 UTC.
Timing recipe · event and interface clocks
PhaseValueMeaning
Anticipate0–120 msReach 18 px inward from the final inset.
Hold120–440 msMake room for the incoming surface.
Settle440–560 msReturn to the final inset, with the right edge fixed.
Event timeExample: 14:30 UTCA labeled sample timestamp. Neither a pulse nor a transition certifies data freshness.

03 / CONTROLS

Move the glyph.
Keep the target.

Use small, reversible gestures to teach the controls. The X approaches the center on hover or keyboard focus. Its 44 px target stays put.

03.A / Operational inspectorPROTOTYPE

North approach station

Synthetic record. Sample event time: 14:30 UTC. No observation was made.

Provenance

Gallery fixture for reviewing disclosure and dismissal.

EXPERIMENTS

Baucon in evolved states.

Send one signal to see how three Baucon expressions treat the same horizontal move.

Signal at start.

Baucon

The reference. Paper, ink and a single marker follow a measured route.

Bautendo

A new gallery interpretation of Peter Kim’s Bautendo. A compact palette and a stepped sprite turn the route into a sequence of tile moves.

Bautari

The square advances in deliberate steps. On contact, its color takes over the grid one column at a time.

INTERFACE LIBRARY

Type & screen elements.

See how Baucon sets a headline, labels a control, and makes state readable. Try a few everyday controls, then explore the full component library.

Type treatment

Display

Form in space.

Futura, Century Gothic, Avenir, then sans serif. The hero uses a 1.00 line height and −0.025 em tracking. Adjust individual letter pairs and line gaps where needed.

Section heading

Make change readable.

Use sentence case and an active phrase. Headings use a 1.04 line height and −0.015 em tracking.

Body

Keep the timestamp close to the observation it describes.

The gallery body uses 1 rem with a 1.55 line height. Give instructions and descriptions enough room to wrap.

Labels and readouts

BUILD TIME

120 ms

Use tracked uppercase for short labels. Use tabular numerals for changing values and keep the unit visible.

Gallery treatment proposal. See the token register for font stacks and provenance.

Component examples

Actions

Ready

Dropdown

Slider

Explore the component library →

04 / SPECIFICATION

The working values.

Provenance travels with the token. The gallery uses proposals for its visual expression, a stable target contract, and timing and geometry taken from the SOFO reference.

Download JSON ↓Download CSS ↓
Token register / 0.1.4
FamilyTokenValueProvenanceUse
Colorgallery-surface#FFFFFFGallery directionWhite canvas and receiving surface for the Xerox Plate cover
Colorpaper#F1EDE1Portfolio referenceHistorical warm-paper material reference
Colorink#15130FPortfolio referenceText and geometric rules
Colorsignal#1D4C8CPortfolio referenceSecondary geometry, editorial links, and keyboard focus
Coloroxide#CF2F26Portfolio referenceGeometric specimen accent
Colorclock-live#68cf8aSOFO referenceLive clock mode only; does not indicate feed health
TypedisplayFutura, "Century Gothic", Avenir, sans-serifPortfolio referenceDisplay headings and body
Typetechnicalvar(--baucon-display)Gallery proposalCompact metadata and counters in the gallery
Typebody1remGallery proposalReading size, scales with user settings
Layoutspace-unit4pxGallery proposalSpacing increment
Layoutspace-gutter20pxGallery proposalFive spacing units
Layoutrule1pxGallery proposalSquare frame and table rule
Geometrytarget44pxAccepted control contractPrimary and icon target minimum
Geometrycollapse-glyph8.4pxSOFO referencePlus and minus horizontal extent
Geometrycollapse-stroke1.4pxSOFO referenceCollapse stroke
Geometrydismiss-glyph12pxSOFO referenceDiagonal X stroke length
Geometrydismiss-stroke1.5pxSOFO referenceDiagonal X stroke width
Depthplane-interval66Gallery proposalMaximum vertical interval in SVG viewBox units
Motioninvitation200msSOFO referenceRecenter a glyph without moving its target
Motioncollapse-turn180msSOFO referenceRotate the plus/minus stroke
Motionanticipation-offset18pxSOFO referencePeak inward timeline offset
Motionanticipate120msSOFO referenceReach the timeline anticipation offset
Motionhold-until440msSOFO referenceEnd of anticipation hold, measured from start
Motionsettle-at560msSOFO referenceEnd of timeline movement, measured from start
Motionreduced0msAccepted control contractImmediate final state for nonessential transitions
Layouthatch-offset8pxPortfolio referenceOffset behind framed paper specimens
Layouthatch-gap4pxPortfolio referenceClear spacing between offset hatch lines

Five first principles

  1. Design for the material.
  2. Geometry does work.
  3. Composition creates movement.
  4. Interaction teaches through response.
  5. Economy produces character.

Decision notes

  • Depth: projected geometry and a fixed anchor preserve relationships in a static image.
  • Time: use a scrubbable recipe for review and an immediate outcome when motion is disabled.
  • Material: keep roles stable while light, hatching, and contrast change. Physical e-ink and print proofs are still open.
Version history · three independent tracks
TrackVersionDateScope
First Principlesv12026-10-24Accepted founding direction.
Operational Controls & Motionv12026-11-07Accepted companion; SOFO is the implemented reference.
Gallery & project kit0.1.02026-11-11Initial spatial and timing preview.
Gallery & project kit0.1.12026-11-11Doctrine and skill provenance correction.
Gallery & project kit0.1.22026-11-11Xerox Plate cover and prior integration inventory.
Gallery & project kit0.1.32026-11-11Interactive terrain and text studies.
Gallery & project kit0.1.42026-11-11Session design baseline and component library.

05 / ADOPTION

Take it into a project.

Pin the kit, choose the material, and map local token roles before adding new ones. The boilerplate sets the contract; the skills guide specific work.

Project skills / bundled with the kit
SkillWhen to use it
baucon-adoptChoose the material, map tokens, and document project exceptions.
baucon-space-timeCompose layers, specify phases, and build a still alternative.
baucon-interaction-reviewReview targets, focus, state, interruption, and motion preferences.
Read the boilerplate before you copy it
# Baucon project instructions

Apply this block to the project’s own instructions (for example, append it to AGENTS.md). Pin the Baucon kit version and record which medium and behavior contracts you adopt.

## Design with Baucon

Read the current Baucon Design Baseline in the canonical Obsidian specification before designing. For portable projects, use DESIGN-BASELINE.md from kit 0.1.4 or later. Apply the current type, component, and motion defaults where relevant. Use gallery-specific numeric values as reference parameters.

Use Baucon as a design system for this project. Begin with the material and the task: identify where the work is read, what the user needs to know or do, and which constraints should give the expression its character. Treat Baucon First Principles v1, Panda UI and Operational Doctrine, and Operational Controls and Motion v1 as authoritative. Treat gallery colors, type, depth, and other values marked “Gallery proposal” as starting points for this project. Treat SOFO measurements as reference values unless an accepted contract says otherwise.

Use geometry to organize, identify state, or guide attention. Give spatial layers explicit roles: context, evidence, and active selection. Keep reading and focus order meaningful when the composition is flattened, and do not encode confidence or data height solely through visual elevation. Choose clear labels and a flat alternative where the depth carries information.

Separate event time from interface motion. State what is observed, inferred, modeled, delayed, or unavailable. Use one purposeful gesture at a time to show a cause, continuity, or change in state. Keep hit areas stationary, respond to repeated input, and preserve the outcome without motion. Preserve native controls and semantics, visible focus on non-text controls, caret-only focus on text and search fields, accessible names, keyboard operation, and usable touch targets. Use 44 px primary and icon targets for the operational profile. Make hover optional.

Start Panda UI with alignment, legibility, and predictable operation. Keep the context canvas fixed; put labels near their source and use joined surfaces with one seam. Provide compact controls, a contextual workspace, and a separate place for evidence and limits. Keep square frames as the paper default. Use paper and ink for map selection, use the borderless pulsing green dot for LIVE and saturated green for Reset feedback, and explain feed health separately. Keep scrollbars quiet and preserve native scrolling.

When an image calls for a print impression, use the existing Xerox Plate skill. Use flat ink on the actual receiving surface, with transparent negative space and no feathering or continuous gray wash. Keep text and controls above the plate. Treat the portfolio paper palette and hatch geometry as one documented material expression.

Map local semantic tokens to the adopted Baucon values before creating new ones. Record overrides with their reason and scope. Test narrow layouts, long labels, touch and keyboard input, reduced motion, and state interruption. Record evidence and limitations. Keep project exceptions local; propose changes to the shared system separately. Never claim adoption in another project or edit a reference implementation without a separate request.

For each reusable component or behavior, include an interactive specimen, provenance, token values, state and timing rules, reduced-motion behavior, acceptance criteria, and runnable implementation code.

Skills, tools, and prior integrations
CapabilityEvidence / statusHow it extends Baucon
Xerox PlateDocumented cross-project Baucon skill, created October 29, 2026. Canonical source is archived in the Obsidian vault; the installed entrypoint matches it.Applied to the axonometric cover. Flat ink over the actual receiving surface. Negative space stays transparent; text and controls sit above the plate. Download canonical skill ZIP ↓
Open3D PythonExternal skill reference. The Open3D library was integrated into SOFO's Medford terrain study.Prepared terrain meshes, levels of detail and feature edges. Cesium rendered the browser view. The Open3D geometry was bounded to Medford.
GSAPAnimation library used in the Ironline/JDM Baucon variation.Drove a staggered headline reveal with a reduced-motion fallback.
React BitsPattern reference in the same JDM implementation.Inspired the split headline reveal. The local implementation used GSAP.
21st.devRequested as a JDM component reference.Used to frame the exploration. Component adoption remains unverified.
Anthropic frontend-designExternal skill considered during the October Baucon portfolio iteration.Typography and composition guidance. Installation or application remains unverified.
Motion accessibilityExternal W3C technique; applied as a gallery practice.Preserve results without nonessential motion, with a user-controlled still mode.
CSS 3D renderingExternal standard; candidate technique for future prototypes.Test perspective and true depth when they convey more than a fixed projection. This gallery uses SVG projection.

The inventory records how each resource was used or considered. The sources include skills, implementation libraries, and design references.

INTERVIEW ROUTE / THREE MOVES

Show the decisions.

  1. Flatten the stack. Explain what the geometry adds and what survives without depth.
  2. Pause at 120 ms. Point to the fixed edge and explain why the small movement matters.
  3. Dismiss with Escape. Show the difference between a visual gesture and a reliable state change.