AxonDeck Design System v2.1

AxonDeck reads tempo and phase from a DJ booth's Pro DJ Link network and sends the same clock on to Ableton Link, MIDI Clock, MTC, OSC and lighting devices. The interface lives where it is dark, loud and cramped: a laptop on a flight case, a tablet in hand or a monitor three metres away. The design system's brief came from that environment, not from taste. [1] Observed · Versioned code · reviewed 17 Oct 2026

The root cause was technical: the web interface and the Windows desktop app had grown apart, with different cyans, backgrounds and type. v2.0 moved both onto one token source; v2.1 adds numbered decision records, recomputed contrast and a light-surface proposal. [2] Observed · Versioned code · reviewed 17 Oct 2026 [3] Design reference · v2.1 design system · reviewed 17 Oct 2026

Sample data · a 126.50 BPM tempo readout and three states – phase locked, drift and connection lost – in two themes. Abyss is the product theme in code; Daylight is the v2.1 proposal for web, documents and print. This page connects to no device and shows no real booth data. [1] Design reference · v2.1 design system · reviewed 17 Oct 2026 [2] Proposal · v2.1 design system · reviewed 17 Oct 2026

Every pair shows its contrast computed with the WCAG 2.x formula: Axon Cyan #00FFD1 on Abyss #03030A gives 15.89:1, but only 1.29:1 on white. That is why Daylight never uses cyan as text; the accent moves to a darker value of the same hue, #007A63 (5.30:1). The figures are computed, not measured on a screen. [3] Observed · Contrast computation · reviewed 17 Oct 2026 [2] Proposal · v2.1 design system · reviewed 17 Oct 2026

Axon Cyan is the only accent, and it means active, healthy and locked. Success is not green but the brand colour itself: a healthy system looks like AxonDeck, and no second accent competes in peripheral vision. The tempo readout is always in the accent colour; health is shown by the state labels beside it. [1] Observed · Versioned code · reviewed 17 Oct 2026

Changing numbers – BPM, milliseconds, phase and IP addresses – use JetBrains Mono tabular figures so a tempo change never shifts the layout. Human-readable text is Inter; the logo and the interface share one type family. [1] Observed · Versioned code · reviewed 17 Oct 2026

State never depends on colour alone: every state carries a word and a Lucide icon, and high-contrast mode adds a shape. Touch targets are at least 48 px and 56 px in Live Gig mode, because hands are sweaty and the light strobes in a booth. [1] Observed · Versioned code · reviewed 17 Oct 2026 [2] Design reference · v2.1 design system · reviewed 17 Oct 2026

Devices are different workplaces, not scaled copies of one screen: 12 columns on a booth monitor, 8 on a laptop, 4 on a tablet and 2 on a phone, and each panel responds to its own width. The v1.1 HTML prototypes were rendered for this page at 1440, 1194 and 390 px; on a phone the Live Gig prototype overflowed, so v2.1 added a dedicated phone layout. [4] Design reference · Prototype render · reviewed 17 Oct 2026 [2] Design reference · v2.1 design system · reviewed 17 Oct 2026

When the connection drops, no modal covers the interface: the last values stay visible, the screen turns read-only and the message states the cause, the impact and what remains safe. The clock keeps running in the daemon even when the interface restarts. [1] Observed · Versioned code · reviewed 17 Oct 2026

Contradictions are resolved as numbered decision records D-01 to D-17, such as the wordmark typeface, logo glow and the Live Gig touch target. Failures such as white text on the coral button (3.22:1) and an invisible input border are fixed as new tokens, not one-off overrides. [2] Design reference · v2.1 design system · reviewed 17 Oct 2026 [3] Observed · Contrast computation · reviewed 17 Oct 2026

Observed in code: the AxonDeck Default tokens in WebUI v1.2.0 tokens.css, index.css and presets.ts, and in the WPF theme AxonDeckDefault.xaml. They establish token values, not the readiness of every component or the behaviour of a working booth. [1] Observed · Versioned code · reviewed 17 Oct 2026

The same audit's drift register is a public part of the system: the old cyan #00F0FF in the PWA manifest, Segoe UI and Consolas in WPF, emoji icons in the toolbar and an unwired Live Gig switch. They are named, not hidden. [2] Observed · Versioned code · reviewed 17 Oct 2026

AxonDeck Design System v2.1 is a versioned design reference: tokens in three themes, 12 reasoned chapters, 25 components and 5 composed screens (phone and tablet included), 16 of them React components. Every preview is checked at 360, 390, 820 and 1180 px in all three themes: 372 renders, 0 clipped text and 0 axe violations. The Daylight and High contrast themes are proposals; neither the WebUI nor the WPF code uses them yet. The whole system can also be browsed as an interactive platform: components run on the real code in three themes and four device widths. [3] Design reference · v2.1 design system · reviewed 17 Oct 2026 [4] Proposal · v2.1 design system · reviewed 17 Oct 2026

The prototype renders were made from local v1.1 files on 17 October 2026 and show intended behaviour, not a working product. The public AxonDeck site is temporarily offline, so this page does not point to a live product. [5] Design reference · Prototype render · reviewed 17 Oct 2026

If your product must work on both dark and light surfaces, or in several technologies at once, we can map one critical state, derive tokens for both surfaces and compute the contrast of every text pair before design. Handoff includes a token file, decision records and verification questions; production integration requires separate scope. [2] Design reference · v2.1 design system · reviewed 17 Oct 2026 [3] Observed · Contrast computation · reviewed 17 Oct 2026

When you contact us, describe a situation in which someone cannot tell at a glance whether the system is healthy. We can start with that state and mark clearly what is observed in code, what is a design reference and what is a proposal. [1] Observed · Versioned code · reviewed 17 Oct 2026