@devicechain/brand 0.14.0-0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright The DeviceChain Authors
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,108 @@
+<!--
+Copyright The DeviceChain Authors
+SPDX-License-Identifier: Apache-2.0
+-->
+
+# @devicechain/brand
+
+The canonical DeviceChain brand values, and the generated stylesheets each
+consumer actually needs.
+
+`tokens.json` is the source of truth. Everything in `css/` and
+`tokens.generated.json` is generated from it and carries a do-not-hand-edit
+header.
+
+## Using it
+
+```bash
+npm install @devicechain/brand
+```
+
+```css
+/* whichever vocabulary your app speaks — see the table below */
+@import '@devicechain/brand/css/shadcn.css';
+```
+
+```ts
+import tokens from '@devicechain/brand/tokens';
+```
+
+There is no build step and no JavaScript to run: the stylesheets and the
+generated token JSON are shipped as-is.
+
+## Working on it
+
+```bash
+npm run generate -w @devicechain/brand         # regenerate after editing tokens.json
+npm run check:generated -w @devicechain/brand  # fail if the committed output is stale
+npm run verify -w @devicechain/brand           # report consumers that disagree
+
+# the marketing site lives in a separate repo, so point at it explicitly
+DC_WEBSITE=../devicechain-website npm run verify -w @devicechain/brand
+```
+
+## Why three stylesheets and not one
+
+The three consumers do not share a vocabulary, and a single stylesheet cannot
+serve them:
+
+| consumer | file | vocabulary | value format |
+| --- | --- | --- | --- |
+| marketing site | `css/brand.css` | `--brand`, `--ink`, `--bg`, accents | hex |
+| console | `css/shadcn.css` | `--primary`, `--ring`, `--sidebar-*` | **bare** `H S% L%` triples |
+| docs | `css/infima.css` | `--ifm-color-primary*` | hex, plus a five-step ramp |
+
+Two details that are easy to get wrong:
+
+- The console's triples have **no `hsl()` wrapper**. shadcn composes them as
+  `hsl(var(--primary) / <alpha>)`, so wrapping them breaks every alpha variant.
+- Infima wants a five-step ramp either side of primary. It is generated from the
+  single canonical value so the steps cannot drift out of order, which is the
+  usual failure mode of a hand-written ramp.
+
+`css/shadcn.css` and `css/infima.css` deliberately cover **brand-derived tokens
+only**. The console still owns the rest of its shadcn scale (card, popover,
+`chart-*`, `sidebar-*` surfaces) and the docs site still owns its own
+background theming.
+
+## Why the values are stored as hex
+
+The brandmark artwork is hex (`branding/logo.svg`), so hex is the origin and
+every other form is derived. This is not cosmetic. The console previously
+declared the brand blue as the rounded triple `197 71% 42%`, which renders
+`#1f8cb7` — **not** the `#208cb7` in the artwork. One channel out of 255, invisible
+to the eye, and still two different colours claiming to be the same one.
+Deriving removes that entire class of mismatch.
+
+## The one rule
+
+`core.primary` is the only colour that ever means *interactive*. The four
+accents (`aqua` → `violet` → `magenta` → `amber`, in pipeline order: ingest,
+detect, react, command) identify an **area**. They never mark a link, a button
+or a control. Break that and a page stops being navigable.
+
+## What `verify` is for, and what it is not
+
+"Keep it in step with the console" was a comment in three files, not a
+guarantee — and it had already failed twice by the time this package was
+written. `verify` turns that comment into something a CI job can enforce.
+
+It is deliberately **read-only**. It prints what disagrees and exits non-zero;
+it never rewrites a consumer. Changing a shipped colour is a visual decision,
+so migrate consumers one at a time and look at the result. Do not bulk-rewrite
+to silence the script.
+
+## Migration status
+
+No consumer has been migrated yet — this package is currently the source of
+truth plus the drift alarm. Known disagreements at time of writing:
+
+- **console** `--primary` (light and dark) — rounded triples, as described
+  above. Adopting the derived values is a no-op to the eye.
+- **marketing site** `--brand-bright` — had drifted to `#3aa9d4`
+  (`hsl(197 64% 53%)`), a third value that neither the console nor the docs
+  used. The console and docs both use `#24a3d6` (`hsl(197 71% 49%)`), and the
+  console is the documented source of truth, so it wins here. Applying it is a
+  **visible** change to the site's hover states and hero eyebrow and should be
+  reviewed on its own.
+- **docs** — already agrees on both light and dark.

package/css/brand.css

