@medquantis/design-system 1.4.0 → 1.5.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 +10 -2
- 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 +7 -1
- package/dist/llms.txt +24 -24
- package/dist/tailwind.css +2 -0
- package/dist/tokens.css +2 -0
- package/dist/tokens.json +20 -0
- package/guidelines/colour.md +4 -0
- package/kit-manifest.json +1 -1
- package/package.json +1 -1
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.5.0. Generated from tokens/ and guidelines/ by the design-system build. Do not edit. Names are the homemade-claude-kit role names where the kit has a role, else the tokens.css name without --mq-; the tables below map each to its --mq-* token.
|
|
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"
|
|
@@ -140,7 +142,7 @@ spacing:
|
|
|
140
142
|
|
|
141
143
|
# MedQuantis design
|
|
142
144
|
|
|
143
|
-
Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.
|
|
145
|
+
Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.5.0. Do not edit. Each section opens with a table that maps the front matter names to the --mq-* custom properties of tokens.css, the names the guideline text uses; the rules are the MedQuantis guidelines, section by section.
|
|
144
146
|
|
|
145
147
|
## Overview
|
|
146
148
|
|
|
@@ -274,6 +276,8 @@ Markdown is written one line per paragraph or list item, never hard-wrapped at a
|
|
|
274
276
|
| `colors.border-strong` | `--mq-border-strong` | `#5d6f91` |
|
|
275
277
|
| `colors.panel-start` | `--mq-panel-start` | `#0f2a5e` |
|
|
276
278
|
| `colors.panel-end` | `--mq-panel-end` | `#0a2047` |
|
|
279
|
+
| `colors.brand-ground-start` | `--mq-brand-ground-start` | `#0f2a5e` |
|
|
280
|
+
| `colors.brand-ground-end` | `--mq-brand-ground-end` | `#0a2047` |
|
|
277
281
|
| `colors.on-navy-title` | `--mq-on-navy-title` | `#ffffff` |
|
|
278
282
|
| `colors.on-navy-secondary` | `--mq-on-navy-secondary` | `rgba(255, 255, 255, 0.68)` |
|
|
279
283
|
| `colors.on-navy-second-level` | `--mq-on-navy-second-level` | `#c3cbdc` |
|
|
@@ -476,6 +480,8 @@ Every ratio below is the WCAG 2.x contrast with the dark values, on the dark can
|
|
|
476
480
|
| `--mq-focus-ring-color` | `#9fb3e8`, the light navy | Focus ring on dark backgrounds | 8.71:1 on canvas |
|
|
477
481
|
| `--mq-panel-start` | `#2f4c8f` | Light end of the navy panel gradient | Background, white 8.23:1 on the panel start |
|
|
478
482
|
| `--mq-panel-end` | `#0f2a5e` | Dark end of the navy panel gradient | Background |
|
|
483
|
+
| `--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 |
|
|
484
|
+
| `--mq-brand-ground-end` | `#0a2047`, the same in light | Dark end of the brand ground (owner ruling 22) | Background |
|
|
479
485
|
| `--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
486
|
| `--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
487
|
| `--mq-shadow-live` | a 3 px ring of the dark success green `#6fbf73` at 17 %; in light the success green at 17 % | Apps only: the halo of a live dot, the row in force on a timeline (app patterns) | Decorative |
|
|
@@ -486,6 +492,8 @@ Accent text on the pale fills reads `--mq-accent-highlight` in both themes (owne
|
|
|
486
492
|
|
|
487
493
|
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
494
|
|
|
495
|
+
**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.
|
|
496
|
+
|
|
489
497
|
**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
498
|
|
|
491
499
|
The on-navy tier on the dark panel (owner ruling 19): two roles take dark values, the others keep their light values and are checked again on the lighter dark panel start.
|
package/dist/kit/brand.css
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
|
@@ -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.
|
|
@@ -1159,7 +1163,7 @@ Every local one-off (a component or a token a consumer adds under its own prefix
|
|
|
1159
1163
|
|
|
1160
1164
|
# Tokens
|
|
1161
1165
|
|
|
1162
|
-
Every token of release 1.
|
|
1166
|
+
Every token of release 1.5.0, generated from dist/tokens.json. Consumers use the semantic names; the `--mq-core-*` names exist so semantic tokens can point at them. A deprecated token names its replacement.
|
|
1163
1167
|
|
|
1164
1168
|
## Semantic tokens
|
|
1165
1169
|
|
|
@@ -1191,6 +1195,8 @@ Every token of release 1.4.0, generated from dist/tokens.json. Consumers use the
|
|
|
1191
1195
|
| `--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
1196
|
| `--mq-panel-start` | `#0f2a5e` | Light end of the navy panel gradient; the worst case for text on navy. |
|
|
1193
1197
|
| `--mq-panel-end` | `#0a2047` | Dark end of the navy panel gradient. |
|
|
1198
|
+
| `--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. |
|
|
1199
|
+
| `--mq-brand-ground-end` | `#0a2047` | Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes. |
|
|
1194
1200
|
| `--mq-on-navy-title` | `#ffffff` | Owner ruling 2, 2026-10-09: titles, figures and icons on navy. |
|
|
1195
1201
|
| `--mq-on-navy-secondary` | `rgba(255, 255, 255, 0.68)` | Owner ruling 2, 2026-10-09: secondary text and labels on navy. |
|
|
1196
1202
|
| `--mq-on-navy-second-level` | `#c3cbdc` | Owner ruling 2, 2026-10-09: second-level text on navy. |
|
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.5.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.5.0/guidelines/brand.md): Name, tagline, legal line, wordmark, monogram, favicon, icons
|
|
13
|
+
- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/voice.md): Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English
|
|
14
|
+
- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/writing.md): No em or en dash, titles, sentences and lists, French typography
|
|
15
|
+
- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/colour.md): Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps, the dark theme
|
|
16
|
+
- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/typography.md): Families, weights, roles, sizes and line heights
|
|
17
|
+
- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/layout.md): Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print
|
|
18
|
+
- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/charts.md): The ordered palette, highlight on grey, sequential and diverging use, marks, legends
|
|
19
|
+
- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/data-patterns.md): Numbers, amounts, dates, null versus zero, confidential and illustrative data
|
|
20
|
+
- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/accessibility.md): WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure
|
|
21
|
+
- [App patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/app-patterns.md): Apps only: the app shell, and the review, decision and history patterns of dense internal tools
|
|
22
|
+
- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/guidelines/specialising.md): Framework neutrality, the four rules, the promotion tests, the one-off log
|
|
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.5.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.5.0/dist/tokens.json): every token with its resolved value and description
|
|
28
|
+
- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/dist/tailwind.css): Tailwind 4 theme with 50 to 950 scales, for apps
|
|
29
|
+
- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/base.css): typography roles for documents
|
|
30
|
+
- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/components.css): the shared `mq-` document components
|
|
31
|
+
- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/slide.css): the 1280 by 720 slide canvas
|
|
32
|
+
- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/print.css): A4 pages with exact colour printing
|
|
33
|
+
- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.0/css/app.css): status badges, for interactive apps only
|
|
34
|
+
- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.5.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.5.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.5.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.5.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);
|
package/dist/tokens.css
CHANGED
|
@@ -121,6 +121,8 @@
|
|
|
121
121
|
--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
122
|
--mq-panel-start: #0f2a5e; /** Light end of the navy panel gradient; the worst case for text on navy. */
|
|
123
123
|
--mq-panel-end: #0a2047; /** Dark end of the navy panel gradient. */
|
|
124
|
+
--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. */
|
|
125
|
+
--mq-brand-ground-end: #0a2047; /** Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes. */
|
|
124
126
|
--mq-on-navy-title: #ffffff; /** Owner ruling 2, 2026-10-09: titles, figures and icons on navy. */
|
|
125
127
|
--mq-on-navy-secondary: rgba(255, 255, 255, 0.68); /** Owner ruling 2, 2026-10-09: secondary text and labels on navy. */
|
|
126
128
|
--mq-on-navy-second-level: #c3cbdc; /** Owner ruling 2, 2026-10-09: second-level text on navy. */
|
package/dist/tokens.json
CHANGED
|
@@ -1198,6 +1198,26 @@
|
|
|
1198
1198
|
],
|
|
1199
1199
|
"description": "Dark end of the navy panel gradient."
|
|
1200
1200
|
},
|
|
1201
|
+
"--mq-brand-ground-start": {
|
|
1202
|
+
"value": "#0f2a5e",
|
|
1203
|
+
"type": "color",
|
|
1204
|
+
"path": [
|
|
1205
|
+
"semantic",
|
|
1206
|
+
"color",
|
|
1207
|
+
"brand-ground-start"
|
|
1208
|
+
],
|
|
1209
|
+
"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."
|
|
1210
|
+
},
|
|
1211
|
+
"--mq-brand-ground-end": {
|
|
1212
|
+
"value": "#0a2047",
|
|
1213
|
+
"type": "color",
|
|
1214
|
+
"path": [
|
|
1215
|
+
"semantic",
|
|
1216
|
+
"color",
|
|
1217
|
+
"brand-ground-end"
|
|
1218
|
+
],
|
|
1219
|
+
"description": "Owner ruling 22, 2026-11-09: dark end of the brand ground, the same in both themes."
|
|
1220
|
+
},
|
|
1201
1221
|
"--mq-on-navy-title": {
|
|
1202
1222
|
"value": "#ffffff",
|
|
1203
1223
|
"type": "color",
|
package/guidelines/colour.md
CHANGED
|
@@ -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