@medquantis/design-system 1.3.0 → 1.5.0

package/README.md

@@ -14,11 +14,11 @@ The single source of the MedQuantis visual identity: design tokens, shared CSS,
 | `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 |
+| `fonts/fonts.css`, `fonts/` | Self-hosted Outfit, Newsreader and Geist Mono (variable woff2, latin and latin-ext, relative paths); deploy the folder whole. The woff2 files are exported too, for preloading (see Preloading the fonts) |
 | `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, and the app patterns of dense internal tools |
-| `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) |
+| `kit-manifest.json`, `dist/kit/` | The homemade-claude-kit delivery-comms renderers (contract 2.2.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) |
@@ -128,6 +128,18 @@ 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.
 
+### Preloading the fonts
+
+`fonts.css` declares every face with `font-display: swap`, so a browser draws the page in a fallback font and redraws it once the woff2 file arrives; on a slow connection the redraw moves the text and counts as layout shift. A page that wants to avoid it preloads the latin files it uses above the fold, at most these three (about 32 KB Outfit, 58 KB Newsreader and 23 KB Geist Mono); the latin-ext and italic files stay lazy. A bundler resolves them through the `./fonts/*` export:
+
+```ts
+import outfit from "@medquantis/design-system/fonts/outfit/outfit-latin-wght-normal.woff2?url";
+import newsreader from "@medquantis/design-system/fonts/newsreader/newsreader-latin-wght-normal.woff2?url";
+import geistMono from "@medquantis/design-system/fonts/geist-mono/geist-mono-latin-wght-normal.woff2?url";
+```
+
+Each one becomes `<link rel="preload" as="font" type="font/woff2" href="..." crossorigin>` in the page head. The `crossorigin` attribute is required even on the same origin, since fonts are always fetched in CORS mode and a preload without it is downloaded twice. Preload only the faces the first screen shows: an unused preload costs bandwidth and a console warning.
+
 ## 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; 1.2.0 adds the `dark` module and the classification cell):
@@ -138,7 +150,7 @@ python3 <skill-dir>/scripts/design_system.py point @medquantis/design-system@1.2
 
 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.
 
-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.
+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. From the release that adds the brand ground (owner ruling 22), the manifest declares contract 2.2.0 and the kit modules need delivery-comms 2.2.0 or later; a 2.1 kit refuses the newer contract.
 
 `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:
 

package/dist/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: MedQuantis
-description: The MedQuantis design system 1.3.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.5.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"
@@ -34,6 +34,8 @@ colors:
   border-strong: "#5d6f91"
   panel-start: "#0f2a5e"
   panel-end: "#0a2047"
+  brand-ground-start: "#0f2a5e"
+  brand-ground-end: "#0a2047"
   on-navy-title: "#ffffff"
   on-navy-secondary: rgba(255, 255, 255, 0.68)
   on-navy-second-level: "#c3cbdc"
@@ -140,7 +142,7 @@ spacing:
 
 # MedQuantis design
 
-Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.3.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.5.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
 
@@ -274,6 +276,8 @@ Markdown is written one line per paragraph or list item, never hard-wrapped at a
 | `colors.border-strong` | `--mq-border-strong` | `#5d6f91` |
 | `colors.panel-start` | `--mq-panel-start` | `#0f2a5e` |
 | `colors.panel-end` | `--mq-panel-end` | `#0a2047` |
+| `colors.brand-ground-start` | `--mq-brand-ground-start` | `#0f2a5e` |
+| `colors.brand-ground-end` | `--mq-brand-ground-end` | `#0a2047` |
 | `colors.on-navy-title` | `--mq-on-navy-title` | `#ffffff` |
 | `colors.on-navy-secondary` | `--mq-on-navy-secondary` | `rgba(255, 255, 255, 0.68)` |
 | `colors.on-navy-second-level` | `--mq-on-navy-second-level` | `#c3cbdc` |
@@ -476,6 +480,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
 | `--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-brand-ground-start` | `#0f2a5e`, the same in light | Light end of the brand ground: the cover, closing slide and section dividers of a dark deck (owner ruling 22) | Background |
+| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | 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-live` | a 3 px ring of the dark success green `#6fbf73` at 17 %; in light the success green at 17 % | Apps only: the halo of a live dot, the row in force on a timeline (app patterns) | Decorative |
@@ -486,6 +492,8 @@ Accent text on the pale fills reads `--mq-accent-highlight` in both themes (owne
 
 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 brand ground.** The cover, the closing slide and the section dividers of a deck sit on the deep navy of the MedQuantis title pages, a 160 degree gradient from `--mq-brand-ground-start` to `--mq-brand-ground-end`, never on the near-black canvas (owner ruling 22). A brand slide is always a dark slide: its text takes the dark roles, checked against the lighter stop (ink 12.62:1, muted 8.52:1, tertiary 4.78:1, the accent highlight 6.67:1). A slide built with the homemade-claude-kit takes it with `dark brand` on its root.
+
 **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.

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.1.0,
+ * MedQuantis values for the brand module of the homemade-claude-kit design contract 2.2.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.1.0,
+ * MedQuantis values for the core module of the homemade-claude-kit design contract 2.2.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

@@ -1,6 +1,6 @@
 /*! @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
+ * MedQuantis dark module of the homemade-claude-kit design contract 2.2.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
@@ -35,9 +35,11 @@
   --dark-print-bg: #11161f;
   --dark-key-base: #2f4c8f;
   --dark-accent-text: #9fb3e8;
+  --dark-brand-base: #0f2a5e;
   --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%);
+  --dark-brand-bg: linear-gradient(160deg, #0f2a5e 0%, #0a2047 100%);
 }
 
 /*

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.1.0,
+ * MedQuantis values for the dataviz module of the homemade-claude-kit design contract 2.2.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.1.0. The roles are
+ * MedQuantis document module of the homemade-claude-kit design contract 2.2.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

package/dist/kit/guidance.md

@@ -281,6 +281,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
 | `--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-brand-ground-start` | `#0f2a5e`, the same in light | Light end of the brand ground: the cover, closing slide and section dividers of a dark deck (owner ruling 22) | Background |
+| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | 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-live` | a 3 px ring of the dark success green `#6fbf73` at 17 %; in light the success green at 17 % | Apps only: the halo of a live dot, the row in force on a timeline (app patterns) | Decorative |
@@ -291,6 +293,8 @@ Accent text on the pale fills reads `--mq-accent-highlight` in both themes (owne
 
 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 brand ground.** The cover, the closing slide and the section dividers of a deck sit on the deep navy of the MedQuantis title pages, a 160 degree gradient from `--mq-brand-ground-start` to `--mq-brand-ground-end`, never on the near-black canvas (owner ruling 22). A brand slide is always a dark slide: its text takes the dark roles, checked against the lighter stop (ink 12.62:1, muted 8.52:1, tertiary 4.78:1, the accent highlight 6.67:1). A slide built with the homemade-claude-kit takes it with `dark brand` on its root.
+
 **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.

package/dist/kit/print.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis print module of the homemade-claude-kit design contract 2.1.0. The roles are
+ * MedQuantis print module of the homemade-claude-kit design contract 2.2.0. The roles are
  * generated from tokens/kit/ by the design-system build; the class rules after them are copied
  * from css/kit/print.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

package/dist/kit/slide-frame.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis slide-frame module of the homemade-claude-kit design contract 2.1.0. The roles are
+ * MedQuantis slide-frame module of the homemade-claude-kit design contract 2.2.0. The roles are
  * generated from tokens/kit/ by the design-system build; the class rules after them are copied
  * from css/kit/slide-frame.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

package/dist/kit/space-shape.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis values for the space-shape module of the homemade-claude-kit design contract 2.1.0,
+ * MedQuantis values for the space-shape module of the homemade-claude-kit design contract 2.2.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/type.css

@@ -1,6 +1,6 @@
 /*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
 /*
- * MedQuantis values for the type module of the homemade-claude-kit design contract 2.1.0,
+ * MedQuantis values for the type module of the homemade-claude-kit design contract 2.2.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/llms-full.txt

@@ -357,6 +357,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
 | `--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-brand-ground-start` | `#0f2a5e`, the same in light | Light end of the brand ground: the cover, closing slide and section dividers of a dark deck (owner ruling 22) | Background |
+| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | 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-live` | a 3 px ring of the dark success green `#6fbf73` at 17 %; in light the success green at 17 % | Apps only: the halo of a live dot, the row in force on a timeline (app patterns) | Decorative |
@@ -367,6 +369,8 @@ Accent text on the pale fills reads `--mq-accent-highlight` in both themes (owne
 
 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 brand ground.** The cover, the closing slide and the section dividers of a deck sit on the deep navy of the MedQuantis title pages, a 160 degree gradient from `--mq-brand-ground-start` to `--mq-brand-ground-end`, never on the near-black canvas (owner ruling 22). A brand slide is always a dark slide: its text takes the dark roles, checked against the lighter stop (ink 12.62:1, muted 8.52:1, tertiary 4.78:1, the accent highlight 6.67:1). A slide built with the homemade-claude-kit takes it with `dark brand` on its root.
+
 **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.
@@ -1159,7 +1163,7 @@ Every local one-off (a component or a token a consumer adds under its own prefix
 
 # Tokens
 
-Every token of release 1.3.0, generated from dist/tokens.json. Consumers use the semantic names; the `--mq-core-*` names exist so semantic tokens can point at them. A deprecated token names its replacement.
+Every token of release 1.5.0, generated from dist/tokens.json. Consumers use the semantic names; the `--mq-core-*` names exist so semantic tokens can point at them. A deprecated token names its replacement.
 
 ## Semantic tokens
 
@@ -1191,6 +1195,8 @@ Every token of release 1.3.0, generated from dist/tokens.json. Consumers use the
 | `--mq-border-strong` | `#5d6f91` | Outline of outlined and dashed state marks in documents (badges, legend swatches), 3:1 or more on canvas and surface for WCAG 1.4.11 (increment 07 component need, ADR-0004: states by mark style). |
 | `--mq-panel-start` | `#0f2a5e` | Light end of the navy panel gradient; the worst case for text on navy. |
 | `--mq-panel-end` | `#0a2047` | Dark end of the navy panel gradient. |
+| `--mq-brand-ground-start` | `#0f2a5e` | Owner ruling 22, 2026-11-09: light end of the brand ground, the deep navy of a dark deck's cover, closing slide and section dividers, the same in both themes. |
+| `--mq-brand-ground-end` | `#0a2047` | Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes. |
 | `--mq-on-navy-title` | `#ffffff` | Owner ruling 2, 2026-10-09: titles, figures and icons on navy. |
 | `--mq-on-navy-secondary` | `rgba(255, 255, 255, 0.68)` | Owner ruling 2, 2026-10-09: secondary text and labels on navy. |
 | `--mq-on-navy-second-level` | `#c3cbdc` | Owner ruling 2, 2026-10-09: second-level text on navy. |

package/dist/llms.txt

@@ -8,33 +8,33 @@ The links below point at the exact release on the jsDelivr CDN; pin that version
 
 ## Guidelines
 
-- [Principles](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/principles.md): The principles that decide the cases the other files do not cover
-- [Brand](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/brand.md): Name, tagline, legal line, wordmark, monogram, favicon, icons
-- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/voice.md): Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English
-- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/writing.md): No em or en dash, titles, sentences and lists, French typography
-- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/colour.md): Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps, the dark theme
-- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/typography.md): Families, weights, roles, sizes and line heights
-- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/layout.md): Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print
-- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/charts.md): The ordered palette, highlight on grey, sequential and diverging use, marks, legends
-- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/data-patterns.md): Numbers, amounts, dates, null versus zero, confidential and illustrative data
-- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/accessibility.md): WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure
-- [App patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/app-patterns.md): Apps only: the app shell, and the review, decision and history patterns of dense internal tools
-- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/specialising.md): Framework neutrality, the four rules, the promotion tests, the one-off log
+- [Principles](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/principles.md): The principles that decide the cases the other files do not cover
+- [Brand](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/brand.md): Name, tagline, legal line, wordmark, monogram, favicon, icons
+- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/voice.md): Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English
+- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/writing.md): No em or en dash, titles, sentences and lists, French typography
+- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/colour.md): Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps, the dark theme
+- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/typography.md): Families, weights, roles, sizes and line heights
+- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/layout.md): Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print
+- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/charts.md): The ordered palette, highlight on grey, sequential and diverging use, marks, legends
+- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/data-patterns.md): Numbers, amounts, dates, null versus zero, confidential and illustrative data
+- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/accessibility.md): WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure
+- [App patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/app-patterns.md): Apps only: the app shell, and the review, decision and history patterns of dense internal tools
+- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/specialising.md): Framework neutrality, the four rules, the promotion tests, the one-off log
 
 ## Tokens and CSS
 
-- [tokens.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/tokens.css): every token as a `--mq-*` custom property; load it first
-- [tokens.json](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/tokens.json): every token with its resolved value and description
-- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/tailwind.css): Tailwind 4 theme with 50 to 950 scales, for apps
-- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/base.css): typography roles for documents
-- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/components.css): the shared `mq-` document components
-- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/slide.css): the 1280 by 720 slide canvas
-- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/print.css): A4 pages with exact colour printing
-- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/css/app.css): status badges, for interactive apps only
-- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/fonts/fonts.css): self-hosted Outfit, Newsreader and Geist Mono
+- [tokens.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/dist/tokens.css): every token as a `--mq-*` custom property; load it first
+- [tokens.json](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/dist/tokens.json): every token with its resolved value and description
+- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/dist/tailwind.css): Tailwind 4 theme with 50 to 950 scales, for apps
+- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/base.css): typography roles for documents
+- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/components.css): the shared `mq-` document components
+- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/slide.css): the 1280 by 720 slide canvas
+- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/print.css): A4 pages with exact colour printing
+- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/app.css): status badges, for interactive apps only
+- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/fonts/fonts.css): self-hosted Outfit, Newsreader and Geist Mono
 
 ## Optional
 
-- [llms-full.txt](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/llms-full.txt): every guideline in full and every token with its value
-- [kit-contract.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/dist/kit-contract.css): unprefixed names for homemade-claude-kit renderers only, never loaded in an app
-- [Guidelines index](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.3.0/guidelines/README.md): the file list and where each legacy rule went
+- [llms-full.txt](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/dist/llms-full.txt): every guideline in full and every token with its value
+- [kit-contract.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/dist/kit-contract.css): unprefixed names for homemade-claude-kit renderers only, never loaded in an app
+- [Guidelines index](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/README.md): the file list and where each legacy rule went

package/dist/tailwind.css

@@ -105,6 +105,8 @@
   --color-border-strong: var(--mq-border-strong);
   --color-panel-start: var(--mq-panel-start);
   --color-panel-end: var(--mq-panel-end);
+  --color-brand-ground-start: var(--mq-brand-ground-start);
+  --color-brand-ground-end: var(--mq-brand-ground-end);
   --color-on-navy-title: var(--mq-on-navy-title);
   --color-on-navy-secondary: var(--mq-on-navy-secondary);
   --color-on-navy-second-level: var(--mq-on-navy-second-level);

package/dist/tokens.css

@@ -121,6 +121,8 @@
   --mq-border-strong: #5d6f91; /** Outline of outlined and dashed state marks in documents (badges, legend swatches), 3:1 or more on canvas and surface for WCAG 1.4.11 (increment 07 component need, ADR-0004: states by mark style). */
   --mq-panel-start: #0f2a5e; /** Light end of the navy panel gradient; the worst case for text on navy. */
   --mq-panel-end: #0a2047; /** Dark end of the navy panel gradient. */
