@medquantis/design-system 1.4.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/DESIGN.md +30 -7
- package/dist/kit/brand.css +1 -1
- package/dist/kit/core.css +1 -1
- package/dist/kit/dark.css +3 -1
- package/dist/kit/dataviz.css +1 -1
- package/dist/kit/document.css +1 -1
- package/dist/kit/guidance.md +4 -0
- package/dist/kit/print.css +1 -1
- package/dist/kit/slide-frame.css +1 -1
- package/dist/kit/space-shape.css +1 -1
- package/dist/kit/type.css +1 -1
- package/dist/llms-full.txt +27 -6
- package/dist/llms.txt +24 -24
- package/dist/tailwind.css +4 -0
- package/dist/tokens.css +6 -0
- package/dist/tokens.json +62 -0
- package/guidelines/charts.md +15 -4
- package/guidelines/colour.md +5 -1
- package/kit-manifest.json +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ The single source of the MedQuantis visual identity: design tokens, shared CSS,
|
|
|
18
18
|
| `icons/lucide.min.js` | A pinned Lucide build (version and hash in `icons/manifest.json`) |
|
|
19
19
|
| `brand/` | Monogram, favicon set and wordmark: `wordmark-on-light` and `wordmark-on-navy`, live text for screen and `-print` with outlined text |
|
|
20
20
|
| `guidelines/` | Brand, voice, colour, typography, chart, data and accessibility rules, and the app patterns of dense internal tools |
|
|
21
|
-
| `kit-manifest.json`, `dist/kit/` | The homemade-claude-kit delivery-comms renderers (contract 2.
|
|
21
|
+
| `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) |
|
|
22
22
|
| `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 |
|
|
23
23
|
| `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 |
|
|
24
24
|
| `plugins/medquantis-design-system/` | The Claude skill, as a Claude Code plugin and as a zip for claude.ai (see Claude skill) |
|
|
@@ -150,7 +150,7 @@ python3 <skill-dir>/scripts/design_system.py point @medquantis/design-system@1.2
|
|
|
150
150
|
|
|
151
151
|
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.
|
|
152
152
|
|
|
153
|
-
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.
|
|
153
|
+
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.
|
|
154
154
|
|
|
155
155
|
`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:
|
|
156
156
|
|
package/dist/DESIGN.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: MedQuantis
|
|
3
|
-
description: The MedQuantis design system 1.
|
|
3
|
+
description: The MedQuantis design system 1.6.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.
|
|
4
4
|
colors:
|
|
5
5
|
primary: "{colors.accent}"
|
|
6
6
|
ink: "#1a1a1a"
|
|
@@ -34,6 +34,8 @@ colors:
|
|
|
34
34
|
border-strong: "#5d6f91"
|
|
35
35
|
panel-start: "#0f2a5e"
|
|
36
36
|
panel-end: "#0a2047"
|
|
37
|
+
brand-ground-start: "#0f2a5e"
|
|
38
|
+
brand-ground-end: "#0a2047"
|
|
37
39
|
on-navy-title: "#ffffff"
|
|
38
40
|
on-navy-secondary: rgba(255, 255, 255, 0.68)
|
|
39
41
|
on-navy-second-level: "#c3cbdc"
|
|
@@ -54,6 +56,8 @@ colors:
|
|
|
54
56
|
app-cat-blue: "#3a8ff5"
|
|
55
57
|
app-cat-violet: "#5a2fbe"
|
|
56
58
|
app-cat-teal: "#178a91"
|
|
59
|
+
app-cat-indigo: "#4a5aa8"
|
|
60
|
+
app-cat-rose: "#b71c5a"
|
|
57
61
|
change-added: "#1c7e3f"
|
|
58
62
|
change-modified: "#d78000"
|
|
59
63
|
change-modified-text: "#a35f00"
|
|
@@ -140,7 +144,7 @@ spacing:
|
|
|
140
144
|
|
|
141
145
|
# MedQuantis design
|
|
142
146
|
|
|
143
|
-
Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.
|
|
147
|
+
Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.6.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.
|
|
144
148
|
|
|
145
149
|
## Overview
|
|
146
150
|
|
|
@@ -274,6 +278,8 @@ Markdown is written one line per paragraph or list item, never hard-wrapped at a
|
|
|
274
278
|
| `colors.border-strong` | `--mq-border-strong` | `#5d6f91` |
|
|
275
279
|
| `colors.panel-start` | `--mq-panel-start` | `#0f2a5e` |
|
|
276
280
|
| `colors.panel-end` | `--mq-panel-end` | `#0a2047` |
|
|
281
|
+
| `colors.brand-ground-start` | `--mq-brand-ground-start` | `#0f2a5e` |
|
|
282
|
+
| `colors.brand-ground-end` | `--mq-brand-ground-end` | `#0a2047` |
|
|
277
283
|
| `colors.on-navy-title` | `--mq-on-navy-title` | `#ffffff` |
|
|
278
284
|
| `colors.on-navy-secondary` | `--mq-on-navy-secondary` | `rgba(255, 255, 255, 0.68)` |
|
|
279
285
|
| `colors.on-navy-second-level` | `--mq-on-navy-second-level` | `#c3cbdc` |
|
|
@@ -294,6 +300,8 @@ Markdown is written one line per paragraph or list item, never hard-wrapped at a
|
|
|
294
300
|
| `colors.app-cat-blue` | `--mq-app-cat-blue` | `#3a8ff5` |
|
|
295
301
|
| `colors.app-cat-violet` | `--mq-app-cat-violet` | `#5a2fbe` |
|
|
296
302
|
| `colors.app-cat-teal` | `--mq-app-cat-teal` | `#178a91` |
|
|
303
|
+
| `colors.app-cat-indigo` | `--mq-app-cat-indigo` | `#4a5aa8` |
|
|
304
|
+
| `colors.app-cat-rose` | `--mq-app-cat-rose` | `#b71c5a` |
|
|
297
305
|
| `colors.change-added` | `--mq-change-added` | `#1c7e3f` |
|
|
298
306
|
| `colors.change-modified` | `--mq-change-modified` | `#d78000` |
|
|
299
307
|
| `colors.change-modified-text` | `--mq-change-modified-text` | `#a35f00` |
|
|
@@ -438,7 +446,7 @@ Every status colour comes with an icon or a word (WCAG 1.4.1):
|
|
|
438
446
|
- a flag is a coloured word, and only on the rows that need attention, so normal rows stay quiet;
|
|
439
447
|
- light badge backgrounds come from the 50 and 100 steps of the status scales in `dist/tailwind.css`, never a hand-picked tint.
|
|
440
448
|
|
|
441
|
-
The red of the old Paracel theme survives only as `--mq-danger` (ADR-0003). The app categorical palette and the change types (`--mq-app-cat-*`, `--mq-change-*`) are data categories, never statuses; their values and rules are in charts (ADR-0008). Other app-specific hues, such as the annotation colours of regulatory text, stay local in the app under its own prefix until a second consumer needs them (specialising).
|
|
449
|
+
The red of the old Paracel theme survives only as `--mq-danger` (ADR-0003). The app categorical palette and the change types (`--mq-app-cat-*`, `--mq-change-*`) are data categories, never statuses; their values and rules are in charts (ADR-0008, ADR-0010). Other app-specific hues, such as the annotation colours of regulatory text, stay local in the app under its own prefix until a second consumer needs them (specialising).
|
|
442
450
|
|
|
443
451
|
### Colour: Chart colours
|
|
444
452
|
|
|
@@ -476,6 +484,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
|
|
|
476
484
|
| `--mq-focus-ring-color` | `#9fb3e8`, the light navy | Focus ring on dark backgrounds | 8.71:1 on canvas |
|
|
477
485
|
| `--mq-panel-start` | `#2f4c8f` | Light end of the navy panel gradient | Background, white 8.23:1 on the panel start |
|
|
478
486
|
| `--mq-panel-end` | `#0f2a5e` | Dark end of the navy panel gradient | Background |
|
|
487
|
+
| `--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 |
|
|
488
|
+
| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | Background |
|
|
479
489
|
| `--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 |
|
|
480
490
|
| `--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 |
|
|
481
491
|
| `--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 +496,8 @@ Accent text on the pale fills reads `--mq-accent-highlight` in both themes (owne
|
|
|
486
496
|
|
|
487
497
|
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).
|
|
488
498
|
|
|
499
|
+
**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.
|
|
500
|
+
|
|
489
501
|
**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.
|
|
490
502
|
|
|
491
503
|
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.
|
|
@@ -564,7 +576,7 @@ Rules:
|
|
|
564
576
|
|
|
565
577
|
### Charts: App categorical palette (apps only)
|
|
566
578
|
|
|
567
|
-
|
|
579
|
+
Eight hues for interactive apps whose charts or lists show more categories than the four ordered series can carry, and three change types built on them (owner rulings 20 and 21, ADR-0008). The indigo and the rose were added for the parts of a rule row (owner ruling of 2026-11-15, ADR-0010). They are light only until their dark values are ruled, and they never appear in documents, which keep the ordered palette.
|
|
568
580
|
|
|
569
581
|
| Token | Value | Contrast on surface | Allowed for |
|
|
570
582
|
| :-- | :-- | :-- | :-- |
|
|
@@ -575,6 +587,8 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
575
587
|
| `--mq-app-cat-blue` | `#3a8ff5` | 3.27:1 | Marks and fills only |
|
|
576
588
|
| `--mq-app-cat-violet` | `#5a2fbe` | 8.12:1 | Marks, fills and text |
|
|
577
589
|
| `--mq-app-cat-teal` | `#178a91` | 4.13:1 | Marks and fills only |
|
|
590
|
+
| `--mq-app-cat-indigo` | `#4a5aa8` | 6.33:1 | Marks, fills and text |
|
|
591
|
+
| `--mq-app-cat-rose` | `#b71c5a` | 6.31:1 | Marks, fills and text |
|
|
578
592
|
|
|
579
593
|
| Change type | Token | Reads |
|
|
580
594
|
| :-- | :-- | :-- |
|
|
@@ -582,15 +596,24 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
582
596
|
| Modified | `--mq-change-modified`; its text `--mq-change-modified-text` | The orange; the orange text |
|
|
583
597
|
| Removed | `--mq-change-removed` | The vermillion |
|
|
584
598
|
|
|
585
|
-
Between the six hues and navy series 1, the smallest CIEDE2000 distance is 17.4 under normal vision, 11.9 under protanopia, 12.9 under deuteranopia and 8.4 under tritanopia (green and teal); the token test holds those floors.
|
|
599
|
+
Between the six hues of ADR-0008 and navy series 1, the smallest CIEDE2000 distance is 17.4 under normal vision, 11.9 under protanopia, 12.9 under deuteranopia and 8.4 under tritanopia (green and teal); the token test holds those floors. The indigo and the rose stay out of that set: the indigo sits 13.7 from the violet, so they are not added to a many-category chart beside it.
|
|
600
|
+
|
|
601
|
+
| Rule row part | Token |
|
|
602
|
+
| :-- | :-- |
|
|
603
|
+
| The condition (when the rule applies) | `--mq-app-cat-indigo` |
|
|
604
|
+
| What is paid | `--mq-app-cat-orange-text` |
|
|
605
|
+
| How much | `--mq-app-cat-rose` |
|
|
606
|
+
| The rule's own quoted text | `--mq-tertiary` |
|
|
607
|
+
|
|
608
|
+
The three part hues and the tertiary grey stay apart by CIEDE2000 24.0 under normal vision, 15.1 under protanopia, 9.8 under deuteranopia (rose and grey) and 8.9 under tritanopia (orange text and rose); the token test holds 15, 10, 9 and 8. The indigo and the rose share their lightness, so each part also carries its label.
|
|
586
609
|
|
|
587
610
|
Rules:
|
|
588
611
|
|
|
589
612
|
- A one-series chart stays navy (`--mq-chart-series-1`). Up to four series, the ordered palette applies in apps too; the categorical hues are for charts of five or more categories and for data categories.
|
|
590
613
|
- Fix each hue to its category across every view of the app; never let a charting library rotate through the palette.
|
|
591
|
-
- No series uses a status token. The vermillion is a data category ("removed from the list"), not an error: `--mq-danger` stays for errors. The green, the orange, the orange text and the vermillion sit CIEDE2000 3.3, 2.2, 2.8 and 7.9 from `--mq-success`, `--mq-warning-fill`, `--mq-warning` and `--mq-danger`, so code tells them apart by token name and the screen by the word or sign each carries, never by hue.
|
|
614
|
+
- No series uses a status token. The vermillion is a data category ("removed from the list"), not an error: `--mq-danger` stays for errors. The green, the orange, the orange text and the vermillion sit CIEDE2000 3.3, 2.2, 2.8 and 7.9 from `--mq-success`, `--mq-warning-fill`, `--mq-warning` and `--mq-danger`, so code tells them apart by token name and the screen by the word or sign each carries, never by hue. The indigo sits 8.5 from `--mq-info` and the rose 17.4 from `--mq-danger`, under the same rule.
|
|
592
615
|
- Marks sit on the surface (`--mq-surface`), where every hue meets 3:1 and needs no outline. On the canvas the orange falls to 2.88:1, and on the recessed surface the orange and the blue fall below 3:1, so a chart in these hues sits in a white card.
|
|
593
|
-
- Text in a hue meets 4.5:1: the green, the vermillion and the
|
|
616
|
+
- Text in a hue meets 4.5:1: the green, the vermillion, the violet, the indigo and the rose may be text, orange text reads `--mq-app-cat-orange-text`, and the blue and the teal are never text.
|
|
594
617
|
- Never colour alone: the green and the vermillion have almost the same lightness, so in greyscale they cannot be told apart. Every mark carries a direct label or a legend entry, and a change type its sign (+, −) or its word; label the green and the teal directly where they touch.
|
|
595
618
|
- A change type keeps its hue wherever a change is listed (badge, dot, filter, count) and keeps its mark style on top: an added value with +, a removed value struck through.
|
|
596
619
|
|
package/dist/kit/brand.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis values for the brand module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis values for the brand module of the homemade-claude-kit design contract 2.2.0,
|
|
4
4
|
* generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
|
|
5
5
|
* For kit renderers only: the unprefixed names collide with app and Tailwind variables.
|
|
6
6
|
*/
|
package/dist/kit/core.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis values for the core module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis values for the core module of the homemade-claude-kit design contract 2.2.0,
|
|
4
4
|
* generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
|
|
5
5
|
* For kit renderers only: the unprefixed names collide with app and Tailwind variables.
|
|
6
6
|
*/
|
package/dist/kit/dark.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis dark module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis dark module of the homemade-claude-kit design contract 2.2.0. The roles are
|
|
4
4
|
* generated from tokens/kit/ by the design-system build, resolved in the dark theme (ADR-0007),
|
|
5
5
|
* on :root only; the kit's own dark layer remaps the light roles to them on a dark slide or page
|
|
6
6
|
* and draws the dark, dark-key and dark-accent classes. Do not edit this file. kit-manifest.json
|
|
@@ -35,9 +35,11 @@
|
|
|
35
35
|
--dark-print-bg: #11161f;
|
|
36
36
|
--dark-key-base: #2f4c8f;
|
|
37
37
|
--dark-accent-text: #9fb3e8;
|
|
38
|
+
--dark-brand-base: #0f2a5e;
|
|
38
39
|
--dark-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
|
|
39
40
|
--dark-key-edge: 0px 0px 0px 1px rgba(159, 179, 232, 0.35);
|
|
40
41
|
--dark-key-fill: linear-gradient(160deg, #2f4c8f 0%, #0f2a5e 100%);
|
|
42
|
+
--dark-brand-bg: linear-gradient(160deg, #0f2a5e 0%, #0a2047 100%);
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
/*
|
package/dist/kit/dataviz.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis values for the dataviz module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis values for the dataviz module of the homemade-claude-kit design contract 2.2.0,
|
|
4
4
|
* generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
|
|
5
5
|
* For kit renderers only: the unprefixed names collide with app and Tailwind variables.
|
|
6
6
|
*/
|
package/dist/kit/document.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis document module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis document module of the homemade-claude-kit design contract 2.2.0. The roles are
|
|
4
4
|
* generated from tokens/kit/ by the design-system build; the class rules after them are copied
|
|
5
5
|
* from css/kit/document.css, written by hand against contract roles. Do not edit this file.
|
|
6
6
|
* kit-manifest.json lists it. For kit renderers only: the unprefixed names collide with app and
|
package/dist/kit/guidance.md
CHANGED
|
@@ -281,6 +281,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
|
|
|
281
281
|
| `--mq-focus-ring-color` | `#9fb3e8`, the light navy | Focus ring on dark backgrounds | 8.71:1 on canvas |
|
|
282
282
|
| `--mq-panel-start` | `#2f4c8f` | Light end of the navy panel gradient | Background, white 8.23:1 on the panel start |
|
|
283
283
|
| `--mq-panel-end` | `#0f2a5e` | Dark end of the navy panel gradient | Background |
|
|
284
|
+
| `--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 |
|
|
285
|
+
| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | Background |
|
|
284
286
|
| `--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 |
|
|
285
287
|
| `--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 |
|
|
286
288
|
| `--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
|
|
|
291
293
|
|
|
292
294
|
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).
|
|
293
295
|
|
|
296
|
+
**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.
|
|
297
|
+
|
|
294
298
|
**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.
|
|
295
299
|
|
|
296
300
|
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis print module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis print module of the homemade-claude-kit design contract 2.2.0. The roles are
|
|
4
4
|
* generated from tokens/kit/ by the design-system build; the class rules after them are copied
|
|
5
5
|
* from css/kit/print.css, written by hand against contract roles. Do not edit this file.
|
|
6
6
|
* kit-manifest.json lists it. For kit renderers only: the unprefixed names collide with app and
|
package/dist/kit/slide-frame.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis slide-frame module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis slide-frame module of the homemade-claude-kit design contract 2.2.0. The roles are
|
|
4
4
|
* generated from tokens/kit/ by the design-system build; the class rules after them are copied
|
|
5
5
|
* from css/kit/slide-frame.css, written by hand against contract roles. Do not edit this file.
|
|
6
6
|
* kit-manifest.json lists it. For kit renderers only: the unprefixed names collide with app and
|
package/dist/kit/space-shape.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis values for the space-shape module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis values for the space-shape module of the homemade-claude-kit design contract 2.2.0,
|
|
4
4
|
* generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
|
|
5
5
|
* For kit renderers only: the unprefixed names collide with app and Tailwind variables.
|
|
6
6
|
*/
|
package/dist/kit/type.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*! @medquantis/design-system | © 2026 MedQuantis SA | MIT License, see LICENSE */
|
|
2
2
|
/*
|
|
3
|
-
* MedQuantis values for the type module of the homemade-claude-kit design contract 2.
|
|
3
|
+
* MedQuantis values for the type module of the homemade-claude-kit design contract 2.2.0,
|
|
4
4
|
* generated from tokens/kit/ by the design-system build. Do not edit. kit-manifest.json lists it.
|
|
5
5
|
* For kit renderers only: the unprefixed names collide with app and Tailwind variables.
|
|
6
6
|
*/
|
package/dist/llms-full.txt
CHANGED
|
@@ -319,7 +319,7 @@ Every status colour comes with an icon or a word (WCAG 1.4.1):
|
|
|
319
319
|
- a flag is a coloured word, and only on the rows that need attention, so normal rows stay quiet;
|
|
320
320
|
- light badge backgrounds come from the 50 and 100 steps of the status scales in `dist/tailwind.css`, never a hand-picked tint.
|
|
321
321
|
|
|
322
|
-
The red of the old Paracel theme survives only as `--mq-danger` (ADR-0003). The app categorical palette and the change types (`--mq-app-cat-*`, `--mq-change-*`) are data categories, never statuses; their values and rules are in charts (ADR-0008). Other app-specific hues, such as the annotation colours of regulatory text, stay local in the app under its own prefix until a second consumer needs them (specialising).
|
|
322
|
+
The red of the old Paracel theme survives only as `--mq-danger` (ADR-0003). The app categorical palette and the change types (`--mq-app-cat-*`, `--mq-change-*`) are data categories, never statuses; their values and rules are in charts (ADR-0008, ADR-0010). Other app-specific hues, such as the annotation colours of regulatory text, stay local in the app under its own prefix until a second consumer needs them (specialising).
|
|
323
323
|
|
|
324
324
|
## Chart colours
|
|
325
325
|
|
|
@@ -357,6 +357,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
|
|
|
357
357
|
| `--mq-focus-ring-color` | `#9fb3e8`, the light navy | Focus ring on dark backgrounds | 8.71:1 on canvas |
|
|
358
358
|
| `--mq-panel-start` | `#2f4c8f` | Light end of the navy panel gradient | Background, white 8.23:1 on the panel start |
|
|
359
359
|
| `--mq-panel-end` | `#0f2a5e` | Dark end of the navy panel gradient | Background |
|
|
360
|
+
| `--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 |
|
|
361
|
+
| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | Background |
|
|
360
362
|
| `--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 |
|
|
361
363
|
| `--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 |
|
|
362
364
|
| `--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
|
|
|
367
369
|
|
|
368
370
|
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).
|
|
369
371
|
|
|
372
|
+
**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.
|
|
373
|
+
|
|
370
374
|
**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.
|
|
371
375
|
|
|
372
376
|
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.
|
|
@@ -633,7 +637,7 @@ Rules:
|
|
|
633
637
|
|
|
634
638
|
## App categorical palette (apps only)
|
|
635
639
|
|
|
636
|
-
|
|
640
|
+
Eight hues for interactive apps whose charts or lists show more categories than the four ordered series can carry, and three change types built on them (owner rulings 20 and 21, ADR-0008). The indigo and the rose were added for the parts of a rule row (owner ruling of 2026-11-15, ADR-0010). They are light only until their dark values are ruled, and they never appear in documents, which keep the ordered palette.
|
|
637
641
|
|
|
638
642
|
| Token | Value | Contrast on surface | Allowed for |
|
|
639
643
|
| :-- | :-- | :-- | :-- |
|
|
@@ -644,6 +648,8 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
644
648
|
| `--mq-app-cat-blue` | `#3a8ff5` | 3.27:1 | Marks and fills only |
|
|
645
649
|
| `--mq-app-cat-violet` | `#5a2fbe` | 8.12:1 | Marks, fills and text |
|
|
646
650
|
| `--mq-app-cat-teal` | `#178a91` | 4.13:1 | Marks and fills only |
|
|
651
|
+
| `--mq-app-cat-indigo` | `#4a5aa8` | 6.33:1 | Marks, fills and text |
|
|
652
|
+
| `--mq-app-cat-rose` | `#b71c5a` | 6.31:1 | Marks, fills and text |
|
|
647
653
|
|
|
648
654
|
| Change type | Token | Reads |
|
|
649
655
|
| :-- | :-- | :-- |
|
|
@@ -651,15 +657,24 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
651
657
|
| Modified | `--mq-change-modified`; its text `--mq-change-modified-text` | The orange; the orange text |
|
|
652
658
|
| Removed | `--mq-change-removed` | The vermillion |
|
|
653
659
|
|
|
654
|
-
Between the six hues and navy series 1, the smallest CIEDE2000 distance is 17.4 under normal vision, 11.9 under protanopia, 12.9 under deuteranopia and 8.4 under tritanopia (green and teal); the token test holds those floors.
|
|
660
|
+
Between the six hues of ADR-0008 and navy series 1, the smallest CIEDE2000 distance is 17.4 under normal vision, 11.9 under protanopia, 12.9 under deuteranopia and 8.4 under tritanopia (green and teal); the token test holds those floors. The indigo and the rose stay out of that set: the indigo sits 13.7 from the violet, so they are not added to a many-category chart beside it.
|
|
661
|
+
|
|
662
|
+
| Rule row part | Token |
|
|
663
|
+
| :-- | :-- |
|
|
664
|
+
| The condition (when the rule applies) | `--mq-app-cat-indigo` |
|
|
665
|
+
| What is paid | `--mq-app-cat-orange-text` |
|
|
666
|
+
| How much | `--mq-app-cat-rose` |
|
|
667
|
+
| The rule's own quoted text | `--mq-tertiary` |
|
|
668
|
+
|
|
669
|
+
The three part hues and the tertiary grey stay apart by CIEDE2000 24.0 under normal vision, 15.1 under protanopia, 9.8 under deuteranopia (rose and grey) and 8.9 under tritanopia (orange text and rose); the token test holds 15, 10, 9 and 8. The indigo and the rose share their lightness, so each part also carries its label.
|
|
655
670
|
|
|
656
671
|
Rules:
|
|
657
672
|
|
|
658
673
|
- A one-series chart stays navy (`--mq-chart-series-1`). Up to four series, the ordered palette applies in apps too; the categorical hues are for charts of five or more categories and for data categories.
|
|
659
674
|
- Fix each hue to its category across every view of the app; never let a charting library rotate through the palette.
|
|
660
|
-
- No series uses a status token. The vermillion is a data category ("removed from the list"), not an error: `--mq-danger` stays for errors. The green, the orange, the orange text and the vermillion sit CIEDE2000 3.3, 2.2, 2.8 and 7.9 from `--mq-success`, `--mq-warning-fill`, `--mq-warning` and `--mq-danger`, so code tells them apart by token name and the screen by the word or sign each carries, never by hue.
|
|
675
|
+
- No series uses a status token. The vermillion is a data category ("removed from the list"), not an error: `--mq-danger` stays for errors. The green, the orange, the orange text and the vermillion sit CIEDE2000 3.3, 2.2, 2.8 and 7.9 from `--mq-success`, `--mq-warning-fill`, `--mq-warning` and `--mq-danger`, so code tells them apart by token name and the screen by the word or sign each carries, never by hue. The indigo sits 8.5 from `--mq-info` and the rose 17.4 from `--mq-danger`, under the same rule.
|
|
661
676
|
- Marks sit on the surface (`--mq-surface`), where every hue meets 3:1 and needs no outline. On the canvas the orange falls to 2.88:1, and on the recessed surface the orange and the blue fall below 3:1, so a chart in these hues sits in a white card.
|
|
662
|
-
- Text in a hue meets 4.5:1: the green, the vermillion and the
|
|
677
|
+
- Text in a hue meets 4.5:1: the green, the vermillion, the violet, the indigo and the rose may be text, orange text reads `--mq-app-cat-orange-text`, and the blue and the teal are never text.
|
|
663
678
|
- Never colour alone: the green and the vermillion have almost the same lightness, so in greyscale they cannot be told apart. Every mark carries a direct label or a legend entry, and a change type its sign (+, −) or its word; label the green and the teal directly where they touch.
|
|
664
679
|
- A change type keeps its hue wherever a change is listed (badge, dot, filter, count) and keeps its mark style on top: an added value with +, a removed value struck through.
|
|
665
680
|
|
|
@@ -1159,7 +1174,7 @@ Every local one-off (a component or a token a consumer adds under its own prefix
|
|
|
1159
1174
|
|
|
1160
1175
|
# Tokens
|
|
1161
1176
|
|
|
1162
|
-
Every token of release 1.
|
|
1177
|
+
Every token of release 1.6.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.
|
|
1163
1178
|
|
|
1164
1179
|
## Semantic tokens
|
|
1165
1180
|
|
|
@@ -1191,6 +1206,8 @@ Every token of release 1.4.0, generated from dist/tokens.json. Consumers use the
|
|
|
1191
1206
|
| `--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). |
|
|
1192
1207
|
| `--mq-panel-start` | `#0f2a5e` | Light end of the navy panel gradient; the worst case for text on navy. |
|
|
1193
1208
|
| `--mq-panel-end` | `#0a2047` | Dark end of the navy panel gradient. |
|
|
1209
|
+
| `--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. |
|
|
1210
|
+
| `--mq-brand-ground-end` | `#0a2047` | Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes. |
|
|
1194
1211
|
| `--mq-on-navy-title` | `#ffffff` | Owner ruling 2, 2026-10-09: titles, figures and icons on navy. |
|
|
1195
1212
|
| `--mq-on-navy-secondary` | `rgba(255, 255, 255, 0.68)` | Owner ruling 2, 2026-10-09: secondary text and labels on navy. |
|
|
1196
1213
|
| `--mq-on-navy-second-level` | `#c3cbdc` | Owner ruling 2, 2026-10-09: second-level text on navy. |
|
|
@@ -1215,6 +1232,8 @@ Every token of release 1.4.0, generated from dist/tokens.json. Consumers use the
|
|
|
1215
1232
|
| `--mq-app-cat-blue` | `#3a8ff5` | App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008). |
|
|
1216
1233
|
| `--mq-app-cat-violet` | `#5a2fbe` | App categorical hue: marks, fills and text (ADR-0008). |
|
|
1217
1234
|
| `--mq-app-cat-teal` | `#178a91` | App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008). |
|
|
1235
|
+
| `--mq-app-cat-indigo` | `#4a5aa8` | App categorical hue: marks, fills and text, 6.33:1 on the surface; a data category, never the info status (ADR-0010). |
|
|
1236
|
+
| `--mq-app-cat-rose` | `#b71c5a` | App categorical hue: marks, fills and text, 6.31:1 on the surface; a data category, never the danger status (ADR-0010). |
|
|
1218
1237
|
| `--mq-change-added` | `#1c7e3f` | Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008). |
|
|
1219
1238
|
| `--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). |
|
|
1220
1239
|
| `--mq-change-modified-text` | `#a35f00` | Text of the change type modified (counts, labels), in apps only (ADR-0008). |
|
|
@@ -1323,6 +1342,8 @@ Every token of release 1.4.0, generated from dist/tokens.json. Consumers use the
|
|
|
1323
1342
|
| `--mq-core-app-blue` | `#3a8ff5` | App categorical blue, marks and fills only, 3.27:1 on white (ADR-0008). |
|
|
1324
1343
|
| `--mq-core-app-violet` | `#5a2fbe` | App categorical violet (ADR-0008). |
|
|
1325
1344
|
| `--mq-core-app-teal` | `#178a91` | App categorical teal, marks and fills only, 4.13:1 on white (ADR-0008). |
|
|
1345
|
+
| `--mq-core-app-indigo` | `#4a5aa8` | App categorical indigo, a data category in interactive apps only, never the info status; marks, fills and text, 6.33:1 on white (ADR-0010). |
|
|
1346
|
+
| `--mq-core-app-rose` | `#b71c5a` | App categorical rose, a data category in interactive apps only, never the danger status; marks, fills and text, 6.31:1 on white (ADR-0010). |
|
|
1326
1347
|
| `--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). |
|
|
1327
1348
|
| `--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). |
|
|
1328
1349
|
| `--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). |
|
package/dist/llms.txt
CHANGED
|
@@ -8,33 +8,33 @@ The links below point at the exact release on the jsDelivr CDN; pin that version
|
|
|
8
8
|
|
|
9
9
|
## Guidelines
|
|
10
10
|
|
|
11
|
-
- [Principles](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
12
|
-
- [Brand](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
13
|
-
- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
14
|
-
- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
15
|
-
- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
16
|
-
- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
17
|
-
- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
18
|
-
- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
19
|
-
- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
20
|
-
- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
21
|
-
- [App patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
22
|
-
- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
11
|
+
- [Principles](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/principles.md): The principles that decide the cases the other files do not cover
|
|
12
|
+
- [Brand](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/brand.md): Name, tagline, legal line, wordmark, monogram, favicon, icons
|
|
13
|
+
- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/voice.md): Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English
|
|
14
|
+
- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/writing.md): No em or en dash, titles, sentences and lists, French typography
|
|
15
|
+
- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/colour.md): Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps, the dark theme
|
|
16
|
+
- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/typography.md): Families, weights, roles, sizes and line heights
|
|
17
|
+
- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/layout.md): Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print
|
|
18
|
+
- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/charts.md): The ordered palette, highlight on grey, sequential and diverging use, marks, legends
|
|
19
|
+
- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/data-patterns.md): Numbers, amounts, dates, null versus zero, confidential and illustrative data
|
|
20
|
+
- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/accessibility.md): WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure
|
|
21
|
+
- [App patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/app-patterns.md): Apps only: the app shell, and the review, decision and history patterns of dense internal tools
|
|
22
|
+
- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/specialising.md): Framework neutrality, the four rules, the promotion tests, the one-off log
|
|
23
23
|
|
|
24
24
|
## Tokens and CSS
|
|
25
25
|
|
|
26
|
-
- [tokens.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
27
|
-
- [tokens.json](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
28
|
-
- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
29
|
-
- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
30
|
-
- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
31
|
-
- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
32
|
-
- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
33
|
-
- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
34
|
-
- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
26
|
+
- [tokens.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/dist/tokens.css): every token as a `--mq-*` custom property; load it first
|
|
27
|
+
- [tokens.json](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/dist/tokens.json): every token with its resolved value and description
|
|
28
|
+
- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/dist/tailwind.css): Tailwind 4 theme with 50 to 950 scales, for apps
|
|
29
|
+
- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/css/base.css): typography roles for documents
|
|
30
|
+
- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/css/components.css): the shared `mq-` document components
|
|
31
|
+
- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/css/slide.css): the 1280 by 720 slide canvas
|
|
32
|
+
- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/css/print.css): A4 pages with exact colour printing
|
|
33
|
+
- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/css/app.css): status badges, for interactive apps only
|
|
34
|
+
- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/fonts/fonts.css): self-hosted Outfit, Newsreader and Geist Mono
|
|
35
35
|
|
|
36
36
|
## Optional
|
|
37
37
|
|
|
38
|
-
- [llms-full.txt](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
39
|
-
- [kit-contract.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
40
|
-
- [Guidelines index](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.
|
|
38
|
+
- [llms-full.txt](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/dist/llms-full.txt): every guideline in full and every token with its value
|
|
39
|
+
- [kit-contract.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/dist/kit-contract.css): unprefixed names for homemade-claude-kit renderers only, never loaded in an app
|
|
40
|
+
- [Guidelines index](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.6.0/guidelines/README.md): the file list and where each legacy rule went
|
package/dist/tailwind.css
CHANGED
|
@@ -105,6 +105,8 @@
|
|
|
105
105
|
--color-border-strong: var(--mq-border-strong);
|
|
106
106
|
--color-panel-start: var(--mq-panel-start);
|
|
107
107
|
--color-panel-end: var(--mq-panel-end);
|
|
108
|
+
--color-brand-ground-start: var(--mq-brand-ground-start);
|
|
109
|
+
--color-brand-ground-end: var(--mq-brand-ground-end);
|
|
108
110
|
--color-on-navy-title: var(--mq-on-navy-title);
|
|
109
111
|
--color-on-navy-secondary: var(--mq-on-navy-secondary);
|
|
110
112
|
--color-on-navy-second-level: var(--mq-on-navy-second-level);
|
|
@@ -122,6 +124,8 @@
|
|
|
122
124
|
--color-app-cat-blue: var(--mq-app-cat-blue);
|
|
123
125
|
--color-app-cat-violet: var(--mq-app-cat-violet);
|
|
124
126
|
--color-app-cat-teal: var(--mq-app-cat-teal);
|
|
127
|
+
--color-app-cat-indigo: var(--mq-app-cat-indigo);
|
|
128
|
+
--color-app-cat-rose: var(--mq-app-cat-rose);
|
|
125
129
|
--color-change-added: var(--mq-change-added);
|
|
126
130
|
--color-change-modified: var(--mq-change-modified);
|
|
127
131
|
--color-change-modified-text: var(--mq-change-modified-text);
|
package/dist/tokens.css
CHANGED
|
@@ -43,6 +43,8 @@
|
|
|
43
43
|
--mq-core-app-blue: #3a8ff5; /** App categorical blue, marks and fills only, 3.27:1 on white (ADR-0008). */
|
|
44
44
|
--mq-core-app-violet: #5a2fbe; /** App categorical violet (ADR-0008). */
|
|
45
45
|
--mq-core-app-teal: #178a91; /** App categorical teal, marks and fills only, 4.13:1 on white (ADR-0008). */
|
|
46
|
+
--mq-core-app-indigo: #4a5aa8; /** App categorical indigo, a data category in interactive apps only, never the info status; marks, fills and text, 6.33:1 on white (ADR-0010). */
|
|
47
|
+
--mq-core-app-rose: #b71c5a; /** App categorical rose, a data category in interactive apps only, never the danger status; marks, fills and text, 6.31:1 on white (ADR-0010). */
|
|
46
48
|
--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). */
|
|
47
49
|
--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). */
|
|
48
50
|
--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). */
|
|
@@ -121,6 +123,8 @@
|
|
|
121
123
|
--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). */
|
|
122
124
|
--mq-panel-start: #0f2a5e; /** Light end of the navy panel gradient; the worst case for text on navy. */
|
|
123
125
|
--mq-panel-end: #0a2047; /** Dark end of the navy panel gradient. */
|
|
126
|
+
--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. */
|
|
127
|
+
--mq-brand-ground-end: #0a2047; /** Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes. */
|
|
124
128
|
--mq-on-navy-title: #ffffff; /** Owner ruling 2, 2026-10-09: titles, figures and icons on navy. */
|
|
125
129
|
--mq-on-navy-secondary: rgba(255, 255, 255, 0.68); /** Owner ruling 2, 2026-10-09: secondary text and labels on navy. */
|
|
126
130
|
--mq-on-navy-second-level: #c3cbdc; /** Owner ruling 2, 2026-10-09: second-level text on navy. */
|
|
@@ -145,6 +149,8 @@
|
|
|
145
149
|
--mq-app-cat-blue: #3a8ff5; /** App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008). */
|
|
146
150
|
--mq-app-cat-violet: #5a2fbe; /** App categorical hue: marks, fills and text (ADR-0008). */
|
|
147
151
|
--mq-app-cat-teal: #178a91; /** App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008). */
|
|
152
|
+
--mq-app-cat-indigo: #4a5aa8; /** App categorical hue: marks, fills and text, 6.33:1 on the surface; a data category, never the info status (ADR-0010). */
|
|
153
|
+
--mq-app-cat-rose: #b71c5a; /** App categorical hue: marks, fills and text, 6.31:1 on the surface; a data category, never the danger status (ADR-0010). */
|
|
148
154
|
--mq-change-added: #1c7e3f; /** Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008). */
|
|
149
155
|
--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). */
|
|
150
156
|
--mq-change-modified-text: #a35f00; /** Text of the change type modified (counts, labels), in apps only (ADR-0008). */
|
package/dist/tokens.json
CHANGED
|
@@ -389,6 +389,26 @@
|
|
|
389
389
|
],
|
|
390
390
|
"description": "App categorical teal, marks and fills only, 4.13:1 on white (ADR-0008)."
|
|
391
391
|
},
|
|
392
|
+
"--mq-core-app-indigo": {
|
|
393
|
+
"value": "#4a5aa8",
|
|
394
|
+
"type": "color",
|
|
395
|
+
"path": [
|
|
396
|
+
"core",
|
|
397
|
+
"color",
|
|
398
|
+
"app-indigo"
|
|
399
|
+
],
|
|
400
|
+
"description": "App categorical indigo, a data category in interactive apps only, never the info status; marks, fills and text, 6.33:1 on white (ADR-0010)."
|
|
401
|
+
},
|
|
402
|
+
"--mq-core-app-rose": {
|
|
403
|
+
"value": "#b71c5a",
|
|
404
|
+
"type": "color",
|
|
405
|
+
"path": [
|
|
406
|
+
"core",
|
|
407
|
+
"color",
|
|
408
|
+
"app-rose"
|
|
409
|
+
],
|
|
410
|
+
"description": "App categorical rose, a data category in interactive apps only, never the danger status; marks, fills and text, 6.31:1 on white (ADR-0010)."
|
|
411
|
+
},
|
|
392
412
|
"--mq-core-font-family-outfit": {
|
|
393
413
|
"value": "Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif",
|
|
394
414
|
"type": "fontFamily",
|
|
@@ -1198,6 +1218,26 @@
|
|
|
1198
1218
|
],
|
|
1199
1219
|
"description": "Dark end of the navy panel gradient."
|
|
1200
1220
|
},
|
|
1221
|
+
"--mq-brand-ground-start": {
|
|
1222
|
+
"value": "#0f2a5e",
|
|
1223
|
+
"type": "color",
|
|
1224
|
+
"path": [
|
|
1225
|
+
"semantic",
|
|
1226
|
+
"color",
|
|
1227
|
+
"brand-ground-start"
|
|
1228
|
+
],
|
|
1229
|
+
"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."
|
|
1230
|
+
},
|
|
1231
|
+
"--mq-brand-ground-end": {
|
|
1232
|
+
"value": "#0a2047",
|
|
1233
|
+
"type": "color",
|
|
1234
|
+
"path": [
|
|
1235
|
+
"semantic",
|
|
1236
|
+
"color",
|
|
1237
|
+
"brand-ground-end"
|
|
1238
|
+
],
|
|
1239
|
+
"description": "Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes."
|
|
1240
|
+
},
|
|
1201
1241
|
"--mq-on-navy-title": {
|
|
1202
1242
|
"value": "#ffffff",
|
|
1203
1243
|
"type": "color",
|
|
@@ -1460,6 +1500,28 @@
|
|
|
1460
1500
|
],
|
|
1461
1501
|
"description": "App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008)."
|
|
1462
1502
|
},
|
|
1503
|
+
"--mq-app-cat-indigo": {
|
|
1504
|
+
"value": "#4a5aa8",
|
|
1505
|
+
"type": "color",
|
|
1506
|
+
"path": [
|
|
1507
|
+
"semantic",
|
|
1508
|
+
"color",
|
|
1509
|
+
"app-cat",
|
|
1510
|
+
"indigo"
|
|
1511
|
+
],
|
|
1512
|
+
"description": "App categorical hue: marks, fills and text, 6.33:1 on the surface; a data category, never the info status (ADR-0010)."
|
|
1513
|
+
},
|
|
1514
|
+
"--mq-app-cat-rose": {
|
|
1515
|
+
"value": "#b71c5a",
|
|
1516
|
+
"type": "color",
|
|
1517
|
+
"path": [
|
|
1518
|
+
"semantic",
|
|
1519
|
+
"color",
|
|
1520
|
+
"app-cat",
|
|
1521
|
+
"rose"
|
|
1522
|
+
],
|
|
1523
|
+
"description": "App categorical hue: marks, fills and text, 6.31:1 on the surface; a data category, never the danger status (ADR-0010)."
|
|
1524
|
+
},
|
|
1463
1525
|
"--mq-change-added": {
|
|
1464
1526
|
"value": "#1c7e3f",
|
|
1465
1527
|
"type": "color",
|
package/guidelines/charts.md
CHANGED
|
@@ -37,7 +37,7 @@ Rules:
|
|
|
37
37
|
|
|
38
38
|
## App categorical palette (apps only)
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
Eight hues for interactive apps whose charts or lists show more categories than the four ordered series can carry, and three change types built on them (owner rulings 20 and 21, [ADR-0008](../docs/architecture/decisions/adr-0008-apps-have-a-categorical-palette.md)). The indigo and the rose were added for the parts of a rule row (owner ruling of 2026-11-15, [ADR-0010](../docs/architecture/decisions/adr-0010-apps-gain-indigo-and-rose-categorical-hues.md)). They are light only until their dark values are ruled, and they never appear in documents, which keep the ordered palette.
|
|
41
41
|
|
|
42
42
|
| Token | Value | Contrast on surface | Allowed for |
|
|
43
43
|
| :-- | :-- | :-- | :-- |
|
|
@@ -48,6 +48,8 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
48
48
|
| `--mq-app-cat-blue` | `#3a8ff5` | 3.27:1 | Marks and fills only |
|
|
49
49
|
| `--mq-app-cat-violet` | `#5a2fbe` | 8.12:1 | Marks, fills and text |
|
|
50
50
|
| `--mq-app-cat-teal` | `#178a91` | 4.13:1 | Marks and fills only |
|
|
51
|
+
| `--mq-app-cat-indigo` | `#4a5aa8` | 6.33:1 | Marks, fills and text |
|
|
52
|
+
| `--mq-app-cat-rose` | `#b71c5a` | 6.31:1 | Marks, fills and text |
|
|
51
53
|
|
|
52
54
|
| Change type | Token | Reads |
|
|
53
55
|
| :-- | :-- | :-- |
|
|
@@ -55,15 +57,24 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
55
57
|
| Modified | `--mq-change-modified`; its text `--mq-change-modified-text` | The orange; the orange text |
|
|
56
58
|
| Removed | `--mq-change-removed` | The vermillion |
|
|
57
59
|
|
|
58
|
-
Between the six hues and navy series 1, the smallest CIEDE2000 distance is 17.4 under normal vision, 11.9 under protanopia, 12.9 under deuteranopia and 8.4 under tritanopia (green and teal); the token test holds those floors.
|
|
60
|
+
Between the six hues of ADR-0008 and navy series 1, the smallest CIEDE2000 distance is 17.4 under normal vision, 11.9 under protanopia, 12.9 under deuteranopia and 8.4 under tritanopia (green and teal); the token test holds those floors. The indigo and the rose stay out of that set: the indigo sits 13.7 from the violet, so they are not added to a many-category chart beside it.
|
|
61
|
+
|
|
62
|
+
| Rule row part | Token |
|
|
63
|
+
| :-- | :-- |
|
|
64
|
+
| The condition (when the rule applies) | `--mq-app-cat-indigo` |
|
|
65
|
+
| What is paid | `--mq-app-cat-orange-text` |
|
|
66
|
+
| How much | `--mq-app-cat-rose` |
|
|
67
|
+
| The rule's own quoted text | `--mq-tertiary` |
|
|
68
|
+
|
|
69
|
+
The three part hues and the tertiary grey stay apart by CIEDE2000 24.0 under normal vision, 15.1 under protanopia, 9.8 under deuteranopia (rose and grey) and 8.9 under tritanopia (orange text and rose); the token test holds 15, 10, 9 and 8. The indigo and the rose share their lightness, so each part also carries its label.
|
|
59
70
|
|
|
60
71
|
Rules:
|
|
61
72
|
|
|
62
73
|
- A one-series chart stays navy (`--mq-chart-series-1`). Up to four series, the ordered palette applies in apps too; the categorical hues are for charts of five or more categories and for data categories.
|
|
63
74
|
- Fix each hue to its category across every view of the app; never let a charting library rotate through the palette.
|
|
64
|
-
- No series uses a status token. The vermillion is a data category ("removed from the list"), not an error: `--mq-danger` stays for errors. The green, the orange, the orange text and the vermillion sit CIEDE2000 3.3, 2.2, 2.8 and 7.9 from `--mq-success`, `--mq-warning-fill`, `--mq-warning` and `--mq-danger`, so code tells them apart by token name and the screen by the word or sign each carries, never by hue.
|
|
75
|
+
- No series uses a status token. The vermillion is a data category ("removed from the list"), not an error: `--mq-danger` stays for errors. The green, the orange, the orange text and the vermillion sit CIEDE2000 3.3, 2.2, 2.8 and 7.9 from `--mq-success`, `--mq-warning-fill`, `--mq-warning` and `--mq-danger`, so code tells them apart by token name and the screen by the word or sign each carries, never by hue. The indigo sits 8.5 from `--mq-info` and the rose 17.4 from `--mq-danger`, under the same rule.
|
|
65
76
|
- Marks sit on the surface (`--mq-surface`), where every hue meets 3:1 and needs no outline. On the canvas the orange falls to 2.88:1, and on the recessed surface the orange and the blue fall below 3:1, so a chart in these hues sits in a white card.
|
|
66
|
-
- Text in a hue meets 4.5:1: the green, the vermillion and the
|
|
77
|
+
- Text in a hue meets 4.5:1: the green, the vermillion, the violet, the indigo and the rose may be text, orange text reads `--mq-app-cat-orange-text`, and the blue and the teal are never text.
|
|
67
78
|
- Never colour alone: the green and the vermillion have almost the same lightness, so in greyscale they cannot be told apart. Every mark carries a direct label or a legend entry, and a change type its sign (+, −) or its word; label the green and the teal directly where they touch.
|
|
68
79
|
- A change type keeps its hue wherever a change is listed (badge, dot, filter, count) and keeps its mark style on top: an added value with +, a removed value struck through.
|
|
69
80
|
|
package/guidelines/colour.md
CHANGED
|
@@ -96,7 +96,7 @@ Every status colour comes with an icon or a word (WCAG 1.4.1):
|
|
|
96
96
|
- a flag is a coloured word, and only on the rows that need attention, so normal rows stay quiet;
|
|
97
97
|
- light badge backgrounds come from the 50 and 100 steps of the status scales in `dist/tailwind.css`, never a hand-picked tint.
|
|
98
98
|
|
|
99
|
-
The red of the old Paracel theme survives only as `--mq-danger` ([ADR-0003](../docs/architecture/decisions/adr-0003-navy-is-the-single-brand-accent.md)). The app categorical palette and the change types (`--mq-app-cat-*`, `--mq-change-*`) are data categories, never statuses; their values and rules are in [charts](charts.md) ([ADR-0008](../docs/architecture/decisions/adr-0008-apps-have-a-categorical-palette.md)). Other app-specific hues, such as the annotation colours of regulatory text, stay local in the app under its own prefix until a second consumer needs them ([specialising](specialising.md)).
|
|
99
|
+
The red of the old Paracel theme survives only as `--mq-danger` ([ADR-0003](../docs/architecture/decisions/adr-0003-navy-is-the-single-brand-accent.md)). The app categorical palette and the change types (`--mq-app-cat-*`, `--mq-change-*`) are data categories, never statuses; their values and rules are in [charts](charts.md) ([ADR-0008](../docs/architecture/decisions/adr-0008-apps-have-a-categorical-palette.md), [ADR-0010](../docs/architecture/decisions/adr-0010-apps-gain-indigo-and-rose-categorical-hues.md)). Other app-specific hues, such as the annotation colours of regulatory text, stay local in the app under its own prefix until a second consumer needs them ([specialising](specialising.md)).
|
|
100
100
|
|
|
101
101
|
## Chart colours
|
|
102
102
|
|
|
@@ -134,6 +134,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
|
|
|
134
134
|
| `--mq-focus-ring-color` | `#9fb3e8`, the light navy | Focus ring on dark backgrounds | 8.71:1 on canvas |
|
|
135
135
|
| `--mq-panel-start` | `#2f4c8f` | Light end of the navy panel gradient | Background, white 8.23:1 on the panel start |
|
|
136
136
|
| `--mq-panel-end` | `#0f2a5e` | Dark end of the navy panel gradient | Background |
|
|
137
|
+
| `--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 |
|
|
138
|
+
| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | Background |
|
|
137
139
|
| `--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 |
|
|
138
140
|
| `--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 |
|
|
139
141
|
| `--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
|
|
|
144
146
|
|
|
145
147
|
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).
|
|
146
148
|
|
|
149
|
+
**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.
|
|
150
|
+
|
|
147
151
|
**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.
|
|
148
152
|
|
|
149
153
|
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
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medquantis/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "MedQuantis design tokens, shared CSS, assets, guidelines and Claude skill.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
"@playwright/test": "1.64.1",
|
|
75
75
|
"ajv": "8.20.0",
|
|
76
76
|
"lucide": "1.59.0",
|
|
77
|
-
"postcss": "8.5.
|
|
78
|
-
"style-dictionary": "5.
|
|
77
|
+
"postcss": "8.5.32",
|
|
78
|
+
"style-dictionary": "5.8.0",
|
|
79
79
|
"stylelint": "17.16.0",
|
|
80
80
|
"stylelint-declaration-strict-value": "1.12.1",
|
|
81
81
|
"stylelint-value-no-unknown-custom-properties": "6.1.1",
|