From c33af6a60583d18bc903afd124fa5b4436db4778 Mon Sep 17 00:00:00 2001
From: Chris Sherwood <chris@crosstalksolutions.com>
Date: Mon, 31 Aug 2026 08:45:29 -0700
Subject: [PATCH] chore(dashboard): reword the link tile color helper, and use
 US spelling

"still tellable apart from" read badly; it is now "distinguishable from".

Also switches the spelling I had introduced to American, matching the rest of
the product and the existing schema and constants (custom_color, PIN_COLORS).
Limited to the files this branch adds; the two pre-existing benchmark
components that use the British form are left alone rather than churned.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01F8Mgg1vd2eKSs8StZiuyMV
---
 admin/constants/link_tile_colors.ts        | 4 ++--
 admin/inertia/components/LinkTileModal.tsx | 6 +++---
 admin/inertia/pages/home.tsx               | 2 +-
 admin/tests/unit/link_tile.spec.ts         | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/admin/constants/link_tile_colors.ts b/admin/constants/link_tile_colors.ts
index ef03e106..e100db06 100644
--- a/admin/constants/link_tile_colors.ts
+++ b/admin/constants/link_tile_colors.ts
@@ -1,11 +1,11 @@
 /**
- * The colours a user can give a dashboard link tile.
+ * The colors a user can give a dashboard link tile.
  *
  * Drawn from the brand palette rather than arbitrary hex, so a tile always sits
  * on-theme next to the managed app cards. The default white-on-green contrast
  * read as jarring on the dashboard, which is why this exists.
  *
- * Tiles stay visually distinct from managed apps regardless of colour: the
+ * Tiles stay visually distinct from managed apps regardless of color: the
  * dashed border and the external-link marker are what carry that, not the hue.
  * The tint is deliberately light so the distinction survives every option.
  *
diff --git a/admin/inertia/components/LinkTileModal.tsx b/admin/inertia/components/LinkTileModal.tsx
index fcf7b548..bd954a75 100644
--- a/admin/inertia/components/LinkTileModal.tsx
+++ b/admin/inertia/components/LinkTileModal.tsx
@@ -157,7 +157,7 @@ export default function LinkTileModal({
         </div>
 
         <div>
-          <p className="mb-1.5 font-medium text-text-primary">Colour</p>
+          <p className="mb-1.5 font-medium text-text-primary">Color</p>
           <div className="flex items-center gap-2">
             {LINK_TILE_COLORS.map((option) => (
               <button
@@ -174,8 +174,8 @@ export default function LinkTileModal({
             ))}
           </div>
           <p className="mt-1.5 text-xs text-text-muted">
-            Links stay outlined rather than filled whichever colour you pick, so they
-            are still tellable apart from apps NOMAD manages.
+            Links stay outlined rather than filled whichever color you pick, so they
+            are distinguishable from apps NOMAD manages.
           </p>
         </div>
       </div>
diff --git a/admin/inertia/pages/home.tsx b/admin/inertia/pages/home.tsx
index 9a33f910..b22614b1 100644
--- a/admin/inertia/pages/home.tsx
+++ b/admin/inertia/pages/home.tsx
@@ -272,7 +272,7 @@ export default function Home(props: {
           const shouldHighlight = isEasySetup && shouldHighlightEasySetup
 
           const isLinkTile = Boolean(item.linkTile)
-          // A flat surface colour read as a stark white card next to the filled
+          // A flat surface color read as a stark white card next to the filled
           // app tiles. Tint from the brand palette instead, user-chosen.
           const tileColor = linkTileColor(item.linkTile?.link_color)
 
diff --git a/admin/tests/unit/link_tile.spec.ts b/admin/tests/unit/link_tile.spec.ts
index 964ec07b..96810366 100644
--- a/admin/tests/unit/link_tile.spec.ts
+++ b/admin/tests/unit/link_tile.spec.ts
@@ -108,14 +108,14 @@ test('the default icon is part of the offered set', () => {
   assert.ok((LINK_TILE_ICONS as readonly string[]).includes(DEFAULT_LINK_TILE_ICON))
 })
 
-test('link tile colours resolve from the brand palette', () => {
+test('link tile colors resolve from the brand palette', () => {
   // Unknown, null and empty all fall back rather than rendering an untinted card.
   assert.equal(linkTileColor('orange').id, 'orange')
   assert.equal(linkTileColor(null).id, DEFAULT_LINK_TILE_COLOR)
   assert.equal(linkTileColor('chartreuse').id, DEFAULT_LINK_TILE_COLOR)
 })
 
-test('every link tile colour ships complete, literal Tailwind classes', () => {
+test('every link tile color ships complete, literal Tailwind classes', () => {
   // Tailwind scans for literal class strings, so an interpolated name would be
   // dropped from the build and the tile would render untinted.
   for (const option of LINK_TILE_COLORS) {
@@ -126,6 +126,6 @@ test('every link tile colour ships complete, literal Tailwind classes', () => {
   }
 })
 
-test('the default colour is one of the offered options', () => {
+test('the default color is one of the offered options', () => {
   assert.ok(LINK_TILE_COLOR_IDS.includes(DEFAULT_LINK_TILE_COLOR))
 })