@medquantis/design-system 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,44 @@
+This repository is licensed in two parts.
+
+1. Code, design tokens and generated CSS
+
+Everything in this repository is licensed under the MIT License below, except
+the directories listed in part 2 and the fonts listed in part 3.
+
+MIT License
+
+Copyright (c) 2026 MedQuantis SA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+2. Brand assets and guidelines: excluded from the MIT License
+
+The following directories are NOT licensed under the MIT License:
+
+- brand/       logos, wordmark, monogram and favicons
+- guidelines/  brand, writing, data and chart guidelines
+
+© MedQuantis SA, all rights reserved. Public visibility of these files serves
+distribution, not reuse. Agencies and freelancers receive usage rights through
+their contract with MedQuantis SA. See brand/LICENSE and guidelines/LICENSE.
+
+3. Fonts
+
+Each font folder under fonts/ carries its own OFL.txt (SIL Open Font License
+1.1), which governs that font.

package/README.md

@@ -1,3 +1,146 @@
-# Temporary Holding Version
+# MedQuantis design system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The single source of the MedQuantis visual identity: design tokens, shared CSS, self-hosted fonts and icons, brand assets, guidelines and a Claude skill. Every value is defined once, in `tokens/`, and reaches each consumer as a generated output in its native format ([ADR-0002](docs/architecture/decisions/adr-0002-central-tokens-first-design-system.md)).
+
+> Status: bootstrap. Nothing is published yet; the repository stays private until the pre-public confidentiality audit passes ([ADR-0005](docs/architecture/decisions/adr-0005-public-repo-with-confidentiality-gate.md)).
+
+## Outputs
+
+| Output | For |
+| :-- | :-- |
+| `dist/tokens.css` | Every consumer: `--mq-*` custom properties ([ADR-0006](docs/architecture/decisions/adr-0006-mq-token-prefix.md)) |
+| `dist/tokens.json` | Scripts and pipelines that need resolved values |
+| `dist/tailwind.css` | Tailwind 4 and Nuxt UI apps (`@theme` with 50 to 950 scales); imports `tokens.css` itself |
+| `dist/kit-contract.css` | homemade-claude-kit renderers only, deployed as `docs/ux/tokens.css`; never loaded in an app. Carries the latin fonts as embedded data, since the renderers inline this one file |
+| `css/` | Shared `mq-` components, slide canvas and A4 print styles for build-less media (see Shared CSS) |
+| `fonts/fonts.css` | Self-hosted Outfit, Newsreader and Geist Mono (variable woff2, latin and latin-ext, relative paths); deploy the folder whole |
+| `icons/lucide.min.js` | A pinned Lucide build (version and hash in `icons/manifest.json`) |
+| `brand/` | Monogram, favicon set and wordmark: `wordmark-on-light` and `wordmark-on-navy`, live text for screen and `-print` with outlined text |
+| `guidelines/` | Brand, voice, colour, typography, chart, data and accessibility rules |
+| `dist/llms.txt`, `dist/llms-full.txt` | The guidelines and the token list for language models ([llmstxt.org](https://llmstxt.org/) format), generated from `guidelines/` and the tokens |
+| `plugins/medquantis-design-system/` | The Claude skill, as a Claude Code plugin and as a zip for claude.ai (see Claude skill) |
+
+The design system ships framework-neutral outputs only (CSS, JSON, Tailwind theme, static assets). Wiring the tokens into a component library (Nuxt UI, shadcn/ui) belongs to the consumer.
+
+## Shared CSS
+
+The `mq-` component CSS serves build-less media: slides, A4 reports, papers, the website and HTML built by Python pipelines. Load `dist/tokens.css` and `fonts/fonts.css`, then the files you need, each in its own cascade layer and every selector inside `:where()`, so a local class always wins:
+
+| File | Layer | Holds |
+| :-- | :-- | :-- |
+| `css/base.css` | `mq.base` | Typography roles (`mq-doc`, `mq-eyebrow`, `mq-title`, `mq-lead`, `mq-prose`, `mq-note`, `mq-figure`) |
+| `css/components.css` | `mq.components` | Card, navy panel, KPI tiles, table, badges in line-style states, callout, progress and distribution bars, legend, takeaway, footer |
+| `css/slide.css` | `mq.slide` | The 1280 x 720 slide canvas, section label, title, and the footer row with the legal line and slide number |
+| `css/print.css` | `mq.print` | A4 pages with exact colour printing |
+| `css/app.css` | `mq.app` | Status badges, for interactive apps only |
+
+Documents never load `css/app.css`: they are navy-only and show states by mark style ([ADR-0004](docs/architecture/decisions/adr-0004-status-colours-in-apps-only.md)). Apps with a component library (Nuxt UI, shadcn/ui) take the tokens and the Tailwind theme only; they do not load the `mq-` component CSS.
+
+### Component status
+
+Every `mq-` component is `trial` until a consumer uses it in production; it becomes `stable` once a consumer depends on it and its markup has not changed for a release. A `trial` component may still change its markup or classes in a minor release. Usage rules are in [guidelines/](guidelines/README.md).
+
+| Component | Classes | File | Status |
+| :-- | :-- | :-- | :-- |
+| Document root and wrapper | `mq-doc`, `mq-wrap` | `css/base.css` | trial |
+| Headings | `mq-display`, `mq-title`, `mq-subtitle` | `css/base.css` | trial |
+| Eyebrow, lead, prose | `mq-eyebrow`, `mq-lead`, `mq-prose` | `css/base.css` | trial |
+| Label, note, mono, emphasis | `mq-label`, `mq-note`, `mq-mono`, `mq-em` | `css/base.css` | trial |
+| Hero figure | `mq-figure` | `css/base.css` | trial |
+| Card | `mq-card` (`mq-card-title`, `mq-card-body`) | `css/components.css` | trial |
+| Navy panel | `mq-panel` (`mq-panel-kicker`, `-title`, `-text`, `-rule`, `-icon`) | `css/components.css` | trial |
+| KPI tiles | `mq-kpis`, `mq-kpi` (`is-navy`, `is-pale`) | `css/components.css` | trial |
+| Table | `mq-table`, `mq-num` (`is-key`, `is-highlight`, `is-total`) | `css/components.css` | trial |
+| Badge, states by mark style | `mq-badge` (`is-solid`, `is-ring`, `is-pale`, `is-outline`, `is-quiet`, `is-dashed`) | `css/components.css` | trial |
+| Callout | `mq-callout` (`mq-callout-title`) | `css/components.css` | trial |
+| Progress bar | `mq-progress` | `css/components.css` | trial |
+| Distribution bar | `mq-distribution`, `mq-segment` | `css/components.css` | trial |
+| Legend | `mq-legend` (`is-column`, `mq-legend-value`), `mq-swatch` | `css/components.css` | trial |
+| Takeaway | `mq-takeaway` | `css/components.css` | trial |
+| Footer | `mq-foot` | `css/components.css` | trial |
+| Slide canvas | `mq-slide` (`mq-slide-label`, `-title`, `-body`, `-foot`, `-number`) | `css/slide.css` | trial |
+| A4 page and desk | `mq-page`, `mq-desk`, `mq-no-print` | `css/print.css` | trial |
+| Status badge, apps only | `mq-status` (`is-success`, `is-warning`, `is-danger`, `is-info`) | `css/app.css` | trial |
+
+Consumers lint their own CSS with the same rules: `export { default } from "@medquantis/design-system/stylelint";` in their `stylelint.config.mjs`. It rejects literal colours, fonts and shadows, `!important`, unknown custom properties, any radius other than the three `--mq-radius-*` tokens (so no pill shape can be drawn), and a local `--app-*`, `--site-*`, `--viz-*` or `--deck-*` property set to a literal instead of a `var(--mq-*)` reference (a `calc()` that scales tokens by a plain number is allowed). The config loads two stylelint plugins that the package does not install for you, so a consumer that lints adds them as its own dev dependencies, at the versions this release is tested with: `npm install --save-dev --save-exact stylelint@17.16.0 stylelint-declaration-strict-value@1.12.1 stylelint-value-no-unknown-custom-properties@6.1.1`.
+
+## Specimen
+
+The specimen is the visual reference of the design system: every colour token with its contrast pairings and their allowed use, the type scale, the radii and shadows, every `mq-` component, a 1280 x 720 slide, an A4 page, the brand files and the app status layer. `make specimen` generates it into `dist/specimen/index.html` from `dist/tokens.json`, `css/` and the fictitious data in `examples/`; open that file in a browser. The folder holds its own copies of the CSS, fonts and brand files, so it works offline and requests nothing outside itself. It is never edited by hand and never committed. `make build` does not build it, so the package outputs stay free of it.
+
+`make test` runs the unit tests, then Playwright and axe on the specimen: WCAG 2.2 AA with no serious or critical violation, no request outside the folder, a tagged PDF export, and screenshot baselines of each part of the page (header, every section, footer) and of the focus ring in `tests/e2e/specimen.spec.mjs-snapshots/`. The browser is Playwright's own Chromium headless shell, whose build is pinned by the exact `@playwright/test` version; `make browsers` installs it locally and CI installs the same build, so the baselines compare like with like. After a deliberate visual change, regenerate the baselines with `node_modules/.bin/playwright test --update-snapshots` and review the new images in the PR. When the CI job fails, it uploads Playwright's `test-results/` (actual, expected and diff images) as the `playwright-test-results` artifact, kept for 7 days.
+
+## Claude skill
+
+The skill `medquantis-design-system` teaches Claude to build on-brand slides, A4 reports, web pages, app screens and charts from the tokens and the `mq-` components, then to check the result with its validator, which fails any colour outside the token set, a status colour in a document, an unknown `--mq-*` token and an em or en dash. It lives in `plugins/medquantis-design-system/skills/medquantis-design-system/`: `SKILL.md`, one reference per medium generated from `guidelines/`, a token lookup and the validator in `scripts/` (Python 3.11 standard library, so they run in a claude.ai container too), and a copy of the built tokens, CSS, fonts and brand files in `assets/`, because an installed plugin cannot reach `dist/`.
+
+- **Claude Code:** this repository is a plugin marketplace named `medquantis`. Add it with `/plugin marketplace add MedQuantis/design-system`, then `/plugin install medquantis-design-system@medquantis`.
+- **claude.ai:** `make skill-zip` writes `dist/medquantis-design-system-skill.zip`; upload it under Settings, Features. Each member uploads it once.
+
+`make skill` regenerates the references and the generated eval graders and copies the built assets; the unit tests fail when the committed skill differs from a fresh build, so a token or guideline change needs `make skill` in the same PR. The plugin, the marketplace and the skill carry the package version. `make plugin-validate` runs `claude plugin validate` locally (no model call); CI relies on the manifest unit test.
+
+The eval tasks (`plugins/medquantis-design-system/evals/`, at the plugin root so the model under test cannot read the rubrics, three or more per medium, run by `claude plugin eval`) call models on the owner's account, so they never run in `make check`. Each case grades the produced files: the page is on palette, self-contained (styles and tokens inlined by `bundle.py`), and the validator's recorded verdict (`validate.py --record validation.txt`) is clean. `make skill-evals` runs them on Sonnet by default (`SKILL_EVAL_MODELS` adds Haiku or Opus) with a cost ceiling (`SKILL_EVAL_MAX_COST`, USD per model) and writes the reports to `dist/skill-evals/<model>/`; Linux needs `bubblewrap` and `socat` for Claude Code's sandbox. Under WSL the target drops the `/mnt/` PATH entries and runs with a temporary HOME that links only `~/.claude` and `~/.claude.json`, because the sandbox refuses both the Windows interop directories and Docker Desktop's symlinked credential store.
+
+## Consumption
+
+- **Node consumers** install `@medquantis/design-system` at an exact version and let Dependabot propose bumps.
+- **Build-less and Python consumers** reference the CDN URL of a tagged release, or vendor a release into `vendor/medquantis-ds/` with `make design-sync`, a `VERSION` file and a CI check that the copy matches the tag.
+- Upgrades are deliberate: never a version range, never a branch URL.
+
+### CDN with an exact version and an SRI hash
+
+Each release is on npm, so jsDelivr serves its files at a fixed URL. Always name an exact version and pin the file with a Subresource Integrity hash; never use a version range (`@1`, `@^1.0.0`, `@latest`) or a GitHub-backed jsDelivr URL (`/gh/` instead of `/npm/`), which serves the repository rather than the published release.
+
+```html
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@medquantis/design-system@X.Y.Z/dist/tokens.css"
+      integrity="sha384-<hash of that exact file>"
+      crossorigin="anonymous">
+```
+
+Replace `X.Y.Z` with the release you adopt and compute the hash from that release's own file, taken from its npm tarball (`npm pack @medquantis/design-system@X.Y.Z`, then `tar -xzf` it and run the command inside `package/`):
+
+```sh
+echo "sha384-$(openssl dgst -sha384 -binary dist/tokens.css | openssl base64 -A)"
+```
+
+Every other shipped file (`css/*.css`, `fonts/fonts.css`, `dist/kit-contract.css`) works the same way, each with its own hash. Fonts referenced by `fonts.css` load relative to it, so serve the stylesheet and its fonts from the same release URL.
+
+## Specialisation rules
+
+1. Core and semantic tokens are not overridden in a consumer.
+2. A product-level variation, if ever needed, is a theme in this repo, never a local override.
+3. Local additions use the consumer's own prefix (`--deck-*`, `--app-*`) and reference `var(--mq-*)` only; a stylelint rule blocks raw hex colours outside this repo.
+4. A component invented locally in two consumers is a candidate for promotion here if it is useful, unique, consistent and versatile (see [GOVERNANCE.md](GOVERNANCE.md)). Every local one-off is logged in [docs/one-offs.md](docs/one-offs.md).
+
+## Development
+
+```sh
+mise install      # Node, Python, gitleaks, actionlint, zizmor, shellcheck and uv, pinned in mise.toml
+make check        # lint, workflow lint, build, tests and the confidentiality check
+make specimen     # generate the specimen page into dist/specimen/index.html
+make test         # unit tests, then Playwright and axe on the specimen (installs the pinned browser)
+make assets       # refresh fonts/ and icons/ from their pinned npm packages
+make brand        # re-outline the monogram and wordmark SVGs from the pinned Outfit font
+make brand-check  # prove the committed brand SVGs reproduce byte for byte (Python, not in make check)
+make skill        # regenerate the Claude skill's references, eval graders and assets
+make skill-zip    # zip the skill for claude.ai into dist/
+```
+
+`fonts/` and `icons/` are committed copies of exact-pinned packages because they ship in the npm package; a unit test fails when they drift, so a Dependabot bump of a font or of Lucide needs `make assets` in the same PR. The screen wordmarks use live text, which renders in Outfit only where the page loads `fonts.css` (inline SVG); in an `<img>` use the `-print` variant.
+
+`make build` installs the npm dependencies from `package-lock.json` (`npm ci --ignore-scripts`) when the lockfile changes, then regenerates `dist/` from `tokens/` with Style Dictionary. `make check` is the single local entry point and mirrors CI, which installs the same tools from `mise.toml` and runs the same target. Locally the deny-list scan warns when `MQ_DENYLIST` is unset; point it at a copy of the deny-list (or `tests/fixtures/denylist.txt` for a dry run) to run the full check.
+
+Dependabot proposes weekly bumps for npm dependencies and GitHub Actions. It has no mise ecosystem, so the tool pins in `mise.toml` are bumped by hand, in a PR whose `make check` must pass.
+
+## Owner set-up
+
+CI fails closed until these exist:
+
+1. A private MedQuantis repository holding the deny-list as `denylist.txt` at its root, one client, partner or person name per line.
+2. A fine-grained personal access token with read-only `Contents` access to that repository alone, stored in this repository as the Actions secret `MQ_DENYLIST_TOKEN`, and again as a Dependabot secret of the same name so Dependabot PRs can run the scan.
+3. The Actions variable `MQ_DENYLIST_REPO` set to that repository's `owner/name`, so its name stays out of this public repository.
+
+## Licence
+
+Code, tokens and generated CSS are MIT. `brand/` and `guidelines/` are © MedQuantis SA, all rights reserved. Fonts keep their OFL licence. See [LICENSE](LICENSE).

package/brand/LICENSE

@@ -0,0 +1,8 @@
+© MedQuantis SA, all rights reserved.
+
+The files in this directory (logos, wordmark, monogram and favicons) are not licensed under the
+MIT License that covers the code, tokens and generated CSS of this repository.
+
+No permission is granted to copy, modify or redistribute them outside the
+MedQuantis design-system package. Agencies and freelancers receive usage
+rights through their contract with MedQuantis SA.

package/brand/favicon/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="8" fill="#0a2463"/><path fill="#ffffff" d="M10.16 41.88V22.12H13.31L21.09 34.25H19.48L27.25 22.12H30.4V41.88H26.02V29.54L26.79 29.75L21.73 37.63H18.82L13.78 29.75L14.54 29.54V41.88ZM42.85 42.16Q40.78 42.16 38.99 41.39Q37.21 40.62 35.86 39.24Q34.52 37.87 33.77 36.05Q33.01 34.23 33.01 32.14Q33.01 30.05 33.76 28.24Q34.51 26.44 35.84 25.07Q37.18 23.7 38.95 22.94Q40.73 22.17 42.8 22.17Q44.87 22.17 46.65 22.94Q48.43 23.7 49.77 25.07Q51.11 26.44 51.86 28.26Q52.61 30.07 52.61 32.17Q52.61 34.25 51.86 36.07Q51.11 37.89 49.78 39.26Q48.45 40.62 46.68 41.39Q44.91 42.16 42.85 42.16ZM52.15 43.25 43.06 34.16 44.75 32.46 53.84 41.55ZM42.8 39.64Q44.88 39.64 46.48 38.67Q48.07 37.7 48.98 36.01Q49.9 34.32 49.9 32.14Q49.9 30.52 49.37 29.16Q48.85 27.8 47.89 26.8Q46.94 25.79 45.65 25.25Q44.36 24.7 42.8 24.7Q40.73 24.7 39.14 25.65Q37.55 26.6 36.64 28.28Q35.73 29.96 35.73 32.14Q35.73 33.76 36.25 35.15Q36.78 36.53 37.72 37.53Q38.66 38.52 39.96 39.08Q41.27 39.64 42.8 39.64Z"/></svg>

package/brand/monogram-small.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="8" fill="#0a2463"/><path fill="#ffffff" d="M5.09 44.05V19.95H9.47L18.7 33.91H16.65L25.85 19.95H30.23V44.05H24.2V30.03L25.16 30.29L19.63 38.61H15.69L10.18 30.29L11.11 30.03V44.05ZM45.32 44.43Q42.69 44.43 40.44 43.47Q38.18 42.52 36.48 40.84Q34.79 39.15 33.84 36.9Q32.89 34.65 32.89 32.07Q32.89 29.48 33.84 27.25Q34.78 25.02 36.46 23.33Q38.14 21.65 40.38 20.71Q42.63 19.78 45.25 19.78Q47.88 19.78 50.12 20.71Q52.37 21.65 54.06 23.33Q55.75 25.02 56.69 27.27Q57.64 29.51 57.64 32.1Q57.64 34.69 56.69 36.93Q55.75 39.17 54.07 40.85Q52.39 42.53 50.15 43.48Q47.91 44.43 45.32 44.43ZM56.11 45.83 45.14 34.86 47.95 32.06 58.91 43.02ZM45.25 40.13Q47.54 40.13 49.25 39.11Q50.96 38.09 51.93 36.27Q52.89 34.46 52.89 32.07Q52.89 30.29 52.34 28.83Q51.79 27.37 50.77 26.3Q49.75 25.23 48.36 24.65Q46.96 24.08 45.25 24.08Q42.99 24.08 41.28 25.08Q39.57 26.08 38.6 27.88Q37.64 29.68 37.64 32.07Q37.64 33.85 38.19 35.34Q38.74 36.84 39.75 37.89Q40.76 38.95 42.16 39.54Q43.57 40.13 45.25 40.13Z"/></svg>

package/brand/monogram-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="0" fill="#0a2463"/><path fill="#ffffff" d="M10.16 41.88V22.12H13.31L21.09 34.25H19.48L27.25 22.12H30.4V41.88H26.02V29.54L26.79 29.75L21.73 37.63H18.82L13.78 29.75L14.54 29.54V41.88ZM42.85 42.16Q40.78 42.16 38.99 41.39Q37.21 40.62 35.86 39.24Q34.52 37.87 33.77 36.05Q33.01 34.23 33.01 32.14Q33.01 30.05 33.76 28.24Q34.51 26.44 35.84 25.07Q37.18 23.7 38.95 22.94Q40.73 22.17 42.8 22.17Q44.87 22.17 46.65 22.94Q48.43 23.7 49.77 25.07Q51.11 26.44 51.86 28.26Q52.61 30.07 52.61 32.17Q52.61 34.25 51.86 36.07Q51.11 37.89 49.78 39.26Q48.45 40.62 46.68 41.39Q44.91 42.16 42.85 42.16ZM52.15 43.25 43.06 34.16 44.75 32.46 53.84 41.55ZM42.8 39.64Q44.88 39.64 46.48 38.67Q48.07 37.7 48.98 36.01Q49.9 34.32 49.9 32.14Q49.9 30.52 49.37 29.16Q48.85 27.8 47.89 26.8Q46.94 25.79 45.65 25.25Q44.36 24.7 42.8 24.7Q40.73 24.7 39.14 25.65Q37.55 26.6 36.64 28.28Q35.73 29.96 35.73 32.14Q35.73 33.76 36.25 35.15Q36.78 36.53 37.72 37.53Q38.66 38.52 39.96 39.08Q41.27 39.64 42.8 39.64Z"/></svg>

package/brand/monogram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="8" fill="#0a2463"/><path fill="#ffffff" d="M10.16 41.88V22.12H13.31L21.09 34.25H19.48L27.25 22.12H30.4V41.88H26.02V29.54L26.79 29.75L21.73 37.63H18.82L13.78 29.75L14.54 29.54V41.88ZM42.85 42.16Q40.78 42.16 38.99 41.39Q37.21 40.62 35.86 39.24Q34.52 37.87 33.77 36.05Q33.01 34.23 33.01 32.14Q33.01 30.05 33.76 28.24Q34.51 26.44 35.84 25.07Q37.18 23.7 38.95 22.94Q40.73 22.17 42.8 22.17Q44.87 22.17 46.65 22.94Q48.43 23.7 49.77 25.07Q51.11 26.44 51.86 28.26Q52.61 30.07 52.61 32.17Q52.61 34.25 51.86 36.07Q51.11 37.89 49.78 39.26Q48.45 40.62 46.68 41.39Q44.91 42.16 42.85 42.16ZM52.15 43.25 43.06 34.16 44.75 32.46 53.84 41.55ZM42.8 39.64Q44.88 39.64 46.48 38.67Q48.07 37.7 48.98 36.01Q49.9 34.32 49.9 32.14Q49.9 30.52 49.37 29.16Q48.85 27.8 47.89 26.8Q46.94 25.79 45.65 25.25Q44.36 24.7 42.8 24.7Q40.73 24.7 39.14 25.65Q37.55 26.6 36.64 28.28Q35.73 29.96 35.73 32.14Q35.73 33.76 36.25 35.15Q36.78 36.53 37.72 37.53Q38.66 38.52 39.96 39.08Q41.27 39.64 42.8 39.64Z"/></svg>

package/brand/wordmark-on-light-print.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.04 37.08"><path fill="#0a2463" d="M0 34.7V0.96H4.62L18.28 22.86H15.65L29.3 0.96H33.92V34.7H27.4V12.16L28.68 12.51L19.17 27.79H14.75L5.25 12.51L6.52 12.16V34.7ZM51.22 35.2Q47.6 35.2 44.75 33.64Q41.9 32.08 40.25 29.33Q38.61 26.58 38.61 23.11Q38.61 19.65 40.22 16.92Q41.84 14.19 44.61 12.6Q47.39 11.01 50.81 11.01Q54.15 11.01 56.71 12.51Q59.27 14 60.74 16.62Q62.2 19.23 62.2 22.58Q62.2 23.19 62.13 23.84Q62.06 24.49 61.89 25.29L42.38 25.33V20.65L58.96 20.61L56.39 22.54Q56.32 20.48 55.67 19.09Q55.01 17.71 53.79 16.98Q52.58 16.24 50.79 16.24Q48.92 16.24 47.54 17.07Q46.16 17.9 45.41 19.41Q44.66 20.91 44.66 23.01Q44.66 25.12 45.45 26.68Q46.25 28.23 47.73 29.07Q49.2 29.9 51.18 29.9Q52.94 29.9 54.39 29.29Q55.84 28.69 56.9 27.49L60.59 31.21Q58.89 33.19 56.46 34.2Q54.04 35.2 51.22 35.2ZM75.88 35.18Q72.66 35.18 70.12 33.6Q67.58 32.01 66.11 29.29Q64.65 26.56 64.65 23.14Q64.65 19.67 66.11 16.95Q67.58 14.23 70.11 12.63Q72.65 11.04 75.88 11.04Q78.39 11.04 80.39 12.06Q82.38 13.08 83.61 14.86Q84.84 16.65 84.93 18.93V27.16Q84.84 29.44 83.63 31.26Q82.42 33.08 80.4 34.13Q78.39 35.18 75.88 35.18ZM76.96 29.37Q78.74 29.37 80.05 28.57Q81.36 27.78 82.1 26.37Q82.84 24.96 82.84 23.11Q82.84 21.25 82.1 19.85Q81.36 18.45 80.05 17.65Q78.74 16.84 76.99 16.84Q75.24 16.84 73.93 17.65Q72.61 18.45 71.84 19.86Q71.08 21.28 71.08 23.11Q71.08 24.94 71.83 26.36Q72.59 27.77 73.92 28.57Q75.26 29.37 76.96 29.37ZM88.77 34.7H82.52V28.47L83.52 22.82L82.46 17.22V-0H88.77ZM110.68 35.18Q107.18 35.18 104.16 33.87Q101.15 32.56 98.9 30.22Q96.64 27.88 95.38 24.79Q94.12 21.69 94.12 18.14Q94.12 14.56 95.37 11.49Q96.62 8.42 98.86 6.1Q101.1 3.79 104.09 2.49Q107.08 1.2 110.58 1.2Q114.09 1.2 117.09 2.49Q120.09 3.79 122.33 6.1Q124.58 8.42 125.84 11.52Q127.1 14.61 127.1 18.19Q127.1 21.74 125.85 24.84Q124.6 27.93 122.36 30.25Q120.11 32.56 117.14 33.87Q114.16 35.18 110.68 35.18ZM127.19 37.08 111.14 21.02 113.39 18.76 129.45 34.82ZM110.58 31.8Q114.33 31.8 117.22 30.02Q120.11 28.24 121.78 25.16Q123.45 22.08 123.45 18.14Q123.45 15.21 122.49 12.74Q121.53 10.27 119.8 8.43Q118.07 6.6 115.73 5.59Q113.39 4.58 110.58 4.58Q106.86 4.58 103.97 6.33Q101.08 8.08 99.42 11.14Q97.77 14.2 97.77 18.14Q97.77 21.07 98.73 23.58Q99.69 26.08 101.4 27.92Q103.12 29.76 105.47 30.78Q107.82 31.8 110.58 31.8ZM142.96 35.18Q140.21 35.18 138.04 33.92Q135.88 32.66 134.67 30.43Q133.46 28.2 133.46 25.26V12.14H136.84V25.12Q136.84 27.19 137.58 28.72Q138.33 30.26 139.72 31.11Q141.11 31.96 142.97 31.96Q145.79 31.96 147.44 30.1Q149.08 28.24 149.08 25.12V12.14H152.46V25.27Q152.46 28.2 151.25 30.44Q150.04 32.68 147.9 33.93Q145.76 35.18 142.96 35.18ZM168.52 35.18Q165.33 35.18 162.78 33.63Q160.24 32.08 158.76 29.43Q157.29 26.78 157.29 23.47Q157.29 20.13 158.76 17.47Q160.24 14.8 162.77 13.23Q165.3 11.66 168.47 11.66Q171.06 11.66 173.1 12.69Q175.14 13.72 176.43 15.57Q177.71 17.42 177.98 19.87V26.95Q177.69 29.4 176.42 31.26Q175.14 33.12 173.12 34.15Q171.09 35.18 168.52 35.18ZM169.05 31.99Q172.58 31.99 174.7 29.62Q176.82 27.26 176.82 23.44Q176.82 20.88 175.85 18.94Q174.88 17.01 173.12 15.93Q171.35 14.85 169 14.85Q166.6 14.85 164.75 15.96Q162.9 17.06 161.84 18.99Q160.77 20.92 160.77 23.42Q160.77 25.92 161.84 27.85Q162.9 29.78 164.78 30.88Q166.65 31.99 169.05 31.99ZM176.63 34.7V28.65L177.3 23.11L176.63 17.66V12.14H180.02V34.7ZM203.25 34.7V21.45Q203.25 18.5 201.48 16.65Q199.72 14.8 196.85 14.8Q194.89 14.8 193.39 15.66Q191.9 16.51 191.04 18Q190.19 19.48 190.19 21.43L188.66 20.56Q188.66 18 189.84 15.99Q191.03 13.99 193.09 12.82Q195.16 11.66 197.76 11.66Q200.37 11.66 202.37 12.92Q204.38 14.18 205.5 16.28Q206.63 18.38 206.63 20.88V34.7ZM186.81 34.7V12.14H190.19V34.7ZM216.14 34.7V2.64H219.52V34.7ZM210.45 15.19V12.14H225.18V15.19ZM229.79 34.7V12.14H233.18V34.7ZM231.47 7.27Q230.49 7.27 229.83 6.57Q229.17 5.88 229.17 4.89Q229.17 3.88 229.83 3.21Q230.49 2.54 231.47 2.54Q232.5 2.54 233.16 3.21Q233.82 3.88 233.82 4.89Q233.82 5.88 233.16 6.57Q232.5 7.27 231.47 7.27ZM246.93 35.18Q245.08 35.18 243.41 34.68Q241.74 34.17 240.38 33.26Q239.01 32.35 237.98 31.1L240.16 28.89Q241.48 30.52 243.2 31.32Q244.91 32.11 247 32.11Q249.26 32.11 250.53 31.26Q251.8 30.4 251.8 28.87Q251.8 27.43 250.9 26.61Q250 25.8 248.57 25.3Q247.14 24.81 245.56 24.36Q243.98 23.9 242.55 23.2Q241.12 22.51 240.22 21.27Q239.32 20.04 239.32 18Q239.32 16.08 240.27 14.66Q241.22 13.24 242.96 12.45Q244.7 11.66 247.1 11.66Q249.66 11.66 251.72 12.57Q253.77 13.48 255.04 15.26L252.86 17.44Q251.87 16.15 250.36 15.44Q248.85 14.73 246.95 14.73Q244.82 14.73 243.69 15.57Q242.56 16.41 242.56 17.76Q242.56 19.08 243.46 19.82Q244.36 20.56 245.79 21.02Q247.22 21.48 248.8 21.93Q250.38 22.39 251.81 23.13Q253.24 23.88 254.14 25.15Q255.04 26.42 255.04 28.56Q255.04 31.6 252.84 33.39Q250.65 35.18 246.93 35.18Z"/></svg>

package/brand/wordmark-on-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.04 37.08"><text x="-3.44" y="34.7" font-family="Outfit, system-ui, sans-serif" font-size="48" fill="#0a2463"><tspan font-weight="600">Med</tspan><tspan font-weight="300">Quantis</tspan></text></svg>

package/brand/wordmark-on-navy-print.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.04 37.08"><path fill="#ffffff" d="M0 34.7V0.96H4.62L18.28 22.86H15.65L29.3 0.96H33.92V34.7H27.4V12.16L28.68 12.51L19.17 27.79H14.75L5.25 12.51L6.52 12.16V34.7ZM51.22 35.2Q47.6 35.2 44.75 33.64Q41.9 32.08 40.25 29.33Q38.61 26.58 38.61 23.11Q38.61 19.65 40.22 16.92Q41.84 14.19 44.61 12.6Q47.39 11.01 50.81 11.01Q54.15 11.01 56.71 12.51Q59.27 14 60.74 16.62Q62.2 19.23 62.2 22.58Q62.2 23.19 62.13 23.84Q62.06 24.49 61.89 25.29L42.38 25.33V20.65L58.96 20.61L56.39 22.54Q56.32 20.48 55.67 19.09Q55.01 17.71 53.79 16.98Q52.58 16.24 50.79 16.24Q48.92 16.24 47.54 17.07Q46.16 17.9 45.41 19.41Q44.66 20.91 44.66 23.01Q44.66 25.12 45.45 26.68Q46.25 28.23 47.73 29.07Q49.2 29.9 51.18 29.9Q52.94 29.9 54.39 29.29Q55.84 28.69 56.9 27.49L60.59 31.21Q58.89 33.19 56.46 34.2Q54.04 35.2 51.22 35.2ZM75.88 35.18Q72.66 35.18 70.12 33.6Q67.58 32.01 66.11 29.29Q64.65 26.56 64.65 23.14Q64.65 19.67 66.11 16.95Q67.58 14.23 70.11 12.63Q72.65 11.04 75.88 11.04Q78.39 11.04 80.39 12.06Q82.38 13.08 83.61 14.86Q84.84 16.65 84.93 18.93V27.16Q84.84 29.44 83.63 31.26Q82.42 33.08 80.4 34.13Q78.39 35.18 75.88 35.18ZM76.96 29.37Q78.74 29.37 80.05 28.57Q81.36 27.78 82.1 26.37Q82.84 24.96 82.84 23.11Q82.84 21.25 82.1 19.85Q81.36 18.45 80.05 17.65Q78.74 16.84 76.99 16.84Q75.24 16.84 73.93 17.65Q72.61 18.45 71.84 19.86Q71.08 21.28 71.08 23.11Q71.08 24.94 71.83 26.36Q72.59 27.77 73.92 28.57Q75.26 29.37 76.96 29.37ZM88.77 34.7H82.52V28.47L83.52 22.82L82.46 17.22V-0H88.77ZM110.68 35.18Q107.18 35.18 104.16 33.87Q101.15 32.56 98.9 30.22Q96.64 27.88 95.38 24.79Q94.12 21.69 94.12 18.14Q94.12 14.56 95.37 11.49Q96.62 8.42 98.86 6.1Q101.1 3.79 104.09 2.49Q107.08 1.2 110.58 1.2Q114.09 1.2 117.09 2.49Q120.09 3.79 122.33 6.1Q124.58 8.42 125.84 11.52Q127.1 14.61 127.1 18.19Q127.1 21.74 125.85 24.84Q124.6 27.93 122.36 30.25Q120.11 32.56 117.14 33.87Q114.16 35.18 110.68 35.18ZM127.19 37.08 111.14 21.02 113.39 18.76 129.45 34.82ZM110.58 31.8Q114.33 31.8 117.22 30.02Q120.11 28.24 121.78 25.16Q123.45 22.08 123.45 18.14Q123.45 15.21 122.49 12.74Q121.53 10.27 119.8 8.43Q118.07 6.6 115.73 5.59Q113.39 4.58 110.58 4.58Q106.86 4.58 103.97 6.33Q101.08 8.08 99.42 11.14Q97.77 14.2 97.77 18.14Q97.77 21.07 98.73 23.58Q99.69 26.08 101.4 27.92Q103.12 29.76 105.47 30.78Q107.82 31.8 110.58 31.8ZM142.96 35.18Q140.21 35.18 138.04 33.92Q135.88 32.66 134.67 30.43Q133.46 28.2 133.46 25.26V12.14H136.84V25.12Q136.84 27.19 137.58 28.72Q138.33 30.26 139.72 31.11Q141.11 31.96 142.97 31.96Q145.79 31.96 147.44 30.1Q149.08 28.24 149.08 25.12V12.14H152.46V25.27Q152.46 28.2 151.25 30.44Q150.04 32.68 147.9 33.93Q145.76 35.18 142.96 35.18ZM168.52 35.18Q165.33 35.18 162.78 33.63Q160.24 32.08 158.76 29.43Q157.29 26.78 157.29 23.47Q157.29 20.13 158.76 17.47Q160.24 14.8 162.77 13.23Q165.3 11.66 168.47 11.66Q171.06 11.66 173.1 12.69Q175.14 13.72 176.43 15.57Q177.71 17.42 177.98 19.87V26.95Q177.69 29.4 176.42 31.26Q175.14 33.12 173.12 34.15Q171.09 35.18 168.52 35.18ZM169.05 31.99Q172.58 31.99 174.7 29.62Q176.82 27.26 176.82 23.44Q176.82 20.88 175.85 18.94Q174.88 17.01 173.12 15.93Q171.35 14.85 169 14.85Q166.6 14.85 164.75 15.96Q162.9 17.06 161.84 18.99Q160.77 20.92 160.77 23.42Q160.77 25.92 161.84 27.85Q162.9 29.78 164.78 30.88Q166.65 31.99 169.05 31.99ZM176.63 34.7V28.65L177.3 23.11L176.63 17.66V12.14H180.02V34.7ZM203.25 34.7V21.45Q203.25 18.5 201.48 16.65Q199.72 14.8 196.85 14.8Q194.89 14.8 193.39 15.66Q191.9 16.51 191.04 18Q190.19 19.48 190.19 21.43L188.66 20.56Q188.66 18 189.84 15.99Q191.03 13.99 193.09 12.82Q195.16 11.66 197.76 11.66Q200.37 11.66 202.37 12.92Q204.38 14.18 205.5 16.28Q206.63 18.38 206.63 20.88V34.7ZM186.81 34.7V12.14H190.19V34.7ZM216.14 34.7V2.64H219.52V34.7ZM210.45 15.19V12.14H225.18V15.19ZM229.79 34.7V12.14H233.18V34.7ZM231.47 7.27Q230.49 7.27 229.83 6.57Q229.17 5.88 229.17 4.89Q229.17 3.88 229.83 3.21Q230.49 2.54 231.47 2.54Q232.5 2.54 233.16 3.21Q233.82 3.88 233.82 4.89Q233.82 5.88 233.16 6.57Q232.5 7.27 231.47 7.27ZM246.93 35.18Q245.08 35.18 243.41 34.68Q241.74 34.17 240.38 33.26Q239.01 32.35 237.98 31.1L240.16 28.89Q241.48 30.52 243.2 31.32Q244.91 32.11 247 32.11Q249.26 32.11 250.53 31.26Q251.8 30.4 251.8 28.87Q251.8 27.43 250.9 26.61Q250 25.8 248.57 25.3Q247.14 24.81 245.56 24.36Q243.98 23.9 242.55 23.2Q241.12 22.51 240.22 21.27Q239.32 20.04 239.32 18Q239.32 16.08 240.27 14.66Q241.22 13.24 242.96 12.45Q244.7 11.66 247.1 11.66Q249.66 11.66 251.72 12.57Q253.77 13.48 255.04 15.26L252.86 17.44Q251.87 16.15 250.36 15.44Q248.85 14.73 246.95 14.73Q244.82 14.73 243.69 15.57Q242.56 16.41 242.56 17.76Q242.56 19.08 243.46 19.82Q244.36 20.56 245.79 21.02Q247.22 21.48 248.8 21.93Q250.38 22.39 251.81 23.13Q253.24 23.88 254.14 25.15Q255.04 26.42 255.04 28.56Q255.04 31.6 252.84 33.39Q250.65 35.18 246.93 35.18Z"/></svg>

package/brand/wordmark-on-navy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.04 37.08"><text x="-3.44" y="34.7" font-family="Outfit, system-ui, sans-serif" font-size="48" fill="#ffffff"><tspan font-weight="600">Med</tspan><tspan font-weight="300">Quantis</tspan></text></svg>

package/css/app.css

@@ -0,0 +1,58 @@
+/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
+/*
+ * MedQuantis status badges for interactive apps only (ADR-0004). Documents never load this
+ * file. A status badge always carries a word or an icon, never colour alone (WCAG 1.4.1).
+ * Warning follows owner ruling 5: text, icon and border in --mq-warning; the fill takes ink
+ * text, never white.
+ */
+@layer mq.base, mq.components, mq.slide, mq.print, mq.app;
+
+@layer mq.app {
+  :where(.mq-status) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mq-space-1);
+    box-sizing: border-box;
+    padding: 0 var(--mq-space-2);
+    border: var(--mq-stroke-hairline) solid currentColor;
+    border-radius: var(--mq-radius-small);
+    background-color: var(--mq-surface);
+    font-family: var(--mq-font-family-ui);
+    font-size: var(--mq-font-size-eyebrow);
+    font-weight: var(--mq-font-weight-heading);
+    line-height: 1.8;
+    white-space: nowrap;
+  }
+
+  :where(.mq-status.is-success) {
+    border-color: var(--mq-success);
+    color: var(--mq-success);
+  }
+
+  :where(.mq-status.is-danger) {
+    border-color: var(--mq-danger);
+    color: var(--mq-danger);
+  }
+
+  :where(.mq-status.is-info) {
+    border-color: var(--mq-info);
+    color: var(--mq-info);
+  }
+
+  :where(.mq-status.is-warning) {
+    border-color: var(--mq-warning);
+    background-color: var(--mq-warning-tint);
+    color: var(--mq-ink);
+  }
+
+  :where(.mq-status.is-warning .mq-status-icon) {
+    /* mq-bg: --mq-warning-tint */
+    stroke: var(--mq-warning);
+  }
+
+  :where(.mq-status.is-warning.is-filled) {
+    border-color: transparent;
+    background-color: var(--mq-warning-fill);
+    color: var(--mq-ink);
+  }
+}

