@medquantis/design-system 1.2.0 → 1.4.0

package/dist/tokens.css

@@ -36,6 +36,13 @@
   --mq-core-amber-tint: #fbf3e7; /** Owner ruling 5, 2026-10-09: warning tint, the warning fill at 10 % on white; warning strong on it is 4.42:1, so text on the tint stays ink. */
   --mq-core-red: #d8232a; /** Swiss red, kept only as the danger status colour (ADR-0003, ADR-0004). */
   --mq-core-blue: #1565c0; /** Info hue for interactive apps (ADR-0004). */
+  --mq-core-app-green: #1c7e3f; /** App categorical green, a data category in interactive apps only, never the success status (ADR-0008). */
+  --mq-core-app-orange: #d78000; /** App categorical orange, marks and fills only, 3.01:1 on white (ADR-0008). */
+  --mq-core-app-orange-dark: #a35f00; /** Darker app categorical orange for text in that hue, 5.01:1 on white (ADR-0008). */
+  --mq-core-app-vermillion: #cf2a00; /** App categorical vermillion, a data category, never the danger status (ADR-0008). */
+  --mq-core-app-blue: #3a8ff5; /** App categorical blue, marks and fills only, 3.27:1 on white (ADR-0008). */
+  --mq-core-app-violet: #5a2fbe; /** App categorical violet (ADR-0008). */
+  --mq-core-app-teal: #178a91; /** App categorical teal, marks and fills only, 4.13:1 on white (ADR-0008). */
   --mq-core-font-family-outfit: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Outfit, the sans for headings, labels and app UI (Owner ruling 10, 2026-10-09). */
   --mq-core-font-family-newsreader: Newsreader, Georgia, 'Times New Roman', serif; /** Newsreader, the only serif; Georgia and Times New Roman are fallbacks only (Owner ruling 10, 2026-10-09). */
   --mq-core-font-family-geist-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /** Geist Mono for figures and codes (Owner ruling 10, 2026-10-09). */
@@ -68,6 +75,9 @@
   --mq-core-shadow-medium: 0px 3px 12px 0px rgba(0, 0, 0, 0.07); /** Medium elevation for a slide or page shown on the desk (increment 07 component need, Report design system, 2026-10-08). */
   --mq-core-shadow-panel: 0px 14px 36px 0px rgba(10, 36, 99, 0.24); /** Navy-tinted elevation for navy panels (increment 07 component need, Report design system, 2026-10-08). */
   --mq-core-shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0); /** No shadow: a transparent layer of zero size, for a role that draws an edge in one theme only (owner ruling 14). */
+  --mq-core-shadow-live: 0px 0px 0px 3px rgba(46, 125, 50, 0.17); /** A 3 px ring of the success green at 17 %, the halo of a live mark in apps (ADR-0004, #38 component need). */
+  --mq-core-size-64: 64px; /** App sidebar collapsed to an icon rail, 64 px (#38 component need: the Maintainer app shell). */
+  --mq-core-size-248: 248px; /** App sidebar width, 248 px (#38 component need: the Maintainer app shell). */
   --mq-core-size-720: 720px; /** Slide canvas height, 720 px (increment 07 component need: the 1280 by 720 slide canvas). */
   --mq-core-size-760: 760px; /** Reading measure, 760 px (increment 07 component need, Report design system, 2026-10-08). */
   --mq-core-size-1040: 1040px; /** Content width of a screen document, 1040 px (increment 07 component need, Report design system, 2026-10-08). */
@@ -128,6 +138,17 @@
   --mq-warning-tint: #fbf3e7; /** Owner ruling 5, 2026-10-09: warning tint behind ink text; warning strong only for icons and borders on it. */
   --mq-dim: #707070; /** Retired name of the old tertiary grey; resolves to tertiary (Owner ruling 1, 2026-10-09). */
   --mq-accent-on-dark: #8795b3; /** Retired name of the accent on navy; resolves to the on-navy accent (Owner ruling 2, 2026-10-09). Use --mq-on-navy-title for titles and rules, --mq-on-navy-accent for the one-off accent. */
