docs(ui): switch user-facing spelling to colour

Made-with: Cursor

README.md

@@ -1,6 +1,6 @@
 # led-controller
 
-LED controller web app for managing profiles, tabs, presets, and color palettes, and sending commands to LED devices over the serial -> ESP-NOW bridge.
+LED controller web app for managing profiles, tabs, presets, and colour palettes, and sending commands to LED devices over the serial -> ESP-NOW bridge.
 
 ## Run
 
@@ -11,7 +11,7 @@ LED controller web app for managing profiles, tabs, presets, and color palettes,
 ## UI modes
 
 - **Run mode**: focused control view. Select tabs/presets and apply profiles. Editing actions are hidden.
-- **Edit mode**: management view. Shows Tabs, Presets, Patterns, Color Palette, and Send Presets controls, plus per-tile preset edit/remove and drag-reorder.
+- **Edit mode**: management view. Shows Tabs, Presets, Patterns, Colour Palette, and Send Presets controls, plus per-tile preset edit/remove and drag-reorder.
 
 ## Profiles
 
@@ -21,14 +21,14 @@ LED controller web app for managing profiles, tabs, presets, and color palettes,
 - Creating a profile always creates a populated `default` tab (starter presets).
 - Optional **DJ tab** seeding creates:
   - `dj` tab bound to device name `dj`
-  - starter DJ presets (rainbow, single color, transition)
+  - starter DJ presets (rainbow, single colour, transition)
 
-## Preset colors and palette linking
+## Preset colours and palette linking
 
-- In preset editor, selecting a color picker value auto-adds it when the picker closes.
+- In preset editor, selecting a colour picker value auto-adds it when the picker closes.
-- Use **From Palette** to add a palette-linked preset color.
+- Use **From Palette** to add a palette-linked preset colour.
-- Linked colors are stored as palette references and shown with a `P` badge.
+- Linked colours are stored as palette references and shown with a `P` badge.
-- When profile palette colors change, linked preset colors update across that profile.
+- When profile palette colours change, linked preset colours update across that profile.
 
 ## API docs
 

docs/API.md

@@ -16,7 +16,7 @@ All JSON APIs use `Content-Type: application/json` for bodies and responses unle
 The main UI has two modes controlled by the mode toggle:
 
 - **Run mode**: optimized for operation (tab/preset selection and profile apply).
-- **Edit mode**: shows editing/management controls (tabs, presets, patterns, color palette, send presets, and profile management actions).
+- **Edit mode**: shows editing/management controls (tabs, presets, patterns, colour palette, send presets, and profile management actions).
 
 Profiles are available in both modes, but behavior differs:
 
