XDHD.OS · DESIGN SYSTEM · v0.1 · DRAFT WORKING DOCUMENT
Brand, foundations, profiles and plan for the production operating system — and the HAUX family built on the same kit.
The operating system manages computers. XDHD.OS manages productions.
XDHD.UIUX Canonical Surfaces and Viewport Spec v0.1 · 2026-10-01
Generated 2026-10-05 · tokens ab176b73 · 481 renders indexed
This is a single reference for how XDHD.OS looks, behaves and is built — and where it is going. It covers the brand, the visual foundations, the interaction profiles (desktop, portrait, touch, iPad), the family of operating environments that share one kit, and the plan.
One platform, several flavours. HAUX.OS is the templateable base UI operating system. XDHD.OS (the modern TechPro interface), SRZA.OS (our audio apps) and BLNK.OS (the blank template) are flavours of it. Tables throughout this document show the same colour, component or screen in each.
It is generated from the same tokens.json files the prototype kit builds from. Colour values, contrast ratios, render counts, coverage and the audit of the running shell are computed at build time, so they cannot drift from the kit. The prose and the status flags are written by hand and live in src/content.py.
Switching surface is not switching context. TLJ, JANK, HERO and selection persist across every surface. Surfaces are windows into one production, not separate apps.
↗ XDHD-UIUX-Canonical-Surfaces-and-Viewport-Spec-v0.1.md1920×1080 and 1080×1920, exactly. No responsive breakpoints; any other size scales uniformly and letterboxes. Portrait is a recomposed control surface, not a reduced desktop.
↗ XDHD-UIUX-Canonical-Surfaces-and-Viewport-Spec-v0.1.mdA surface takes its domain's accent, and the accent drives the dock highlight, LEDs, pads, knobs, LCDs and meters. Nothing is coloured for decoration.
↗ README.mdHardware vocabulary — pads, knobs, LCDs, LEDs — on flat, utilitarian surfaces with hairlines. White is the main highlight with a soft glow; orange is a rare accent.
↗ README.mdXDHD.OS, SRZA.OS and BLNK.OS differ in domain, dock, chips and vocabulary. Tokens, components, geometry and motion preparation stay shared.
↗ README.mdOne kit builds desktop, touch and iPad. Tokens, domains, components, data and naming are shared; only the interaction profile differs.
↗ XDHD.TOUCH.OS.mdActive, selected, focused and ready / hold / error are different things with different looks. The UI never implies a host connection or a state it has not observed.
↗ XDHD-UIUX-Canonical-Surfaces-and-Viewport-Spec-v0.1.mdEvery SVG carries stable names and ids so it can become After Effects layers without a cleanup pass. Text is never outlined.
↗ NAMING-RULES.mdTouch is the fast control layer. Keyboard and Magic Trackpad remain the precision and text layer.
↗ XDHD.OS.HAUX.UIUX-TOUCH-RULES.mdRead top to bottom: each layer depends only on the ones above it.
How the system presents itself.
There is no ratified brand guide yet. This section records the brand as it is observed across the kit, the specs and the shell, so it can be reviewed and promoted deliberately. Items marked proposed are inferred from consistent usage, not from a written rule.
| Device | Rule | Examples |
|---|---|---|
.OS | An operating environment over a shared graph. HAUX.OS is the platform; the others are its flavours. | HAUX.OS · XDHD.OS · SRZA.OS · BLNK.OS |
.CORE | A stable contract with its own semantics and consumers — not every product or screen. | XDHD.CORE · HAUX.CORE · Pr0j.CORE |
0 for O, 1 for I | A deliberate numeric substitution. Established codes keep their spelling. | PR0J · PR0D · AE0N · M0SH · C00K · F0NT · S0NA · PERF0RMANCE · M1ND · 1CQX |
Dot address | A readable path to any object, shown with a scheme prefix. | xdhd://KACE.BRND.MAIN.LAUNCH · pr0j:// · m0sh:// · wwww:// |
Stream file names | Stream, screen, orientation, version. Earlier versions are kept, never overwritten. | OS.HAUX.PADS.L.v02.svg |
live specimens, drawn from the rules at left
The probe re-runs the measurement in your browser, so this warning clears by itself once the full licence is installed.
All text — interface and mono — is specified as MonoTrial, with JetBrains Mono as the fallback. Interface type is therefore monospaced throughout: labels are uppercase and tracked, readouts use 7-segment LCD numerals, and tile glyphs are mono 800.
The installed MonoTrial files are the trial cut, and they are not usable for running copy. Measured in a browser, the characters below all draw as one identical dot, and 0 and O are the same glyph. Letters, digits other than zero, comma, period, hyphen, slash and the middle dot · are fine.
! " # $ % & ' ( ) * + : ; < = > ? @ [ \ ] ^ _ ` { | } ~ — – × ≥ ≈ “ ” ‘ … °
PR0J and PROJ look identical.xdhd:// draws as a dot followed by two slashes.+, =, _, ? and ! are all unusable.| Guideline | Do | Don't | Why |
|---|---|---|---|
| State a verifiable fact | SIDECAR LOADED · LOCAL EDITS | “All synced!” | The shell shows two states and means exactly them. |
| Say what is not known | unobserved · simulation · FPO | “Offline” when the state is simply not observed | Unknown host state is labelled unobserved rather than guessed. |
| Address first | xdhd://KACE.BRND.MAIN.LAUNCH | “Open the launch spot brand file” | The address is the identity; prose is a gloss on it. |
| Use hardware verbs | ARM · IDLE · HOLD · PUSH · SCAN · OPEN IN | “Click here to start” | Short, uppercase, tracked micro-labels; the interface is an instrument. |
| Never imply a connection | No AE or RT host connection is implied. | A control that looks live but is a mockup | Mockup and simulation are labelled as such wherever they appear. |
One platform, configured three ways.
The platform diagram is drawn from the tokens and the kit's dock sets, not typed.
HAUX.OS is the product; the flavours are how we show it. HAUX.OS is a templateable, customisable base UI operating system. XDHD.OS, SRZA.OS and BLNK.OS are our own flavours of it — the personal surface customisations we use to illustrate what the system can do.
A flavour is a short list of choices, not a fork. It decides where a surface starts, what it carries and what it is called. Everything else — tokens, components, shell geometry, motion preparation and the touch profiles — is shared, which is why the same artifact can be shown in every flavour below.
A fourth, MESH, is an exploration at the other end of the range: where XDHD.OS is dark and technical, MESH is light, warm and rounded, built for families and everyday life.
The blank starting point
starts in XDHD · HOME + 15 dockModern production interface
starts in XDHD · HOME + 15 dockOur audio apps
starts in AUDIO · HOME + 8 dockFamily, calendars, shared homes
own light palette · golden-grid navigation| What a flavour decides | Detail | Where it lives |
|---|---|---|
| Domain and accent | Which of the nine colour-codes a surface takes, and whether its content is soft or chamfered. | tokens.json › domains · set_screen(domain) |
| Eco | The kit's switch between the XDHD and audio sets: dock keys, HOME mark, top-bar chips and address. | set_screen(eco) in core.py |
| Dock | Which surfaces get a key, in what order, coloured by which domain. | DOCK_X · HAUX_SURF · dockDomain |
| Top-bar chips | The context shown beside the address: TLJ and JANK, or project and the HAUX.Clock BPM. | topbar in core.py |
| Address prefix | xdhd://, pr0j://, wwww:// by domain; the audio eco always shows m0sh://. | PROTO · jank_addr() |
| `.HAUX` flavour key | A second key under the corner mark that says which flavour you are in. | flavour() in core.py |
Pr0j classification: project TYPE 0S__, production TYPE UIUX. Live rollout of the four OS entries is pending.
The shared design overlap of HAUX.OS and its flavours: tokens, components, interaction states, navigation and context continuity, extracted into one verified library.
Design direction recorded 2026-10-02. Extraction has not started; existing shared UI files stay in place until consumers can use a verified library.
↗ README.mdThe templateable, customisable base UI operating system we are building. It owns the tokens, the components, the shell geometry and the flavour switch. Every flavour below is a configuration of it, not a fork.
_src.HAUX · base look v02 onward.HAUX flavour key, one top barThe current working kit; renders in OS.HAUX, OS.TOUCH and OS.IPAD.
↗ README.mdThe blank, generic template: HAUX.OS in its default state, with no flavour opinions. The starting point for a new flavour, and the baseline the others are read against.
Structurally blank, not yet unstyled: it still wears the HAUX chamfer and typeface, and its components are identical to the XDHD flavour's. A neutral token set is planned.
↗ README.mdOur modern, technical production interface: TLJ and JANK context, the full dock of fifteen apps, soft white, blue and orange domains for production surfaces and chamfered ones for motion and live.
_src.XDHD original (soft, pill) — and the HAUX look from v02The web shell hosts the canonical surfaces over one isolated demo cartridge.
↗ XDHD-OS-Unified-Surfaces-Architecture-and-Migration-v0.1.mdOur audio-apps surface: four tracks plus master, loops, scenes and a monitor, with the HAUX.Clock BPM. The music domain's mint accent colours the whole screen.
music domain (mint, chamfered); the V1 mint-only look is archivedm0sh://Formerly SRZA.HAUX.OS. Seven of the eight dock keys have renders; VST is not mocked. Renders live in OS.HAUX — OS.SRZA/ is still empty.
The family and everyday-life flavour: calendars, bookings, shared homes and co-ownership, for digital nomads and families. Deliberately the opposite look — light, warm and rounded — to show how far the platform stretches.
build_mesh.py, with an Inter text faceTen v01 renders in OS.G0LD.OS/MESH: three golden-grid screens and the seven-screen events flow. The mesh:// prefix is an assumption and the flavour is not named in the plan.
Where each flavour starts and what its dock holds are read from the tokens and the kit source.
| Axis | BLNK.OS | XDHD.OS | SRZA.OS | MESH |
|---|---|---|---|---|
| Starts in | XDHD #F4F5F1 soft | XDHD #F4F5F1 soft | AUDIO #64E5B5 chamfer | Own palette #FF6B5B light |
| Dock | HOME + 15 dock HOMEDESKFLOWTIMEXTXTBASEPR0JPERFAEXLAEXDAE0NHAUXPRXDDASHDDDDKEEP | HOME + 15 dock HOMEDESKFLOWTIMEXTXTBASEPR0JPERFAEXLAEXDAE0NHAUXPRXDDASHDDDDKEEP | HOME + 8 dock HOMETRKMIXSTYLLOOPSCENMONVSTCQX | No dock navigation is the golden grid |
| Role | The template | Production — modern TechPro interface | Audio apps | Family and everyday life |
| Kit eco | xdhd | xdhd | haux | none — a generator on the kit |
| Top-bar chips | TLJ and JANK | TLJ and JANK | Project and the HAUX.Clock BPM | HAUX.Clock kept; a time-zone clock is suggested |
| Address prefix | By domain | By domain — xdhd:// pr0j:// wwww:// | m0sh://, fixed | mesh://, assumed |
| Vocabulary | The default set — XDHD's, today | TLJ · JANK · HERO · BRND / FACET / MEDIUM · PRODUCTION | Tracks and master · STYL · loops · scenes · monitor | Trail · Pinned · Search or jump · Recent |
| Chrome exports | BLNK | XDHD, HAUX | SRZA.HAUX (V1), BLNK.SRZA | none |
| Surface renders in | none of its own | OS.XDHD, OS.HAUX, OS.TOUCH, OS.IPAD | OS.HAUX, OS.TOUCH | OS.G0LD.OS/MESH — ten v01 screens |
What is shared. Tokens, the component library, naming and motion preparation, dot-addressed JANK and the interaction profiles are common to every flavour. What differs is the domain, the dock, the chips and the vocabulary — not the foundation.
A fourth flavour is already in the code. The .HAUX key can read SRZA · AE0N · XDHD. AE0N appears when the motion domain runs the AE0N app. It is not named as an OS in the plan — worth deciding whether it should be.
Empty canvases with only the shell, cropped to the top-left where the mark, top bar and dock sit. Click one for the full canvas.
| Name | What it is | Source |
|---|---|---|
| XDHD | Original XDHD.OS shell | _src.XDHD |
| SRZA.HAUX | Original V1 shell — 8-key audio dock | _archive/HAUX.OS.V1.kit |
| HAUX | HAUX base look, before the HOME + 15 dock and unified-bar changes | _src.HAUX |
| BLNK | Current hybrid: HOME + 15 dock, .HAUX key, one top bar | _src.HAUX |
| BLNK.SRZA | BLNK inside the HAUX audio ecosystem | _src.HAUX |
The recursive golden-grid navigation is shared; the look, the wording and the palette are the flavour.
Seven v01 screens. Click any to open it full size.
One flow, two companions. An event moves Hub → Plan → Page → RSVPs → Album. The trip and meal planners sit beside it and link in: an event's menu comes from a meal plan, and a trip's stays come from your homes. All seven screens use the same golden-grid navigation and the MESH skin, with placeholder data, and are generated by build_mesh_events.py.
Upcoming events, templates to start from, a live RSVP count and the shared albums.
Title, date and place with an availability check, a cover, a note, and the guest list, linked menu and budget beside it.
What a guest sees: cover, date, a one-tap RSVP, the schedule, who is coming and what to bring.
Every response with plus-ones and dietary needs, headcount against capacity, a waitlist and scheduled nudges.
A shared album for the event, the other albums, faces matched on device, and an upload tray.
A day-by-day itinerary, the route, stays tied to your homes, a packing list and the split budget.
The week's meals with who cooks, a shopping list with buyers and costs, and a diet matrix.
Each key of the SRZA dock, the screen behind it and the profiles it has been drawn for.
| Dock key | Screen | Role | Profiles | HAUX render |
|---|---|---|---|---|
| TRK | TRACKS | Track view | HAUXTOUCHIPAD |  |
| MIX | MIXER | Four tracks plus master | HAUXTOUCHIPAD |  |
| STYL | STYL | STYL view — not described in the kit docs | HAUXTOUCHIPAD |  |
| LOOP | LOOPFINDER | Loop finding | HAUXTOUCHIPAD |  |
| SCEN | SCENES | Scene view | HAUXTOUCHIPAD |  |
| MON | MONITOR | Monitor view | HAUXTOUCHIPAD |  |
| VST | — | Plug-in host — not mocked | HAUXTOUCHIPAD | no render |
| CQX | 1CQX | Spaces and chat — shared with the XDHD flavour | HAUXTOUCHIPAD |  |
Computed from the tokens' dockDomain map. Each key carries its surface's domain colour.
Built on the HAUX kit but not flavours: studies of how the whole OS could navigate.
| Exploration | What it is | Source |
|---|---|---|
| OS.FNDR | File and folder navigator: columns, grid, triage, dual pane and a golden-grid treemap. Every item has an address, a view and a location. | ↗ README.md |
| OS.G0LD.OS | An entire UI built from nested golden-grid panels, where depth is zoom and the address is the path. Its MESH variant is the everyday-life flavour above. | ↗ README.md |
Colour, type, form, layout and state.
pop is reserved for the occasional accent, never a second highlight.soft domains keep pill-style content; hardware-like domains chamfer their content as well.The current HAUX look beside the original XDHD look. Left swatches respond to the Token Lab.
bg#0C0E0Fpanel#16191BpanelHi#1D2124head#1F2427inset#08090Abtn#262B2EbtnHi#30363Abg#141517panel#212225panelHi#26272Bhead#2A2B30inset#0F1012btn#34353AbtnHi#3C3D43The same token in each look the kit has produced. SRZA V1 is the archived audio look, MESH is read from its generator, and BLNK has no token set yet.
| Token | XDHD original | HAUX base | SRZA V1 | MESH v01 | BLNK |
|---|---|---|---|---|---|
Backgroundbg | #141517Δ 3 | #0C0E0Fbase | #0C0E0Fsame | #F4F1EAΔ 91 | not defined |
Panelpanel | #212225Δ 5 | #16191Bbase | #16191Bsame | #FFFFFFΔ 91 | not defined |
Window headhead | #2A2B30Δ 4 | #1F2427base | #1F2427same | not defined | not defined |
Inset wellinset | #0F1012Δ 2 | #08090Abase | #08090Asame | not defined | not defined |
Buttonbtn | #34353AΔ 6 | #262B2Ebase | #262B2Esame | not defined | not defined |
Primary texttx | #E6E7EAΔ 6 | #F4F5F1base | #F4F5F1same | #1F2A2EΔ 80 | not defined |
Secondary texttx2 | #9A9CA4Δ 6 | #9AA19Fbase | #9AA19Fsame | #5D6A6EΔ 22 | not defined |
Tertiary texttx3 | #62646CΔ 7 | #5D6563base | #5D6563same | #97A1A4Δ 24 | not defined |
Main highlightacc | #FFFFFFΔ 4 | #F4F5F1base | #64E5B5Δ 49 | #FF6B5BΔ 74 | not defined |
Ink on highlightaccInk | #101113Δ 4 | #06100Cbase | #04201AΔ 11 | not defined | not defined |
Poppop | #FF9F1AΔ 31 | #F1BB67base | #F1BB67same | not defined | not defined |
Readyok | #3DDC84Δ 24 | #64E5B5base | #64E5B5same | not defined | not defined |
Errorerr | #FF5A4DΔ 21 | #FF7D78base | #FF7D78same | not defined | not defined |
Δ is the CIE76 colour distance from the HAUX base: under 2 is imperceptible, over 10 is clearly different.
| Token | XDHD original | HAUX base | SRZA V1 | MESH v01 | BLNK |
|---|---|---|---|---|---|
| Form | soft (pills, no chamfer) | chamfer · cut 8px | cut 8px | rounded · r 18 / 10 · soft shadow | not defined |
| Glow | 3.0 · α 0.65 | 3.5 · α 0.75 | 3.5 · α 0.75 | none | not defined |
| Text face | MonoTrial → Inter | MonoTrial → JetBrains Mono | MonoTrial → JetBrains Mono | Inter → SF Pro Text | not defined |
| Primary text on background | 14.78:1 · AAA | 17.67:1 · AAA | 17.67:1 · AAA | 13.03:1 · AAA | not defined |
| Tertiary text on panel | 2.70:1 · FAIL | 2.95:1 · FAIL | 2.95:1 · FAIL | 2.64:1 · FAIL | not defined |
| Highlight on background | 18.27:1 · AAA | 17.67:1 · AAA | 12.36:1 · AAA | 2.48:1 · FAIL | not defined |
music domain's accent.tx#F4F5F1tx2#9AA19Ftx3#5D6563tx#E6E7EAtx2#9A9CA4tx3#62646Cacc#F4F5F1accInk#06100Cdeep#2A2E2Cpop#F1BB67vio#B79BF0info#8FB8D0ok#64E5B5err#FF7D78acc#FFFFFFaccInk#101113pop#FF9F1Ainfo#8FB8D0ok#3DDC84err#FF5A4D| Domain | Accent | Ink | Deep | Form | Accent on bg | Ink on accent |
|---|---|---|---|---|---|---|
| XDHD | #F4F5F1 | #0C0E0F | #2A2E2C | soft | 17.67:1 · AAA | 17.67:1 · AAA |
| PR0J | #7CC8FF | #06141F | #17394F | soft | 10.65:1 · AAA | 10.25:1 · AAA |
| AUDIO | #64E5B5 | #04201A | #164D40 | chamfer | 12.36:1 · AAA | 10.94:1 · AAA |
| MOTION | #8F7CFF | #0B0720 | #2B2466 | chamfer | 5.98:1 · AA | 6.10:1 · AA |
| M0SH LIVE | #2BFF5A | #02140A | #0E5A24 | chamfer | 14.33:1 · AAA | 14.05:1 · AAA |
| PRE-FORM | #FF3DDC | #1C0318 | #6A1560 | chamfer | 6.41:1 · AA | 6.46:1 · AA |
| PER-FORM | #C6FF3D | #121C02 | #4A6A0E | chamfer | 16.38:1 · AAA | 14.90:1 · AAA |
| DDDD | #4D9BFF | #04101F | #173A66 | soft | 6.86:1 · AA | 6.78:1 · AA |
| .STUDIO | #FF7A45 | #210A00 | #5A2A12 | soft | 7.48:1 · AAA | 7.33:1 · AAA |
The legend sheet renders eight domains; the tokens define nine (`.STUDIO` is the addition).
| Pair | Ratio · WCAG |
|---|---|
tx on bg | 17.67:1 · AAA |
tx on panel | 16.13:1 · AAA |
tx on inset | 18.20:1 · AAA |
tx2 on bg | 7.35:1 · AAA |
tx2 on panel | 6.71:1 · AA |
tx2 on inset | 7.57:1 · AAA |
tx3 on bg | 3.23:1 · AA-large |
tx3 on panel | 2.95:1 · FAIL |
tx3 on inset | 3.33:1 · AA-large |
All domain accents pass AA on the background. Tertiary text is the exception — see the Plan.
| Role | Desktop | Touch | iPad | Note |
|---|---|---|---|---|
| Micro label | 7–9 px exist in the kit | floor 10.5 px | floor 10 pt | Uppercase, tracked |
| Interface | as designed | 12–17 px targets | — | MonoTrial |
| Readout | 7-segment LCD | 7-segment LCD | 7-segment LCD | Clocks, BPM, timecode, values |
| Tile glyph | mono 800 | mono 800 | mono 800 | Two lines, two letters |
| Token | Value | Used for |
|---|---|---|
| Chamfer cut | 8 px | Shell chrome and hardware-like domains |
| Hairline | #ffffff14 | Panel and row boundaries |
| Hairline, strong | #ffffff2a | Focused or raised boundaries |
| Glow | 3.5 px at 0.75 | The active highlight |
| Desktop top bar | 56 px | Menus, address pill, context chips |
| Desktop dock | 72 px | 16 keys, domain-coloured |
| Desktop status bar | 16 px | Carries the OS version |
| Touch top bar | 72 px | Large buttons, sheet pickers |
| Touch dock | 88 px | Pinned apps plus an ALL APPS grid |
| Touch status bar | 20 px | |
| Portrait bottom bar | 104 px | Touch portrait |
| Spacing scale | 4 · 8 · 12 · 16 · 24 · 32 | The shell's shared stylesheet |
This is an intentional product decision, supporting dedicated 1080p and USB-C displays, iPad portrait dashboards, predictable spatial memory and hardware-style interaction. Shell, FLOW, DASH and PERF0RMANCE recompose for portrait; AEXL, AEXD, XTXT and BASE keep their legacy internal layouts until migrated.
| State | Meaning | Look |
|---|---|---|
| Active | The current surface. | Dock key: white fill, ink glyph, soft glow. |
| Selected | A graph object. | Shared across every surface; changing surface does not change it. |
| Focused | The keyboard target. | A focus ring, independent of selection. |
| Ready | Operational and healthy. | LED in the ok colour. |
| Hold | Waiting or held. | LED in the pop colour. |
| Error | Failed or blocked. | LED in the err colour. |
| Identity | Example | Notes |
|---|---|---|
| Local id | a2ff | Assigned once and persisted per stream, screen, orientation and address. |
| Canonical production id | pending | Not yet bound — PR0J / PR0D binding is provisional. |
| Human address | HAUX.OS.BASE.L.Shell.Topbar.Button.DESK | Dot-separated roles. |
| Display name | Button.DESK {a2ff} | The After Effects compatible form. |
| XML id | n-a2ff | Stable across rebuilds. |
| Role | Applied to |
|---|---|
precomp | Viewport regions, BASE cells, knobs and sections. |
layer | Buttons, chips, labels, surfaces and needles. |
group | Decorative elements such as texture and ticks. |
Roles are proposed attributes (data-aexd-role) and are not yet read by the AEXD importer. Text is never outlined; font stacks are preserved byte for byte.
The parts the operating system owns, so surfaces do not.
| Region | Size | Contents |
|---|---|---|
| Top bar | 56 px | Mark and home, global menus, the dot-address pill, context chips and the HAUX.Clock BPM. |
| Launcher dock | 72 px | Sixteen keys, each in its surface's domain colour. The active key is lit; SET sits below. |
| Context strip | — | TLJ · JANK · BRND-FACET-MEDIUM · PRODUCTION · HERO · HIST. Persists across surfaces. |
| Workspace | — | The active surface, with shell-owned Hero and Inspector panes. |
| Status bar | 16 px | OS version, graph health with node and edge counts, the active viewport profile. |
Four of the 56 px top bars, one per domain, from the extracted component set.
| OS service | Status | Notes |
|---|---|---|
| Global menu and chrome | BUILT | The shell owns it; surfaces do not draw their own. |
| Launcher | BUILT | Switches surface and retains context. |
| Persistent context | BUILT | TLJ, selected JANK, axes, stage, HERO and pinned output survive a surface change. |
| Shared Hero canvas | BUILT | Mounted once in the shell: selection or the TLJ's HERO, pin, versions, fit and fill, fullscreen, external display. |
| Shared Inspector | BUILT | Containment path, relations and title or summary edits through the common store. |
| Navigation history | PLANNED | Named as a next architecture requirement; not yet shared. |
| Clipboard and Dispatch | PLANNED | Named as a next architecture requirement; Dispatch is FPO. |
| Window manager | PLANNED | Current windows are panel motifs; a full window manager is deferred. |
Four alternative interpretations of the shell, kept for a decision.
The shared library the surfaces are assembled from.
The kit has 236 unique component names. The groups below are the ones documented here; the full list is at the foot of the section.
The same component file in the original XDHD look and in the HAUX look under two flavours. The XDHD-flavour column is also what BLNK renders today — it has no components of its own.
| Component | XDHD original look | HAUX look · XDHD flavour | HAUX look · SRZA flavour |
|---|---|---|---|
| Spaces list250x750 |  |  |  |
| Chat panel570x750 |  |  |  |
Extracted from the motion-prepared component set. Needle pivots are stored as data-pivot.
The same product on different input and display.
_src.HAUX builds desktop by default, --profile touch for touch and --profile ipad for iPad. There is no code fork.
| Desktop | Touch | iPad | |
|---|---|---|---|
| Input | Keyboard + Magic Trackpad | Single tap only — no scroll, pinch or swipe | Multi-touch |
| Canvas | 1920×1080 · 1080×1920 | 1920×1080 · 1080×1920 | 1024×768 · 768×1024 pt (4:3) |
| Target size | Desktop scale | ≥ 56 px (shell keys 64–80); XDHD.Pro surfaces 44 | ≥ 44 pt (dock 52) |
| Type floor | 7–9 px labels exist | 10.5 px | 10 pt |
| Scrolling | Native, invisible | Touch strips on every scrolling region | Native — strips not used |
| Hover, right-click, modifiers, drag and drop | Allowed | Banned | Allowed |
| Undo | ⌘Z | Persistent UNDO / REDO | System |
| Top bar / dock / status | 56 / 72 / 16 px | 72 / 88 / 20 px | Top bar 44 pt, dock keys 52 pt |
The desktop profile stays traditional — keyboard and trackpad, dense, hover and modifier friendly — and keeps developing independently. Portrait is the same 1080 canvas turned through 90°, recomposed rather than reduced.
Test hardware is a portable ~15 in 1080p touchscreen at about 141 ppi (1 mm ≈ 5.6 px) that delivers a single tap or click only. Scrolling is therefore the one thing the interface must always show.
Any scrollable region has a persistent, chunky touch affordance.
Vertical or horizontal scrub bars wherever scrolling matters. The strip is the scroll bar.
Prefer page and section switching to long free-scrolling screens.
Minimum 56×56 px (about 10 mm), comfortable 64 px, gap at least 8 px.
Nothing is revealed by hover; every function is reachable with one tap.
Grips have ridges and end chevrons.
Steppers, page buttons, nudge and a zoom pad — never a tiny scrollbar.
Touch is fast control; keyboard and trackpad stay the precision and text layer.
Every button is as thick as the strip. States: idle, dragging (filled with glow), at-end (step button dims).
| Part | Does |
|---|---|
SIZE | Cap that cycles S 44 · M 56 · L 72 px. |
PAGE ▲▲ | Jump a page. |
STEP ▲ | Nudge one row. |
GRIP | Ridges and chevrons; drag. |
TRACK | Ticks mark pages. |
n / N | Page counter. |
Share of tap-target-like widgets under 56 px — auto-generated by the touch audit. 67 of 189 screens carry at least one strip (118 strips in total).
Screens 50–55. Whether drag events reach the app on the panel is the first thing to test.
A handle sits on every edge — ridges, a chevron and a label; tap to toggle. Windows float freely with no grid, carry a visible move grip, 44 px window buttons and a resize corner, so interfaces can later be remixed from tools and windows.
| Drawer | Holds |
|---|---|
| MENU · top | System: address, TLJ, context, JUMP, open-window switcher, layouts, quick toggles. |
| APPS & TOOLS · left | Apps and the XDHD.Pro tool tiles. |
| INSPECT · right | Properties, open-in, TLJ pads. |
| TOOLS · TIME · WINDOWS · bottom | Transport, undo and redo, scrub strip, tool tray, minimised windows. |
The touch profile re-targeted at an iPad mini 2: 1024×768 pt landscape and 768×1024 pt portrait (2048×1536 at @2x, 326 ppi). Apple's 44 pt minimum applies everywhere; type floor 10 pt. Multi-touch exists, so touch strips are not used.
BASE is a fixed hardware matrix, and the canonical viewports are chosen to suit dedicated 1080p and USB-C displays and instrument-style control. Hardware drawings live in OS.HARDWARE as an Illustrator file and are not yet part of this document.
The apps and views inside the environment.
Each card lists the profiles the surface has been drawn for and whether it is mounted in the running shell. Both are computed from the kit and the shell source at build time.
Spatial desktop and graph workspace tying contexts together.
Fixed matrix, teaching and navigation.
Multidimensional projection and browser.
Dense operational data editor.
Visual design and materialisation.
Text authoring, control and capture.
Live and instrument control; pr0d.mode and m0sh.mode.
Status, cockpit and launcher.
After Effects-faithful layout in the XDHD.OS look.
Waveform editor.
Tracks, mixer, STYL, loops, scenes and monitor.
Four tracks plus master.
The HAUX track view.
Loop finding.
Scene view.
Live performance output.
Pre-form: preparing and building looks.
Spaces and chat over the shared graph, with JANK cards and slash commands.
Delegate · Dispatch · Disperse · Decide.
Case, cell and shelf views. Role not yet written up.
Studio dashboard.
Explorer with a 16:9 Hero viewer.
Glyph editor.
The XDHD.Pro tool launcher.
37 screens exist in both streams; six are shown.
| Screen | XDHD original look · OS.XDHD | HAUX base look · OS.HAUX |
|---|---|---|
| BASEFixed matrix, teaching and navigation. |  | |
| DASHStatus, cockpit and launcher. |  | |
| PADSSixteen visual pads. |  | |
| AEXLDense operational data editor. |  | |
| DDDDDelegate · Dispatch · Disperse · Decide. |  | |
| 1CQXSpaces and chat over the shared graph. |  | |
Streams are looks, not flavours. OS.XDHD is the original look. OS.HAUX is the base look and carries both the XDHD and the SRZA flavours, so a screen's stream does not say which flavour it belongs to. The SRZA audio set is the HAUX screens named in the table under Flavours.
Latest version of every screen, by stream and orientation. A dot means no render.
| Screen | XDHD L | XDHD P | HAUX L | HAUX P | TOUCH L | TOUCH P | IPAD L | IPAD P |
|---|---|---|---|---|---|---|---|---|
| 1CQX | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| 1CQX.COLLAPSED | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| AE0N | v01 | v01 | v02 | v02 | v01 | v01 | v01 | v01 |
| AEXD | · | · | · | · | · | · | v01 | v01 |
| AEXL | v01 | v01 | v02 | v02 | v01 | v01 | v01 | v01 |
| BASE | v01 | v01 | v04 | v04 | v03 | v03 | v01 | v01 |
| BRND.STYL | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| C00LEDITPRO | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| COLOURCODE | · | · | v02 | v02 | v01 | v01 | · | · |
| DASH | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| DDDD | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| DESK | · | · | v02 | v02 | v01 | v01 | · | · |
| DESK.FLOW | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| DESKTOP | · | · | v01 | v01 | · | · | · | · |
| DESKTOP.XDHD | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| ECOSYSTEM | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| EDGE.BOTTOM | · | · | · | · | v01 | v01 | · | · |
| EDGE.HOME | · | · | · | · | v01 | v01 | · | · |
| EDGE.LEFT | · | · | · | · | v01 | v01 | · | · |
| EDGE.REMIX | · | · | · | · | v01 | v01 | · | · |
| EDGE.RIGHT | · | · | · | · | v01 | v01 | · | · |
| EDGE.TOP | · | · | · | · | v01 | v01 | · | · |
| F0NT | · | · | v02 | v02 | v01 | v01 | v01 | v01 |
| FLOW | · | · | v02 | v02 | v01 | v01 | · | · |
| GRAPH | · | · | v02 | v02 | v01 | v01 | · | · |
| HAUX | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| HAUX.DESKTOP | · | · | v02 | v02 | v01 | v01 | · | · |
| HOME | · | · | · | · | · | · | v01 | v01 |
| HYBRID.AEXL.BAR | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| ICONS | v01 | · | v02 | · | v01 | · | · | · |
| JANK | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| KEEP.CASE | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| KEEP.CELL | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| KEEP.SHELF | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| LAUNCHER | · | · | v02 | v02 | v01 | v01 | · | · |
| LOGIN | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| LOOPFINDER | · | · | v02 | v02 | v01 | v01 | · | · |
| M0SH.FXUI | · | · | v02 | v02 | v01 | v01 | · | · |
| M0SH.LIVE | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| M0SH.PRO | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| M0SH.PRO.APP | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| M0SH.STAGE | · | · | v02 | v02 | v01 | v01 | · | · |
| MIXER | · | · | v02 | v02 | v01 | v01 | · | · |
| MONITOR | · | · | v02 | v02 | v01 | v01 | · | · |
| NEST.FRAMES | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| NEST.STRATA | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| NEST.TREEMAP | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| NODES | · | · | v02 | v02 | v01 | v01 | · | · |
| PADS | v03 | v03 | v04 | v04 | v03 | v03 | · | · |
| PR0JECTS | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| PRO.LAUNCH | · | · | v02 | v02 | v01 | v01 | · | · |
| PROX | v02 | v02 | v03 | v03 | v02 | v02 | · | · |
| PRXD | · | · | · | · | · | · | v01 | v01 |
| PRXD.1UP.ASCR | · | · | v02 | v02 | v01 | v01 | · | · |
| PRXD.1UP.STILL | · | · | v02 | v02 | v01 | v01 | · | · |
| PRXD.1UP.SVG | · | · | v02 | v02 | v01 | v01 | · | · |
| PRXD.2UP.ALPHAQC | · | · | v02 | v02 | v01 | v01 | · | · |
| PRXD.2UP.MATTE | · | · | v02 | v02 | v01 | v01 | · | · |
| PRXD.2UP.MP4 | · | · | v02 | v02 | v01 | v01 | · | · |
| PRXD.3UP.PROXY | · | · | v02 | v02 | v01 | v01 | · | · |
| PRXD.4UP.GIF | · | · | v02 | v02 | v01 | v01 | · | · |
| SCENES | · | · | v02 | v02 | v01 | v01 | · | · |
| SETTINGS | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| SHELL | · | · | v01 | v01 | · | · | · | · |
| SONA.PROFILE | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| SPECS | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| STAGE | · | · | · | · | · | · | v01 | v01 |
| STUDIO | · | · | v02 | v02 | v01 | v01 | · | · |
| STYL | · | · | v02 | v02 | v01 | v01 | · | · |
| TIMELINE | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL | · | · | · | · | · | · | v01 | v01 |
| TOOL.AEPROC | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.BATCHFOLDERS | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.C00K | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.CLIPGRAB | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.DEUX | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.EPSSVG | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.FOLDERSNAP | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.GIFMAKER | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.HEROSTILLS | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.JANKBROWSER | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.M0SHPERF | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.MAKEDOSSIER | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.MAKEWAV | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.MASTERING | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.MRKT | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.PR0JEDITOR | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.PRORES | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.QUICKFILES | · | · | v03 | v03 | v02 | v02 | · | · |
| TOOL.SCENEDETECT | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.SCRNJACK | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.SOUNDGRAB | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.STITCH | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.T1ME | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.WAVJACK | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.WEBMP4 | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOL.WHITEBOARD | · | · | v02 | v02 | v01 | v01 | · | · |
| TOOLS | v01 | v01 | v03 | v03 | v02 | v02 | · | · |
| TOOLS.2 | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| TOOLS.3 | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| TOUCH.ACTIONS | · | · | · | · | v01 | v01 | · | · |
| TOUCH.APPS | · | · | · | · | v01 | v01 | · | · |
| TOUCH.PICKER | · | · | · | · | v01 | v01 | · | · |
| TOUCH.RULES | · | · | v02 | v02 | v01 | v01 | · | · |
| TOUCH.VALUE | · | · | · | · | v01 | v01 | · | · |
| TRACKS | · | · | v02 | v02 | v01 | v01 | · | · |
| TRAX | · | · | · | · | · | · | v01 | v01 |
| WAVE | · | · | · | · | · | · | v01 | v01 |
| XDHDIO.PRODUCT | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
| XTXT.TRIPANEL | v01 | v01 | v02 | v02 | v01 | v01 | · | · |
What is built, what is next, and what is unresolved.
.DESK / FLOW · xdhd
AEXL · motion
HAUX · music
DDDD · dddd
Q1 · Fidelity
Q2 · Gradient
Q3 · Bank
Q4 · Spring
XDHD · PR0DUCTION — selected
LAUNCH · DELIVER — idleset_screen(domain, eco) drives dock, mark, chips and address; the .HAUX key shows the flavour.↗ core.pycore.py and a build parameter.↗ core.pymesh:// prefix.↗ README.md.HAUX key already reads AE0N; the plan names only XDHD, SRZA and BLNK.↗ core.pyThe running web shell and the prototype kit are two implementations of one design. Of 9 mapped colour roles, 3 differ clearly, and type and form differ as well. ΔE is CIE76 colour distance: under 2 matches, under 10 is near.
| Role | Kit | Shell | Distance | Verdict |
|---|---|---|---|---|
bg → --ui-bgpage background | #0C0E0F | #0E1013 | ΔE 1 | match |
panel → --panelpanel surface | #16191B | #191D22 | ΔE 3 | near |
head → --chromewindow / title chrome | #1F2427 | #30343A | ΔE 8 | near |
tx → --textprimary text | #F4F5F1 | #E6E9E2 | ΔE 5 | near |
tx2 → --mutedsecondary text | #9AA19F | #A4AFA0 | ΔE 9 | near |
acc → --accentmain highlight | #F4F5F1 | #DCFF65 | ΔE 73 | differs |
ok → --led-readyready LED | #64E5B5 | #B7EF72 | ΔE 43 | differs |
pop → --led-holdhold LED | #F1BB67 | #FFD17C | ΔE 8 | near |
err → --led-errorerror LED | #FF7D78 | #FF937E | ΔE 12 | differs |
| Other | Kit | Shell | ||
|---|---|---|---|---|
| UI typeface | MonoTrial, 'JetBrains Mono', Menlo, monospace | system-ui,sans-serif | ||
| Mono typeface | MonoTrial, 'JetBrains Mono', Menlo, monospace | ui-monospace,monospace | ||
| Corner form | chamfer cut 8px (soft domains: pill) | radius 6px | ||
The pairing of kit token to shell variable is a judgement made in kit.py. A wrong pairing is a correction there. Download the kit as CSS variables to align the shell.
The web shell uses a lime accent, system fonts and 6 px radii; the kit specifies a white accent, MonoTrial and chamfer.
Action Adopt the generated token CSS in the shell, or record the shell as a deliberate fork.
The kit README reserves OS.SRZA/ for non-HAUX work and it is empty, while the audio surfaces render under OS.HAUX. Streams are named by look, so a flavour cannot be filtered on its own.
Action Decide whether renders are named by look or by flavour, then move or tag the audio set.
Its chrome is the current shell in the default white domain, wearing the HAUX chamfer and typeface; its components are the same files as the XDHD flavour's. There is no neutral palette to be blank with.
Action Define the neutral BLNK token set, then re-render the chrome and a component set from it.
Its coral highlight is about 2.5:1 on the page and its tertiary text about 2.6:1 on white — both below 3:1, the floor for interface graphics and large text.
Action Darken the coral for text and rings, or pair it with a stronger outline, before MESH leaves exploration.
It lists eight domains with DDDD as yellow; the tokens define nine, with DDDD blue and .STUDIO added. The rendered legend shows eight.
Action Update the README and add .STUDIO to the colour-code sheet.
tx3 is 2.95:1 on panels — below even the 3:1 large-text floor — and it is used for the smallest labels.
Action Lift tx3, or restrict it to non-essential decoration. Try it in the Token Lab.
Computed The smallest lift that passes AA on every surface is #7B8381 (4.55:1 worst case), still dimmer than secondary text.
In the installed files about 38 punctuation characters draw as one dot and 0 and O are identical — so the zero-for-O device and the colon in every dot address are unreadable. Licensing for production and for embedding also needs checking.
Action Buy and install the full licence before shipping, embedding or publishing. Until then, run copy in the fallback and keep MonoTrial for labels.
Desktop type goes down to 7–9 px; the touch floor is 10.5 px.
Action Intended while the profiles are separate; keep the floor enforced in the touch profile.
data-xdhd-address and data-aexd-role are proposed attributes; they are written but not consumed.
Action Teach the AEXD importer to read them, then verify against a real After Effects import.
Nothing has been run through After Effects, AE0N or AEXD yet — files are prepared, host unverified.
Action Probe a single BASE cell and knob first.
A defect in the V1 source, preserved rather than silently fixed.
Action Leave as history; do not carry into new versions.
Edit the system, see it everywhere, hand the result to the kit.
Change any colour and this whole page restyles, with contrast recomputed live. Nothing is saved here — export the result as a tokens.json and apply it to the kit with the safe apply script. The kit then rebuilds every screen from the new values.
python3 apply_tokens.py ~/Downloads/tokens.edited.json--yes.cd _src.HAUX && python3 build.py, then cd .. && python3 export.py.python3 build.py.How to change it, and how this document stays in step.
| Layer | Path |
|---|---|
| Tokens — current look | 60-EXPERIMENTS/XDHD.OS.HAUX.Prototypes/_src.HAUX/tokens.json |
| Tokens — original look | 60-EXPERIMENTS/XDHD.OS.HAUX.Prototypes/_src.XDHD/tokens.json |
| Kit builders | …/_src.HAUX/{build.py, lib/, screens/, screens-touch/, screens-ipad/} |
| Exports | …/XDHD.OS.HAUX.Prototypes/OS.{XDHD,HAUX,TOUCH,IPAD,CHROME,MOTION} |
| Running shell | 10-PRODUCTS/XDHD.io/XDHD.HAUX.OS (HTML V0.01 demo) (shell.mjs, shared/uiux.css) |
| Specs | XDHD.HAUX.OS (HTML V0.01 demo)/*.md · docs/ · XDHD.TOUCH.OS.md · OS.IPAD/README.md |
| This document | 10-PRODUCTS/XDHD.io/XDHD.HAUX.OS (HTML V0.01 demo)/design-system |
edit _src.HAUX/tokens.jsoncd _src.HAUX && python3 build.pypython3 build.py --profile touchpython3 build.py --profile ipadcd .. && python3 export.pypython3 OS.MOTION/_tools/prep.pycd design-system && python3 build.pytokens.json, not to a component.bg, panel and inset.touchrules.SCROLL so it gains a strip.-vNN version — never overwrite.-vNN id.Never overwrite. A new riff on a screen is a new manifest with the next -vNN id; earlier versions are kept. Unversioned screens export as v01. Files are SVG only; PNG sidecars are optional.
Measured content — tokens, contrast, counts, coverage, parity — is recomputed on every build. Prose and status flags are edited in src/content.py. Re-run python3 build.py after any change to the kit, and python3 tests/test_build.py to check the result.