@medquantis/design-system 1.5.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/dist/DESIGN.md +22 -7
- package/dist/llms-full.txt +21 -6
- package/dist/llms.txt +24 -24
- package/dist/tailwind.css +2 -0
- package/dist/tokens.css +4 -0
- package/dist/tokens.json +42 -0
- package/guidelines/charts.md +15 -4
- package/guidelines/colour.md +1 -1
- package/package.json +3 -3
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"
|
|
@@ -56,6 +56,8 @@ colors:
|
|
|
56
56
|
app-cat-blue: "#3a8ff5"
|
|
57
57
|
app-cat-violet: "#5a2fbe"
|
|
58
58
|
app-cat-teal: "#178a91"
|
|
59
|
+
app-cat-indigo: "#4a5aa8"
|
|
60
|
+
app-cat-rose: "#b71c5a"
|
|
59
61
|
change-added: "#1c7e3f"
|
|
60
62
|
change-modified: "#d78000"
|
|
61
63
|
change-modified-text: "#a35f00"
|
|
@@ -142,7 +144,7 @@ spacing:
|
|
|
142
144
|
|
|
143
145
|
# MedQuantis design
|
|
144
146
|
|
|
145
|
-
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.
|
|
146
148
|
|
|
147
149
|
## Overview
|
|
148
150
|
|
|
@@ -298,6 +300,8 @@ Markdown is written one line per paragraph or list item, never hard-wrapped at a
|
|
|
298
300
|
| `colors.app-cat-blue` | `--mq-app-cat-blue` | `#3a8ff5` |
|
|
299
301
|
| `colors.app-cat-violet` | `--mq-app-cat-violet` | `#5a2fbe` |
|
|
300
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` |
|
|
301
305
|
| `colors.change-added` | `--mq-change-added` | `#1c7e3f` |
|
|
302
306
|
| `colors.change-modified` | `--mq-change-modified` | `#d78000` |
|
|
303
307
|
| `colors.change-modified-text` | `--mq-change-modified-text` | `#a35f00` |
|
|
@@ -442,7 +446,7 @@ Every status colour comes with an icon or a word (WCAG 1.4.1):
|
|
|
442
446
|
- a flag is a coloured word, and only on the rows that need attention, so normal rows stay quiet;
|
|
443
447
|
- light badge backgrounds come from the 50 and 100 steps of the status scales in `dist/tailwind.css`, never a hand-picked tint.
|
|
444
448
|
|
|
445
|
-
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).
|
|
446
450
|
|
|
447
451
|
### Colour: Chart colours
|
|
448
452
|
|
|
@@ -572,7 +576,7 @@ Rules:
|
|
|
572
576
|
|
|
573
577
|
### Charts: App categorical palette (apps only)
|
|
574
578
|
|
|
575
|
-
|
|
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.
|
|
576
580
|
|
|
577
581
|
| Token | Value | Contrast on surface | Allowed for |
|
|
578
582
|
| :-- | :-- | :-- | :-- |
|
|
@@ -583,6 +587,8 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
583
587
|
| `--mq-app-cat-blue` | `#3a8ff5` | 3.27:1 | Marks and fills only |
|
|
584
588
|
| `--mq-app-cat-violet` | `#5a2fbe` | 8.12:1 | Marks, fills and text |
|
|
585
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 |
|
|
586
592
|
|
|
587
593
|
| Change type | Token | Reads |
|
|
588
594
|
| :-- | :-- | :-- |
|
|
@@ -590,15 +596,24 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
590
596
|
| Modified | `--mq-change-modified`; its text `--mq-change-modified-text` | The orange; the orange text |
|
|
591
597
|
| Removed | `--mq-change-removed` | The vermillion |
|
|
592
598
|
|
|
593
|
-
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.
|
|
594
609
|
|
|
595
610
|
Rules:
|
|
596
611
|
|
|
597
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.
|
|
598
613
|
- Fix each hue to its category across every view of the app; never let a charting library rotate through the palette.
|
|
599
|
-
- 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.
|
|
600
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.
|
|
601
|
-
- 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.
|
|
602
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.
|
|
603
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.
|
|
604
619
|
|
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
|
|
|
@@ -637,7 +637,7 @@ Rules:
|
|
|
637
637
|
|
|
638
638
|
## App categorical palette (apps only)
|
|
639
639
|
|
|
640
|
-
|
|
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.
|
|
641
641
|
|
|
642
642
|
| Token | Value | Contrast on surface | Allowed for |
|
|
643
643
|
| :-- | :-- | :-- | :-- |
|
|
@@ -648,6 +648,8 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
648
648
|
| `--mq-app-cat-blue` | `#3a8ff5` | 3.27:1 | Marks and fills only |
|
|
649
649
|
| `--mq-app-cat-violet` | `#5a2fbe` | 8.12:1 | Marks, fills and text |
|
|
650
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 |
|
|
651
653
|
|
|
652
654
|
| Change type | Token | Reads |
|
|
653
655
|
| :-- | :-- | :-- |
|
|
@@ -655,15 +657,24 @@ Six hues for interactive apps whose charts or lists show more categories than th
|
|
|
655
657
|
| Modified | `--mq-change-modified`; its text `--mq-change-modified-text` | The orange; the orange text |
|
|
656
658
|
| Removed | `--mq-change-removed` | The vermillion |
|
|
657
659
|
|
|
658
|
-
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.
|
|
659
670
|
|
|
660
671
|
Rules:
|
|
661
672
|
|
|
662
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.
|
|
663
674
|
- Fix each hue to its category across every view of the app; never let a charting library rotate through the palette.
|
|
664
|
-
- 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.
|
|
665
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.
|
|
666
|
-
- 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.
|
|
667
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.
|
|
668
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.
|
|
669
680
|
|
|
@@ -1163,7 +1174,7 @@ Every local one-off (a component or a token a consumer adds under its own prefix
|
|
|
1163
1174
|
|
|
1164
1175
|
# Tokens
|
|
1165
1176
|
|
|
1166
|
-
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.
|
|
1167
1178
|
|
|
1168
1179
|
## Semantic tokens
|
|
1169
1180
|
|
|
@@ -1221,6 +1232,8 @@ Every token of release 1.5.0, generated from dist/tokens.json. Consumers use the
|
|
|
1221
1232
|
| `--mq-app-cat-blue` | `#3a8ff5` | App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008). |
|
|
1222
1233
|
| `--mq-app-cat-violet` | `#5a2fbe` | App categorical hue: marks, fills and text (ADR-0008). |
|
|
1223
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). |
|
|
1224
1237
|
| `--mq-change-added` | `#1c7e3f` | Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008). |
|
|
1225
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). |
|
|
1226
1239
|
| `--mq-change-modified-text` | `#a35f00` | Text of the change type modified (counts, labels), in apps only (ADR-0008). |
|
|
@@ -1329,6 +1342,8 @@ Every token of release 1.5.0, generated from dist/tokens.json. Consumers use the
|
|
|
1329
1342
|
| `--mq-core-app-blue` | `#3a8ff5` | App categorical blue, marks and fills only, 3.27:1 on white (ADR-0008). |
|
|
1330
1343
|
| `--mq-core-app-violet` | `#5a2fbe` | App categorical violet (ADR-0008). |
|
|
1331
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). |
|
|
1332
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). |
|
|
1333
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). |
|
|
1334
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
|
@@ -124,6 +124,8 @@
|
|
|
124
124
|
--color-app-cat-blue: var(--mq-app-cat-blue);
|
|
125
125
|
--color-app-cat-violet: var(--mq-app-cat-violet);
|
|
126
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);
|
|
127
129
|
--color-change-added: var(--mq-change-added);
|
|
128
130
|
--color-change-modified: var(--mq-change-modified);
|
|
129
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). */
|
|
@@ -147,6 +149,8 @@
|
|
|
147
149
|
--mq-app-cat-blue: #3a8ff5; /** App categorical hue for marks and fills on the surface only (3.27:1), never text (ADR-0008). */
|
|
148
150
|
--mq-app-cat-violet: #5a2fbe; /** App categorical hue: marks, fills and text (ADR-0008). */
|
|
149
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). */
|
|
150
154
|
--mq-change-added: #1c7e3f; /** Change type added, in apps only, always with its sign or its word: marks, fills and text (ADR-0008). */
|
|
151
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). */
|
|
152
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",
|
|
@@ -1480,6 +1500,28 @@
|
|
|
1480
1500
|
],
|
|
1481
1501
|
"description": "App categorical hue for marks and fills on the surface only (4.13:1), never text (ADR-0008)."
|
|
1482
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
|
+
},
|
|
1483
1525
|
"--mq-change-added": {
|
|
1484
1526
|
"value": "#1c7e3f",
|
|
1485
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
|
|
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",
|