@medquantis/design-system 1.3.0 → 1.4.0

package/README.md

@@ -14,7 +14,7 @@ The single source of the MedQuantis visual identity: design tokens, shared CSS,
 | `dist/themes/dark.css`, `dist/themes/dark.json` | The dark theme: the semantic roles re-valued under `.dark`, for apps, documents and slides (see Dark theme) |
 | `dist/kit-contract.css` | homemade-claude-kit renderers only, deployed as `docs/ux/tokens.css`; never loaded in an app. Carries the latin fonts as embedded data, since the renderers inline this one file |
 | `css/` | Shared `mq-` components, slide canvas and A4 print styles for build-less media (see Shared CSS) |
-| `fonts/fonts.css` | Self-hosted Outfit, Newsreader and Geist Mono (variable woff2, latin and latin-ext, relative paths); deploy the folder whole |
+| `fonts/fonts.css`, `fonts/` | Self-hosted Outfit, Newsreader and Geist Mono (variable woff2, latin and latin-ext, relative paths); deploy the folder whole. The woff2 files are exported too, for preloading (see Preloading the fonts) |
 | `icons/lucide.min.js` | A pinned Lucide build (version and hash in `icons/manifest.json`) |
 | `brand/` | Monogram, favicon set and wordmark: `wordmark-on-light` and `wordmark-on-navy`, live text for screen and `-print` with outlined text |
 | `guidelines/` | Brand, voice, colour, typography, chart, data and accessibility rules, and the app patterns of dense internal tools |
@@ -128,6 +128,18 @@ echo "sha384-$(openssl dgst -sha384 -binary dist/tokens.css | openssl base64 -A)
 
 Every other shipped file (`css/*.css`, `fonts/fonts.css`, `dist/kit-contract.css`) works the same way, each with its own hash. Fonts referenced by `fonts.css` load relative to it, so serve the stylesheet and its fonts from the same release URL.
 
+### Preloading the fonts
+
+`fonts.css` declares every face with `font-display: swap`, so a browser draws the page in a fallback font and redraws it once the woff2 file arrives; on a slow connection the redraw moves the text and counts as layout shift. A page that wants to avoid it preloads the latin files it uses above the fold, at most these three (about 32 KB Outfit, 58 KB Newsreader and 23 KB Geist Mono); the latin-ext and italic files stay lazy. A bundler resolves them through the `./fonts/*` export:
+
+```ts
+import outfit from "@medquantis/design-system/fonts/outfit/outfit-latin-wght-normal.woff2?url";
+import newsreader from "@medquantis/design-system/fonts/newsreader/newsreader-latin-wght-normal.woff2?url";
+import geistMono from "@medquantis/design-system/fonts/geist-mono/geist-mono-latin-wght-normal.woff2?url";
+```
+
+Each one becomes `<link rel="preload" as="font" type="font/woff2" href="..." crossorigin>` in the page head. The `crossorigin` attribute is required even on the same origin, since fonts are always fetched in CORS mode and a preload without it is downloaded twice. Preload only the faces the first screen shows: an unused preload costs bandwidth and a console warning.
+
 ## Using it from the delivery-comms kit
 
 The homemade-claude-kit renders decks (`com-slide-deck`), artefact views (`com-artefact-viz`) and release notes (`com-release-note`) with the design system a project pins. A project pins this package once, with the kit's `ux-design-system` skill, at an exact version (1.1.0 is the first release with the kit modules; 1.2.0 adds the `dark` module and the classification cell):

package/dist/DESIGN.md

@@ -1,6 +1,6 @@
 ---
 name: MedQuantis
-description: The MedQuantis design system 1.3.0. Generated from tokens/ and guidelines/ by the design-system build. Do not edit. Names are the homemade-claude-kit role names where the kit has a role, else the tokens.css name without --mq-; the tables below map each to its --mq-* token.
+description: The MedQuantis design system 1.4.0. Generated from tokens/ and guidelines/ by the design-system build. Do not edit. Names are the homemade-claude-kit role names where the kit has a role, else the tokens.css name without --mq-; the tables below map each to its --mq-* token.
 colors:
   primary: "{colors.accent}"
   ink: "#1a1a1a"
@@ -140,7 +140,7 @@ spacing:
 
 # MedQuantis design
 
-Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.3.0. Do not edit. Each section opens with a table that maps the front matter names to the --mq-* custom properties of tokens.css, the names the guideline text uses; the rules are the MedQuantis guidelines, section by section.
+Generated from tokens/ and guidelines/ by the build of @medquantis/design-system 1.4.0. Do not edit. Each section opens with a table that maps the front matter names to the --mq-* custom properties of tokens.css, the names the guideline text uses; the rules are the MedQuantis guidelines, section by section.
 
 ## Overview
 

package/dist/llms-full.txt

@@ -1159,7 +1159,7 @@ Every local one-off (a component or a token a consumer adds under its own prefix
 
 # Tokens
 
-Every token of release 1.3.0, generated from dist/tokens.json. Consumers use the semantic names; the `--mq-core-*` names exist so semantic tokens can point at them. A deprecated token names its replacement.
+Every token of release 1.4.0, generated from dist/tokens.json. Consumers use the semantic names; the `--mq-core-*` names exist so semantic tokens can point at them. A deprecated token names its replacement.
 
 ## Semantic tokens
 

package/dist/llms.txt

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

package/package.json

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