+  --mq-brand-ground-start: #0f2a5e; /** Owner ruling 22, 2026-11-09: light end of the brand ground, the deep navy of a dark deck's cover, closing slide and section dividers, the same in both themes. */
+  --mq-brand-ground-end: #0a2047; /** Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes. */
   --mq-on-navy-title: #ffffff; /** Owner ruling 2, 2026-10-09: titles, figures and icons on navy. */
   --mq-on-navy-secondary: rgba(255, 255, 255, 0.68); /** Owner ruling 2, 2026-10-09: secondary text and labels on navy. */
   --mq-on-navy-second-level: #c3cbdc; /** Owner ruling 2, 2026-10-09: second-level text on navy. */

package/dist/tokens.json

@@ -1198,6 +1198,26 @@
     ],
     "description": "Dark end of the navy panel gradient."
   },
+  "--mq-brand-ground-start": {
+    "value": "#0f2a5e",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "brand-ground-start"
+    ],
+    "description": "Owner ruling 22, 2026-11-09: light end of the brand ground, the deep navy of a dark deck's cover, closing slide and section dividers, the same in both themes."
+  },
+  "--mq-brand-ground-end": {
+    "value": "#0a2047",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "brand-ground-end"
+    ],
+    "description": "Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes."
+  },
   "--mq-on-navy-title": {
     "value": "#ffffff",
     "type": "color",

package/guidelines/colour.md

@@ -134,6 +134,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
 | `--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-brand-ground-start` | `#0f2a5e`, the same in light | Light end of the brand ground: the cover, closing slide and section dividers of a dark deck (owner ruling 22) | Background |
+| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | 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-live` | a 3 px ring of the dark success green `#6fbf73` at 17 %; in light the success green at 17 % | Apps only: the halo of a live dot, the row in force on a timeline ([app patterns](app-patterns.md)) | Decorative |
@@ -144,6 +146,8 @@ Accent text on the pale fills reads `--mq-accent-highlight` in both themes (owne
 
 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 brand ground.** The cover, the closing slide and the section dividers of a deck sit on the deep navy of the MedQuantis title pages, a 160 degree gradient from `--mq-brand-ground-start` to `--mq-brand-ground-end`, never on the near-black canvas (owner ruling 22). A brand slide is always a dark slide: its text takes the dark roles, checked against the lighter stop (ink 12.62:1, muted 8.52:1, tertiary 4.78:1, the accent highlight 6.67:1). A slide built with the homemade-claude-kit takes it with `dark brand` on its root.
+
 **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](../docs/architecture/decisions/adr-0003-navy-is-the-single-brand-accent.md)). 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.

package/kit-manifest.json

@@ -1,5 +1,5 @@
 {
-  "contractVersion": "2.1.0",
+  "contractVersion": "2.2.0",
   "provides": {
     "core": "./kit/core.css",
     "dataviz": "./kit/dataviz.css",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medquantis/design-system",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "MedQuantis design tokens, shared CSS, assets, guidelines and Claude skill.",
   "type": "module",
   "repository": {
@@ -42,6 +42,7 @@
     "./DESIGN.md": "./dist/DESIGN.md",
     "./css/*": "./css/*",
     "./fonts.css": "./fonts/fonts.css",
+    "./fonts/*": "./fonts/*",
     "./brand/*": "./brand/*",
     "./stylelint": "./stylelint.config.mjs",
     "./package.json": "./package.json"