@maggioli-design-system/design-tokens 15.2.2 → 15.4.0

package/CHANGELOG.md

@@ -4,6 +4,37 @@ Every release of `@maggioli-design-system/design-tokens`, newest first. Each sec
 release with the same tag, written by git-cliff from the conventional commits of the
 package.
 
+## [design-tokens@15.4.0] - 2026-11-04
+
+### Bug Fixes
+
+- *(design-tokens)* Give the title roles of the Tailwind theme the literal of their level
+
+### Documentation
+
+- *(magma,design-tokens,styles)* Point the guides to the domains
+
+### Features
+
+- *(design-tokens)* The role tokens of the design language, rhythm, widths and titles
+- *(design-tokens,styles,mds-text)* The reading measure reaches the text (56ch)
+- *(design-tokens,styles)* The rhythm of the row of actions, content-actions
+- *(design-tokens,styles)* The threshold of a row of actions as --magma-container-actions
+
+## [design-tokens@15.3.0] - 2026-10-24
+
+### Documentation
+
+- *(design-tokens,magma)* Document the Android, iOS and Flutter color files
+
+### Features
+
+- *(design-tokens)* Describe every group of the DTCG export and each typography style
+
+### Refactor
+
+- *(design-tokens,styles)* Print the dark selectors of the palette from one list
+
 ## [design-tokens@15.2.2] - 2026-10-21
 
 ### Bug Fixes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2026 Maggioli S.p.A.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,9 +1,55 @@
 # @maggioli-design-system/design-tokens
 
