Halo

Salutis is a private health archive for Mac. People open it to find a lab result, log a medication or prepare for a visit, often at moments that are already stressful. The interface had grown fast, page by page, and the same decisions were being made again on every screen.

I designed and built Halo, the design system behind it, end to end: the audit that sized the problem, the token architecture, the identity, 63 components, the patterns that combine them, the documentation site, and the adoption inside the running app.

The work moved in six phases. Each one produced something the next one could stand on.

Halo ships 63 Svelte 5 components across seven families: core, forms, navigation, overlays, data display, charts and the app shell. Twenty were extracted from components the app already relied on; the rest were designed new to replace patterns the audit found copied by hand.

They were drawn to match Salutis as it ships, not an idealised version the product would have to catch up with. Each one reads only component tokens, which read semantic roles, which read the palette. Dark mode changes the roles and nothing else.

The documentation site imports the same source the app imports. Every example is the real component running live, in light and dark. A picture of a component is not documentation of the system.

Behaviour is part of the system, not something each page rediscovers. Dialogs, the side panel and the guided tour share one overlay stack. Scroll locks with a reference count, Escape closes only the top layer, and dialogs and the panel trap focus, then return it to the control that opened them.

The audit had found the opposite: no focus trap anywhere, Escape ignored by the two most used overlays, and record panels that discarded what you typed when you closed them. Halo fixed each of these once, in the component, so every page that uses it inherits the fix.

Halo needed an identity of its own, one that could sit beside the Salutis logo without competing with it. The mark is called Continuità: two ribbons made from a single construction module, the second rotated 180° around the first. Two halves of one record, held in a loop.

It is drawn on a 256 grid with concentric arcs and parallel 45° cuts, and every brand file is generated from that one geometry module, so no size of the mark is ever redrawn by hand. The same module becomes the o of the wordmark. The rule that governs the components governs the mark: one source, reused exactly.

Salutis ships 33 desktop screens, from the dashboard and the lab wizard to settings and the audit log. The documentation links each component to the screens where it appears, so a change to the system can be traced to everything it touches.

These captures come from the real Electron app, run in a throwaway vault with demonstration data, so the evidence never touches anyone's records.

Halo 0.1.0 is a foundation the product already stands on: tokens with a single source, components documented by running them, behaviour that protects what people type, and adapters that let the rest of the app move over on purpose.

It is also honest about its edges. No usability test was run, and no claim is made that the new components are faster to use or that any clinical outcome changed. The known gaps are written into the accessibility docs rather than left for someone to find.

That is the part I care about most. A design system for a health product earns trust the same way the product does: by being precise about what it decides, and about what it leaves to someone else.