identity: the Instrument palette and the bus mark

Palette: the warm brown-black ground and burnt-orange accent give way to
a cool ink-black with a cyan primary -- the same token block, new values,
mirrored into the MkDocs theme so the docs sites follow. Accent contrast
against the ground goes 5.48 -> 9.66; the tier hues are retuned to sit in
the cooler temperature and keep their own identities.

Mark: the monitor glyph is replaced by the bus -- one trunk, three taps,
each ending in a pad. It depicts what the org ships (a single contract
reaching many endpoints) rather than one of the five things it drives,
which the screen glyph had meant since the pydisplay days. Drawn
free-standing on transparent ground for the header, hero and favicon;
the PNG derivatives keep an opaque tile because platform icons need one.

The org's own page now takes the brand accent instead of borrowing tier
1's amber -- tier 0 is the organization, and its colour is the brand.
Product pages keep their tier-coloured badges, which is what carries each
repo's tier. The watch and signal-gen hero demos follow the accent; the
thermostat's orange stays, because there it means heat.

Author: bdbarnett

assets/apps/signal_gen.py

@@ -337,7 +337,7 @@ def _build_dial(self, scr):
         self.pointer = _clean_obj(self.knob)
         self.pointer.set_size(pw, ph)
         self.pointer.set_style_radius(pw // 2, 0)
-        self.pointer.set_style_bg_color(_color(0xF54E00), 0)
+        self.pointer.set_style_bg_color(_color(0x22C7E2), 0)
         self.pointer.set_style_bg_opa(lv.OPA.COVER, 0)
         self.pointer.align(lv.ALIGN.TOP_MID, 0, int(knob_r * 0.14))
 
@@ -442,8 +442,8 @@ def _on_hub_click(self, _evt):
     def _refresh_hub(self):
         if self.playing:
             self.hub_icon.set_text(lv.SYMBOL.VOLUME_MAX)
-            self.hub_icon.set_style_text_color(_color(0xF54E00), 0)
-            self.hub.set_style_border_color(_color(0xF54E00), 0)
+            self.hub_icon.set_style_text_color(_color(0x22C7E2), 0)
+            self.hub.set_style_border_color(_color(0x22C7E2), 0)
         else:
             self.hub_icon.set_text(lv.SYMBOL.MUTE)
             self.hub_icon.set_style_text_color(_color(0x64748B), 0)
@@ -455,9 +455,9 @@ def _select_wave(self, idx, initial=False):
         self.osc.wave = name
         for i, (btn, lbl) in enumerate(self.wave_btns):
             active = i == idx
-            btn.set_style_bg_color(_color(0xF54E00 if active else 0x151A20), 0)
+            btn.set_style_bg_color(_color(0x22C7E2 if active else 0x151A20), 0)
             btn.set_style_bg_opa(lv.OPA.COVER, 0)
-            btn.set_style_border_color(_color(0xF54E00 if active else 0x2A3441), 0)
+            btn.set_style_border_color(_color(0x22C7E2 if active else 0x2A3441), 0)
             lbl.set_style_text_color(_color(0x0A0D10 if active else 0x94A3B8), 0)
         if not initial:
             self.last_interaction = time.time()

assets/apps/watch.py

@@ -211,7 +211,7 @@ def _build_watch(self):
         self.bezel_ring.set_style_radius(lv.RADIUS_CIRCLE, 0)
         self.bezel_ring.set_style_bg_color(_color(0x151A20), 0)
         self.bezel_ring.set_style_bg_opa(lv.OPA.COVER, 0)
-        self.bezel_ring.set_style_border_color(_color(0xF54E00), 0)
+        self.bezel_ring.set_style_border_color(_color(0x22C7E2), 0)
         self.bezel_ring.set_style_border_width(1, 0)
         self.bezel_ring.set_style_border_opa(lv.OPA._60, 0)
         try:
@@ -271,7 +271,7 @@ def _build_watch(self):
         # 6. Brand Label (Upper Dial Quadrant)
         # Horizontal center aligned to parent (x_offset = 0), calculated y_offset
         brand_top_offset = int(dial_size * 0.25)
-        self.brand_lbl = _clean_label(self.face, "PYDEVICES", 0xF54E00, 11)
+        self.brand_lbl = _clean_label(self.face, "PYDEVICES", 0x22C7E2, 11)
         self.brand_lbl.align(lv.ALIGN.TOP_MID, 0, brand_top_offset)
         try:
             self.brand_lbl.update_layout()
@@ -339,7 +339,7 @@ def _build_watch(self):
         # Major ticks (hours)
         major_style = lv.style_t()
         major_style.init()
-        major_style.set_line_color(_color(0xF54E00))
+        major_style.set_line_color(_color(0x22C7E2))
         major_style.set_line_width(max(2, int(dial_size * 0.009)))
         major_style.set_length(max(6, int(r * 0.09)))
         major_style.set_line_rounded(True)
@@ -365,26 +365,26 @@ def _build_watch(self):
         hour_len = int(r * 0.58)
         self.hands["hour"].append((self._line(self.needle_scale, 0x050709, max(4, int(dial_size * 0.025))), hour_len + 1))
         self.hands["hour"].append((self._line(self.needle_scale, 0xE2E8F0, max(3, int(dial_size * 0.018))), int(hour_len * 0.85)))
-        self.hands["hour"].append((self._line(self.needle_scale, 0xF54E00, 1), hour_len))
+        self.hands["hour"].append((self._line(self.needle_scale, 0x22C7E2, 1), hour_len))
 
         # Minute hand layers
         min_len = int(r * 0.82)
         self.hands["minute"].append((self._line(self.needle_scale, 0x050709, max(3, int(dial_size * 0.018))), min_len + 1))
         self.hands["minute"].append((self._line(self.needle_scale, 0xF8FAFC, max(2, int(dial_size * 0.010))), int(min_len * 0.88)))
-        self.hands["minute"].append((self._line(self.needle_scale, 0xF54E00, 1), min_len))
+        self.hands["minute"].append((self._line(self.needle_scale, 0x22C7E2, 1), min_len))
 
         # Second hand (sweeping brand orange/amber needle + dark outline)
         sec_len = int(r * 0.90)
         self.hands["second"].append((self._line(self.needle_scale, 0x1A0802, max(2, int(dial_size * 0.012))), sec_len + 1))
-        self.hands["second"].append((self._line(self.needle_scale, 0xF54E00, 1), sec_len))
+        self.hands["second"].append((self._line(self.needle_scale, 0x22C7E2, 1), sec_len))
 
         # 10. Center Hub Cap - Created on top of the hands
         hub_size = max(10, int(dial_size * 0.065))
         self.hub = _clean_obj(self.face)
         self.hub.set_size(hub_size, hub_size)
         self.hub.center()
         self.hub.set_style_radius(lv.RADIUS_CIRCLE, 0)
-        self.hub.set_style_bg_color(_color(0xF54E00), 0)
+        self.hub.set_style_bg_color(_color(0x22C7E2), 0)
         self.hub.set_style_bg_grad_color(_color(0x9A3412), 0)
         self.hub.set_style_bg_grad_dir(lv.GRAD_DIR.VER, 0)
         self.hub.set_style_bg_opa(lv.OPA.COVER, 0)

assets/css/docs-extra.css

@@ -27,17 +27,17 @@
 
 :root > * {
   /* Brand channels — the source of every orange in this file. */
-  --doc-brand-rgb: 245 78 0;
-  --doc-primary-bg-rgb: 255 247 241;
-  --doc-accent-bg-rgb: 26 13 5;
+  --doc-brand-rgb: 34 199 226;
+  --doc-primary-bg-rgb: 240 253 255;
+  --doc-accent-bg-rgb: 4 22 28;
 
   --md-primary-fg-color: rgb(var(--doc-brand-rgb));
-  --md-primary-fg-color--light: #ff7a3d;
-  --md-primary-fg-color--dark: #c33f00;
+  --md-primary-fg-color--light: #5edcf0;
+  --md-primary-fg-color--dark: #08657a;
   --md-primary-bg-color: rgb(var(--doc-primary-bg-rgb));
   --md-primary-bg-color--light: rgb(var(--doc-primary-bg-rgb) / 0.7);
 
-  --md-accent-fg-color: #ff7a3d;
+  --md-accent-fg-color: #5edcf0;
   --md-accent-fg-color--transparent: rgb(var(--doc-brand-rgb) / 0.1);
   --md-accent-bg-color: rgb(var(--doc-accent-bg-rgb));
   --md-accent-bg-color--light: rgb(var(--doc-accent-bg-rgb) / 0.7);
@@ -59,47 +59,47 @@
      rather than the site chrome, so they stay fixed across schemes and need
      not follow a brand palette change. */
   --demo-canvas-bg: #000000;
-  --demo-canvas-frame: #241e17;
+  --demo-canvas-frame: #17222c;
   --demo-canvas-border: #333333;
 }
 
 [data-md-color-scheme="default"] {
-  --md-default-bg-color: #fbf9f5;
-  --md-default-bg-color--light: #f3eee6;
-  --md-default-bg-color--lighter: #f6f1e9;
+  --md-default-bg-color: #f5f9fb;
+  --md-default-bg-color--light: #e9f1f5;
+  --md-default-bg-color--lighter: #eff6f9;
   --md-default-bg-color--lightest: #ffffff;
-  --md-default-fg-color: #201c16;
-  --md-default-fg-color--light: #5b5347;
-  --md-default-fg-color--lighter: #8a8172;
-  --md-default-fg-color--lightest: #c9bfae;
-  --md-typeset-a-color: #c33f00;
-  --md-code-bg-color: #f6f1e9;
-  --md-code-fg-color: #201c16;
-  --md-footer-bg-color: #f3eee6;
-  --md-footer-bg-color--dark: #201c16;
-  --md-footer-fg-color: #201c16;
-  --md-footer-fg-color--light: #5b5347;
-  --md-footer-fg-color--lighter: #8a8172;
+  --md-default-fg-color: #0c161d;
+  --md-default-fg-color--light: #47606f;
+  --md-default-fg-color--lighter: #6f8695;
+  --md-default-fg-color--lightest: #a7bccc;
+  --md-typeset-a-color: #08657a;
+  --md-code-bg-color: #eff6f9;
+  --md-code-fg-color: #0c161d;
+  --md-footer-bg-color: #e9f1f5;
+  --md-footer-bg-color--dark: #0c161d;
+  --md-footer-fg-color: #0c161d;
+  --md-footer-fg-color--light: #47606f;
+  --md-footer-fg-color--lighter: #6f8695;
 }
 
 [data-md-color-scheme="slate"] {
-  --md-hue: 32;
-  --md-default-bg-color: #100e0b;
-  --md-default-bg-color--light: #17130f;
-  --md-default-bg-color--lighter: #1c1712;
-  --md-default-bg-color--lightest: #241e17;
-  --md-default-fg-color: #f3ecdf;
-  --md-default-fg-color--light: #c9bfae;
-  --md-default-fg-color--lighter: #8f8474;
-  --md-default-fg-color--lightest: #5b5347;
-  --md-typeset-a-color: #ff8a52;
-  --md-code-bg-color: #1c1712;
-  --md-code-fg-color: #f3ecdf;
-  --md-footer-bg-color: #17130f;
-  --md-footer-bg-color--dark: #100e0b;
-  --md-footer-fg-color: #f3ecdf;
-  --md-footer-fg-color--light: #c9bfae;
-  --md-footer-fg-color--lighter: #8f8474;
+  --md-hue: 205;
+  --md-default-bg-color: #080c10;
+  --md-default-bg-color--light: #0d131a;
+  --md-default-bg-color--lighter: #121a22;
+  --md-default-bg-color--lightest: #17222c;
+  --md-default-fg-color: #dfeaf2;
+  --md-default-fg-color--light: #a7bccc;
+  --md-default-fg-color--lighter: #6f8598;
+  --md-default-fg-color--lightest: #47606f;
+  --md-typeset-a-color: #7de8f7;
+  --md-code-bg-color: #121a22;
+  --md-code-fg-color: #dfeaf2;
+  --md-footer-bg-color: #0d131a;
+  --md-footer-bg-color--dark: #080c10;
+  --md-footer-fg-color: #dfeaf2;
+  --md-footer-fg-color--light: #a7bccc;
+  --md-footer-fg-color--lighter: #6f8598;
 }
 
 /* Hero & Feature Grid Cards */