Arrange · Design System · Versions

Specimen · 2026

Versions, kept additive.

Each version is a complete, self-contained proposition — its own tokens, primitives, and visual identity. New versions are added; previous versions are never edited. Open any version in light or dark to compare.

Additive rule

v1 will not be modified to look like v2. Every version stands as it was. Lessons learned move forward into the next.

Each version owns its CSS

v1 lives in css/arrange-system.css. v2 in css/arrange-v2-werkstatt.css. Primitive names are shared; token values diverge.

§

Versions

10 · alternates
01
Paper & Ink v0.1 · default

Warm paper, graphite ink, drafting blue as the only accent. Rams-disciplined; an architect's tool that disappears into the work. Sentence-case headings, two radii, three weights.

warm neutrals· one accent· 2 / 6 radii· 180 ms motion
02
Werkstatt v0.2 · bauhaus-skewed

Pushed harder into the Bauhaus inheritance. Pure white and ink, the primary triad (red / yellow / blue) bound to roles, lowercase display type after Bayer, sharp corners after Dessau, heavy black rules between sections.

primary triad· lowercase· 0 radius· geometric display
03
Tisch v0.3 · rams · braun · plane

The plane is a physical surface — a workshop table lit from upper-left. Components are products on it: pressed keys, paper sheets, cut slots, ceramic chips. Shadow is the language of state. One warm accent — the indicator light on a Braun radio. Rams' ten principles taken literally, not stylistically.

physical plane· 4-step elevation· directional shadow· burnt sienna accent
04
Schalter v0.4 · braun · mechanism

v3's plane theory pushed harder. Where v3 had objects resting on the plane, v4 has mechanisms that interact with it — slide toggles, rotary knobs, buttons that depress into the surface, segmented switches with LED-dot state, and slot keys that extrude in and out. Bauhaus + Rams, taken as a control-panel vocabulary.

6 mechanism primitives· 5 LED variants· spring overshoot motion· live demos
05
Vals v0.5 · zumthor · matter

Zumthor's Magic of the Real. The interface is a cast surface — stratified material, type engraved into stone, long warm shadows, a single tungsten light source. Components are carved into matter rather than placed on a plane. All nine of Zumthor's atmospheric qualities are honored across the showcase sections.

oak warm-dark default· sunlit concrete alt· engraved type· tungsten 2700K accent
06
Skala v0.6 · precision instrument

v4's mechanism vocabulary refined into a jeweller's instrument: hairline cells, brushed metal or matte black enamel, cobalt primary action, Leica-like tickmarks, and domino-pip data displays. The sliders and knobs stay alive, but the mass is gone. State is read in enamel inlay.

hairline grid· enamel inlay· domino pips· flat precise motion
06.1
Skala v0.6.1 · clean instrument

A preservation pass on v6: the same hairline grid, enamel inlays, domino pips, and precise motion, with the light theme simplified into a cleaner off-white field. The dial drops the watch chapter ring, hand, and pin in favor of a quiet radial progress readout.

clean light field· simple radial dial· v6 vocabulary intact· no watch hand
06.2
Skala v0.6.2 · physical instrument

v6.1's clean off-white surface and enamel palette, overlaid with soft physical controls inspired by the Rams screenshot set: animated pucks, pill toggles, console boards, lens buttons, and rocker plates. The softness is contained by v6 hairline rails and measured cells.

physical controls· v6.1 colors· show-and-tell gallery· hairline rails
07
Rille v0.7 · groove & inlay · synthesis

The synthesis of v4's mechanisms and v6's enamel discipline. Whiter than v3/v4, more physical than v6. Parts of the surface are honestly recessed as routs — UI grooves where toggles slide and faders ride. Enamel-color inlays mark state. Chamfered toggles introduce 45° angles when Bauhaus geometry is the right voice. No screws, no faux-aluminum — the screen is honestly the screen.

recessed routs· enamel inlay· chamfered angles· cobalt primary
08
Mulde v0.8 · pocket · puck · the dot in the field

The synthesis of v6's plain field and v4's mechanism vocabulary, with a new conceptual move: the field is the object. Components live in pockets and extrude as pucks. A single warm-orange indicator dot, placed in the field next to the active control, says "this is on." Whiter than v7. Pillowy radii. No multi-color palette. No faux materials. The pocket-and-puck is the only construction.

field as object· pocket + puck· orange dot indicator· pillowy ambient shadows
09
Kugel v0.9 · ball · cut · enamel trails

The synthesis that lands: v4's physical-but-muted mechanism feel + v6's hairline linework (cut channels, tickmarks, domino pips) + v8's knob and rocker. The defining new move is the toggle — a hairline-outlined slot with a rolling white ball; enamel color fills the slot behind the ball as it rolls. Buttons are honest cuts in the field, not pucks on it. Color now follows v6.1's enamel palette.

rolling-ball toggle· cuts not pucks· hairline linework· enamel pips
10
Apparat v0.10 · the mechanism set expanded

v9 cleaned and expanded. Knob ticks no longer overlap the cap; rocker is properly inverted (active = depressed with color ring). Pips become pucks-in-cuts. Five new mechanisms — step counter, lever, tumbler, gauge, hold-pad — each its own mechanical idea, not a button variant. Plus three new primitives that unlock unlimited nesting depth without stacking cuts: stratum, crest, margin-rule — the five-level containment grammar.

step · lever · tumbler· gauge-strip · hold-pad· containment grammar· application demo
11
next: rural studio · eisenman

Reserved. Candidate directions: Rural Studio (vernacular materials, the citizen-architect's discipline of working with what's at hand) · Eisenman (formal autonomy, the nine-square grid as visible armature, an interface that argues back). Each is a different argument the application is asked to host.