@medquantis/design-system 1.1.0 → 1.2.0

package/README.md

@@ -11,13 +11,14 @@ The single source of the MedQuantis visual identity: design tokens, shared CSS,
 | `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/themes/dark.css`, `dist/themes/dark.json` | The dark theme: the semantic roles re-valued under `.dark`, for apps, documents and slides (see Dark theme) |
 | `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 |
-| `kit-manifest.json`, `dist/kit/` | The homemade-claude-kit delivery-comms renderers (contract 2.0.0): the manifest declares nine modules, each a file in `dist/kit/` (see Using it from the delivery-comms kit) |
+| `kit-manifest.json`, `dist/kit/` | The homemade-claude-kit delivery-comms renderers (contract 2.1.0): the manifest declares ten modules, each a file in `dist/kit/` (see Using it from the delivery-comms kit) |
 | `dist/DESIGN.md` | Tools and agents outside the kit: the tokens as [Google DESIGN.md](https://github.com/google-labs-code/design.md) front matter, then the guidelines as prose |
 | `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) |
@@ -59,6 +60,7 @@ Every `mq-` component is `trial` until a consumer uses it in production; it beco
 | 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 |
+| Monogram | `mq-monogram` | `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 |
@@ -66,9 +68,27 @@ Every `mq-` component is `trial` until a consumer uses it in production; it beco
 
 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`.
 
+## Dark theme
+
+MedQuantis has one dark theme ([ADR-0007](docs/architecture/decisions/adr-0007-medquantis-has-a-dark-theme.md)). It re-values the semantic `--mq-*` roles under the `.dark` class and ships in its own files: `dist/themes/dark.css` (exported as `@medquantis/design-system/themes/dark.css`) and its resolved values in `dist/themes/dark.json`. `tokens.css` keeps the light values only, and a role the theme does not name keeps its light value, so the `mq-` components and the Tailwind utilities, which all read `var(--mq-*)`, turn dark with no second class name. The values and every contrast pair are in [guidelines/colour.md](guidelines/colour.md), Dark theme.
+
+- **Opt in:** load `themes/dark.css` after `tokens.css` (or after `tailwind.css`, which imports it), then set `.dark` on `<html>` for a whole page, or on one slide. The design system never switches on `prefers-color-scheme` by itself.
+- **Apps:** the app decides how the viewer chooses, and may follow the viewer's setting by toggling `.dark`. A Tailwind 4 app declares the class as its dark variant, since Tailwind's `dark:` follows `prefers-color-scheme` by default; Nuxt UI 4 already declares it, so a Nuxt UI app adds only the theme file.
+
+```css
+@import "tailwindcss";
+@import "@medquantis/design-system/tailwind.css";
+@import "@medquantis/design-system/themes/dark.css";
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+- **Documents and decks** (A4 reports, papers, PDFs, slides): light or dark is the author's choice, set at build time by putting `.dark` in the page, never taken from the reader's screen. A dark document stays dark in its PDF; light stays the default for anything likely to be printed on paper. Through the kit, see Using it from the delivery-comms kit.
+
+`.dark` is a generic class name: a page that loads `themes/dark.css` and already uses `.dark` for something else gets the theme there too.
+
 ## 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.
+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/`, and the same page in the dark theme into `dist/specimen/dark.html` from `dist/themes/dark.json`; open either 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.
 
