v6.2 · Specimen 2026 · physical instrument
The instrument, touched.
v6.2 keeps the clean off-white field and enamel palette of v6.1, then overlays the physical animated control language from the Rams-inspired studies: soft pucks, pill toggles, concave keys, lensy buttons, and console boards. The important constraint stays v6: every soft object is framed by hairline rails, ruled cells, or precise instrument markings.
Physical Show & Tell
v6.1 color · Rams-soft controls · v6 hairlinesThese are live CSS translations of the screenshot set. Click the toggles, pucks, rails, decks, rocker keys, lens, and lever: the forms get soft physical motion and plastic depth; the color system remains v6.1's enamel palette, and each component is still disciplined by a hairline frame, rail, or measured label.
Surface & Linework
clean field · hairlines · tickmarksThe case is a clean off-white field in light theme; matte black enamel in dark. Structure comes from a single hairline weight that encloses every region. Critical hierarchy uses a 2px rule. The physical components can be soft and animated, but the system still reads through ruled cells, measured rails, and enamel-filled channels.
Every region is enclosed in a hairline rectangle. The grid is a sheet of cells. Where meaning is needed, an .enamel inlay sits inside.
A .channel is a routed groove in the plane filled with enamel. Thin channels read brighter and more precise; wider channels are quieter, more material, like color sitting under a polished surface. Use them for progress, allocation, phase depth, and subtle comparative data.
The tickmark row is a ruler face. Major ticks at every quarter, minor ticks between, and a single accent tick marks the current value. Useful as a header above faders and inside .dial perimeters.
Three clean surface tones, no brushed stripe. The quieter field lets the physical controls carry depth while the hairline system keeps the page from becoming soft all over.
Enamel Palette
six jewels · one role eachSix saturated jewel-tones, each reserved for exactly one role. Color is never decorative; it labels a function. Each enamel appears in small filled cells inside hairline metalwork — champlevé, applied to UI.
Squared, round, large, small, wide, and side-strip — the same enamel applied in different cell shapes. The strip form is used as a left-side row indicator in tables.
Pips · Domino Dots
quantity as patternA new primitive for v6. Six dot wells arranged 3×2, lit in classic die patterns. The pattern reads instantly at a glance — quantity, phase, severity, count. Lit dots are filled with enamel; unlit are hairline rings.
Six phases of a project, six dot patterns. 1 = center; 2 = opposite corners; 3 = diagonal; 4 = four corners; 5 = four corners + center; 6 = full pattern. The pattern of lit dots is the data.
Click any pip group to advance the lit-count by one (rolls 6 → 0 → 1). Notice how the eye reads the new pattern instantly, without counting.
Type as Marking
Inter · JetBrains Mono · 11 / 13 / 15 / 18 / 26 / 40Inter as the case lettering; JetBrains Mono as the engraved instrument-face marking. Three weights — 400, 500, 600 — used confidently but never bombastically. Eyebrow labels track at 0.10em; mono marks track at 0.14em for a Cartier-rail feel.
Mechanisms · refined
.toggle · .knob · .btn-deep · .segmented-deep · .slot-btn · .fader · .ledOff · hairline ring only. On · ring fills with enamel. No halo, no glow. The dot is a piece of inlay, not a light.
The track is a thin pill bordered with a hairline. A small knob rides above. On the throw, the knob slides and the inlay at the on-end fills with enamel. No spring overshoot — 160 milliseconds, then it's there.
Hairline tickmarks ring the perimeter every 30°. The notch is a small triangle; the hub is a cobalt enamel dot inside a hairline ring. Very Leica aperture. Click to advance one detent.
A non-interactive instrument display. The enamel arc sits in a routed channel around a plain center readout. There is no chapter ring, no hand, and no center pin; the value is read from the arc and the mono number.
Off · hairline rectangle, empty. On · the cell fills with enamel and the text inverts. No depression. The state is in the inlay.
The container is a hairline-outlined row of cells, divided by hairline rules. Each cell carries an inlay dot — empty until active, then filled with enamel. No depression; just the inlay change.
A precision key — ET66, not mechanical typewriter. On press the key drops one pixel and gains a thin inset rule; on release it's back. 60 milliseconds. No bounce.
The track is a hairline rule. The fill is enamel. The thumb is a small puck with a hairline mark down its centre. Above the first fader, a .tickmark-row marks the detent scale.
Inherited Primitives
all of v3 · v4, in skala registerFocus turns the outline cobalt — the precision-instrument equivalent of a focus ring. No inset cut, no glow.
Tags are hairline-outlined pills. A small enamel cell inside indicates role. The matte .dot remains for tabular badges; the .led primitive is reserved for mechanism state.
A small panel of rooms, ready for review.
Composition · the programming room
all primitives, working togetherA room is an instrument. Boolean fields are toggles. Enums are segmented cells. Phase is shown as pips — three of six lit. Area is a fader. Linking is a slot button; saving and syncing are deep keys.
| Room | Code | NSF | Qty | Phase | Status | |
|---|---|---|---|---|---|---|
| Examination Room — Standard | EXAM-103 | 168 | 12 | Approved | ||
| Cardiac Cath Procedure Room | CATH-201 | 650 | 2 | In review | ||
| Echocardiography Room | ECHO-205 | 220 | 4 | Blocked | ||
| Patient Consultation Room | CONS-104 | 120 | 6 | Draft | ||
| Imaging Suite — Standard | IMG-310 | 340 | 3 | Linked |
Before · After
a precision buttonGradient pill, shadow-driven lift. Decorative. Reading the button does not tell you anything about state.
A precision key in enamel cobalt, paired with a pip pattern that reads the current sync state at a glance. Hairline outlines do the structural work. State is in the inlay.