@polyxd/ds-health

Health — an original Polyxd template pack. Calm teal, cream, extra spacing, large targets, warm feedback colours; care and wellbeing.

A single calm teal on cream, 17px body text with generous leading, 48px targets, 12px corners, and twice the usual space between sections so a screen never feels crowded. Feedback is warm rather than alarming: danger is terracotta, warning is apricot, success is leaf. Motion is slower than most packs. Dark mode is a deep green-grey night with the same hues lightened. For patient portals, care planning, wellbeing and anything read by someone who is tired or worried.

This is a template: not a reproduction of any design system, and meant to be changed. Start from it, keep what you like, and it stays a valid pack as long as polyxd check passes.

npx polyxd check packages/ds-health/manifest.json   # every contract token, every contrast pair, both modes

Make it yours

Two ways in.

Edit these tokens. Every colour role in tokens/system.light.json and tokens/system.dark.json points at a named entry in that file's palette; change a palette entry and every role using it follows, or point a role at another entry to change one thing. Type, spacing, radii and motion are in tokens/system.json. tokens/semantic.json only aliases those and rarely needs touching. Run polyxd check after each change: it names any pair that no longer meets its contrast floor.

Or start from your own tokens. npx polyxd pack ./your-tokens.css --name yours drafts a pack from a stylesheet or a DTCG file and writes a mapping you correct; this template is then a reference for what each role is for.

Either way, rename it: name in manifest.json is the theme a surface asks for, and [data-pxd-theme="<name>"] is the selector the compiled CSS uses.

Fonts

| Role | Family | Full stack | |---|---|---| | display | system-ui | system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | | body | system-ui | system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | | label | system-ui | system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | | mono | ui-monospace | ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace |

Web fonts: None. The pack uses the reader's system fonts, so there is nothing to load.

Notes on the values

• Danger is terracotta (#b5432f), not red: it still carries white text at 5.4:1 and reads as serious, without the alarm of a pure red.
• motion.duration.* are the slowest in the template set (200–420ms); calm is partly pace.

Files

| File | What it holds | |---|---| | manifest.json | Name, modes, default mode and provenance | | tokens/system.json | Primitives both modes share: fonts, sizes, spacing, radii, borders, motion | | tokens/system.light.json, tokens/system.dark.json | The palette and the health.sys.* roles for each mode, plus shadows | | tokens/semantic.json | The Polyxd contract, aliasing health.* |

Licence Apache-2.0, like the rest of Polyxd. Provenance in the manifest: original template by Polyxd.

Logo

logo.svg is Polyxd's own mark for this template, not anyone's logo: a small card drawn only from the template's tokens in its default mode (the ground, strong border and radius, the text and muted text, the primary action and one accent). packages/ds-kit/scripts/pack-logos.ts draws it, so it follows the tokens: change them and run node packages/ds-kit/scripts/pack-logos.ts to redraw it. A test fails if it goes stale.