+  --mq-app-cat-green: #1c7e3f; /** App categorical hue: a many-category app chart or a data category, never a status and never in documents; text in it meets 4.5:1 (ADR-0008). */
+  --mq-app-cat-orange: #d78000; /** App categorical hue for marks and fills on the surface only (3.01:1); text in this hue reads app-cat-orange-text (ADR-0008). */
+  --mq-app-cat-orange-text: #a35f00; /** Text in the app categorical orange (counts, labels), 5.01:1 on the surface (ADR-0008). */
+  --mq-app-cat-vermillion: #cf2a00; /** App categorical hue: a data category, never the danger status, which stays for errors (ADR-0008). */
+  --mq-app-cat-blue: #3a8ff5; /** App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008). */
+  --mq-app-cat-violet: #5a2fbe; /** App categorical hue: marks, fills and text (ADR-0008). */
+  --mq-app-cat-teal: #178a91; /** App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008). */
+  --mq-change-added: #1c7e3f; /** Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008). */
+  --mq-change-modified: #d78000; /** Change type modified, in apps only, always with its word: marks and fills; its text reads change-modified-text (ADR-0008). */
+  --mq-change-modified-text: #a35f00; /** Text of the change type modified (counts, labels), in apps only (ADR-0008). */
+  --mq-change-removed: #cf2a00; /** Change type removed, in apps only, always with its sign or its word; a data category, never the danger status (ADR-0008). */
   --mq-focus-ring-color: #0a2463; /** Focus ring on light backgrounds: 2 px navy with an offset, 13.90:1 on canvas (research note 0001, section 7). */
   --mq-focus-ring-color-on-navy: #ffffff; /** Focus ring on navy backgrounds, 14.53:1. */
   --mq-focus-ring-width: 2px; /** Focus ring width (WCAG 2.4.7 and 1.4.11). */
@@ -150,12 +171,15 @@
   --mq-shadow-medium: 0px 3px 12px 0px rgba(0, 0, 0, 0.07); /** A slide or page previewed on the desk, never in print (increment 07 component need). */
   --mq-shadow-panel: 0px 14px 36px 0px rgba(10, 36, 99, 0.24); /** Navy panels (increment 07 component need). */
   --mq-shadow-edge: 0px 0px 0px 0px rgba(0, 0, 0, 0); /** The navy panel's edge for a navy mark that has no panel shadow: the monogram, a navy KPI tile, a navy brand or app tile. None in light; on dark the panel's 1 px light-navy outline (owner rulings 13 and 14). */
+  --mq-shadow-live: 0px 0px 0px 3px rgba(46, 125, 50, 0.17); /** Apps only: the halo around a live status dot, the row in force on a timeline; built on the success colour, so never in documents (ADR-0004). */
   --mq-slide-width: 1280px; /** Slide canvas width (increment 07 component need). */
   --mq-slide-height: 720px; /** Slide canvas height (increment 07 component need). */
   --mq-page-width: 1040px; /** Content width of a screen document (increment 07 component need). */
   --mq-page-measure: 760px; /** Longest line of running text (increment 07 component need). */
   --mq-a4-width: 793.7px; /** A4 sheet width (increment 07 component need). */
   --mq-a4-height: 1122.52px; /** A4 sheet height (increment 07 component need). */
+  --mq-sidebar-width: 248px; /** Apps only: the expanded app sidebar. */
+  --mq-sidebar-rail-width: 64px; /** Apps only: the app sidebar collapsed to an icon rail. */
   --mq-font-family-heading: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Headings, column titles and hero figures (Owner ruling 4, 2026-10-09, Owner ruling 10, 2026-10-09). */
   --mq-font-family-body: Newsreader, Georgia, 'Times New Roman', serif; /** Body text of documents and slides, regulatory text in apps (Owner ruling 10, 2026-10-09). */
   --mq-font-family-ui: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Labels and app UI (Owner ruling 10, 2026-10-09). */

package/dist/tokens.json

@@ -319,6 +319,76 @@
     ],
     "description": "Info hue for interactive apps (ADR-0004)."
   },
+  "--mq-core-app-green": {
+    "value": "#1c7e3f",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-green"
+    ],
+    "description": "App categorical green, a data category in interactive apps only, never the success status (ADR-0008)."
+  },
+  "--mq-core-app-orange": {
+    "value": "#d78000",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-orange"
+    ],
+    "description": "App categorical orange, marks and fills only, 3.01:1 on white (ADR-0008)."
+  },
+  "--mq-core-app-orange-dark": {
+    "value": "#a35f00",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-orange-dark"
+    ],
+    "description": "Darker app categorical orange for text in that hue, 5.01:1 on white (ADR-0008)."
+  },
+  "--mq-core-app-vermillion": {
+    "value": "#cf2a00",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-vermillion"
+    ],
+    "description": "App categorical vermillion, a data category, never the danger status (ADR-0008)."
+  },
+  "--mq-core-app-blue": {
+    "value": "#3a8ff5",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-blue"
+    ],
+    "description": "App categorical blue, marks and fills only, 3.27:1 on white (ADR-0008)."
+  },
+  "--mq-core-app-violet": {
+    "value": "#5a2fbe",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-violet"
+    ],
+    "description": "App categorical violet (ADR-0008)."
+  },
+  "--mq-core-app-teal": {
+    "value": "#178a91",
+    "type": "color",
+    "path": [
+      "core",
+      "color",
+      "app-teal"
+    ],
+    "description": "App categorical teal, marks and fills only, 4.13:1 on white (ADR-0008)."
+  },
   "--mq-core-font-family-outfit": {
     "value": "Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif",
     "type": "fontFamily",
@@ -664,6 +734,36 @@
     ],
     "description": "No shadow: a transparent layer of zero size, for a role that draws an edge in one theme only (owner ruling 14)."
   },