@@ -110,15 +130,17 @@ Every other shipped file (`css/*.css`, `fonts/fonts.css`, `dist/kit-contract.css
 
 ## Using it from the delivery-comms kit
 
-The homemade-claude-kit renders decks (`com-slide-deck`), artefact views (`com-artefact-viz`) and release notes (`com-release-note`) with the design system a project pins. A project pins this package once, with the kit's `ux-design-system` skill, at an exact version (1.1.0 is the first release with the kit modules):
+The homemade-claude-kit renders decks (`com-slide-deck`), artefact views (`com-artefact-viz`) and release notes (`com-release-note`) with the design system a project pins. A project pins this package once, with the kit's `ux-design-system` skill, at an exact version (1.1.0 is the first release with the kit modules; 1.2.0 adds the `dark` module and the classification cell):
 
 ```sh
-python3 <skill-dir>/scripts/design_system.py point @medquantis/design-system@1.1.0
+python3 <skill-dir>/scripts/design_system.py point @medquantis/design-system@1.2.0
 ```
 
-In the kit's words this is `ux-design-system point @medquantis/design-system@1.1.0`. It writes the pin to `docs/ux/package.json`, checks the package's `kit-manifest.json` through the kit resolver and prints the Dependabot entry (`directory: "/docs/ux"`) that turns later releases into pull requests. Change the pin only with `point`, never by hand, and never add a `docs/ux/tokens.css`. Each render writes `<output>.provenance.json`, which names the module each value came from.
+In the kit's words this is `ux-design-system point @medquantis/design-system@1.2.0`. It writes the pin to `docs/ux/package.json`, checks the package's `kit-manifest.json` through the kit resolver and prints the Dependabot entry (`directory: "/docs/ux"`) that turns later releases into pull requests. Change the pin only with `point`, never by hand, and never add a `docs/ux/tokens.css`. Each render writes `<output>.provenance.json`, which names the module each value came from.
 
-`kit-manifest.json`, at the top of the package, declares all nine modules of the contract, so the kit's base theme fills none of them:
+The kit modules of 1.2.0 need delivery-comms 2.1.0 or later: the manifest declares contract 2.1.0 and the `dark` module, and a 2.0 kit refuses the unknown `dark` module. A project on a 2.0 kit updates the kit before it points at 1.2.0, or stays on 1.1.0.
+
+`kit-manifest.json`, at the top of the package, declares all ten modules of the contract, so the kit's base theme fills none of them:
 
 | Module | File | Carries |
 | :-- | :-- | :-- |
@@ -127,12 +149,15 @@ In the kit's words this is `ux-design-system point @medquantis/design-system@1.1
 | `type` | `dist/kit/type.css` | The type scale, the body and tight line heights, weights 400 and 500 |
 | `space-shape` | `dist/kit/space-shape.css` | The smallest and largest spacing steps, the small radius, the 6 px maximum radius (no pill shapes) and the hairline stroke |
 | `document` | `dist/kit/document.css` | The A4 document: page colour, text size, rules, and the MedQuantis rules for the kit's document classes |
-| `slide-frame` | `dist/kit/slide-frame.css` | The 1280 by 720 slide: canvas, padding, section label, and the footer row with the legal line and slide number |
+| `slide-frame` | `dist/kit/slide-frame.css` | The 1280 by 720 slide: canvas, padding, section label, and the footer row with the legal line, the classification cell and the slide number |
+| `dark` | `dist/kit/dark.css` | The dark twin of every colour role (`--dark-<role>`), with the MedQuantis dark values, and the key element on dark: the navy panel gradient with its 1 px light-navy outline, never a glow |
 | `print` | `dist/kit/print.css` | The release-note report: page size, margins, and breaking changes in navy, never a status hue |
 | `brand` | `dist/kit/brand.css` | The wordmarks on light and on navy, the monogram and the legal line |
 | `guidance` | `dist/kit/guidance.md` | The rules from `guidelines/` that the kit's skills read before writing a page |
 
-The kit lines a consumer repository adds to its `AGENTS.md` (or `CLAUDE.md`) are the kit's own: copy the [AGENTS.md block of `ux-design-system`](https://github.com/VictorHueni/homemade-claude-kit/blob/release/2.0/plugins/delivery-comms/skills/ux-design-system/references/agents-md-block.md) as it stands at the kit version you use, rather than a copy kept here. Below it, add the MedQuantis lines:
+A kit deck turns dark per slide, with `dark` on the slide's root (`<div class="slide dark">`), or whole, with `theme: dark` in its `config.yaml`, which also serves a `mode: document`; the kit draws the key element (`dark-key`) and the highlighted text (`dark-accent`) from the `dark` roles. `classification:` in `config.yaml` prints the deck's classification at the right of the footer, before the slide number, in the small tertiary mono of the legal line: the label only, in the deck's language (`lang:`), never a code ([guidelines/brand.md](guidelines/brand.md)).
+
+The kit lines a consumer repository adds to its `AGENTS.md` (or `CLAUDE.md`) are the kit's own: copy the [AGENTS.md block of `ux-design-system`](https://github.com/VictorHueni/homemade-claude-kit/blob/main/plugins/delivery-comms/skills/ux-design-system/references/agents-md-block.md) as it stands at the kit version you use, rather than a copy kept here. Below it, add the MedQuantis lines:
 
 ```markdown
 ## MedQuantis brand
@@ -181,7 +206,7 @@ make skill-zip    # zip the skill for claude.ai into dist/
 make kit-check    # run the homemade-claude-kit resolver and renderers on the packed package (needs KIT_DIR)
 ```
 
-`make kit-check` packs the package as npm would publish it, unpacks it into a fresh temporary folder and runs the kit resolver (`plugins/delivery-comms/shared/design_source.py provenance`) on it, through the kit's own mise environment, expecting all nine modules from this package. It then renders the fictitious fixtures of `tests/fixtures/kit-render/` with the kit's own renderers (a deck, an A4 document and a release-note report) and requires `PASS: no findings` from the kit validator `check_render.py` on each; `KIT_CHECK_OUT=<folder>` keeps a copy of the three pages. `KIT_DIR` names a local homemade-claude-kit checkout, for example `KIT_DIR=../homemade-claude-kit make kit-check`; without it the target prints a skip message and exits 0. It is a separate gate, not part of `make check`, because CI has no kit checkout. `kit-manifest.json` is a build output at the repository root (gitignored), because the kit reads the manifest only at the top of the package.
+`make kit-check` packs the package as npm would publish it, unpacks it into a fresh temporary folder and runs the kit resolver (`plugins/delivery-comms/shared/design_source.py provenance`) on it, through the kit's own mise environment, expecting all ten modules from this package. It then renders the fictitious fixtures of `tests/fixtures/kit-render/` with the kit's own renderers (a deck, an A4 document and a release-note report) and requires `PASS: no findings` from the kit validator `check_render.py` on each; `KIT_CHECK_OUT=<folder>` keeps a copy of the three pages. `KIT_DIR` names a local homemade-claude-kit checkout, for example `KIT_DIR=../homemade-claude-kit make kit-check`; without it the target prints a skip message and exits 0. It is a separate gate, not part of `make check`, because CI has no kit checkout. `kit-manifest.json` is a build output at the repository root (gitignored), because the kit reads the manifest only at the top of the package.
 
 `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.
 

package/css/app.css

@@ -53,6 +53,6 @@
   :where(.mq-status.is-warning.is-filled) {
     border-color: transparent;
     background-color: var(--mq-warning-fill);
-    color: var(--mq-ink);
+    color: var(--mq-on-warning-fill);
   }
 }

package/css/components.css

@@ -1,7 +1,7 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
  * MedQuantis document components: cards, navy panel, KPI tiles, table, badges, callout,
- * progress and distribution bars, legend, takeaway and footer.
+ * progress and distribution bars, legend, takeaway, monogram and footer.
  * Documents are navy-only (ADR-0004): states read by mark style (solid, ring, pale, outline,
  * quiet, dashed), never by a status hue. Status badges live in app.css.
  * Text on a navy or tinted background names it in a mq-bg comment, so the contrast test can
@@ -150,6 +150,7 @@
   :where(.mq-kpi.is-navy) {
     border-color: transparent;
     background: linear-gradient(160deg, var(--mq-panel-start), var(--mq-panel-end));
+    box-shadow: var(--mq-shadow-edge);
   }
 
   :where(.mq-kpi.is-navy .mq-kpi-label, .mq-kpi.is-navy .mq-kpi-caption) {
@@ -174,7 +175,7 @@
 
   :where(.mq-kpi.is-pale .mq-kpi-value) {
     /* mq-bg: --mq-accent-pale */
-    color: var(--mq-accent);
+    color: var(--mq-accent-highlight);
   }
 
   /* Table */
@@ -223,6 +224,11 @@
     background-color: var(--mq-accent-pale);
   }
 
+  :where(.mq-table tr.is-highlight > .is-key) {
+    /* mq-bg: --mq-accent-pale */
+    color: var(--mq-accent-highlight);
+  }
+
   :where(.mq-table tr.is-total > td) {
     border-top: var(--mq-stroke-strong) solid var(--mq-accent);
     border-bottom: 0;
@@ -258,7 +264,7 @@
 
   :where(.mq-badge.is-pale) {
     background-color: var(--mq-accent-pale);
-    color: var(--mq-accent);
+    color: var(--mq-accent-highlight);
   }
 
   :where(.mq-badge.is-outline) {
@@ -292,7 +298,7 @@
   :where(.mq-callout-title) {
     /* mq-bg: --mq-accent-pale-2 */
     margin: 0 0 var(--mq-space-1);
-    color: var(--mq-accent);
+    color: var(--mq-accent-highlight);
     font-family: var(--mq-font-family-mono);
     font-size: var(--mq-font-size-eyebrow);
     letter-spacing: 0.14em;
@@ -456,6 +462,16 @@
     line-height: 1.4;
   }
 
+  /* Monogram: the brand file at 48 px, where its corners of 8/64 of the side are the 6 px
+     radius, so the panel's edge it takes on dark follows them (owner ruling 14). */
+  :where(.mq-monogram) {
+    display: block;
+    width: var(--mq-space-7);
+    height: var(--mq-space-7);
+    border-radius: var(--mq-radius-medium);
+    box-shadow: var(--mq-shadow-edge);
+  }
+
   /* Footer: sources, legal line, illustrative-data note */
   :where(.mq-foot) {
     margin: var(--mq-space-6) 0 0;

package/css/kit/dark.css

@@ -0,0 +1,6 @@
+/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
+/*
+ * No class rule (Plan-0003 increment 04): the kit's own dark layer remaps the roles to their
+ * --dark- twins on a dark slide or page and draws .dark-key and .dark-accent from the dark roles,
+ * so a rule here would compete with it. The dark roles come from tokens/kit/, on :root only.
+ */

package/css/kit/slide-frame.css

@@ -8,8 +8,9 @@
  * right (owner ruling 11, guidelines/brand.md).
  *
  * Cascade: the kit inlines its base slide-frame.css before this module, so these rules restyle
- * it; com-slide-deck adds its baseline (controls hint, presentation mode) after the design layer,
- * so the rules for those classes carry one more element in their selector.
+ * it; com-slide-deck adds its baseline (controls hint, presentation mode) and the classification
+ * cell after the design layer, so the rules for those classes carry one more element in their
+ * selector.
  * The footer row and the source line use --tertiary, the tertiary grey of owner ruling 1.
  */
 
@@ -56,6 +57,18 @@
   margin: 0;
 }
 
+/* The deck's classification (owner ruling 17): at the right of the footer row, before the number,
+   in the legal line's small tertiary mono, the label as written in the deck's language. The kit's
+   cell rule (margin-left: auto, capitals) comes after the design layer, so this one carries the
+   footer in its selector. */
+.slide-footer .slide-classification {
+  margin-left: auto;
+  color: var(--tertiary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  text-transform: none;
+}
+
 /* mq-slide-number: the eyebrow size, tabular figures. */
 .slide-number {
   font-size: var(--font-size-xs);

package/dist/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: MedQuantis
-description: The MedQuantis design system 1.1.0. Generated from tokens/ and guidelines/ by the design-system build. Do not edit. Names are the homemade-claude-kit role names where the kit has a role, else the tokens.css name without --mq-; the tables below map each to its --mq-* token.
+description: The MedQuantis design system 1.2.0. Generated from tokens/ and guidelines/ by the design-system build. Do not edit. Names are the homemade-claude-kit role names where the kit has a role, else the tokens.css name without --mq-; the tables below map each to its --mq-* token.
 colors:
   primary: "{colors.accent}"
   ink: "#1a1a1a"
@@ -27,6 +27,7 @@ colors:
   accent-hover: "#061a4d"
   accent-pale: "#eaeef7"
   accent-pale-2: "#f2f4f9"
+  accent-highlight: "#0a2463"
   decoration: "#8c8c8c"
   desk: "#e9e8e4"
   border-light: "#ebeae6"
@@ -41,12 +42,52 @@ colors:
   on-navy-rule-strong: rgba(255, 255, 255, 0.18)
   on-navy-pill: rgba(255, 255, 255, 0.12)
   on-navy-discreet: rgba(255, 255, 255, 0.4)
+  on-warning-fill: "#1a1a1a"
   warning-fill: "#d4850a"
   warning-tint: "#fbf3e7"
   dim: "#707070"
   accent-on-dark: "#8795b3"
   focus-ring-color: "#0a2463"
   focus-ring-color-on-navy: "#ffffff"
+  dark-ink: "#f5f4f1"
+  dark-muted: "#c3cbdc"
+  dark-tertiary: "#8f98aa"
+  dark-canvas-bg: "#11161f"
+  dark-surface: "#1a2131"
+  dark-surface-2: "#141a26"
+  dark-border: rgba(255, 255, 255, 0.14)
+  dark-accent: "#6f88c9"
+  dark-accent-ink: "#11161f"
+  dark-success: "#6fbf73"
+  dark-warning: "#e0a040"
+  dark-danger: "#ff6b6b"
+  dark-info: "#64a8f0"
+  dark-chart-1: "#9fb3e8"
+  dark-chart-2: "#6f88c9"
+  dark-chart-3: "#5d6f91"
+  dark-chart-4: "#3a4560"
+  dark-chart-rest: "#232b3d"
+  dark-chart-axis: "#6b7385"
+  dark-chart-grid: rgba(255, 255, 255, 0.1)
+  dark-chart-highlight: "#9fb3e8"
+  dark-accent-hover: "#8aa0d6"
+  dark-accent-pale: rgba(111, 136, 201, 0.18)
+  dark-accent-pale-2: rgba(111, 136, 201, 0.1)
+  dark-accent-highlight: "#9fb3e8"
+  dark-decoration: "#6b7385"
+  dark-desk: "#0b0f16"
+  dark-border-light: rgba(255, 255, 255, 0.1)
+  dark-border-strong: "#8795b3"
+  dark-panel-start: "#2f4c8f"
+  dark-panel-end: "#0f2a5e"
+  dark-on-navy-accent: "#b2c2ed"
+  dark-on-navy-discreet: rgba(255, 255, 255, 0.5)
+  dark-on-warning-fill: "#11161f"
+  dark-warning-fill: "#d4850a"
+  dark-warning-tint: rgba(212, 133, 10, 0.16)
+  dark-dim: "#8f98aa"
+  dark-accent-on-dark: "#b2c2ed"
+  dark-focus-ring-color: "#9fb3e8"
 typography:
   body:
     fontFamily: Newsreader, Georgia, 'Times New Roman', serif
@@ -88,7 +129,7 @@ spacing:
 
 # MedQuantis design
 
-Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.1.0. Do not edit. Each section opens with a table that maps the front matter names to the --mq-* custom properties of tokens.css, the names the guideline text uses; the rules are the MedQuantis guidelines, section by section.
+Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.2.0. Do not edit. Each section opens with a table that maps the front matter names to the --mq-* custom properties of tokens.css, the names the guideline text uses; the rules are the MedQuantis guidelines, section by section.
 
 ## Overview
 
@@ -215,6 +256,7 @@ Markdown is written one line per paragraph or list item, never hard-wrapped at a
 | `colors.accent-hover` | `--mq-accent-hover` | `#061a4d` |
 | `colors.accent-pale` | `--mq-accent-pale` | `#eaeef7` |
 | `colors.accent-pale-2` | `--mq-accent-pale-2` | `#f2f4f9` |
+| `colors.accent-highlight` | `--mq-accent-highlight` | `#0a2463` |
 | `colors.decoration` | `--mq-decoration` | `#8c8c8c` |
 | `colors.desk` | `--mq-desk` | `#e9e8e4` |
 | `colors.border-light` | `--mq-border-light` | `#ebeae6` |
@@ -229,12 +271,52 @@ Markdown is written one line per paragraph or list item, never hard-wrapped at a
 | `colors.on-navy-rule-strong` | `--mq-on-navy-rule-strong` | `rgba(255, 255, 255, 0.18)` |
 | `colors.on-navy-pill` | `--mq-on-navy-pill` | `rgba(255, 255, 255, 0.12)` |
 | `colors.on-navy-discreet` | `--mq-on-navy-discreet` | `rgba(255, 255, 255, 0.4)` |
+| `colors.on-warning-fill` | `--mq-on-warning-fill` | `#1a1a1a` |
 | `colors.warning-fill` | `--mq-warning-fill` | `#d4850a` |
 | `colors.warning-tint` | `--mq-warning-tint` | `#fbf3e7` |
 | `colors.dim` | `--mq-dim` | `#707070` |
 | `colors.accent-on-dark` | `--mq-accent-on-dark` | `#8795b3` |
 | `colors.focus-ring-color` | `--mq-focus-ring-color` | `#0a2463` |
 | `colors.focus-ring-color-on-navy` | `--mq-focus-ring-color-on-navy` | `#ffffff` |
+| `colors.dark-ink` | `--mq-ink` in `.dark` | `#f5f4f1` |
+| `colors.dark-muted` | `--mq-muted` in `.dark` | `#c3cbdc` |
+| `colors.dark-tertiary` | `--mq-tertiary` in `.dark` | `#8f98aa` |
+| `colors.dark-canvas-bg` | `--mq-canvas` in `.dark` | `#11161f` |
+| `colors.dark-surface` | `--mq-surface` in `.dark` | `#1a2131` |
+| `colors.dark-surface-2` | `--mq-surface-alt` in `.dark` | `#141a26` |
+| `colors.dark-border` | `--mq-border` in `.dark` | `rgba(255, 255, 255, 0.14)` |
+| `colors.dark-accent` | `--mq-accent` in `.dark` | `#6f88c9` |
+| `colors.dark-accent-ink` | `--mq-on-accent` in `.dark` | `#11161f` |
+| `colors.dark-success` | `--mq-success` in `.dark` | `#6fbf73` |
+| `colors.dark-warning` | `--mq-warning` in `.dark` | `#e0a040` |
+| `colors.dark-danger` | `--mq-danger` in `.dark` | `#ff6b6b` |
+| `colors.dark-info` | `--mq-info` in `.dark` | `#64a8f0` |
+| `colors.dark-chart-1` | `--mq-chart-series-1` in `.dark` | `#9fb3e8` |
+| `colors.dark-chart-2` | `--mq-chart-series-2` in `.dark` | `#6f88c9` |
+| `colors.dark-chart-3` | `--mq-chart-series-3` in `.dark` | `#5d6f91` |
+| `colors.dark-chart-4` | `--mq-chart-series-4` in `.dark` | `#3a4560` |
+| `colors.dark-chart-rest` | `--mq-chart-rest` in `.dark` | `#232b3d` |
+| `colors.dark-chart-axis` | `--mq-chart-axis` in `.dark` | `#6b7385` |
+| `colors.dark-chart-grid` | `--mq-chart-baseline` in `.dark` | `rgba(255, 255, 255, 0.1)` |
+| `colors.dark-chart-highlight` | `--mq-chart-series-1` in `.dark` | `#9fb3e8` |
+| `colors.dark-accent-hover` | `--mq-accent-hover` in `.dark` | `#8aa0d6` |
+| `colors.dark-accent-pale` | `--mq-accent-pale` in `.dark` | `rgba(111, 136, 201, 0.18)` |
+| `colors.dark-accent-pale-2` | `--mq-accent-pale-2` in `.dark` | `rgba(111, 136, 201, 0.1)` |
+| `colors.dark-accent-highlight` | `--mq-accent-highlight` in `.dark` | `#9fb3e8` |
+| `colors.dark-decoration` | `--mq-decoration` in `.dark` | `#6b7385` |
+| `colors.dark-desk` | `--mq-desk` in `.dark` | `#0b0f16` |
+| `colors.dark-border-light` | `--mq-border-light` in `.dark` | `rgba(255, 255, 255, 0.1)` |
+| `colors.dark-border-strong` | `--mq-border-strong` in `.dark` | `#8795b3` |
+| `colors.dark-panel-start` | `--mq-panel-start` in `.dark` | `#2f4c8f` |
+| `colors.dark-panel-end` | `--mq-panel-end` in `.dark` | `#0f2a5e` |
+| `colors.dark-on-navy-accent` | `--mq-on-navy-accent` in `.dark` | `#b2c2ed` |
+| `colors.dark-on-navy-discreet` | `--mq-on-navy-discreet` in `.dark` | `rgba(255, 255, 255, 0.5)` |
+| `colors.dark-on-warning-fill` | `--mq-on-warning-fill` in `.dark` | `#11161f` |
+| `colors.dark-warning-fill` | `--mq-warning-fill` in `.dark` | `#d4850a` |
+| `colors.dark-warning-tint` | `--mq-warning-tint` in `.dark` | `rgba(212, 133, 10, 0.16)` |
+| `colors.dark-dim` | `--mq-dim` in `.dark` | `#8f98aa` |
+| `colors.dark-accent-on-dark` | `--mq-accent-on-dark` in `.dark` | `#b2c2ed` |
+| `colors.dark-focus-ring-color` | `--mq-focus-ring-color` in `.dark` | `#9fb3e8` |
 
 ### Colour: Introduction
 
@@ -258,12 +340,13 @@ Documents never carry green, orange, red, sky blue, pink, purple or turquoise, n
 | `--mq-accent-pale` | `#eaeef7` | Icon pills and chips, a deviating value, the highlighted table row, the pale state |
 | `--mq-accent-pale-2` | `#f2f4f9` | Progress tracks, the quiet state, callout background |
 | `--mq-on-accent` | `#ffffff` | Text and icons on an accent fill (14.53:1) |
+| `--mq-accent-highlight` | `#0a2463` | Accent text on the pale fills (the pale KPI value, the pale badge, the callout title) and large highlighted title text: the accent itself in light, the light navy on dark (owner ruling 18) |
 
 Navy carries emphasis on its own. Status colours never replace it for emphasis, in any medium.
 
 ### Colour: Neutrals
 
-The neutrals are warm greys tuned to the warm canvas, never blue-tinted greys.
+In the light theme the neutrals are warm greys tuned to the warm canvas, never blue-tinted greys; the neutrals of the dark theme carry the navy cast of its canvas (Dark theme).
 
 | Token | Value | Use | Contrast |
 | :-- | :-- | :-- | :-- |
@@ -321,7 +404,7 @@ The first six are the `mq-badge` states (`is-solid`, `is-ring`, `is-pale`, `is-o
 | `--mq-danger` | `#d8232a` | Errors, destructive actions | 5.01:1 on surface, 4.79:1 on canvas |
 | `--mq-info` | `#1565c0` | Information | 5.75:1 on surface, 5.50:1 on canvas |
 | `--mq-warning` | `#a06400` | Warning text, icons and borders | 4.86:1 on surface, 4.65:1 on canvas |
-| `--mq-warning-fill` | `#d4850a` | Warning badge or highlight fill, always with ink text (5.93:1) | Fill only |
+| `--mq-warning-fill` | `#d4850a` | Warning badge or highlight fill, always with its text role `--mq-on-warning-fill`, ink in light (5.93:1) | Fill only |
 | `--mq-warning-tint` | `#fbf3e7` | Warning background behind ink text (15.81:1) | Fill only |
 
 The warning split (owner ruling 5): the orange `#d4850a` is a fill and never text, an icon or a border (2.81:1 on canvas). Text on it is ink; white on it is forbidden (2.93:1). On the warning tint, the text stays ink and `--mq-warning` is used only for the icon and the border (4.42:1, non-text).
@@ -339,6 +422,86 @@ The red of the old Paracel theme survives only as `--mq-danger` (ADR-0003). App-
 
 The chart tokens (`--mq-chart-series-1` to `--mq-chart-series-4`, `--mq-chart-rest`, `--mq-chart-axis`, `--mq-chart-baseline`) and their order are in charts.
 
+### Colour: Dark theme
+
+MedQuantis has one dark theme (ADR-0007, owner ruling 12). It re-values the semantic roles above under the `.dark` class: a role it does not name keeps its light value, and no component needs a second name. A consumer opts in by loading `themes/dark.css` of the package after `tokens.css` and setting `.dark` on `<html>` or on one slide. The design system never switches on `prefers-color-scheme` by itself.
+
+- **Apps and the website:** light and dark; the app decides how the viewer chooses, and may follow the viewer's setting by toggling `.dark`.
+- **Documents** (A4 reports, papers, PDFs): light or dark, chosen by the author per document at build time, never from the reader's screen (owner ruling 15). A dark document stays dark in its PDF; light stays the default for anything likely to be printed on paper.
+- **Slides:** a whole deck, or a single slide carrying `.dark`.
+
+Every ratio below is the WCAG 2.x contrast with the dark values, on the dark canvas `#11161f` and surface `#1a2131`; the token test checks every declared pair in both themes.
+
+| Token | Dark value | Use | Contrast |
+| :-- | :-- | :-- | :-- |
+| `--mq-canvas` | `#11161f`, a near-black with a navy cast | Background of every dark page and slide | Background |
+| `--mq-surface` | `#1a2131` | Cards, panels, tables, figures, inputs | Background |
+| `--mq-surface-alt` | `#141a26` | Recessed areas: table headers, grouped areas | Background |
+| `--mq-desk` | `#0b0f16` | On screen only, around a dark page preview | Background |
+| `--mq-border` | white at 14 % | Borders, dividers | Decorative |
+| `--mq-border-light` | white at 10 % | Hairlines, card borders | Decorative |
+| `--mq-border-strong` | `#8795b3` | Outline of outlined and dashed state marks | 6.03:1 on canvas, 5.35:1 on surface, non-text |
+| `--mq-ink` | `#f5f4f1`, warm white | Primary text and values | 16.48:1 on canvas, 14.62:1 on surface |
+| `--mq-muted` | `#c3cbdc` | Secondary text, leads, captions | 11.13:1 on canvas, 9.88:1 on surface |
+| `--mq-tertiary` | `#8f98aa` | Tertiary text: notes, footers, axis labels | 6.25:1 on canvas, 5.54:1 on surface |
+| `--mq-decoration` | `#6b7385` | Non-text decoration only, never text | 3.81:1 on canvas, 3.38:1 on surface, non-text |
+| `--mq-accent` | `#6f88c9`, the lifted navy | Links, labels, key figures, active states | 5.22:1 on canvas, 4.63:1 on surface, 5.01:1 on the recessed surface |
+| `--mq-accent-hover` | `#8aa0d6` | Hover and pressed state of a link or an accent control | 6.98:1 on canvas |
+| `--mq-accent-pale` | the lifted navy at 18 % | Icon pills and chips, the highlighted row, the pale state | Fill |
+| `--mq-accent-pale-2` | the lifted navy at 10 % | Progress tracks, the quiet state, callout background | Fill |
+| `--mq-accent-highlight` | `#9fb3e8`, the light navy | Large highlighted title text, and accent text on the pale fills: the pale KPI value, the pale badge and the callout title (owner ruling 18) | 8.71:1 on canvas, 7.73:1 on surface, 5.97:1 on the pale fill, 6.77:1 on the quiet pale fill |
+| `--mq-on-accent` | `#11161f` | Text and icons on an accent fill, never white (white 3.48:1 on the accent) | 5.22:1 on the accent |
+| `--mq-focus-ring-color` | `#9fb3e8`, the light navy | Focus ring on dark backgrounds | 8.71:1 on canvas |
+| `--mq-panel-start` | `#2f4c8f` | Light end of the navy panel gradient | Background, white 8.23:1 on the panel start |
+| `--mq-panel-end` | `#0f2a5e` | Dark end of the navy panel gradient | Background |
+| `--mq-shadow-panel` | a 1 px outline, light navy at 35 %, no glow (owner ruling 13) | Navy panels, the report header and the navy KPI tile on dark | Edge of a panel |
+| `--mq-shadow-edge` | the same 1 px outline, light navy at 35 %; none in light | The monogram (`mq-monogram`), the navy KPI tile and a navy brand or app tile, which draw no shadow in light (owner ruling 14) | Edge of a navy mark |
+| `--mq-shadow-small` | black at 40 %, 1 px down with a 2 px blur | Cards, figures and tables on dark, where the light 5 % shadow does not show | Elevation |
+| `--mq-shadow-medium` | black at 50 %, 3 px down with a 12 px blur | A slide or page previewed on the dark desk, raised panels and menus | Elevation |
+
+Accent text on the pale fills reads `--mq-accent-highlight` in both themes (owner ruling 18): in light it is the accent itself, while on dark the lifted navy would be only 3.57:1 on the pale fill and 4.05:1 on the quiet pale fill. The fills are measured laid over the canvas and over the surface, the worse result counting. The callout tab keeps `--mq-accent` on the quiet pale fill as a non-text mark.
+
+The retired `--mq-dim` and `--mq-accent-on-dark` follow the roles they alias on dark too: `#8f98aa` (tertiary) and `#b2c2ed` (the on-navy accent).
+
+**The navy panel on dark.** Navy itself fails on a dark canvas (`#0a2463` is 1.25:1 on `#11161f`), so on dark the brand shows as the lifted navy, the light navy and the panel gradient, with no new hue (ADR-0003). Navy panels, the report header and the navy KPI tile keep the 160 degree gradient between `--mq-panel-start` and `--mq-panel-end`, with the dark values above, and draw `--mq-shadow-panel`: a 1 px light-navy outline, never a glow (owner ruling 13). A navy tile on dark takes the panel gradient, never the lifted accent. Contrast on navy is still checked against the panel start, the lighter stop.
+
+The on-navy tier on the dark panel (owner ruling 19): two roles take dark values, the others keep their light values and are checked again on the lighter dark panel start.
+
+| Token | Dark value | Contrast | Allowed for |
+| :-- | :-- | :-- | :-- |
+| `--mq-on-navy-title` | `#ffffff`, unchanged | 8.23:1 on the panel start | Text |
+| `--mq-on-navy-secondary` | white at 68 %, unchanged | 4.80:1 on the panel start | Text |
+| `--mq-on-navy-second-level` | `#c3cbdc`, unchanged | 5.05:1 on the panel start | Text |
+| `--mq-on-navy-accent` | `#b2c2ed`, a lighter navy tint | 4.64:1 on the panel start | Text, narrow margin |
+| `--mq-on-navy-discreet` | white at 50 % | 3.37:1 on the panel start | Large text or non-text only |
+| `--mq-on-navy-rule`, `--mq-on-navy-rule-strong`, `--mq-on-navy-pill` | white at 16, 18 and 12 %, unchanged | Decorative | Decorative only |
+
+Light keeps `#8795b3` (4.61:1) and white at 40 % (3.44:1) for those two roles; on the dark panel start they would fall to 2.74:1 and 2.71:1.
+
+**The light navy is a navy tint.** `#9fb3e8` (`--mq-accent-highlight`, `--mq-focus-ring-color`, dark series 1) is not the retired sky blue: its LCH hue 280.4 (chroma 29.2) sits in the navy family with the lifted navy `#6f88c9` (hue 282.8), against navy 293.7 and sky blue 269.9 (chroma 36.1). Sky blue stays retired in both themes (owner ruling 2).
+
+Status colours on dark, apps only (ADR-0004, owner ruling 16), each still with an icon or a word; `--mq-warning-fill` keeps its value and stays a fill:
+
+- `--mq-success` `#6fbf73`: 8.09:1 on canvas, 7.18:1 on surface.
+- `--mq-warning` `#e0a040`: 8.00:1 on canvas, 7.10:1 on surface.
+- `--mq-danger` `#ff6b6b`: 6.53:1 on canvas, 5.80:1 on surface.
+- `--mq-info` `#64a8f0`: 7.25:1 on canvas, 6.43:1 on surface.
+- `--mq-warning-fill` `#d4850a`, unchanged: a fill, never text.
+- `--mq-warning-tint`, the warning fill at 16 %: ink 11.63:1 on the warning tint.
+- `--mq-on-warning-fill` `#11161f`, text on `--mq-warning-fill`: 6.18:1 on the warning fill, where the warm white ink 2.67:1 on the warning fill would fail.
+
+Chart colours on dark (owner ruling 16): the four series run in reverse order, the lightest first, under the same rules as light (charts): series 4 for context bars, the remainder drawn with a series 4 outline. Each dark series meets or beats its light counterpart against its canvas.
+
+| Token | Dark value | Contrast |
+| :-- | :-- | :-- |
+| `--mq-chart-series-1` | `#9fb3e8` | 8.71:1 on canvas |
+| `--mq-chart-series-2` | `#6f88c9` | 5.22:1 on canvas |
+| `--mq-chart-series-3` | `#5d6f91` | 3.58:1 on canvas |
+| `--mq-chart-series-4` | `#3a4560` | 1.90:1 on canvas, context bars only |
+| `--mq-chart-rest` | `#232b3d` | 1.28:1 on canvas, with a series 4 outline |
+| `--mq-chart-axis` | `#6b7385` | 3.81:1 on canvas, non-text |
+| `--mq-chart-baseline` | white at 10 % | Decorative |
+
 ### Charts: Introduction
 
 Charts use the navy and blue-grey family only, in every medium. Status colours never colour a chart series, not even in an app; a chart that shows system status labels it in words.
@@ -528,7 +691,7 @@ Apps use the same families and weights at UI sizes: UI body Outfit 400 at 14 px,
 
 | Medium | Canvas | Layout |
 | :-- | :-- | :-- |
-| Slide | 1280 by 720 px (`--mq-slide-width`, `--mq-slide-height`, `css/slide.css`) | Fixed canvas, 72 px side margins (`--mq-space-8`), section label top left, title under it, and a footer row (`mq-slide-foot`) with the legal line bottom left and the slide number bottom right, both in tertiary mono (owner ruling 11) |
+| Slide | 1280 by 720 px (`--mq-slide-width`, `--mq-slide-height`, `css/slide.css`) | Fixed canvas, 72 px side margins (`--mq-space-8`), section label top left, title under it, and a footer row (`mq-slide-foot`) with the legal line bottom left and the slide number bottom right, both in tertiary mono (owner ruling 11); a classified deck adds its classification label at the right of the footer, before the slide number (owner ruling 17) |
 | Screen report or paper | A page that scrolls, centred, `--mq-page-width` (1040 px) wide | Flow layout: no absolute positions, no fixed heights. It is not a deck: no slide canvas inside a report |
 | A4 print | 210 by 297 mm (`--mq-a4-width`, `--mq-a4-height`, `css/print.css`) | One `mq-page` per sheet on the canvas colour; on screen the pages sit on the desk |
 
@@ -598,7 +761,7 @@ WCAG 2.2 level AA for every medium: apps, the website, HTML reports, slides expo
 
 ### Layout: Elevation and navy blocks
 
-- Cards, figures and tables: `--mq-shadow-small`. Raised panels, menus and a page or slide previewed on the desk: `--mq-shadow-medium`. Navy panels: `--mq-shadow-panel`. No shadow in print and none on chart marks.
+- Cards, figures and tables: `--mq-shadow-small`. Raised panels, menus and a page or slide previewed on the desk: `--mq-shadow-medium`. Navy panels: `--mq-shadow-panel`, which on dark is a 1 px light-navy outline and never a glow (owner ruling 13). No shadow in print and none on chart marks.
 - One large navy block per screen, slide or page area. In a report, keep the header, a navy KPI band and a navy panel apart with light content.
 
 ## Shapes
@@ -641,7 +804,7 @@ Squared-off corners read professional and institutional; pills read consumer.
 | Takeaway | `mq-takeaway` | The one sentence to remember, under a navy tab, Outfit 500 |
 | Numbered rows | (pattern) | A navy circle with the number, a heading column, a body column: one line per point |
 | Footer | `mq-foot` | Sources and legal line in tertiary italic, in reports and papers; never inside a slide |
-| Slide footer | `mq-slide-foot` | On every slide (owner ruling 11): the legal line bottom left, the slide number bottom right, small, tertiary, Geist Mono: `<footer class="mq-slide-foot"><p>MedQuantis SA · CH-1095 Lutry · medquantis.ch</p><p class="mq-slide-number">03</p></footer>` |
+| Slide footer | `mq-slide-foot` | On every slide (owner ruling 11): the legal line bottom left, the slide number bottom right, small, tertiary, Geist Mono. A classified deck shows its classification at the right of the footer, before the slide number: the label in the deck's language, never the C0 to C3 code (owner ruling 17). Without a classification: `<footer class="mq-slide-foot"><p>MedQuantis SA · CH-1095 Lutry · medquantis.ch</p><p class="mq-slide-number">03</p></footer>` |
 
 ### Layout: Tables
 
@@ -725,6 +888,8 @@ Set it in Geist Mono at the note size, tertiary text colour (`--mq-tertiary`), w
 
 On slides the legal line appears on every slide, bottom left, small and in tertiary grey, with the slide number bottom right (owner ruling 11). Use the slide footer row `mq-slide-foot` of `css/slide.css`, never `mq-foot`, which flows from the top of a slide canvas.
 
+A deck that carries a classification shows it at the right of the footer, before the slide number, in the same small tertiary mono (owner ruling 17, amending ruling 11's two-cell footer). It is the label only, in the deck's language (Confidential in an English deck, Confidentiel in a French one), never the C0 to C3 code. A kit deck takes it from its `classification:` and `lang:`.
+
 Material left with a reader (a deck after a meeting, a report sent outside) also carries a confidentiality mention and its date, in the document's language:
 
 | Medium | French | German | English | Italian |
@@ -734,7 +899,7 @@ Material left with a reader (a deck after a meeting, a report sent outside) also
 
 ### Brand: Wordmark
 
-The wordmark is the logo; no icon is required next to it. "Med" is set in Outfit 600 and "Quantis" in Outfit 300, in navy (`#0a2463`) on light backgrounds and in white on navy, at every size (owner ruling 6).
+The wordmark is the logo; no icon is required next to it. "Med" is set in Outfit 600 and "Quantis" in Outfit 300, in navy (`#0a2463`) on light backgrounds and in white on navy and on every dark surface, at every size (owner rulings 6 and 14).
 
 Each background has two files in `brand/`:
 
@@ -746,6 +911,7 @@ Each background has two files in `brand/`:
 Rules:
 
 - Use the on-navy file on navy and the on-light file on light backgrounds. Never recolour, stretch, outline, shadow or rearrange the wordmark.
+- On dark (the dark theme, a dark slide or page), use the white `wordmark-on-navy` files on every dark surface: 18.13:1 on the dark canvas, 16.08:1 on the dark surface. The navy wordmark is never used on dark: it is 1.25:1 there (owner ruling 14).
 - Inline the SVG rather than linking an external image, and remove its `width` and `height` so the page sizes it. On a report header the wordmark sits at about 198 by 44 px on screen and 162 by 36 px in print.
 - A full stop in the on-navy accent (`--mq-on-navy-accent`) after a name is reserved for a one-word name on a navy cover. It is never added to the wordmark.
 
@@ -760,6 +926,8 @@ Where the wordmark does not fit (favicon, app icon, avatar, app tile), use the m
 | `brand/monogram-small.svg` | 16 px and smaller: larger letters, M 800 and Q 600 |
 | `brand/favicon/` | `favicon.svg`, `favicon.ico` (16, 32, 48), `apple-touch-icon.png` (180), `icon-192.png`, `icon-512.png` |
 
+On dark (owner ruling 14) the monogram keeps its file and takes the navy panel's edge, the 1 px light-navy outline that `--mq-shadow-panel` draws in the dark theme, since its navy square is only 1.11:1 against the dark surface; in light it has no outline. A navy brand tile or app tile on dark takes the panel gradient (`--mq-panel-start` to `--mq-panel-end`), never the lifted accent, on which white is 3.48:1. No new brand file is needed.
+
 ### Brand: No combined logo yet
 
 There is no lockup of the monogram and the wordmark in v1, and no on-navy variant of the monogram. Do not compose one locally: the combined logo is deferred until a real surface needs it ([issue #2](https://github.com/MedQuantis/design-system/issues/2)). Older lockups with a strapline under the wordmark are retired.

package/dist/kit/brand.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis values for the brand module of the homemade-claude-kit design contract 2.0.0,
+ * MedQuantis values for the brand module of the homemade-claude-kit design contract 2.1.0,
  * generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
  * For kit renderers only: the unprefixed names collide with app and Tailwind variables.
  */

package/dist/kit/core.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis values for the core module of the homemade-claude-kit design contract 2.0.0,
+ * MedQuantis values for the core module of the homemade-claude-kit design contract 2.1.0,
  * generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
  * For kit renderers only: the unprefixed names collide with app and Tailwind variables.
  */

package/dist/kit/dark.css

@@ -0,0 +1,47 @@
+/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
+/*
+ * MedQuantis dark module of the homemade-claude-kit design contract 2.1.0. The roles are
+ * generated from tokens/kit/ by the design-system build, resolved in the dark theme (ADR-0007),
+ * on :root only; the kit's own dark layer remaps the light roles to them on a dark slide or page
+ * and draws the dark, dark-key and dark-accent classes. Do not edit this file. kit-manifest.json
+ * lists it. For kit renderers only: the unprefixed names collide with app and Tailwind variables.
+ */
+:root {
+  --dark-ink: #f5f4f1;
+  --dark-muted: #c3cbdc;
+  --dark-tertiary: #8f98aa;
+  --dark-canvas-bg: #11161f;
+  --dark-surface: #1a2131;
+  --dark-surface-2: #141a26;
+  --dark-border: rgba(255, 255, 255, 0.14);
+  --dark-accent: #6f88c9;
+  --dark-accent-ink: #11161f;
+  --dark-success: #6fbf73;
+  --dark-warning: #e0a040;
+  --dark-danger: #ff6b6b;
+  --dark-info: #64a8f0;
+  --dark-chart-1: #9fb3e8;
+  --dark-chart-2: #6f88c9;
+  --dark-chart-3: #5d6f91;
+  --dark-chart-4: #3a4560;
+  --dark-chart-rest: #232b3d;
+  --dark-chart-axis: #6b7385;
+  --dark-chart-grid: rgba(255, 255, 255, 0.1);
+  --dark-chart-highlight: #9fb3e8;
+  --dark-slide-bg: #11161f;
+  --dark-slide-fg: #f5f4f1;
+  --dark-doc-page-bg: #11161f;
+  --dark-doc-rule: rgba(255, 255, 255, 0.14);
+  --dark-print-bg: #11161f;
+  --dark-key-base: #2f4c8f;
+  --dark-accent-text: #9fb3e8;
+  --dark-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
+  --dark-key-edge: 0px 0px 0px 1px rgba(159, 179, 232, 0.35);
+  --dark-key-fill: linear-gradient(160deg, #2f4c8f 0%, #0f2a5e 100%);
+}
+
+/*
+ * No class rule (Plan-0003 increment 04): the kit's own dark layer remaps the roles to their
+ * --dark- twins on a dark slide or page and draws .dark-key and .dark-accent from the dark roles,
+ * so a rule here would compete with it. The dark roles come from tokens/kit/, on :root only.
+ */

package/dist/kit/dataviz.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis values for the dataviz module of the homemade-claude-kit design contract 2.0.0,
+ * MedQuantis values for the dataviz module of the homemade-claude-kit design contract 2.1.0,
  * generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
  * For kit renderers only: the unprefixed names collide with app and Tailwind variables.
  */

package/dist/kit/document.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis document module of the homemade-claude-kit design contract 2.0.0. The roles are
+ * MedQuantis document module of the homemade-claude-kit design contract 2.1.0. The roles are
  * generated from tokens/kit/ by the design-system build; the class rules after them are copied
  * from css/kit/document.css, written by hand against contract roles. Do not edit this file.
  * kit-manifest.json lists it. For kit renderers only: the unprefixed names collide with app and