-Generates design tokens for colors and other type of agnostic tokens targeted on specific plaforms, like web, Dart, Android or iOS formats.
+Generates design tokens for colors and other type of agnostic tokens targeted on specific platforms, like web, Dart, Android or iOS formats (see [Native platforms](#native-platforms)).
 
 This library is based on [Adobe Leonardo][adobe-leonardo] and [Amazon Style Dictionary][style-dictionary].
 
+# Architecture
+
+One configuration generates the palette; Style Dictionary writes it, with the other tokens, in
+every format, and the DTCG export describes the whole set, the semantic layer included. `styles`
+builds on the CSS and on the semantic model; the tools read the DTCG data where the package is
+installed.
+
+```mermaid
+flowchart LR
+  subgraph dt["design-tokens"]
+    GEN["generator, CLI, src/lib<br/>.magma-design-tokensrc.json, Leonardo"]
+    TOK["tokens/<br/>sizing, typography, screen"]
+    SD["Style Dictionary<br/>src/formats"]
+    MODEL["semantic.model.ts<br/>dark-scheme.ts"]
+    DTCG["DTCG export<br/>scripts/dtcg"]
+    GEN --> SD
+    TOK --> SD
+    MODEL --> DTCG
+    SD --> DTCG
+  end
+  SD & MODEL & DTCG -->|"dist/css, dist/dtcg, semantic model"| ST["styles"]
+  DTCG -->|"dist/dtcg"| WC["stencil<br/>usage docs check"]
+  DTCG -.->|"dist/dtcg"| LINT["lint<br/>core, MCP server"]
+  DTCG -.->|"dist/dtcg"| DOCS(["docs site, design tools"])
+  SD -.->|"android, ios-swift, flutter"| NATIVE(["native apps"])
+  SD -.->|"dist/json"| FIGMA(["Figma variables"])
+  GEN -.->|"npx magma-design-tokens"| PROD(["a product palette"])
+  class LINT ai
+  class GEN,TOK,SD,MODEL,DTCG,ST,FIGMA,PROD visual
+  class WC components
+  class DOCS,NATIVE outside
+  class dt area
+  classDef ai fill:#efe5ff,stroke:#8250df,color:#3e1f79
+  classDef assets fill:#fff1d6,stroke:#bf8700,color:#5c3d00
+  classDef visual fill:#dcf5ec,stroke:#1a7f64,color:#0b4a3a
+  classDef components fill:#ddf0ff,stroke:#0969da,color:#0a3069
+  classDef tooling fill:#eceff3,stroke:#57606a,color:#24292f
+  classDef outside fill:#ffffff,stroke:#8c959f,color:#24292f
+  classDef area fill:none,stroke:#8c959f
+```
+
+Rectangles: this repository; rounded boxes: outside it. Solid arrows: inside the repository;
+dashed: where the package is installed. Labels: the file, export or command that crosses.
+Colours: purple ai, amber assets, teal visual, blue components, grey tooling, white outside
+([convention](../../docs/ARCHITECTURE.md#diagrams-of-the-projects)).
+
 # Compatibility
 
 Use the version of this package matching the major version of [`@maggioli-design-system/magma`](https://www.npmjs.com/package/@maggioli-design-system/magma) you are using:
@@ -56,12 +102,15 @@ The theme and the contrast preference are one modifier because they are not inde
 | :--- | :--- | :--- |
 | `palette.<group>.<family>.<step>` | `--tone-neutral-08` | The color primitives. The family's own color is `$root` (`--status-info`), the paper of the mode is `seed`. Aliased families (`variant`) are aliases of the family they name. |
 | `magma.<group>.<key>` | `--magma-surface-default` | The semantic roles, as aliases of the primitive they point at. `magma.tint` holds the internal `--magma-tint-*` pointers that themes and contrast repoint; an accent with an infix is a group of its own (`magma.accent-ai`). |
+| `magma.rhythm.<id>`, `magma.width.<id>` | `--magma-rhythm-between-fields` | The roles of the design language (#1189): the space of each relation of the rhythm, an alias of its size step, and the widths. |
 | `font.<family>` | `--font-title` | Font families. |
 | `text-size.<family>.<style>` | `--text-size-title-h1` | The size of a style (`$root`) and its `font-weight`, `letter-spacing`, `line-height`. |
-| `typography.<family>.<style>` | none | The same style as one `typography` token. |
+| `typography.<family>.<style>` | none | The same style as one `typography` token. The titles by role (`typography.title.page`, `section`, `dialog`, `part`, `group`) are aliases of the level they are styled as, and so are their `text-size` parts. |
 | `leading`, `spacing`, `container`, `breakpoint`, `aspect`, `border`, `radius`, `shadow`, `duration`, `ease` | `--leading-md`, `--spacing-xs`, ... | One group per CSS prefix. `spacing.$root` is `--spacing`, the multiplier of the numeric utilities. |
 | `size.<step>` | none | The primitive sizing scale that spacing, container, border and radius name. |
 
+Every group of `base.tokens.json` has a `$description` that says what it is for, and so do the semantic roles and the typography styles; a primitive is described by its group (a ramp by its family). The other sets restate values, without descriptions.
+
 Every token carries `$extensions["it.maggioli.magma"]`:
 
 - `css`: the custom property it is published as;
@@ -75,12 +124,38 @@ Where the JSON and the CSS write a value differently:
 - **Line height** of a `typography` token: a multiplier of the font size, as DTCG defines it. The `line-height` token of the style keeps the length.
 - **Aspect ratios**: a `number` (`5/3` becomes `1.6666666666666667`); `cssValue` keeps the ratio.
 - **Ring shadows** (`--shadow-ring*`): the CSS draws them with `--tone-neutral-01`; the JSON resolves that color, so `mode-dark` restates them.
-- **No DTCG type**: the text measures `--spacing-phrase`, `-prose`, `-text`, `-title` (in `ch`) and the `--transition-property-*` lists are listed in the `cssOnly` extension of their group.
+- **No DTCG type**: the text measures `--spacing-phrase`, `-prose`, `-title` (in `ch`) and `-text` (`var()` of the reading measure), the widths `--magma-width-reading` (in `ch`), `-form` and `-dialog` (written from other roles), and the `--transition-property-*` lists are listed in the `cssOnly` extension of their group, each `{ css, value }`, with its `description` where it has one.
+- **Titles by role**: the CSS points at the custom property of the level (`--text-size-title-page: var(--text-size-title-h3)`), kept in `cssValue`; the JSON is an alias of the level.
 
 Component tokens (`--mds-*`) are not in this data: they belong to each component.
 
 The globals `@maggioli-design-system/styles` declares on top of these (the `--magma-*` of its `globals.css`, the corner and depth axes) are in its own `dist/dtcg/`, with a resolver that adds them to these sets, and how each token is consumed through Tailwind is its `dist/tailwind/consumption.json`, keyed by the same `css` names (its README, "Token data").
 
+# Native platforms
+
+Besides the web, the package publishes the colors of Magma for Android, iOS and Flutter, generated at every build from the same sources as the CSS. They are plain files to copy into the app, which needs neither npm nor this package at runtime.
+
+| Platform | File | Content |
+| :--- | :--- | :--- |
+| Android | `dist/android/colors.xml` | `<color>` resources: `@color/color_surface_neutral_light_default` |
+| iOS | `dist/ios-swift/StyleDictionaryColor.swift` | `UIColor` constants of an enum: `StyleDictionaryColor.surfaceNeutralLightDefault` |
+| iOS | `dist/ios-swift/StyleDictionary.swift` | The same colors in a class, the group kept in the name: `StyleDictionary.colorSurfaceNeutralLightDefault` (add one of the two files, not both) |
+| Flutter | `dist/flutter/colors.dart` | `Color` constants, one class per mode: `MagmaColorPaletteLight.surfaceNeutralDefault`, `MagmaColorPaletteDark.surfaceNeutralDefault` |
+
+What the files hold:
+
+- **Colors only**: no type, spacing, radius, shadow or motion tokens.
+- **Both modes side by side**, nothing switches by itself. Android and Swift name the mode in each color (`_light_` / `_dark_`, `Light` / `Dark`), Flutter has one class per mode. The app picks the mode: on Android, give the colors it uses names of its own in `res/values/` (pointing at `_light_`) and `res/values-night/` (pointing at `_dark_`); in UIKit, a dynamic color, `UIColor { traits in traits.userInterfaceStyle == .dark ? ... : ... }`; in Flutter, the class by `Theme.of(context).brightness`.
+- **The palettes**: `tone`, `label`, `status`, `brand` (`maggioli`, `maggioli_editore`, `rnd`) and `variant`, with the steps `1` to `10`, plus `seed` for a tone (the paper of the mode) and `color` for the other families (their own color, `--status-error` on the web). Flutter writes the steps with two digits (`toneNeutral08`) and the family's own color under its bare name (`statusError`).
+- **The roles of each family**: `surface` (`sunken`, `muted`, `default`, `raised`, `overlay`), `border` (`muted`, `default`, `strong`) and `text` (`default`, `muted`, `subtle`, `disabled`), for `neutral`, `porcelain`, `bisque`, `info`, `success`, `warning` and `error`.
+- **Not the semantic layer** (`--magma-*`), nor the named themes or the contrast preference. On the web the surface, border and text roles read one family, which the theme picks: `neutral` by default, `porcelain` for `cool`, `bisque` for `warm`. Paint a native app with the family of its theme, `neutral` unless it has one. For the other roles (accents, washes, inverse, ...), resolve the role in the [DTCG data](#token-data-dtcg) down to `palette.<group>.<family>.<step>`, in light and in dark mode: the native color has the same group, family and step.
+
+Do not use:
+
+- `dist/ios/` (Objective-C): it does not compile, its enumeration has no name (`typedef NS_ENUM(NSInteger, )`).
+- `dist/flutter/fonts.dart`: it does not compile (`fontSize: 48px`, a `height` in pixels where Flutter takes a multiplier, the fallback fonts unquoted and HTML-escaped). The type styles are in the DTCG data (`typography.*`).
+- The `dist/flutter/colors-*.dart` files together: they split `colors.dart` by group under the same two class names, so only one of them, or `colors.dart`, can be imported.
+
 # Generate Custom Palette
 
 you can generate custom palettes via cli command, it takes a configuration file to create palettes

package/dist/android/colors.xml

@@ -2,7 +2,7 @@
 
 <!--
   Do not edit directly
-  Generated on Wed, 21 Oct 2026 16:52:01 GMT
+  Generated on Wed, 04 Nov 2026 07:17:20 GMT
 -->
 <resources>
   <color name="color_tone_porcelain_light_1">#ff040506</color>

package/dist/css/colors-hex-brand-rnd.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-hex-brand.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-hex-default.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-hex-label.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-hex-status.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-hex-theme.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-hex-tones.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-hex.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb-brand-rnd.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb-brand.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb-default.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb-label.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb-status.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb-theme.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb-tones.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/colors-rgb.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/tailwind-theme-color.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:01 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 @theme {

package/dist/css/tailwind-theme-typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:02 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 @theme {
@@ -73,6 +73,27 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --text-size-code-hack--font-weight: 400;
   --text-size-code-hack--line-height: 1.25rem;
 
+  --text-size-title-page: var(--text-size-title-h3, 1.875rem);
+  --text-size-title-page--font-weight: var(--text-size-title-h3--font-weight, 900);
+  --text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing, -0.025em);
+  --text-size-title-page--line-height: var(--text-size-title-h3--line-height, 2.25rem);
+  --text-size-title-section: var(--text-size-title-h5, 1.25rem);
+  --text-size-title-section--font-weight: var(--text-size-title-h5--font-weight, 900);
+  --text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing, -0.025em);
+  --text-size-title-section--line-height: var(--text-size-title-h5--line-height, 1.75rem);
+  --text-size-title-dialog: var(--text-size-title-h5, 1.25rem);
+  --text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight, 900);
+  --text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing, -0.025em);
+  --text-size-title-dialog--line-height: var(--text-size-title-h5--line-height, 1.75rem);
+  --text-size-title-part: var(--text-size-title-h6, 1rem);
+  --text-size-title-part--font-weight: var(--text-size-title-h6--font-weight, 700);
+  --text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing, -0.025em);
+  --text-size-title-part--line-height: var(--text-size-title-h6--line-height, 1.5rem);
+  --text-size-title-group: var(--text-size-title-h6, 1rem);
+  --text-size-title-group--font-weight: var(--text-size-title-h6--font-weight, 700);
+  --text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing, -0.025em);
+  --text-size-title-group--line-height: var(--text-size-title-h6--line-height, 1.5rem);
+
   --leading-2xs: 0.625rem;
   --leading-xs: 1rem;
   --leading-sm: 1.25rem;
@@ -95,7 +116,7 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --spacing-4xl: 96px;
   --spacing-phrase: 50ch;
   --spacing-prose: 65ch;
-  --spacing-text: 75ch;
+  --spacing-text: var(--magma-width-reading, 56ch);
   --spacing-title: 30ch;
 
   --container-4xs: 128px;
@@ -113,6 +134,19 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --container-6xl: 1152px;
   --container-7xl: 1280px;
 
+  --spacing-inline: var(--magma-rhythm-inline, 12px);
+  --spacing-title-content: var(--magma-rhythm-title-content, 12px);
+  --spacing-label-control: var(--magma-rhythm-label-control, 12px);
+  --spacing-between-containers: var(--magma-rhythm-between-containers, 16px);
+  --spacing-between-fields: var(--magma-rhythm-between-fields, 24px);
+  --spacing-content-actions: var(--magma-rhythm-content-actions, 24px);
+  --spacing-inset: var(--magma-rhythm-inset, 24px);
+  --spacing-between-groups: var(--magma-rhythm-between-groups, 40px);
+  --spacing-between-sections: var(--magma-rhythm-between-sections, 64px);
+  --container-form: var(--magma-width-form, 56ch);
+
+  --container-actions: 23.75rem;
+
   --width-xs: var(--container-xs);
   --min-width-xs: var(--container-xs);
   --max-width-xs: var(--container-xs);

package/dist/css/transitions.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:02 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.2.2
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Wed, 21 Oct 2026 16:52:02 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {
@@ -73,6 +73,27 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --text-size-code-hack--font-weight: 400;
   --text-size-code-hack--line-height: 1.25rem;
 
+  --text-size-title-page: var(--text-size-title-h3);
+  --text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
+  --text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
+  --text-size-title-page--line-height: var(--text-size-title-h3--line-height);
+  --text-size-title-section: var(--text-size-title-h5);
+  --text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-section--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-dialog: var(--text-size-title-h5);
+  --text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-part: var(--text-size-title-h6);
+  --text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-part--line-height: var(--text-size-title-h6--line-height);
+  --text-size-title-group: var(--text-size-title-h6);
+  --text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-group--line-height: var(--text-size-title-h6--line-height);
+
   --leading-2xs: 0.625rem;
   --leading-xs: 1rem;
   --leading-sm: 1.25rem;
@@ -95,7 +116,7 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --spacing-4xl: 96px;
   --spacing-phrase: 50ch;
   --spacing-prose: 65ch;
-  --spacing-text: 75ch;
+  --spacing-text: var(--magma-width-reading, 56ch);
   --spacing-title: 30ch;
 
   --container-4xs: 128px;
@@ -113,6 +134,22 @@ Generated at Wed, 21 Oct 2026 16:52:02 GMT
   --container-6xl: 1152px;
   --container-7xl: 1280px;
 
+  --magma-rhythm-inline: 12px;
+  --magma-rhythm-title-content: 12px;
+  --magma-rhythm-label-control: 12px;
+  --magma-rhythm-between-containers: 16px;
+  --magma-rhythm-between-fields: 24px;
+  --magma-rhythm-content-actions: 24px;
+  --magma-rhythm-inset: 24px;
+  --magma-rhythm-between-groups: 40px;
+  --magma-rhythm-between-sections: 64px;
+  --magma-width-reading: 56ch;
+  --magma-width-form: var(--magma-width-reading);
+  --magma-width-page: 1280px;
+  --magma-width-page-gutter: 24px;
+  --magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
+  --magma-container-actions: 23.75rem;
+
   --breakpoint-mobile: 480px;
   --breakpoint-tablet: 768px;
   --breakpoint-desktop: 1024px;