package/css/base.css

@@ -0,0 +1,125 @@
+/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
+/*
+ * MedQuantis typography roles for documents, slides and pages (build-less media).
+ * Tokens only: load dist/tokens.css (and fonts/fonts.css) first. Every selector sits in :where()
+ * so a consumer class overrides it without a specificity fight.
+ */
+@layer mq.base, mq.components, mq.slide, mq.print, mq.app;
+
+@layer mq.base {
+  :where(.mq-doc) {
+    background-color: var(--mq-canvas);
+    color: var(--mq-ink);
+    font-family: var(--mq-font-family-body);
+    font-size: var(--mq-font-size-body);
+    font-weight: var(--mq-font-weight-body);
+    line-height: 1.55;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  :where(.mq-wrap) {
+    box-sizing: border-box;
+    max-width: var(--mq-page-width);
+    margin: 0 auto;
+    padding: 0 var(--mq-space-6);
+  }
+
+  :where(.mq-eyebrow) {
+    margin: 0 0 var(--mq-space-2);
+    color: var(--mq-accent);
+    font-family: var(--mq-font-family-mono);
+    font-size: var(--mq-font-size-eyebrow);
+    font-weight: var(--mq-font-weight-heading);
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+  }
+
+  :where(.mq-display, .mq-title, .mq-subtitle) {
+    margin: 0;
+    color: var(--mq-ink);
+    font-family: var(--mq-font-family-heading);
+    font-weight: var(--mq-font-weight-heading);
+    text-wrap: balance;
+  }
+
+  :where(.mq-display) {
+    font-size: var(--mq-font-size-hero-max);
+    line-height: 1.08;
+    letter-spacing: -0.025em;
+  }
+
+  :where(.mq-title) {
+    font-size: var(--mq-font-size-h2);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+  }
+
+  :where(.mq-subtitle) {
+    font-size: var(--mq-font-size-h3);
+    line-height: 1.3;
+  }
+
+  :where(.mq-lead) {
+    margin: var(--mq-space-3) 0 0;
+    max-width: var(--mq-page-measure);
+    color: var(--mq-muted);
+    font-family: var(--mq-font-family-body);
+    font-size: var(--mq-font-size-lead);
+    font-style: italic;
+    line-height: 1.5;
+  }
+
+  :where(.mq-prose) {
+    max-width: var(--mq-page-measure);
+    font-family: var(--mq-font-family-body);
+    font-size: var(--mq-font-size-body);
+    line-height: 1.6;
+    text-wrap: pretty;
+  }
+
+  :where(.mq-label) {
+    color: var(--mq-muted);
+    font-family: var(--mq-font-family-ui);
+    font-size: var(--mq-font-size-label);
+    font-weight: var(--mq-font-weight-heading);
+  }
+
+  :where(.mq-note) {
+    color: var(--mq-tertiary);
+    font-family: var(--mq-font-family-body);
+    font-size: var(--mq-font-size-note);
+    font-style: italic;
+  }
+
+  :where(.mq-mono) {
+    font-family: var(--mq-font-family-mono);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.mq-figure) {
+    color: var(--mq-accent);
+    font-family: var(--mq-font-family-heading);
+    font-size: var(--mq-font-size-figure);
+    font-weight: var(--mq-font-weight-heading);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    letter-spacing: -0.02em;
+  }
+
+  :where(.mq-em) {
+    font-weight: var(--mq-font-weight-emphasis);
+  }
+
+  :where(.mq-doc a) {
+    color: var(--mq-accent);
+    text-underline-offset: 0.15em;
+  }
+
+  /* Keyboard focus: 2 px navy ring with an offset (WCAG 2.4.7, 1.4.11); white inside navy
+     panels, set in components.css. */
+  :where(.mq-doc :focus-visible) {
+    outline: var(--mq-focus-ring-width) solid var(--mq-focus-ring-color);
+    outline-offset: var(--mq-focus-ring-offset);
+  }
+}