+  "--mq-core-shadow-live": {
+    "value": "0px 0px 0px 3px rgba(46, 125, 50, 0.17)",
+    "type": "shadow",
+    "path": [
+      "core",
+      "shadow",
+      "live"
+    ],
+    "description": "A 3 px ring of the success green at 17 %, the halo of a live mark in apps (ADR-0004, #38 component need)."
+  },
+  "--mq-core-size-64": {
+    "value": "64px",
+    "type": "dimension",
+    "path": [
+      "core",
+      "size",
+      "64"
+    ],
+    "description": "App sidebar collapsed to an icon rail, 64 px (#38 component need: the Maintainer app shell)."
+  },
+  "--mq-core-size-248": {
+    "value": "248px",
+    "type": "dimension",
+    "path": [
+      "core",
+      "size",
+      "248"
+    ],
+    "description": "App sidebar width, 248 px (#38 component need: the Maintainer app shell)."
+  },
   "--mq-core-size-720": {
     "value": "720px",
     "type": "dimension",
@@ -1283,6 +1383,127 @@
     "description": "Retired name of the accent on navy; resolves to the on-navy accent (Owner ruling 2, 2026-10-09). Use --mq-on-navy-title for titles and rules, --mq-on-navy-accent for the one-off accent.",
     "deprecated": "Use --mq-on-navy-title for titles and rules, --mq-on-navy-accent for the one-off accent."
   },
+  "--mq-app-cat-green": {
+    "value": "#1c7e3f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "green"
+    ],
+    "description": "App categorical hue: a many-category app chart or a data category, never a status and never in documents; text in it meets 4.5:1 (ADR-0008)."
+  },
+  "--mq-app-cat-orange": {
+    "value": "#d78000",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "orange"
+    ],
+    "description": "App categorical hue for marks and fills on the surface only (3.01:1); text in this hue reads app-cat-orange-text (ADR-0008)."
+  },
+  "--mq-app-cat-orange-text": {
+    "value": "#a35f00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "orange-text"
+    ],
+    "description": "Text in the app categorical orange (counts, labels), 5.01:1 on the surface (ADR-0008)."
+  },
+  "--mq-app-cat-vermillion": {
+    "value": "#cf2a00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "vermillion"
+    ],
+    "description": "App categorical hue: a data category, never the danger status, which stays for errors (ADR-0008)."
+  },
+  "--mq-app-cat-blue": {
+    "value": "#3a8ff5",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "blue"
+    ],
+    "description": "App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008)."
+  },
+  "--mq-app-cat-violet": {
+    "value": "#5a2fbe",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "violet"
+    ],
+    "description": "App categorical hue: marks, fills and text (ADR-0008)."
+  },
+  "--mq-app-cat-teal": {
+    "value": "#178a91",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "app-cat",
+      "teal"
+    ],
+    "description": "App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008)."
+  },
+  "--mq-change-added": {
+    "value": "#1c7e3f",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "added"
+    ],
+    "description": "Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008)."
+  },
+  "--mq-change-modified": {
+    "value": "#d78000",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "modified"
+    ],
+    "description": "Change type modified, in apps only, always with its word: marks and fills; its text reads change-modified-text (ADR-0008)."
+  },
+  "--mq-change-modified-text": {
+    "value": "#a35f00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "modified-text"
+    ],
+    "description": "Text of the change type modified (counts, labels), in apps only (ADR-0008)."
+  },
+  "--mq-change-removed": {
+    "value": "#cf2a00",
+    "type": "color",
+    "path": [
+      "semantic",
+      "color",
+      "change",
+      "removed"
+    ],
+    "description": "Change type removed, in apps only, always with its sign or its word; a data category, never the danger status (ADR-0008)."
+  },
   "--mq-focus-ring-color": {
     "value": "#0a2463",
     "type": "color",
@@ -1505,6 +1726,16 @@
     ],
     "description": "The navy panel's edge for a navy mark that has no panel shadow: the monogram, a navy KPI tile, a navy brand or app tile. None in light; on dark the panel's 1 px light-navy outline (owner rulings 13 and 14)."
   },