@@ -117,8 +117,8 @@ Response on success includes `presets_sent`, `messages_sent` (chunking splits pa
 
 Stored preset records can include:
 
-- `colors`: resolved hex colors for editor/display.
+- `colors`: resolved hex colours for editor/display.
-- `palette_refs`: optional array of palette indexes parallel to `colors`. If a slot contains an integer index, the color is linked to the current profile palette at that index.
+- `palette_refs`: optional array of palette indexes parallel to `colors`. If a slot contains an integer index, the colour is linked to the current profile palette at that index.
 
 ### Tabs — `/tabs`
 
@@ -137,10 +137,10 @@ Stored preset records can include:
 
 | Method | Path | Description |
 |--------|------|-------------|
-| GET | `/palettes` | Map of id → color list. |
+| GET | `/palettes` | Map of id → colour list. |
 | GET | `/palettes/<id>` | `{"colors": [...], "id": "<id>"}` |
 | POST | `/palettes` | Body may include `colors`. Returns palette object with `id`, 201. |
-| PUT | `/palettes/<id>` | Update colors (`name` ignored). |
+| PUT | `/palettes/<id>` | Update colours (`name` ignored). |
 | DELETE | `/palettes/<id>` | Delete palette. |
 
 ### Groups — `/groups`
@@ -217,7 +217,7 @@ On the wire, presets use **short keys** (saves space in the ≤240-byte chunks):
 | Key | Meaning | Notes |
 |-----|---------|--------|
 | `p` | Pattern id | `off`, `on`, `blink`, `rainbow`, `pulse`, `transition`, `chase`, `circle` |
-| `c` | Colors | Array of `"#RRGGBB"` hex strings; converted to RGB on device |
+| `c` | Colours | Array of `"#RRGGBB"` hex strings; converted to RGB on device |
 | `d` | Delay ms | Default 100 |
 | `b` | Preset brightness | 0–255; combined with global `b` on the device |
 | `a` | Auto | `true`: run continuously; `false`: one step/cycle per “beat” |
@@ -228,7 +228,7 @@ The HTTP app’s **`POST /presets/send`** path builds this from stored presets v
 ### Pattern-specific parameters (`n1`–`n6`)
 
 #### Rainbow
-- **`n1`**: Step increment on the color wheel per update (default 1).
+- **`n1`**: Step increment on the colour wheel per update (default 1).
 
 #### Pulse
 - **`n1`**: Attack (fade in) ms  
@@ -240,8 +240,8 @@ The HTTP app’s **`POST /presets/send`** path builds this from stored presets v
 - **`d`**: Transition duration ms  
 
 #### Chase
-- **`n1`**: LEDs with first color  
+- **`n1`**: LEDs with first colour  
-- **`n2`**: LEDs with second color  
+- **`n2`**: LEDs with second colour  
 - **`n3`**: Movement on even steps (may be negative)  
 - **`n4`**: Movement on odd steps (may be negative)  
 
@@ -299,7 +299,7 @@ The HTTP app’s **`POST /presets/send`** path builds this from stored presets v
 
 1. Reject if `v != "1"`.
 2. Apply optional top-level **`b`** (global brightness).
-3. For each entry in **`presets`**, normalize colors and upsert preset by id.
+3. For each entry in **`presets`**, normalize colours and upsert preset by id.
 4. If this device’s **`name`** appears in **`select`**, run selection (optional step).
 5. If **`default`** is set, store startup preset id.
 6. If **`save`** is set, persist presets.

docs/SPECIFICATION.md

@@ -44,7 +44,7 @@ The LED Driver system is a MicroPython-based application for controlling LED str
 - Pattern configuration and control (patterns run on remote devices)
 - Real-time brightness and speed control
 - Global brightness setting (system-wide brightness multiplier)
-- Multi-color support with customizable color palettes
+- Multi-colour support with customizable colour palettes
 - Device grouping for synchronized control
 - Preset system for saving and loading pattern configurations
 - Profile and Scene system for complex lighting setups
@@ -239,7 +239,7 @@ Primary interface for real-time LED control and monitoring.
 - **Grid Layout:** 4-column responsive grid
   - Pattern Selection Card
   - Brightness & Speed Card
-  - Color Selection Card
+  - Colour Selection Card
   - Device Status Card
 - **Action Bar:** Apply and Save buttons
 
@@ -273,12 +273,12 @@ Primary interface for real-time LED control and monitoring.
 - **Default:** 100ms
 - **Step:** 10ms increments
 
-**Color Selection**
+**Colour Selection**
-- **Type:** Color picker inputs (HTML5 color input)
+- **Type:** Colour picker inputs (HTML5 colour input)
-- **Quantity:** Multiple colors (minimum 2, expandable)
+- **Quantity:** Multiple colours (minimum 2, expandable)
-- **Format:** Hex color codes (e.g., #FF0000)
+- **Format:** Hex colour codes (e.g., #FF0000)
-- **Display:** Large color swatches (60x60px)
+- **Display:** Large colour swatches (60x60px)
-- **Action:** "Add Color" button for additional colors
+- **Action:** "Add Colour" button for additional colours
 
 **Device Status List**
 - **Type:** List of connected devices
@@ -295,7 +295,7 @@ Primary interface for real-time LED control and monitoring.
 - **Save to Device:** Persist settings to device storage
 
 #### Design Specifications
-- **Color Scheme:** Purple gradient background (#667eea to #764ba2)
+- **Colour Scheme:** Purple gradient background (#667eea to #764ba2)
 - **Cards:** White background, rounded corners (12px), shadow
 - **Hover Effects:** Card lift (translateY -2px), increased shadow
 - **Typography:** System font stack, 1.25rem headings
@@ -509,7 +509,7 @@ Comprehensive device configuration interface.
 - Device Name (text input)
 - LED Pin (number input, 0-40)
 - Number of LEDs (number input, 1-1000)
-- Color Order (visual selector with 6 options: RGB, RBG, GRB, GBR, BRG, BGR)
+- Colour Order (visual selector with 6 options: RGB, RBG, GRB, GBR, BRG, BGR)
 
 **2. Pattern Settings**
 - Pattern (dropdown selection)
@@ -577,16 +577,16 @@ Comprehensive device configuration interface.
 - Range: Slider with real-time value display
 - Select: Dropdown menu
 - Checkbox: Toggle switch
-- Color: HTML5 color picker
+- Colour: HTML5 colour picker
 
-**Color Order Selector**
+**Colour Order Selector**
 - **Type:** Visual button grid
 - **Options:** RGB, RBG, GRB, GBR, BRG, BGR
-- **Display:** Color boxes showing order (R=red, G=green, B=blue)
+- **Display:** Colour boxes showing order (R=red, G=green, B=blue)
 - **Selection:** Single selection with visual feedback
 
 #### Design Specifications
-- **Section Headers:** Purple color (#667eea), 1.5rem font, bottom border
+- **Section Headers:** Purple colour (#667eea), 1.5rem font, bottom border
 - **Form Groups:** 24px spacing between fields
 - **Labels:** Bold, 500 weight, dark gray (#333)
 - **Help Text:** Small gray text below inputs
@@ -611,7 +611,7 @@ Save, load, and manage preset configurations for quick pattern switching.
 Each preset card displays:
 - **Name:** Preset name (bold, 1.25rem)
 - **Pattern Badge:** Current pattern type
-- **Color Preview:** Swatches showing preset colors
+- **Colour Preview:** Swatches showing preset colours
 - **Quick Info:** Delay and brightness values
 - **Actions:** Apply, Edit, Delete buttons
 
@@ -620,7 +620,7 @@ Each preset card displays:
 **Fields:**
 - Preset Name (text input, required)
 - Pattern (dropdown selection)
-- Colors (multiple color pickers, minimum 2)
+- Colours (multiple colour pickers, minimum 2)
 - Delay (slider, 10-1000ms)
 - Step Offset (number input, optional, default: 0)
   - Tooltip: "Step offset for group synchronization. Applied per device when preset is used in a group."
@@ -667,7 +667,7 @@ Each preset card displays:
 #### Design Specifications
 - **Card Style:** White background, rounded corners, shadow
 - **Pattern Badge:** Colored pill with pattern name
-- **Color Swatches:** 40x40px squares in card header
+- **Colour Swatches:** 40x40px squares in card header
 - **Hover Effect:** Card lift, border highlight
 - **Selected State:** Purple border, subtle background tint
 
@@ -681,7 +681,7 @@ Patterns are configured on the controller and sent to remote devices for executi
 
 - **Pattern Type:** Identifier for the pattern (e.g., "on", "off", "blink", "chase", "pulse", "rainbow", etc.)
 - **Pattern Parameters:** Numeric parameters (N1-N8) that configure pattern-specific behavior
-- **Colors:** Color palette for the pattern
+- **Colours:** Colour palette for the pattern
 - **Timing:** Delay and speed settings
 
 **Note:** Pattern execution happens on the remote devices. The controller sends configuration commands to devices.
@@ -698,7 +698,7 @@ Pattern-specific numeric parameters:
 
 #### Overview
 
-Presets allow users to save complete pattern configurations for quick recall and application. A preset encapsulates all pattern settings including pattern type, colors, timing, and all pattern parameters.
+Presets allow users to save complete pattern configurations for quick recall and application. A preset encapsulates all pattern settings including pattern type, colours, timing, and all pattern parameters.
 
 **Note:** Presets are optional. Devices can be controlled directly without presets.
 
@@ -708,7 +708,7 @@ A preset contains the following fields:
 
 - **name** (string, required): Unique identifier for the preset
 - **pattern** (string, required): Pattern type identifier (sent to remote devices)
-- **colors** (array of strings, required): Array of hex color codes (minimum 2 colors)
+- **colours** (array of strings, required): Array of hex colour codes (minimum 2 colours)
 - **delay** (integer, required): Delay in milliseconds (10-1000)
 - **n1** (integer, optional): Pattern parameter 1 (0-255, default: 0)
 - **n2** (integer, optional): Pattern parameter 2 (0-255, default: 0)
@@ -889,7 +889,7 @@ A preset contains the following fields:
 #### Group Properties
 - **Name:** Unique group identifier
 - **Devices:** List of device names (can include master and/or slaves)
-- **Settings:** Pattern, delay, colors
+- **Settings:** Pattern, delay, colours
 - **Step Offset:** Per-device step offset sent to devices for synchronized patterns (integer, can be negative)
   - Each device in group can receive different step offset
   - Creates wave/chase effect across multiple LED strips
@@ -953,7 +953,7 @@ Byte 1: Flags (bit 0: names, bit 1: groups, bit 2: settings, bit 3: save)
 |-----|------|-------------|--------------|
 | `pt` | string | Pattern type | on, off, blink, chase, circle, pulse, rainbow, transition |
 | `pm` | string | Pattern mode | auto, single_shot |
-| `cl` | array | Colors (hex strings) | Array of hex color codes |
+| `cl` | array | Colours (hex strings) | Array of hex colour codes |
 | `br` | int | Global brightness | 0-100 |
 | `dl` | int | Delay (ms) | 10-1000 |
 | `n1` | int | Parameter 1 | 0-255 |
@@ -966,7 +966,7 @@ Byte 1: Flags (bit 0: names, bit 1: groups, bit 2: settings, bit 3: save)
 | `n8` | int | Parameter 8 | 0-255 |
 | `led_pin` | int | GPIO pin | 0-40 |
 | `num_leds` | int | LED count | 1-1000 |
-| `color_order` | string | Color order | rgb, rbg, grb, gbr, brg, bgr |
+| `color_order` | string | Colour order | rgb, rbg, grb, gbr, brg, bgr |
 | `name` | string | Device name | Any string |
 | `brightness` | int | Global brightness | 0-100 |
 | `delay` | int | Delay | 10-1000 |
@@ -1247,7 +1247,7 @@ CREATE TABLE IF NOT EXISTS presets (
 **Preset Fields:**
 - `name` (string, required): Unique preset identifier
 - `pattern` (string, required): Pattern type
-- `colors` (array of strings, required): Hex color codes (minimum 2)
+- `colors` (array of strings, required): Hex colour codes (minimum 2)
 - `delay` (integer, required): Delay in milliseconds (10-1000)
 - `n1` through `n8` (integer, optional): Pattern parameters (0-255, default: 0)
 
@@ -1289,7 +1289,7 @@ CREATE TABLE IF NOT EXISTS presets (
 
 **POST /api/presets**
 - Create a new preset
-- Body: Preset object (name, pattern, colors, delay, n1-n8)
+- Body: Preset object (name, pattern, colours, delay, n1-n8)
 - Response: Created preset object
 
 **GET /api/presets/{name}**
@@ -1506,7 +1506,7 @@ peak_mem = usqlite.mem_peak()
 
 1. User navigates to Settings page
 2. User modifies settings in sections:
-   - Basic Settings (pin, LED count, color order)
+   - Basic Settings (pin, LED count, colour order)
    - Pattern Settings (pattern, delay)
    - Global Brightness
    - Advanced Settings (N1-N8 parameters)
@@ -1519,7 +1519,7 @@ peak_mem = usqlite.mem_peak()
 ### Flow 4: Multi-Device Control
 
 1. User selects multiple devices or a group
-2. User changes pattern/colors/global brightness
+2. User changes pattern/colours/global brightness
 3. User clicks "Apply Settings"
 4. System sends message targeting selected devices/groups
 5. All targeted devices update simultaneously
@@ -1585,7 +1585,7 @@ peak_mem = usqlite.mem_peak()
 
 ## Design Guidelines
 
-### Color Palette
+### Colour Palette
 
 - **Primary:** Purple gradient `#667eea` to `#764ba2`, Light gradient `#f5f7fa` to `#c3cfe2`
 - **UI:** Primary `#667eea`, Hover `#5568d3`, Secondary `#e0e0e0`
@@ -1612,8 +1612,8 @@ peak_mem = usqlite.mem_peak()
 - Disabled: 50% opacity, no pointer events
 
 **Inputs:**
-- Focus: Border color changes to primary purple
+- Focus: Border colour changes to primary purple
-- Hover: Slight border color change
+- Hover: Slight border colour change
 - Error: Red border
 
 **Cards:**
@@ -1738,7 +1738,7 @@ peak_mem = usqlite.mem_peak()
 - Validation
 
 **Preset Management:**
-- Preset creation with all fields (name, pattern, colors, delay, n1-n8)
+- Preset creation with all fields (name, pattern, colours, delay, n1-n8)
 - Preset loading and application
 - Preset editing and deletion
 - Name uniqueness validation
@@ -1758,7 +1758,7 @@ peak_mem = usqlite.mem_peak()
 - Configuration parameters are properly formatted
 
 **Preset Application:**
-- Preset loads all parameters correctly (pattern, colors, delay, n1-n8)
+- Preset loads all parameters correctly (pattern, colours, delay, n1-n8)
 - Preset applies to single device
 - Preset applies to device group
 - Preset values match saved configuration

docs/mockups/COLOR_PICKER_README.md

@@ -1,13 +1,13 @@
-# Custom Color Picker Component
+# Custom Colour Picker Component
 
-A cross-platform, cross-browser color picker component that provides a consistent user experience across all operating systems and browsers.
+A cross-platform, cross-browser colour picker component that provides a consistent user experience across all operating systems and browsers.
 
 ## Features
 
 ✅ **Consistent UI** - Same appearance and behavior on Windows, macOS, Linux, iOS, and Android  
 ✅ **Browser Support** - Works in Chrome, Firefox, Safari, Edge, Opera, and mobile browsers  
 ✅ **Touch Support** - Full touch/gesture support for mobile devices  
-✅ **HSB Color Model** - Uses Hue, Saturation, Brightness for intuitive color selection  
+✅ **HSB Colour Model** - Uses Hue, Saturation, Brightness for intuitive colour selection  
 ✅ **Multiple Input Methods** - Hex input, RGB inputs, and visual picker  
 ✅ **Accessible** - Keyboard accessible and screen reader friendly  
 ✅ **Customizable** - Easy to style and integrate  
@@ -33,7 +33,7 @@ A cross-platform, cross-browser color picker component that provides a consisten
 <div id="my-color-picker"></div>
 ```
 
-### 3. Initialize the color picker
+### 3. Initialize the colour picker
 
 ```javascript
 const picker = new ColorPicker('#my-color-picker', {
@@ -57,8 +57,8 @@ new ColorPicker(container, options)
 - `options` (object) - Configuration options
 
 **Options:**
-- `initialColor` (string) - Initial color in hex format (default: '#FF0000')
+- `initialColor` (string) - Initial colour in hex format (default: '#FF0000')
-- `onColorChange` (function) - Callback when color changes (receives hex color string)
+- `onColorChange` (function) - Callback when colour changes (receives hex colour string)
 - `showHexInput` (boolean) - Show hex input field (default: true)
 
 ### Methods
@@ -101,7 +101,7 @@ const picker = new ColorPicker('#picker1', {
 });
 ```
 
-### Multiple Color Pickers
+### Multiple Colour Pickers
 
 ```javascript
 const colors = ['#FF0000', '#00FF00', '#0000FF'];
@@ -116,7 +116,7 @@ const pickers = colors.map((color, index) => {
 });
 ```
 
-### Dynamic Color Picker Creation
+### Dynamic Colour Picker Creation
 
 ```javascript
 function addColorPicker(containerId, initialColor = '#000000') {
@@ -139,12 +139,12 @@ addColorPicker('color-2', '#00FF00');
 
 ## Styling
 
-The color picker uses CSS classes that can be customized:
+The colour picker uses CSS classes that can be customized:
 
 - `.color-picker-container` - Main container
-- `.color-picker-preview` - Color preview button
+- `.color-picker-preview` - Colour preview button
 - `.color-picker-panel` - Dropdown panel
-- `.color-picker-main` - Main color area
+- `.color-picker-main` - Main colour area
 - `.color-picker-hue` - Hue slider
 - `.color-picker-controls` - Controls section
 
@@ -183,20 +183,20 @@ The color picker uses CSS classes that can be customized:
 - ✅ iOS 12+
 - ✅ Android 7+
 
-## Color Format
+## Colour Format
 
-The color picker uses **hex color format** (`#RRGGBB`):
+The colour picker uses **hex colour format** (`#RRGGBB`):
 - Always returns uppercase hex strings (e.g., `#FF0000`)
 - Accepts both uppercase and lowercase input
 - Automatically validates hex format
 
 ## Integration with LED Driver Mockups
 
-The color picker is integrated into:
+The colour picker is integrated into:
-- `dashboard.html` - Color selection for patterns
+- `dashboard.html` - Colour selection for patterns
-- `presets.html` - Color selection when creating/editing presets
+- `presets.html` - Colour selection when creating/editing presets
 
-### Example: Getting Colors from Multiple Pickers
+### Example: Getting Colours from Multiple Pickers
 
 ```javascript
 const colorPickers = [];
@@ -218,7 +218,7 @@ function sendColorsToDevice() {
 ## Performance
 
 - Lightweight: ~14KB JavaScript, ~4KB CSS
-- Fast rendering: Uses Canvas API for color gradients
+- Fast rendering: Uses Canvas API for colour gradients
 - Smooth interactions: Optimized event handling
 - Memory efficient: No external dependencies
 
@@ -235,5 +235,5 @@ Part of the LED Driver project. Use freely in your projects.
 
 ## Demo
 
-See `color-picker-demo.html` for a live demonstration of the color picker component.
+See `color-picker-demo.html` for a live demonstration of the colour picker component.
 

src/templates/index.html

@@ -19,7 +19,7 @@
                 <button class="btn btn-secondary edit-mode-only" id="tabs-btn">Tabs</button>
                 <button class="btn btn-secondary edit-mode-only" id="presets-btn">Presets</button>
                 <button class="btn btn-secondary edit-mode-only" id="patterns-btn">Patterns</button>
-                <button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Color Palette</button>
+                <button class="btn btn-secondary edit-mode-only" id="color-palette-btn">Colour Palette</button>
                 <button class="btn btn-secondary edit-mode-only" id="send-profile-presets-btn">Send Presets</button>
                 <button class="btn btn-secondary" id="help-btn">Help</button>
                 <button type="button" class="btn btn-secondary ui-mode-toggle" id="ui-mode-toggle" aria-pressed="false" title="Switch preset strip mode — label is the mode you will switch to">Edit mode</button>
@@ -32,7 +32,7 @@
                     <button type="button" class="edit-mode-only" data-target="tabs-btn">Tabs</button>
                     <button type="button" class="edit-mode-only" data-target="presets-btn">Presets</button>
                     <button type="button" class="edit-mode-only" data-target="patterns-btn">Patterns</button>
-                    <button type="button" class="edit-mode-only" data-target="color-palette-btn">Color Palette</button>
+                    <button type="button" class="edit-mode-only" data-target="color-palette-btn">Colour Palette</button>
                     <button type="button" class="edit-mode-only" data-target="send-profile-presets-btn">Send Presets</button>
                     <button type="button" data-target="help-btn">Help</button>
                 </div>
@@ -129,10 +129,10 @@
                     <option value="">Pattern</option>
                 </select>
             </div>
-            <label>Colors</label>
+            <label>Colours</label>
             <div id="preset-colors-container" class="preset-colors-container"></div>
             <div class="profiles-actions">
-                <input type="color" id="preset-new-color" value="#ffffff" title="Choose color (auto-adds)">
+                <input type="color" id="preset-new-color" value="#ffffff" title="Choose colour (auto-adds)">
                 <button class="btn btn-secondary btn-small" id="preset-add-from-palette-btn">From Palette</button>
             </div>
             <div class="profiles-actions">
@@ -201,10 +201,10 @@
         </div>
     </div>
 
-    <!-- Color Palette Modal -->
+    <!-- Colour Palette Modal -->
     <div id="color-palette-modal" class="modal">
         <div class="modal-content">
-            <h2>Color Palette</h2>
+            <h2>Colour Palette</h2>
             <p class="muted-text">Profile: <span id="palette-current-profile-name">None</span></p>
             <div id="palette-container" class="profiles-list"></div>
             <div class="profiles-actions">
@@ -238,7 +238,7 @@
                 <li><strong>Preset tiles</strong>: each tile shows <strong>Edit</strong> and <strong>Remove</strong> controls in Edit mode.</li>
                 <li><strong>Reorder presets</strong>: drag and drop preset tiles to save tab order.</li>
                 <li><strong>Profiles</strong>: create/clone/delete profiles. New profiles get a populated <strong>default</strong> tab and can optionally seed a <strong>DJ tab</strong>.</li>
-                <li><strong>Color Palette</strong>: build profile colors and use <strong>From Palette</strong> in preset editor to add linked colors (badge <strong>P</strong>) that update when palette colors change.</li>
+                <li><strong>Colour Palette</strong>: build profile colours and use <strong>From Palette</strong> in preset editor to add linked colours (badge <strong>P</strong>) that update when palette colours change.</li>
             </ul>
 
             <div class="modal-actions">

src/util/README.md

@@ -74,7 +74,7 @@ See `docs/API.md` for the complete ESPNow API specification.
 ## Key Features
 
 - **Version Field**: All messages include `"v": "1"` for version tracking
-- **Preset Format**: Presets use hex color strings (`#RRGGBB`), not RGB tuples
+- **Preset Format**: Presets use hex colour strings (`#RRGGBB`), not RGB tuples
 - **Select Format**: Select values are always lists: `["preset_name"]` or `["preset_name", step]`
-- **Color Conversion**: Automatically converts RGB tuples to hex strings
+- **Colour Conversion**: Automatically converts RGB tuples to hex strings
 - **Default Values**: Provides sensible defaults for missing fields