@@ -0,0 +1,55 @@
+/* Copyright The DeviceChain Authors */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/*
+ * GENERATED by tools/generate.mjs from tokens.json — DO NOT HAND-EDIT.
+ *
+ * Marketing + static-site vocabulary. Consumed by the public website and by
+ * anything with no bundler: plain custom properties, hex values, no build step.
+ *
+ * This is the one output that is COPIED INTO ANOTHER REPOSITORY, so it names
+ * its source in full: frontend/packages/brand/tokens.json in the devicechain
+ * monorepo. Editing the copy is how the marketing site drifted onto a blue
+ * neither the console nor the docs used. Change tokens.json and re-sync.
+ */
+
+:root {
+  /* Core brand — sampled from the brandmark (branding/logo.svg). */
+  --brand: #208cb7;
+  --brand-bright: #24a3d6;
+  --brand-deep: #1f425e;
+  --brand-pale: #9aceec;
+
+  /* Surfaces + text. */
+  --bg: #0b1620;
+  /* LOAD-BEARING: must equal the hex-field renderer's gl.clearColor. If they
+     differ, distant fogged tiles read as a dark silhouette against a lighter
+     sky instead of dissolving into it. */
+  --bg-deep: #060b11;
+  --ink: #e8f1f6;
+  --ink-2: #b6ccd8;
+  --muted: #8aa6b6;
+
+  /* Derived surface treatments. */
+  --panel: rgba(255, 255, 255, 0.04);
+  --border: rgba(122, 183, 217, 0.18);
+  --rule: rgba(122, 183, 217, 0.16);
+  --rule-strong: rgba(122, 183, 217, 0.34);
+  --glow-strong: rgba(32, 140, 183, 0.25);
+  --glow-soft: rgba(32, 140, 183, 0.12);
+
+  /* Area accents. NEVER used for anything interactive — --brand alone
+     carries that meaning. Order is pipeline order. */
+  /* Ingest and edge. */
+  --aqua: #2fd6d0;
+  /* Detect. */
+  --violet: #7c6cf5;
+  /* React. */
+  --magenta: #e8489b;
+  /* Command. */
+  --amber: #f5a524;
+
+  /* Type stacks. */
+  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, "SF Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
+}

package/css/infima.css

@@ -0,0 +1,32 @@
+/* Copyright The DeviceChain Authors */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/*
+ * GENERATED by tools/generate.mjs from tokens.json — DO NOT HAND-EDIT.
+ *
+ * Docs vocabulary (Docusaurus/Infima). Infima needs a five-step ramp either
+ * side of primary; it is generated from the single canonical value so the
+ * steps cannot drift out of order.
+ *
+ * Brand colours only — the docs site owns its own background/surface theming.
+ */
+
+:root {
+  --ifm-color-primary: #208cb7;
+  --ifm-color-primary-dark: #1d7ea5;
+  --ifm-color-primary-darker: #1b779c;
+  --ifm-color-primary-darkest: #166280;
+  --ifm-color-primary-light: #239ac9;
+  --ifm-color-primary-lighter: #25a1d3;
+  --ifm-color-primary-lightest: #3bafdd;
+}
+
+[data-theme='dark'] {
+  --ifm-color-primary: #24a3d6;
+  --ifm-color-primary-dark: #2093c1;
+  --ifm-color-primary-darker: #1f8ab6;
+  --ifm-color-primary-darkest: #197296;
+  --ifm-color-primary-light: #36addd;
+  --ifm-color-primary-lighter: #40b2df;
+  --ifm-color-primary-lightest: #61bfe4;
+}

package/css/shadcn.css