+  "--mq-shadow-live": {
+    "value": "0px 0px 0px 3px rgba(46, 125, 50, 0.17)",
+    "type": "shadow",
+    "path": [
+      "semantic",
+      "shadow",
+      "live"
+    ],
+    "description": "Apps only: the halo around a live status dot, the row in force on a timeline; built on the success colour, so never in documents (ADR-0004)."
+  },
   "--mq-slide-width": {
     "value": "1280px",
     "type": "dimension",
@@ -1565,6 +1796,26 @@
     ],
     "description": "A4 sheet height (increment 07 component need)."
   },
+  "--mq-sidebar-width": {
+    "value": "248px",
+    "type": "dimension",
+    "path": [
+      "semantic",
+      "sidebar",
+      "width"
+    ],
+    "description": "Apps only: the expanded app sidebar."
+  },
+  "--mq-sidebar-rail-width": {
+    "value": "64px",
+    "type": "dimension",
+    "path": [
+      "semantic",
+      "sidebar",
+      "rail-width"
+    ],
+    "description": "Apps only: the app sidebar collapsed to an icon rail."
+  },
   "--mq-font-family-heading": {
     "value": "Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif",
     "type": "fontFamily",

package/guidelines/README.md

@@ -14,6 +14,7 @@ The MedQuantis brand, writing, colour, type, layout, chart, data and accessibili
 | [charts.md](charts.md) | The ordered palette, highlight on grey, sequential and diverging use, marks, legends |
 | [data-patterns.md](data-patterns.md) | Numbers, amounts, dates, null versus zero, confidential and illustrative data |
 | [accessibility.md](accessibility.md) | WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure |
+| [app-patterns.md](app-patterns.md) | Apps only: the app shell, and the review, decision and history patterns of dense internal tools |
 | [specialising.md](specialising.md) | Framework neutrality, the four rules, the promotion tests, the one-off log |
 
 The values themselves live in `tokens/` and reach these pages as `--mq-*` names; when a guideline and a token disagree, the token is right and the guideline is fixed. The generated specimen (`make specimen`) is the visual reference: when a rendering is in doubt, it decides.
@@ -323,3 +324,5 @@ Owner rulings taken after the bootstrap plan, numbered on from ruling 11. Each i
 | 17 | 2026-10-15 | A deck's classification sits at the right of the slide footer, before the number, in the deck's language: the label only, never the C0 to C3 code. Amends ruling 11 | [layout.md](layout.md), [brand.md](brand.md) | Design pass of 2026-10-15 (the ADR-0007 decision log), Plan-0003 |
 | 18 | 2026-10-17 | Accent text on the pale fills (the pale KPI value, the pale badge, the callout title) reads `--mq-accent-highlight`, the accent itself in light | [colour.md](colour.md) | ADR-0007 |
 | 19 | 2026-10-17 | On the dark panel start, `--mq-on-navy-accent` is `#b2c2ed` and `--mq-on-navy-discreet` white at 50 %, large text or non-text only; the light values are unchanged | [colour.md](colour.md) | ADR-0007 |
+| 20 | 2026-11-03 | Interactive apps may use the app categorical palette (six hues) and the change-type tokens built on it, light only; documents keep the ordered navy and blue-grey palette | [charts.md](charts.md), [colour.md](colour.md) | ADR-0008, issue #35 |
+| 21 | 2026-11-03 | A one-series chart stays navy; no series uses a status token; the vermillion is a data category, never `--mq-danger`; marks sit on the surface; text in a hue meets 4.5:1; never colour alone | [charts.md](charts.md), [accessibility.md](accessibility.md) | ADR-0008, issue #35 |

package/guidelines/accessibility.md

@@ -11,7 +11,8 @@ Colour never carries meaning on its own (WCAG 1.4.1):
 - documents show states by mark style (solid, ring, pale, outline, quiet, dashed, struck through) and a page that uses these marks gives their key once, in a legend or a note;
 - apps pair every status colour with an icon or a word;
 - charts label the marks that use series 3 or 4, or give them an outline, since those colours are below 3:1 on the page ([charts](charts.md));
-- a change in a figure is shown by its sign, not by a colour or an arrow alone.
+- a change in a figure is shown by its sign, not by a colour or an arrow alone;
+- in apps, a mark in the app categorical palette carries a direct label, a legend entry, a sign or a word, since two of its hues share their lightness ([charts](charts.md)).
 
 ## Contrast pairs