@@ -0,0 +1,33 @@
+/* Copyright The DeviceChain Authors */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+/*
+ * GENERATED by tools/generate.mjs from tokens.json — DO NOT HAND-EDIT.
+ *
+ * Console vocabulary. Values are BARE `H S% L%` triples with no hsl() wrapper,
+ * because shadcn composes them as `hsl(var(--primary) / <alpha>)` — wrapping
+ * them here would silently break every alpha variant.
+ *
+ * Scope: every token whose value is DETERMINED BY the brand blue — the blue
+ * itself wherever shadcn names it, plus the foreground that has to read on
+ * top of it. A consumer keeps ownership of everything else in its scale
+ * (background, card, popover, chart-*, and the non-primary sidebar-*).
+ */
+
+:root {
+  --primary: 197.1 70.2% 42.2%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 197.1 70.2% 42.2%;
+  --sidebar-primary: 197.1 70.2% 42.2%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-ring: 197.1 70.2% 42.2%;
+}
+
+.dark {
+  --primary: 197.2 71.2% 49%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 197.2 71.2% 49%;
+  --sidebar-primary: 197.2 71.2% 49%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-ring: 197.2 71.2% 49%;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@devicechain/brand",
+  "version": "0.14.0-0",
+  "description": "Canonical DeviceChain brand tokens, plus the generated per-consumer stylesheets.",
+  "keywords": [
+    "devicechain",
+    "design-tokens",
+    "css",
+    "theme"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://devicechain.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devicechain-io/devicechain.git",
+    "directory": "frontend/packages/brand"
+  },
+  "bugs": {
+    "url": "https://github.com/devicechain-io/devicechain/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./css/*.css"
+  ],
+  "exports": {
+    "./tokens.json": "./tokens.json",
+    "./tokens": "./tokens.generated.json",
+    "./css/brand.css": "./css/brand.css",
+    "./css/shadcn.css": "./css/shadcn.css",
+    "./css/infima.css": "./css/infima.css"
+  },
+  "files": [
+    "css",
+    "tokens.json",
+    "tokens.generated.json",
+    "tools",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "generate": "node tools/generate.mjs",
+    "check:generated": "node tools/generate.mjs --check",
+    "verify": "node tools/verify.mjs",
+    "build": "node tools/generate.mjs --check"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tokens.generated.json

@@ -0,0 +1,57 @@
+{
+  "flat": {
+    "core.primary": "#208cb7",
+    "core.primaryBright": "#24a3d6",
+    "core.primaryDeep": "#1f425e",
+    "core.primaryPale": "#9aceec",
+    "surface.bg": "#0b1620",
+    "surface.bgDeep": "#060b11",
+    "surface.ink": "#e8f1f6",
+    "surface.ink2": "#b6ccd8",
+    "surface.muted": "#8aa6b6",
+    "accents.aqua": "#2fd6d0",
+    "accents.violet": "#7c6cf5",
+    "accents.magenta": "#e8489b",
+    "accents.amber": "#f5a524",
+    "type.sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+    "type.mono": "ui-monospace, \"SF Mono\", \"DejaVu Sans Mono\", \"Liberation Mono\", Menlo, Consolas, monospace"
+  },
+  "derived": {
+    "primary": {
+      "hex": "#208cb7",
+      "hsl": {
+        "h": 197.1,
+        "s": 70.2,
+        "l": 42.2
+      },
+      "shadcn": "197.1 70.2% 42.2%"
+    },
+    "primaryBright": {
+      "hex": "#24a3d6",
+      "hsl": {
+        "h": 197.2,
+        "s": 71.2,
+        "l": 49
+      },
+      "shadcn": "197.2 71.2% 49%"
+    },
+    "primaryDeep": {
+      "hex": "#1f425e",
+      "hsl": {
+        "h": 206.7,
+        "s": 50.4,
+        "l": 24.5
+      },
+      "shadcn": "206.7 50.4% 24.5%"
+    },
+    "primaryPale": {
+      "hex": "#9aceec",
+      "hsl": {
+        "h": 202,
+        "s": 68.3,
+        "l": 76.5
+      },
+      "shadcn": "202 68.3% 76.5%"
+    }
+  }
+}

package/tokens.json

@@ -0,0 +1,100 @@
+{
+  "$license": "Copyright The DeviceChain Authors; SPDX-License-Identifier: Apache-2.0",
+  "$about": [
+    "THE canonical DeviceChain brand values. Every other representation is",
+    "GENERATED from this file — see tools/generate.mjs and the css/ directory.",
+    "Edit here, run `npm run generate -w @devicechain/brand`, commit the result.",
+    "",
+    "Values are stored as hex because the brandmark artwork is hex",
+    "(branding/logo.svg). HSL forms are DERIVED, never hand-written: the console",
+    "previously declared the brand blue as the rounded triple `197 71% 42%`,",
+    "which renders #1f8cb7 and is therefore not the same colour as the #208cb7",
+    "in the artwork. Deriving removes that class of mismatch entirely."
+  ],
+  "core": {
+    "primary": {
+      "value": "#208cb7",
+      "role": "Brand blue. The logo's \"CHAIN\" wordmark and cube. THE interactive colour — the only one that ever means \"you can click this\"."
+    },
+    "primaryBright": {
+      "value": "#24a3d6",
+      "role": "Primary lifted for dark grounds and hover states.",
+      "$note": "Reconciles a real three-way divergence. The console (dark `hsl(197 71% 49%)`) and the docs (dark `#24a3d6`) already agreed on this value; the marketing site had drifted to #3aa9d4 = hsl(197 64% 53%), which is visibly lighter and less saturated. Console is the documented source of truth and carried the majority, so it wins. Applying this to the website is a VISIBLE change to hover states and the hero eyebrow and must be reviewed on its own."
+    },
+    "primaryDeep": {
+      "value": "#1f425e",
+      "role": "Deepest cube facet. Navy, used for grounds rather than text."
+    },
+    "primaryPale": {
+      "value": "#9aceec",
+      "role": "Lightest cube facet. Highlights and hairlines."
+    }
+  },
+  "surface": {
+    "bg": {
+      "value": "#0b1620",
+      "role": "Default dark canvas — the \"devicechain.io treatment\" ground."
+    },
+    "bgDeep": {
+      "value": "#060b11",
+      "role": "Deeper canvas for pages carrying the hex field.",
+      "$note": "LOAD-BEARING: must equal the hex-field renderer's gl.clearColor. If they differ, distant fogged tiles read as a dark silhouette against a lighter sky instead of dissolving into it."
+    },
+    "ink": {
+      "value": "#e8f1f6",
+      "role": "Primary text on dark."
+    },
+    "ink2": {
+      "value": "#b6ccd8",
+      "role": "Secondary prose — ledes and section body."
+    },
+    "muted": {
+      "value": "#8aa6b6",
+      "role": "Tertiary text, captions, metadata."
+    }
+  },
+  "accents": {
+    "$about": [
+      "The expanded graphical language. The core palette above is a single hue —",
+      "every swatch sits between 197 and 207 — which is why the brand reads as",
+      "consistent but flat. These five stops walk monotonically THROUGH the",
+      "anchor blue rather than away from it, so each product area gets its own",
+      "identity without any of them fighting the brand.",
+      "",
+      "ONE RULE, and it is the whole system: core.primary is the only colour that",
+      "ever means \"interactive\". An accent identifies an AREA. It never marks a",
+      "link, a button or a control. Break that and the page stops being",
+      "navigable.",
+      "",
+      "Order is pipeline order: ingest -> detect -> react -> command."
+    ],
+    "aqua": {
+      "value": "#2fd6d0",
+      "role": "Ingest and edge."
+    },
+    "violet": {
+      "value": "#7c6cf5",
+      "role": "Detect."
+    },
+    "magenta": {
+      "value": "#e8489b",
+      "role": "React."
+    },
+    "amber": {
+      "value": "#f5a524",
+      "role": "Command.",
+      "$note": "Also the deliberate antidote to reading a product called DeviceChain as web3 — warm is the one thing that palette never is."
+    }
+  },
+  "type": {
+    "sans": {
+      "value": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+      "role": "UI and prose.",
+      "$note": "Placeholder stack. A real display/body pairing is still an open brand decision; the hero's headline sizing is currently tuned against whatever system-ui resolves to and will need re-tuning when a webfont lands."
+    },
+    "mono": {
+      "value": "ui-monospace, \"SF Mono\", \"DejaVu Sans Mono\", \"Liberation Mono\", Menlo, Consolas, monospace",
+      "role": "Eyebrows, labels, code, tabular data."
+    }
+  }
+}

package/tools/color.mjs

@@ -0,0 +1,91 @@
+// Copyright The DeviceChain Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// Colour conversion for the token generator. Hand-rolled rather than pulling a
+// dependency: this package must stay installable with zero transitive deps so it
+// can be consumed by the docs build, the console build and (eventually) a static
+// site with no bundler at all.
+
+/** @param {string} hex `#rrggbb` */
+export function hexToRgb(hex) {
+  const h = hex.trim().replace(/^#/, '');
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) {
+    throw new Error(`not a 6-digit hex colour: ${hex}`);
+  }
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+/**
+ * sRGB -> HSL. Returns hue in degrees, saturation and lightness as percentages.
+ *
+ * Rounded to ONE decimal place deliberately. Full precision would emit values
+ * like 197.14285714285714 that churn the generated files on every regeneration
+ * for no visible benefit; integers would reintroduce exactly the rounding drift
+ * this package exists to remove (`197 71% 42%` renders #1f8cb7, not #208cb7).
+ */
+export function hexToHsl(hex) {
+  const [r8, g8, b8] = hexToRgb(hex);
+  const r = r8 / 255;
+  const g = g8 / 255;
+  const b = b8 / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  const round1 = (n) => Math.round(n * 10) / 10;
+  return { h: round1(h * 360), s: round1(s * 100), l: round1(l * 100) };
+}
+
+/**
+ * The bare `H S% L%` triple shadcn/Tailwind expects, e.g. `197.1 70.2% 42.2%`.
+ * Note the absence of `hsl(...)` — shadcn composes these into
+ * `hsl(var(--primary) / <alpha>)`, so wrapping them breaks alpha support.
+ */
+export function hexToShadcnTriple(hex) {
+  const { h, s, l } = hexToHsl(hex);
+  return `${h} ${s}% ${l}%`;
+}
+
+/** HSL (deg, %, %) -> `#rrggbb`. */
+export function hslToHex(h, s, l) {
+  const sn = s / 100;
+  const ln = l / 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = sn * Math.min(ln, 1 - ln);
+  const f = (n) => ln - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  const to255 = (x) => Math.round(x * 255);
+  return (
+    '#' +
+    [to255(f(0)), to255(f(8)), to255(f(4))]
+      .map((c) => c.toString(16).padStart(2, '0'))
+      .join('')
+  );
+}
+
+/**
+ * Scale a colour's LIGHTNESS by `factor`, preserving hue and saturation.
+ *
+ * This is how Infima's primary ramp is built, and getting it wrong is not
+ * subtle. The obvious implementation — linearly mixing toward white or black in
+ * RGB — adds white to all three channels equally, which DESATURATES. Measured
+ * against the docs site's existing ramp, a mix-to-white `lightest` came out at
+ * 51.5% saturation against the correct 71.1%: a visibly washed-out, greyer blue.
+ * Scaling lightness in HSL keeps the hue and the saturation exactly where they
+ * were and only moves the value up or down the ramp.
+ */
+export function scaleLightness(hex, factor) {
+  const { h, s, l } = hexToHsl(hex);
+  return hslToHex(h, s, Math.max(0, Math.min(100, l * factor)));
+}

package/tools/generate.mjs

@@ -0,0 +1,243 @@
+// Copyright The DeviceChain Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// Generate every consumer-facing representation of the brand from tokens.json.
+//
+//     node tools/generate.mjs          # write css/*
+//     node tools/generate.mjs --check  # fail if anything on disk is stale
+//
+// Three outputs, because the three consumers do NOT share a vocabulary and a
+// single stylesheet cannot serve them:
+//
+//   css/brand.css   marketing/static:  --brand, --ink, --bg, accents (hex)
+//   css/shadcn.css  console:           --primary, --foreground, ... (BARE HSL
+//                                      triples, which is what Tailwind needs)
+//   css/infima.css  docs:              --ifm-color-primary* (hex, with the
+//                                      light/dark ramp Infima expects)
+//
+// Discovering that was the main design constraint: the console declares the
+// brand blue as `197 71% 42%` while everyone else writes `#208cb7`, and Infima
+// wants a five-step ramp nobody else has. Generating per-vocabulary is what
+// makes one source of truth actually possible.
+
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { hexToHsl, hexToShadcnTriple, scaleLightness } from './color.mjs';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(HERE, '..');
+const tokens = JSON.parse(readFileSync(join(ROOT, 'tokens.json'), 'utf8'));
+
+const v = (group, key) => tokens[group][key].value;
+const HEADER = (what) =>
+  `/* Copyright The DeviceChain Authors */\n` +
+  `/* SPDX-License-Identifier: Apache-2.0 */\n\n` +
+  `/*\n * GENERATED by tools/generate.mjs from tokens.json — DO NOT HAND-EDIT.\n` +
+  ` *\n * ${what}\n */\n\n`;
+
+/* ── Marketing / static vocabulary ─────────────────────────────────────── */
+
+function brandCss() {
+  const { core, surface, accents, type } = tokens;
+  // Notes are prose and some run long. Wrap them rather than emitting a 140-col
+  // line: this is the one generated file that gets COPIED INTO ANOTHER REPO and
+  // read there by someone with no access to tokens.json, so the comment is the
+  // only explanation they get.
+  const wrap = (text, indent) => {
+    const width = 76 - indent.length;
+    const lines = [];
+    let cur = '';
+    for (const w of text.split(/\s+/)) {
+      if (cur && (cur + ' ' + w).length > width) {
+        lines.push(cur);
+        cur = w;
+      } else cur = cur ? cur + ' ' + w : w;
+    }
+    if (cur) lines.push(cur);
+    return lines.map((l, i) => `${indent}${i === 0 ? '/* ' : '   '}${l}`).join('\n') + ' */\n';
+  };
+  const line = (name, value, note) =>
+    (note ? wrap(note, '  ') : '') + `  --${name}: ${value};\n`;
+  let out = HEADER(
+    'Marketing + static-site vocabulary. Consumed by the public website and by\n' +
+      ' * anything with no bundler: plain custom properties, hex values, no build step.\n' +
+      ' *\n' +
+      ' * This is the one output that is COPIED INTO ANOTHER REPOSITORY, so it names\n' +
+      ' * its source in full: frontend/packages/brand/tokens.json in the devicechain\n' +
+      ' * monorepo. Editing the copy is how the marketing site drifted onto a blue\n' +
+      ' * neither the console nor the docs used. Change tokens.json and re-sync.'
+  );
+  out += ':root {\n';
+  out += '  /* Core brand — sampled from the brandmark (branding/logo.svg). */\n';
+  out += line('brand', core.primary.value);
+  out += line('brand-bright', core.primaryBright.value);
+  out += line('brand-deep', core.primaryDeep.value);
+  out += line('brand-pale', core.primaryPale.value);
+  out += '\n  /* Surfaces + text. */\n';
+  out += line('bg', surface.bg.value);
+  out += line('bg-deep', surface.bgDeep.value, surface.bgDeep.$note);
+  out += line('ink', surface.ink.value);
+  out += line('ink-2', surface.ink2.value);
+  out += line('muted', surface.muted.value);
+  out += '\n  /* Derived surface treatments. */\n';
+  out += line('panel', 'rgba(255, 255, 255, 0.04)');
+  out += line('border', 'rgba(122, 183, 217, 0.18)');
+  out += line('rule', 'rgba(122, 183, 217, 0.16)');
+  out += line('rule-strong', 'rgba(122, 183, 217, 0.34)');
+  out += line('glow-strong', 'rgba(32, 140, 183, 0.25)');
+  out += line('glow-soft', 'rgba(32, 140, 183, 0.12)');
+  out +=
+    '\n  /* Area accents. NEVER used for anything interactive — --brand alone\n' +
+    '     carries that meaning. Order is pipeline order. */\n';
+  for (const k of ['aqua', 'violet', 'magenta', 'amber']) {
+    out += line(k, accents[k].value, accents[k].role);
+  }
+  out += '\n  /* Type stacks. */\n';
+  out += line('sans', type.sans.value);
+  out += line('mono', type.mono.value);
+  out += '}\n';
+  return out;
+}
+
+/* ── Console (shadcn / Tailwind) vocabulary ────────────────────────────── */
+
+function shadcnCss() {
+  const { core } = tokens;
+  let out = HEADER(
+    'Console vocabulary. Values are BARE `H S% L%` triples with no hsl() wrapper,\n' +
+      ' * because shadcn composes them as `hsl(var(--primary) / <alpha>)` — wrapping\n' +
+      ' * them here would silently break every alpha variant.\n' +
+      ' *\n' +
+      ' * Scope: every token whose value is DETERMINED BY the brand blue — the blue\n' +
+      ' * itself wherever shadcn names it, plus the foreground that has to read on\n' +
+      ' * top of it. A consumer keeps ownership of everything else in its scale\n' +
+      ' * (background, card, popover, chart-*, and the non-primary sidebar-*).'
+  );
+  const block = (sel, hex) => {
+    const t = hexToShadcnTriple(hex);
+    return (
+      `${sel} {\n` +
+      `  --primary: ${t};\n` +
+      '  --primary-foreground: 0 0% 100%;\n' +
+      `  --ring: ${t};\n` +
+      `  --sidebar-primary: ${t};\n` +
+      '  --sidebar-primary-foreground: 0 0% 100%;\n' +
+      `  --sidebar-ring: ${t};\n` +
+      '}\n'
+    );
+  };
+  out += block(':root', core.primary.value);
+  out += '\n';
+  out += block('.dark', core.primaryBright.value);
+  return out;
+}
+
+/* ── Docs (Docusaurus / Infima) vocabulary ─────────────────────────────── */
+
+function infimaCss() {
+  const { core } = tokens;
+  // Infima wants a six-step ramp around primary, and it is built by scaling
+  // LIGHTNESS in HSL — hue and saturation are held constant. The factors below
+  // are Docusaurus's own conventional steps.
+  //
+  // Do not "simplify" this to an RGB mix toward white/black. That adds white to
+  // all three channels equally and therefore desaturates: checked against the
+  // docs site's existing ramp, a mix-to-white `lightest` landed at 51.5%
+  // saturation against the correct 71.1% — a visibly greyer, washed-out blue.
+  const ramp = (base) => ({
+    darkest: scaleLightness(base, 0.7),
+    darker: scaleLightness(base, 0.85),
+    dark: scaleLightness(base, 0.9),
+    base,
+    light: scaleLightness(base, 1.1),
+    lighter: scaleLightness(base, 1.15),
+    lightest: scaleLightness(base, 1.3),
+  });
+  const emit = (sel, base) => {
+    const r = ramp(base);
+    let s = `${sel} {\n`;
+    s += `  --ifm-color-primary: ${r.base};\n`;
+    s += `  --ifm-color-primary-dark: ${r.dark};\n`;
+    s += `  --ifm-color-primary-darker: ${r.darker};\n`;
+    s += `  --ifm-color-primary-darkest: ${r.darkest};\n`;
+    s += `  --ifm-color-primary-light: ${r.light};\n`;
+    s += `  --ifm-color-primary-lighter: ${r.lighter};\n`;
+    s += `  --ifm-color-primary-lightest: ${r.lightest};\n`;
+    s += '}\n';
+    return s;
+  };
+  let out = HEADER(
+    'Docs vocabulary (Docusaurus/Infima). Infima needs a five-step ramp either\n' +
+      ' * side of primary; it is generated from the single canonical value so the\n' +
+      ' * steps cannot drift out of order.\n' +
+      ' *\n' +
+      ' * Brand colours only — the docs site owns its own background/surface theming.'
+  );
+  out += emit(':root', tokens.core.primary.value);
+  out += '\n';
+  out += emit("[data-theme='dark']", core.primaryBright.value);
+  return out;
+}
+
+/* ── JSON, for anything that would rather read data than parse CSS ─────── */
+
+function flatJson() {
+  const flat = {};
+  for (const [group, entries] of Object.entries(tokens)) {
+    if (group.startsWith('$')) continue;
+    for (const [key, def] of Object.entries(entries)) {
+      if (key.startsWith('$')) continue;
+      flat[`${group}.${key}`] = def.value;
+    }
+  }
+  const derived = {};
+  for (const k of ['primary', 'primaryBright', 'primaryDeep', 'primaryPale']) {
+    derived[k] = {
+      hex: tokens.core[k].value,
+      hsl: hexToHsl(tokens.core[k].value),
+      shadcn: hexToShadcnTriple(tokens.core[k].value),
+    };
+  }
+  return JSON.stringify({ flat, derived }, null, 2) + '\n';
+}
+
+/* ── Drive ─────────────────────────────────────────────────────────────── */
+
+const OUTPUTS = [
+  ['css/brand.css', brandCss()],
+  ['css/shadcn.css', shadcnCss()],
+  ['css/infima.css', infimaCss()],
+  ['tokens.generated.json', flatJson()],
+];
+
+const check = process.argv.includes('--check');
+let stale = [];
+
+mkdirSync(join(ROOT, 'css'), { recursive: true });
+for (const [rel, content] of OUTPUTS) {
+  const path = join(ROOT, rel);
+  if (check) {
+    let existing = null;
+    try {
+      existing = readFileSync(path, 'utf8');
+    } catch {
+      /* missing counts as stale */
+    }
+    if (existing !== content) stale.push(rel);
+  } else {
+    writeFileSync(path, content, 'utf8');
+    console.log(`wrote ${rel}`);
+  }
+}
+
+if (check) {
+  if (stale.length) {
+    console.error(
+      `error: generated files are stale or missing:\n  ${stale.join('\n  ')}\n` +
+        `Run \`npm run generate -w @devicechain/brand\` and commit the result.`
+    );
+    process.exit(1);
+  }
+  console.log('generated files are up to date');
+}

package/tools/verify.mjs

@@ -0,0 +1,203 @@
+// Copyright The DeviceChain Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// Report where a consumer's declared brand values disagree with tokens.json.
+//
+//     node tools/verify.mjs
+//     DC_WEBSITE=/path/to/devicechain-website node tools/verify.mjs
+//
+// This exists because "keep it in step with the console" was a COMMENT, not a
+// guarantee, and it had already failed: the marketing site's lifted blue had
+// drifted to a third value that neither the console nor the docs used, and the
+// console's rounded HSL triple was not the same colour as the hex everyone else
+// wrote. A comment cannot catch that. A script run in CI can.
+//
+// Deliberately read-only and advisory about WHICH way to fix things: it prints
+// what disagrees and exits non-zero, but never rewrites a consumer, because
+// changing a shipped colour is a visual decision, not a mechanical one.
+
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { hexToHsl, hexToShadcnTriple } from './color.mjs';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(HERE, '..');
+const REPO = join(ROOT, '..', '..', '..');
+const tokens = JSON.parse(readFileSync(join(ROOT, 'tokens.json'), 'utf8'));
+
+const PRIMARY = tokens.core.primary.value;
+const BRIGHT = tokens.core.primaryBright.value;
+
+const findings = [];
+const checked = [];
+
+function read(rel) {
+  try {
+    return readFileSync(join(REPO, rel), 'utf8');
+  } catch {
+    return null;
+  }
+}
+
+/** Last declaration wins, matching the cascade, so scan all and keep the last. */
+function declared(css, prop, withinSelector) {
+  const scope = withinSelector
+    ? (css.match(
+        new RegExp(
+          `${withinSelector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{([^}]*)\\}`,
+          'g'
+        )
+      ) || []).join('\n')
+    : css;
+  const re = new RegExp(`--${prop}\\s*:\\s*([^;]+);`, 'g');
+  let m;
+  let last = null;
+  while ((m = re.exec(scope))) last = m[1].trim();
+  return last;
+}
+
+function compare(where, label, actual, expected, note) {
+  checked.push(where + ' · ' + label);
+  if (actual === null) {
+    findings.push({ where, label, actual: '(not declared)', expected, note });
+    return;
+  }
+  if (actual.toLowerCase() !== expected.toLowerCase()) {
+    findings.push({ where, label, actual, expected, note });
+  }
+}
+
+/* ── shadcn-triple consumers ───────────────────────────────────────────── */
+//
+// BOTH front-end apps, not just the console. Checking only the console was a
+// real hole: apps/dashboard/src/theme.css carries the same token contract (it
+// is what @devicechain/widgets reads, so a dashboard renders identically in
+// either host) and had drifted to the same wrong triple — unnoticed, because
+// nothing looked at it. A gate that covers one of two consumers mostly teaches
+// you to trust it.
+for (const rel of [
+  'frontend/apps/console/src/index.css',
+  'frontend/apps/dashboard/src/theme.css',
+]) {
+  const css = read(rel);
+  if (!css) {
+    console.warn(`skip: ${rel} not found`);
+    continue;
+  }
+  if (/@import\s+['"]@devicechain\/brand\/css\/shadcn\.css['"]/.test(css)) {
+    // A MIGRATED consumer declares nothing — it imports. See the docs branch
+    // below for why an un-special-cased scan here is worse than useless.
+    console.log(`ok: ${rel} imports the generated triples — nothing to compare`);
+    continue;
+  }
+  // The :root block is light mode; .dark carries the lifted values.
+  compare(
+    rel,
+    'light --primary',
+    declared(css, 'primary', ':root'),
+    hexToShadcnTriple(PRIMARY),
+    `rounded triples do not round-trip: '197 71% 42%' renders #1f8cb7, not ${PRIMARY}`
+  );
+  compare(rel, 'dark --primary', declared(css, 'primary', '.dark'), hexToShadcnTriple(BRIGHT));
+}
+
+/* ── Docs: Infima hex, base AND the full ramp ──────────────────────────── */
+{
+  const rel = 'docs/src/css/custom.css';
+  const css = read(rel);
+  if (!css) {
+    console.warn(`skip: ${rel} not found`);
+  } else if (/@import\s+['"]@devicechain\/brand\/css\/infima\.css['"]/.test(css)) {
+    // A MIGRATED consumer declares nothing — it imports. Without this branch the
+    // declaration scan below finds nothing and reports 14 "(not declared)"
+    // failures against a consumer that is in fact perfectly correct, which is
+    // the fastest way to teach everyone to ignore this script.
+    console.log(`ok: ${rel} imports the generated ramp — nothing to compare`);
+  } else {
+    // Checking only the base colour is NOT enough, and assuming otherwise gave
+    // a false all-clear once already: the docs' base matched exactly while its
+    // hand-built DARK ramp differed by up to 45/255 on --ifm-color-primary-
+    // lightest. Infima renders links, hovers and admonitions out of the ramp,
+    // not the base, so the ramp is the part a reader actually sees.
+    const generated = readFileSync(join(ROOT, 'css/infima.css'), 'utf8');
+    const STEPS = ['', '-dark', '-darker', '-darkest', '-light', '-lighter', '-lightest'];
+    for (const [theme, selector] of [
+      ['light', ':root'],
+      ['dark', "[data-theme='dark']"],
+    ]) {
+      for (const step of STEPS) {
+        const prop = `ifm-color-primary${step}`;
+        compare(
+          rel,
+          `${theme} --${prop}`,
+          declared(css, prop, selector),
+          declared(generated, prop, selector)
+        );
+      }
+    }
+  }
+}
+
+/* ── Marketing site: a SEPARATE REPO, so opt in by path ────────────────── */
+{
+  const base = process.env.DC_WEBSITE;
+  if (!base) {
+    console.warn(
+      'skip: marketing site not checked — set DC_WEBSITE=/path/to/devicechain-website'
+    );
+  } else {
+    let css = null;
+    try {
+      css = readFileSync(join(base, 'brand.css'), 'utf8');
+    } catch {
+      console.warn(`skip: ${join(base, 'brand.css')} not found`);
+    }
+    if (css) {
+      const rel = `${base}/brand.css`;
+      compare(rel, '--brand', declared(css, 'brand', ':root'), PRIMARY);
+      compare(
+        rel,
+        '--brand-bright',
+        declared(css, 'brand-bright', ':root'),
+        BRIGHT,
+        'the site had drifted to a third value that neither console nor docs used'
+      );
+      compare(rel, '--bg-deep', declared(css, 'bg-deep', ':root'), tokens.surface.bgDeep.value);
+      for (const k of ['aqua', 'violet', 'magenta', 'amber']) {
+        compare(rel, `--${k}`, declared(css, k, ':root'), tokens.accents[k].value);
+      }
+    }
+  }
+}
+
+/* ── Report ────────────────────────────────────────────────────────────── */
+
+const hsl = hexToHsl(PRIMARY);
+console.log(
+  `\ncanonical primary ${PRIMARY} = hsl(${hsl.h} ${hsl.s}% ${hsl.l}%) = shadcn "${hexToShadcnTriple(
+    PRIMARY
+  )}"`
+);
+console.log(`canonical lifted  ${BRIGHT} = shadcn "${hexToShadcnTriple(BRIGHT)}"\n`);
+console.log(`checked ${checked.length} declaration(s)`);
+
+if (!findings.length) {
+  console.log('no drift — every consumer agrees with tokens.json');
+  process.exit(0);
+}
+
+console.log(`\n${findings.length} disagreement(s) with tokens.json:\n`);
+for (const f of findings) {
+  console.log(`  ${f.where}`);
+  console.log(`    ${f.label}`);
+  console.log(`      declared: ${f.actual}`);
+  console.log(`      canonical: ${f.expected}`);
+  if (f.note) console.log(`      note: ${f.note}`);
+  console.log('');
+}
+console.log(
+  'Each of these is a VISUAL decision. Migrate a consumer deliberately —\n' +
+    'do not bulk-rewrite shipped colours to silence this script.'
+);
+process.exit(1);