From f2966ad4cd210403b0b2b8bfc0a41385742d699a Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Wed, 2 Oct 2024 16:45:38 +0100
Subject: [PATCH 01/13] Theme simplications before extraction

---
 src/components/AboutDialog.tsx                |   2 +-
 src/components/ActionBar.tsx                  |   2 +-
 src/components/BluetoothPatternInput.tsx      |   4 +-
 src/components/BrokenFirmwareDialog.tsx       |   6 +-
 src/components/CertaintyThresholdGridItem.tsx |   2 +-
 src/components/ConnectBatteryDialog.tsx       |   4 +-
 src/components/DownloadProgressDialog.tsx     |   2 +-
 src/components/ErrorHandlerErrorView.tsx      |   2 +-
 src/components/LedIcon.tsx                    |   2 +-
 src/components/LiveGraphPanel.tsx             |   2 +-
 src/components/LoadingAnimation/index.tsx     |   2 +-
 src/components/ManualFlashingDialog.tsx       |   2 +-
 src/components/MoreMenuButton.tsx             |   1 -
 src/components/NotFound.tsx                   |   2 +-
 src/components/SaveProgressDialog.tsx         |   2 +-
 src/components/StartOverWarningDialog.tsx     |   2 +-
 .../TrainingModelProgressDialog.tsx           |   2 +-
 src/components/UnsupportedMicrobitDialog.tsx  |   4 +-
 src/deployment/default/colors.ts              | 144 +-----------------
 src/deployment/default/components/alert.ts    |   1 +
 src/deployment/default/components/avatar.ts   |  19 ---
 src/deployment/default/components/button.ts   |  52 +------
 src/deployment/default/components/heading.ts  |  15 --
 src/deployment/default/components/text.ts     |  15 --
 src/deployment/default/components/tooltip.ts  |   9 --
 src/deployment/default/default-graph.ts       |  14 --
 src/deployment/default/fonts.ts               |  10 +-
 src/deployment/default/graph.ts               |  17 ---
 src/deployment/default/theme.ts               |   8 -
 src/recording-graph.ts                        |   2 +-
 vite.config.ts                                |   2 +-
 31 files changed, 48 insertions(+), 305 deletions(-)
 delete mode 100644 src/deployment/default/components/avatar.ts
 delete mode 100644 src/deployment/default/components/heading.ts
 delete mode 100644 src/deployment/default/components/text.ts
 delete mode 100644 src/deployment/default/components/tooltip.ts
 delete mode 100644 src/deployment/default/default-graph.ts
 delete mode 100644 src/deployment/default/graph.ts

diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
index 162284c7d..913e5e110 100644
--- a/src/components/AboutDialog.tsx
+++ b/src/components/AboutDialog.tsx
@@ -87,7 +87,7 @@ const AboutDialog = ({
                         href="https://microbit.org"
                         target="_blank"
                         rel="noopener"
-                        color="purple.500"
+                        color="blue.600"
                       >
                         {chunks}
                       </Link>
diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx
index 71ce7c590..d8ed539ff 100644
--- a/src/components/ActionBar.tsx
+++ b/src/components/ActionBar.tsx
@@ -18,7 +18,7 @@ const ActionBar = ({
       px={5}
       alignItems="center"
       justifyContent="space-between"
-      bgColor="green.500"
+      bgColor="brand2.500"
       h="64px"
       minH="64px"
       {...rest}
diff --git a/src/components/BluetoothPatternInput.tsx b/src/components/BluetoothPatternInput.tsx
index a0bf00a45..86388515b 100644
--- a/src/components/BluetoothPatternInput.tsx
+++ b/src/components/BluetoothPatternInput.tsx
@@ -128,9 +128,9 @@ const PatternBox = ({
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      bgColor={isOn ? "green.500" : "gray.300"}
+      bgColor={isOn ? "brand2.500" : "gray.300"}
       borderWidth={isHighlighted && !isOn ? 3 : 0}
-      borderColor={isHighlighted ? (isOn ? "white" : "green.500") : undefined}
+      borderColor={isHighlighted ? (isOn ? "white" : "brand2.500") : undefined}
       opacity={isHighlighted && isOn ? 0.25 : 1}
     />
   );
diff --git a/src/components/BrokenFirmwareDialog.tsx b/src/components/BrokenFirmwareDialog.tsx
index 437353bd8..830387f30 100644
--- a/src/components/BrokenFirmwareDialog.tsx
+++ b/src/components/BrokenFirmwareDialog.tsx
@@ -55,7 +55,7 @@ const BrokenFirmwareDialog = ({
                     values={{
                       link: (chunks: ReactNode) => (
                         <Link
-                          color="purple.500"
+                          color="blue.600"
                           href="https://microbit.org/get-started/user-guide/firmware/"
                           target="_blank"
                           rel="noopener"
@@ -68,7 +68,7 @@ const BrokenFirmwareDialog = ({
                 </Text>
                 <Text w="100%">
                   <Link
-                    color="purple.500"
+                    color="blue.600"
                     href="https://microbit.org/get-started/user-guide/firmware/"
                     target="_blank"
                     rel="noopener"
@@ -80,7 +80,7 @@ const BrokenFirmwareDialog = ({
                     <Icon
                       as={RiExternalLinkLine}
                       boxSize={5}
-                      color="purple.500"
+                      color="blue.600"
                       position="relative"
                     />
                   </Link>
diff --git a/src/components/CertaintyThresholdGridItem.tsx b/src/components/CertaintyThresholdGridItem.tsx
index a7288af69..90dd5557c 100644
--- a/src/components/CertaintyThresholdGridItem.tsx
+++ b/src/components/CertaintyThresholdGridItem.tsx
@@ -35,7 +35,7 @@ const CertaintyThresholdGridItem = ({
   const intl = useIntl();
   const barWidth = 240;
   const colorScheme = useMemo(
-    () => (isTriggered ? "green.500" : undefined),
+    () => (isTriggered ? "brand2.500" : undefined),
     [isTriggered]
   );
 
diff --git a/src/components/ConnectBatteryDialog.tsx b/src/components/ConnectBatteryDialog.tsx
index c4c6e2a63..7f2f01e55 100644
--- a/src/components/ConnectBatteryDialog.tsx
+++ b/src/components/ConnectBatteryDialog.tsx
@@ -19,7 +19,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
         <Text alignSelf="left" width="100%">
           <FormattedMessage id="connectMB.connectBattery.subtitle" />
           <Link
-            color="purple.500"
+            color="blue.600"
             //TODO: Replace with real support link.
             href="https://support.microbit.org/support/home"
             target="_blank"
@@ -32,7 +32,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
             <Icon
               as={RiExternalLinkLine}
               boxSize={5}
-              color="purple.500"
+              color="blue.600"
               position="relative"
             />
           </Link>
diff --git a/src/components/DownloadProgressDialog.tsx b/src/components/DownloadProgressDialog.tsx
index 9f7dc36ee..64bc041e7 100644
--- a/src/components/DownloadProgressDialog.tsx
+++ b/src/components/DownloadProgressDialog.tsx
@@ -54,7 +54,7 @@ const DownloadProgressDialog = ({
               </Text>
               <Progress
                 value={progress}
-                colorScheme="green"
+                colorScheme="brand2"
                 size="md"
                 rounded={100}
               />
diff --git a/src/components/ErrorHandlerErrorView.tsx b/src/components/ErrorHandlerErrorView.tsx
index d1d3c7ab7..29648e6af 100644
--- a/src/components/ErrorHandlerErrorView.tsx
+++ b/src/components/ErrorHandlerErrorView.tsx
@@ -14,7 +14,7 @@ const ErrorHandlerErrorView = () => {
             values={{
               link: (chunks: ReactNode) => (
                 <Link
-                  color="purple.500"
+                  color="blue.600"
                   href="https://support.microbit.org"
                   target="_blank"
                   rel="noopener noreferrer"
diff --git a/src/components/LedIcon.tsx b/src/components/LedIcon.tsx
index 80d24caf7..3c9d84e69 100644
--- a/src/components/LedIcon.tsx
+++ b/src/components/LedIcon.tsx
@@ -66,7 +66,7 @@ const LedIconRow = ({ data, isTriggered }: LedIconRowProps) => {
         return "gray.200";
       }
       if (typeof isTriggered === "boolean" && isTriggered) {
-        return "green.500";
+        return "brand2.500";
       }
       if (typeof isTriggered === "boolean" && !isTriggered) {
         return "gray.600";
diff --git a/src/components/LiveGraphPanel.tsx b/src/components/LiveGraphPanel.tsx
index ca4841f95..e283f36ab 100644
--- a/src/components/LiveGraphPanel.tsx
+++ b/src/components/LiveGraphPanel.tsx
@@ -127,7 +127,7 @@ const LiveGraphPanel = ({
             <Text
               size="md"
               fontWeight="bold"
-              color={detected ? "green.600" : "gray.600"}
+              color={detected ? "brand2.600" : "gray.600"}
               isTruncated
               textAlign="center"
               w={`${predictedGestureDisplayWidth}px`}
diff --git a/src/components/LoadingAnimation/index.tsx b/src/components/LoadingAnimation/index.tsx
index d57d01ed0..386964b26 100644
--- a/src/components/LoadingAnimation/index.tsx
+++ b/src/components/LoadingAnimation/index.tsx
@@ -5,7 +5,7 @@ import styles from "./styles.module.css";
 const LoadingAnimation = () => {
   return (
     <HStack justifyContent="center" width="100%" h={25} position="relative">
-      <Box className={styles.loader} color="green.500"></Box>
+      <Box className={styles.loader} color="brand2.500"></Box>
     </HStack>
   );
 };
diff --git a/src/components/ManualFlashingDialog.tsx b/src/components/ManualFlashingDialog.tsx
index 93df9816b..803e94154 100644
--- a/src/components/ManualFlashingDialog.tsx
+++ b/src/components/ManualFlashingDialog.tsx
@@ -70,7 +70,7 @@ const ManualFlashingDialog = ({
             id="connectMB.transferHex.manualDownload"
             values={{
               link: (chunks: ReactNode) => (
-                <Text as="button" color="purple.500" onClick={handleDownload}>
+                <Text as="button" color="blue.600" onClick={handleDownload}>
                   {chunks}
                 </Text>
               ),
diff --git a/src/components/MoreMenuButton.tsx b/src/components/MoreMenuButton.tsx
index e21a07a80..448335fda 100644
--- a/src/components/MoreMenuButton.tsx
+++ b/src/components/MoreMenuButton.tsx
@@ -26,7 +26,6 @@ const MoreMenuButton = React.forwardRef(function MoreMenuButtonInner(
       ref={ref}
       variant={variant}
       borderLeft="1px"
-      borderRadius="button"
       as={IconButton}
       icon={
         <MdMoreVert
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index 7d988429a..1551333b5 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -11,7 +11,7 @@ const NotFound = ({ href }: NotFoundProps) => {
   const intl = useIntl();
   return (
     <ErrorPage title={intl.formatMessage({ id: "not-found-title" })}>
-      <Link color="purple.500" href={href ? href : createHomePageUrl()}>
+      <Link color="blue.600" href={href ? href : createHomePageUrl()}>
         <FormattedMessage id="not-found" />
       </Link>
     </ErrorPage>
diff --git a/src/components/SaveProgressDialog.tsx b/src/components/SaveProgressDialog.tsx
index d372c8f76..acc08cdac 100644
--- a/src/components/SaveProgressDialog.tsx
+++ b/src/components/SaveProgressDialog.tsx
@@ -34,7 +34,7 @@ const SaveProgressDialog = ({ isOpen }: SavingDialogProps) => {
               <Text>
                 <FormattedMessage id="saving-description" />
               </Text>
-              <Progress colorScheme="green" isIndeterminate rounded="md" />
+              <Progress colorScheme="brand2" isIndeterminate rounded="md" />
             </VStack>
           </ModalBody>
         </ModalContent>
diff --git a/src/components/StartOverWarningDialog.tsx b/src/components/StartOverWarningDialog.tsx
index b01fed7d4..39cbd8e94 100644
--- a/src/components/StartOverWarningDialog.tsx
+++ b/src/components/StartOverWarningDialog.tsx
@@ -56,7 +56,7 @@ const StartOverWarningDialog = ({
                     values={{
                       link: (chunks: ReactNode) => (
                         <Link
-                          color="purple.500"
+                          color="blue.600"
                           onClick={handleSaveHex}
                           target="_blank"
                           rel="noopener"
diff --git a/src/components/TrainingModelProgressDialog.tsx b/src/components/TrainingModelProgressDialog.tsx
index a5c827865..e59c51abc 100644
--- a/src/components/TrainingModelProgressDialog.tsx
+++ b/src/components/TrainingModelProgressDialog.tsx
@@ -36,7 +36,7 @@ const TrainingModelProgressDialog = ({
               </Heading>
               <Progress
                 value={progress}
-                colorScheme="green"
+                colorScheme="brand2"
                 size="md"
                 rounded={100}
               />
diff --git a/src/components/UnsupportedMicrobitDialog.tsx b/src/components/UnsupportedMicrobitDialog.tsx
index af125a475..27ee15e14 100644
--- a/src/components/UnsupportedMicrobitDialog.tsx
+++ b/src/components/UnsupportedMicrobitDialog.tsx
@@ -50,7 +50,7 @@ const UnsupportedMicrobitDialog = ({
                     values={{
                       link: (chunks: ReactNode) => (
                         <Link
-                          color="purple.500"
+                          color="blue.600"
                           href="https://support.microbit.org/support/solutions/articles/19000119162"
                           target="_blank"
                           rel="noopener"
@@ -70,7 +70,7 @@ const UnsupportedMicrobitDialog = ({
                       values={{
                         link: (chunks: ReactNode) => (
                           <Link
-                            color="purple.500"
+                            color="blue.600"
                             // TODO: Replace with real support link.
                             href="https://support.microbit.org/support/home"
                             target="_blank"
diff --git a/src/deployment/default/colors.ts b/src/deployment/default/colors.ts
index b48121341..d0173254a 100644
--- a/src/deployment/default/colors.ts
+++ b/src/deployment/default/colors.ts
@@ -1,142 +1,14 @@
+/**
+ * (c) 2021, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
 import { theme } from "@chakra-ui/theme";
 
-const gray = {
-  10: "#fcfcfc",
-  25: "#f5f5f5",
-  ...theme.colors.gray,
-  // Brand grey
-  500: "#e5e5e5",
-  // windi css text color
-  600: "#6b7280",
-};
-
-const brand = {
-  // Produced with using the hue from the brand blue at 400 but adjusting 500
-  // to be an acceptable button background color with white text at all sizes
-  // (WCGA AA 4.5)
-  // https://huetone.ardov.me/
-  50: "#edf7ff",
-  100: "#c1e1fb",
-  200: "#94ccf6",
-  300: "#62b3ed",
-  // Brand colour, but too light for white
-  400: "#2a94d6",
-  // 4.5 contrast with white
-  500: "#007dbc",
-  600: "#0071aa",
-  700: "#16567e",
-  800: "#1d4662",
-  900: "#023a5a",
-};
-
-// Taken from the red in https://windicss.org/utilities/general/colors.html
-const red = {
-  50: "#fef2f2",
-  100: "#fee2e2",
-  200: "#fecaca",
-  300: "#fca5a5",
-  400: "#f87171",
-  500: "#ef4444",
-  600: "#dc2626",
-  700: "#b91c1c",
-  800: "#991b1b",
-  900: "#7f1d1d",
-};
-
 const colors = {
-  // Brand guidelines say:
-  // "Each of the main primary colours can be tinted by 80%, 50%, 30%, 20% and 10% if needed."
-  // We've assumed this means tints and shades.
-  // Colours created via e.g.
-  // https://maketintsandshades.com/#6C4BC1
-  gray,
-  brand,
-  red,
-  purple: {
-    50: "#e2dbf3", // 80% tint
-    100: "#b6a5e0", // 50% tint
-    200: "#9881d4", // 30% tint
-    300: "#896fcd", // 20% tint
-    400: "#7b5dc7", // 10% tint
-    // Brand color
-    500: "#6c4bc1",
-    // Unused for now: '#6144ae', // 10% shade
-    600: "#563c9a", // 20% shade
-    700: "#4c3587", // 30% shade
-    800: "#362661", // 50% shade
-    900: "#160f27", // 80% shade
-  },
-  teal: {
-    50: "#e5f5f3", // 80% tint
-    100: "#bde6e1", // 50% tint
-    200: "#a3dcd4", // 30% tint
-    300: "#95d7ce", // 20% tint
-    400: "#88d2c8", // 10% tint
-    // Brand color
-    500: "#7bcdc2", // note this is 400 in the other scale
-    // Unused for now: '#6fb9af', // 10% shade
-    600: "#62a49b", // 20% shade
-    700: "#569088", // 30% shade
-    800: "#3e6761", // 50% shade
-    900: "#192927", // 80% shade
-  },
-  blue: {
-    50: "#d4eaf7", // 80% tint
-    100: "#95caeb", // 50% tint
-    200: "#6ab4e2", // 30% tint
-    300: "#55a9de", // 20% tint
-    400: "#3f9fda", // 10% tint
-    // Brand color
-    500: "#2a94d6",
-    // Unused for now: '#2685c1', // 10% shade
-    600: "#2276ab", // 20% shade
-    700: "#1d6896", // 30% shade
-    800: "#154a6b", // 50% shade
-    900: "#081e2b", // 80% shade
-  },
-  green: {
-    50: "#cceccc", // 80% tint
-    100: "#80d080", // 50% tint
-    200: "#4dbd4d", // 30% tint
-    300: "#33b333", // 20% tint
-    400: "#1aaa1a", // 10% tint
-    // Brand color
-    500: "#00a000",
-    // Unused for now: '#009000', // 10% shade
-    600: "#008000", // 20% shade
-    700: "#007000", // 30% shade
-    800: "#005000", // 50% shade
-    900: "#002000", // 80% shade
-  },
-  // Not calling this red as we use Chakra's reds for form errors etc.
-  pink: {
-    50: "#f5cde0", // 80% tint
-    100: "#e681b2", // 50% tint
-    200: "#dc4f93", // 30% tint
-    300: "#d73584", // 20% tint
-    400: "#d21c74", // 10% tint
-    // Brand color
-    500: "#cd0365",
-    // Unused for now: '#b9035b', // 10% shade
-    600: "#a40251", // 20% shade
-    700: "#900247", // 30% shade
-    800: "#670233", // 50% shade
-    900: "#290114", // 80% shade
-  },
-  orange: {
-    50: "#fae0de", // 80% tint
-    100: "#f3b2ae", // 50% tint
-    200: "#ee938d", // 30% tint
-    300: "#ec837d", // 20% tint
-    400: "#e9746c", // 10% tint
-    // Brand color
-    500: "#e7645c",
-    // Unused for now: '#d05a53', // 10% shade
-    600: "#b9504a", // 20% shade
-    700: "#a24640", // 30% shade
-    800: "#74322e", // 50% shade
-    900: "#2e1412", // 80% shade
-  },
+  ...theme.colors,
+  brand: theme.colors.blue,
+  brand2: theme.colors.gray,
 };
 
 export default colors;
diff --git a/src/deployment/default/components/alert.ts b/src/deployment/default/components/alert.ts
index 777b41486..d2d6685a9 100644
--- a/src/deployment/default/components/alert.ts
+++ b/src/deployment/default/components/alert.ts
@@ -3,6 +3,7 @@ import { StyleConfig, StyleFunctionProps } from "@chakra-ui/theme-tools";
 
 const Alert: StyleConfig = {
   variants: {
+    // TODO: reconsider this theme customisation
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     toast: (props: StyleFunctionProps) => {
diff --git a/src/deployment/default/components/avatar.ts b/src/deployment/default/components/avatar.ts
deleted file mode 100644
index 5dfbecab7..000000000
--- a/src/deployment/default/components/avatar.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { avatarAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
-
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(avatarAnatomy.keys);
-
-const md2 = defineStyle({
-  width: 10,
-  height: 10,
-  fontSize: "md",
-});
-
-const sizes = {
-  "2md": definePartsStyle({ container: md2 }),
-};
-
-const avatarTheme = defineMultiStyleConfig({ sizes });
-
-export default avatarTheme;
diff --git a/src/deployment/default/components/button.ts b/src/deployment/default/components/button.ts
index e11571eb8..f39366c9b 100644
--- a/src/deployment/default/components/button.ts
+++ b/src/deployment/default/components/button.ts
@@ -1,4 +1,3 @@
-import { theme, StyleFunctionProps } from "@chakra-ui/react";
 import { StyleConfig } from "@chakra-ui/theme-tools";
 
 const Button: StyleConfig = {
@@ -9,25 +8,9 @@ const Button: StyleConfig = {
     unstyled: {
       borderRadius: "unset",
     },
-    zoom: (props: StyleFunctionProps) => {
-      const base = {
-        ...theme.components.Button.variants!.solid(props),
-      };
-      return {
-        ...base,
-        _hover: {
-          ...base._hover,
-          backgroundColor: "gray.400",
-        },
-        _active: {
-          ...base._active,
-          backgroundColor: "gray.500",
-        },
-      };
-    },
     link: () => ({
       borderWidth: "0",
-      color: "purple.500",
+      color: "blue.600",
       fontWeight: "normal",
       bg: "transparent",
     }),
@@ -47,14 +30,14 @@ const Button: StyleConfig = {
     led: () => ({
       borderWidth: "2px",
       borderRadius: 5,
-      borderColor: "green.500",
-      color: "green.700",
+      borderColor: "brand2.500",
+      color: "brand2.700",
       bg: "transparent",
       _hover: {
         cursor: "pointer",
-        borderColor: "green.500",
+        borderColor: "brand2.500",
       },
-      _active: { bg: "green.500", borderColor: "green.500" },
+      _active: { bg: "brand2.500", borderColor: "brand2.500" },
     }),
     ghost: () => ({
       color: "black",
@@ -108,33 +91,12 @@ const Button: StyleConfig = {
         boxShadow: "outlineDark",
       },
     }),
-    sidebar: (props: StyleFunctionProps) => {
-      const base = {
-        ...theme.components.Button.variants!.ghost(props),
-      };
-      return {
-        ...base,
-        _hover: {
-          ...base._hover,
-          bg: "white",
-          color: "gray.700",
-          _disabled: {
-            bg: base.bg,
-          },
-        },
-        _active: {
-          ...base._hover,
-          bg: "white",
-          color: "gray.800",
-        },
-      };
-    },
     language: () => ({
       borderWidth: "2px",
       borderColor: "gray.200",
-      color: "green.500",
+      color: "brand2.500",
       _hover: {
-        color: "green.600",
+        color: "brand2.600",
         bg: "gray.100",
       },
     }),
diff --git a/src/deployment/default/components/heading.ts b/src/deployment/default/components/heading.ts
deleted file mode 100644
index ff79c21fe..000000000
--- a/src/deployment/default/components/heading.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const Heading = {
-  variants: {
-    label: {
-      fontSize: "4xl",
-      color: "#cd0365",
-    },
-    subtitle: {
-      fontSize: "xl",
-      fontWeight: "normal",
-      color: "#cd0365",
-    },
-  },
-};
-
-export default Heading;
diff --git a/src/deployment/default/components/text.ts b/src/deployment/default/components/text.ts
deleted file mode 100644
index 3fc813535..000000000
--- a/src/deployment/default/components/text.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const Text = {
-  sizes: {
-    sm: {
-      fontSize: "sm",
-    },
-    md: {
-      fontSize: "md",
-    },
-  },
-  defaultProps: {
-    size: "md",
-  },
-};
-
-export default Text;
diff --git a/src/deployment/default/components/tooltip.ts b/src/deployment/default/components/tooltip.ts
deleted file mode 100644
index 73741e475..000000000
--- a/src/deployment/default/components/tooltip.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { StyleConfig } from "@chakra-ui/theme-tools";
-
-const Tooltip: StyleConfig = {
-  baseStyle: {
-    fontSize: "md",
-  },
-};
-
-export default Tooltip;
diff --git a/src/deployment/default/default-graph.ts b/src/deployment/default/default-graph.ts
deleted file mode 100644
index d5cf28804..000000000
--- a/src/deployment/default/default-graph.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const defaultGraphColors = [
-  // Green
-  "rgb(0, 200, 0)",
-  // Blue
-  "rgb(62, 182, 253)",
-  // Pink
-  "rgb(205, 3, 101)",
-  // Salmon
-  "rgb(231, 100, 92)",
-  // Purple
-  "rgb(108, 75, 193)",
-  // Teal
-  "rgb(123, 205, 194)",
-];
diff --git a/src/deployment/default/fonts.ts b/src/deployment/default/fonts.ts
index 35ead9c4a..4d9bf9a30 100644
--- a/src/deployment/default/fonts.ts
+++ b/src/deployment/default/fonts.ts
@@ -1,6 +1,12 @@
+/**
+ * (c) 2021, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
 const fonts = {
-  heading: "Helvetica Now, sans-serif",
-  body: "Helvetica Now, sans-serif",
+  heading: "Helvetica, Arial, sans-serif",
+  body: "Helvetica, Arial, sans-serif",
+  code: "Source Code Pro, monospace",
 };
 
 export default fonts;
diff --git a/src/deployment/default/graph.ts b/src/deployment/default/graph.ts
deleted file mode 100644
index aeccd9db2..000000000
--- a/src/deployment/default/graph.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// micro:bit brand colors
-export const defaultGraphColors = [
-  // green.500
-  "#00a000",
-  // teal.500
-  "#7bcdc2",
-  // pink.500
-  "#cd0365",
-  // blue.500
-  "#2a94d6",
-  // purple.500
-  "#6c4bc1",
-  // Grey 50%
-  "#808080",
-  // orange.500
-  "#e7645c",
-];
diff --git a/src/deployment/default/theme.ts b/src/deployment/default/theme.ts
index 37edee589..2a2c1be3f 100644
--- a/src/deployment/default/theme.ts
+++ b/src/deployment/default/theme.ts
@@ -2,12 +2,8 @@ import { extendTheme, withDefaultVariant } from "@chakra-ui/react";
 import colors from "./colors";
 import Alert from "./components/alert";
 import Button from "./components/button";
-import Text from "./components/text";
-import Heading from "./components/heading";
-import Tooltip from "./components/tooltip";
 import fonts from "./fonts";
 import radii from "./radii";
-import Avatar from "./components/avatar";
 import shadows from "./shadows";
 
 // See https://chakra-ui.com/docs/theming/customize-theme
@@ -19,10 +15,6 @@ const overrides = {
   components: {
     Alert,
     Button,
-    Heading,
-    Tooltip,
-    Text,
-    Avatar,
   },
 };
 
diff --git a/src/recording-graph.ts b/src/recording-graph.ts
index e6b7bd218..17acdb7bf 100644
--- a/src/recording-graph.ts
+++ b/src/recording-graph.ts
@@ -62,7 +62,7 @@ export const getConfig = ({
         },
         {
           label: "y",
-          borderColor: "green",
+          borderColor: "brand2",
           borderWidth: 1,
           pointRadius: 0,
           pointHoverRadius: 0,
diff --git a/vite.config.ts b/vite.config.ts
index 267840c24..84f1b590e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,7 @@ import { configDefaults } from "vitest/config";
 import svgr from "vite-plugin-svgr";
 
 // Support optionally pulling in external branding if the module is installed.
-const theme = "TODO: theme package";
+const theme = "@microbit-foundation/ml-trainer-microbit";
 const external = `node_modules/${theme}`;
 const internal = "src/deployment/default";
 

From d3aadc6263f042f2c4fa4be628175db741a932f3 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Wed, 2 Oct 2024 16:57:39 +0100
Subject: [PATCH 02/13] Use links from deployment

---
 src/components/HelpMenu.tsx | 74 +++++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 31 deletions(-)

diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
index ec185d6e7..75161bf9d 100644
--- a/src/components/HelpMenu.tsx
+++ b/src/components/HelpMenu.tsx
@@ -19,6 +19,7 @@ import AboutDialog from "./AboutDialog";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useRef } from "react";
 import { manageCookies } from "../compliance";
+import { useDeployment } from "../deployment";
 
 interface HelpMenuProps {
   isMobile?: boolean;
@@ -33,6 +34,7 @@ const HelpMenu = ({ isMobile, appName, cookies, ...rest }: HelpMenuProps) => {
   const aboutDialogDisclosure = useDisclosure();
   const intl = useIntl();
   const MenuButtonRef = useRef(null);
+  const deployment = useDeployment();
 
   return (
     <Box display={isMobile ? { base: "block", lg: "none" } : undefined}>
@@ -60,44 +62,54 @@ const HelpMenu = ({ isMobile, appName, cookies, ...rest }: HelpMenuProps) => {
         />
         <Portal>
           <MenuList>
-            <MenuItem
-              as="a"
-              href="https://support.microbit.org"
-              target="_blank"
-              rel="noopener"
-              icon={<RiExternalLinkLine />}
-            >
-              <FormattedMessage id="help-support" />
-            </MenuItem>
-            <MenuDivider />
-            <MenuItem
-              as="a"
-              href="https://microbit.org/terms-of-use/"
-              target="_blank"
-              rel="noopener"
-              icon={<RiExternalLinkLine />}
-            >
-              <FormattedMessage id="terms" />
-            </MenuItem>
-            <MenuItem
-              as="a"
-              href="https://microbit.org/privacy/"
-              target="_blank"
-              rel="noopener"
-              icon={<RiExternalLinkLine />}
-            >
-              <FormattedMessage id="privacy" />
-            </MenuItem>
-            {cookies && (
+            {deployment.supportLink && (
+              <>
+                <MenuItem
+                  as="a"
+                  href={deployment.supportLink}
+                  target="_blank"
+                  rel="noopener"
+                  icon={<RiExternalLinkLine />}
+                >
+                  <FormattedMessage id="help-support" />
+                </MenuItem>
+                <MenuDivider />
+              </>
+            )}
+            {deployment.termsOfUseLink && (
+              <MenuItem
+                as="a"
+                href={deployment.termsOfUseLink}
+                target="_blank"
+                rel="noopener"
+                icon={<RiExternalLinkLine />}
+              >
+                <FormattedMessage id="terms" />
+              </MenuItem>
+            )}
+            {deployment.privacyPolicyLink && (
+              <MenuItem
+                as="a"
+                href="https://microbit.org/privacy/"
+                target="_blank"
+                rel="noopener"
+                icon={<RiExternalLinkLine />}
+              >
+                <FormattedMessage id="privacy" />
+              </MenuItem>
+            )}
+            {deployment.compliance.manageCookies && (
               <MenuItem
                 as="button"
-                onClick={manageCookies}
+                onClick={deployment.compliance.manageCookies}
                 icon={<MdOutlineCookie />}
               >
                 <FormattedMessage id="cookies-action" />
               </MenuItem>
             )}
-            <MenuDivider />
+            {(deployment.privacyPolicyLink ||
+              deployment.compliance.manageCookies ||
+              deployment.termsOfUseLink) && <MenuDivider />}
             <MenuItem
               icon={<RiInformationLine />}
               onClick={aboutDialogDisclosure.onOpen}

From 2495365dd3ee575e9464b27cd8316c2d5255c465 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Wed, 2 Oct 2024 19:26:22 +0100
Subject: [PATCH 03/13] Extract logos/app name

---
 lang/ui.en.json                         | 16 +++-----
 src/components/AboutDialog.tsx          | 16 +++-----
 src/components/AppLogo.tsx              | 51 ++++++++++++++-----------
 src/components/DefaultPageLayout.tsx    | 14 +++----
 src/components/HelpMenu.tsx             | 14 +++----
 src/components/InfoToolTip.tsx          |  4 +-
 src/components/MicrobitLogo.tsx         | 33 ----------------
 src/components/TrainModelHelpDialog.tsx |  7 +++-
 src/components/TryAgainDialog.tsx       |  7 +++-
 src/constants.ts                        |  1 -
 src/deployment/default/index.tsx        | 31 ++++++++++++++-
 src/deployment/index.ts                 | 10 +++--
 src/images/app-name.svg                 |  3 --
 src/pages/HomePage.tsx                  |  4 +-
 14 files changed, 105 insertions(+), 106 deletions(-)
 delete mode 100644 src/components/MicrobitLogo.tsx
 delete mode 100644 src/constants.ts
 delete mode 100644 src/images/app-name.svg

diff --git a/lang/ui.en.json b/lang/ui.en.json
index 3730ad02d..0b6384d1e 100644
--- a/lang/ui.en.json
+++ b/lang/ui.en.json
@@ -368,7 +368,7 @@
     "description": ""
   },
   "connectMB.usbTryAgain.closeTabs2": {
-    "defaultMessage": "Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor, AI creator), or unplug and replug the micro:bit before trying again.",
+    "defaultMessage": "Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor, {appNameShort}), or unplug and replug the micro:bit before trying again.",
     "description": ""
   },
   "connectMB.usbTryAgain.heading": {
@@ -432,7 +432,7 @@
     "description": ""
   },
   "content.data.classHelpBody": {
-    "defaultMessage": "The type of movement you want the micro:bit AI creator to recognise e.g. ‘waving’ or ‘clapping’.",
+    "defaultMessage": "The type of movement you want the {appNameFull} to recognise e.g. ‘waving’ or ‘clapping’.",
     "description": ""
   },
   "content.data.classPlaceholderNewClass": {
@@ -508,7 +508,7 @@
     "description": ""
   },
   "content.model.output.action.descriptionBody": {
-    "defaultMessage": "The type of movement you want the micro:bit AI creator to recognise e.g. ‘waving’ or ‘clapping’.",
+    "defaultMessage": "The type of movement you want the {appNameFull} to recognise e.g. ‘waving’ or ‘clapping’.",
     "description": ""
   },
   "content.model.output.action.descriptionTitle": {
@@ -556,7 +556,7 @@
     "description": ""
   },
   "content.trainer.description": {
-    "defaultMessage": "The computer program spots patterns or differences in your data samples, and uses these to build a mathematical model that allows the micro:bit AI creator to recognise different actions when you move your micro:bit.",
+    "defaultMessage": "The computer program spots patterns or differences in your data samples, and uses these to build a mathematical model that allows the {appNameFull} to recognise different actions when you move your micro:bit.",
     "description": ""
   },
   "content.trainer.failure.body": {
@@ -701,11 +701,7 @@
   },
   "homepage-subtitle": {
     "defaultMessage": "Introduce students to machine learning concepts through physical movement and data",
-    "description": "Subtitle of micro:bit AI creator home page"
-  },
-  "homepage-title": {
-    "defaultMessage": "micro:bit AI creator",
-    "description": "Title of micro:bit AI creator home page"
+    "description": "Subtitle of the home page"
   },
   "homepage.Link": {
     "defaultMessage": "Home page",
@@ -979,4 +975,4 @@
     "defaultMessage": "Train model",
     "description": "Train model step title"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
index 913e5e110..86ee052a3 100644
--- a/src/components/AboutDialog.tsx
+++ b/src/components/AboutDialog.tsx
@@ -28,12 +28,11 @@ import {
 import { ReactNode } from "react";
 import { RiFileCopy2Line, RiGithubFill } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useDeployment } from "../deployment";
 import aarhusLogo from "../images/aulogo_uk_var2_blue.png";
 import microbitHeartImage from "../images/microbit-heart.png";
-import MicrobitLogo from "./MicrobitLogo";
 
 interface AboutDialogProps {
-  appName: string;
   isOpen: boolean;
   onClose: () => void;
   finalFocusRef?: React.RefObject<HTMLButtonElement>;
@@ -42,15 +41,11 @@ interface AboutDialogProps {
 /**
  * An about dialog with version information.
  */
-const AboutDialog = ({
-  isOpen,
-  onClose,
-  appName,
-  finalFocusRef,
-}: AboutDialogProps) => {
+const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
+  const { appNameFull } = useDeployment();
   const versionInfo = [
     {
-      name: `micro:bit ${appName}`,
+      name: appNameFull,
       value: import.meta.env.VITE_VERSION,
       href: "https://github.com/microbit-foundation/ml-trainer",
     },
@@ -61,6 +56,7 @@ const AboutDialog = ({
     .join("\n");
 
   const { hasCopied, onCopy } = useClipboard(clipboardVersion);
+  const { OrgLogo } = useDeployment();
   const intl = useIntl();
   return (
     <Modal
@@ -75,7 +71,7 @@ const AboutDialog = ({
             <ModalCloseButton />
             <VStack spacing={8} pl={5} pr={5} pt={5}>
               <HStack justifyContent="center" gap={8}>
-                <MicrobitLogo fill="#000" alt="micro:bit" height={55} />
+                {OrgLogo && <OrgLogo fill="#000" color="black" height={55} />}
                 <Image src={aarhusLogo} h="55px" />
               </HStack>
               <Text textAlign="center">
diff --git a/src/components/AppLogo.tsx b/src/components/AppLogo.tsx
index cff916430..1ca2c3e88 100644
--- a/src/components/AppLogo.tsx
+++ b/src/components/AppLogo.tsx
@@ -1,6 +1,5 @@
-import { As, Divider, HStack, Image } from "@chakra-ui/react";
-import AppNameLogo from "../images/app-name.svg";
-import MicrobitLogo from "./MicrobitLogo";
+import { As, Divider, HStack } from "@chakra-ui/react";
+import { useDeployment } from "../deployment";
 
 const AppLogo = ({
   color = "#FFF",
@@ -9,25 +8,31 @@ const AppLogo = ({
   color?: string;
   beta?: boolean;
   as?: As;
-  name: string;
-}) => (
-  <HStack
-    as={as}
-    spacing={4}
-    userSelect="none"
-    transform="scale(0.93)"
-    transformOrigin="left"
-  >
-    <MicrobitLogo fill={color} alt="micro:bit" />
-    <Divider
-      aria-hidden
-      borderColor={color}
-      orientation="vertical"
-      h="33px"
-      borderWidth="1px"
-    />
-    <Image src={AppNameLogo} alt="micro:bit" h="18px" />
-  </HStack>
-);
+}) => {
+  const { AppLogo, OrgLogo } = useDeployment();
+  return (
+    <HStack
+      as={as}
+      spacing={4}
+      userSelect="none"
+      transform="scale(0.93)"
+      transformOrigin="left"
+    >
+      {OrgLogo && (
+        <>
+          <OrgLogo />
+          <Divider
+            aria-hidden
+            borderColor={color}
+            orientation="vertical"
+            h="33px"
+            borderWidth="1px"
+          />
+        </>
+      )}
+      <AppLogo />
+    </HStack>
+  );
+};
 
 export default AppLogo;
diff --git a/src/components/DefaultPageLayout.tsx b/src/components/DefaultPageLayout.tsx
index fe7d86404..b71bdad78 100644
--- a/src/components/DefaultPageLayout.tsx
+++ b/src/components/DefaultPageLayout.tsx
@@ -14,7 +14,6 @@ import { ReactNode, useCallback, useEffect } from "react";
 import { RiDownload2Line, RiFolderOpenLine, RiHome2Line } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router";
-import { TOOL_NAME } from "../constants";
 import { flags } from "../flags";
 import { useProject } from "../hooks/project-hooks";
 import { SaveStep, TrainModelDialogStage } from "../model";
@@ -35,6 +34,7 @@ import SaveDialogs from "./SaveDialogs";
 import SettingsMenu from "./SettingsMenu";
 import ToolbarMenu from "./ToolbarMenu";
 import TrainModelDialogs from "./TrainModelFlowDialogs";
+import { useDeployment } from "../deployment";
 
 interface DefaultPageLayoutProps {
   titleId?: string;
@@ -63,13 +63,13 @@ const DefaultPageLayout = ({
   const { saveHex } = useProject();
   const [settings] = useSettings();
   const toast = useToast();
+  const { appNameFull } = useDeployment();
 
   useEffect(() => {
-    const appName = `micro:bit ${TOOL_NAME}`;
     document.title = titleId
-      ? `${intl.formatMessage({ id: titleId })} | ${appName}`
-      : appName;
-  }, [intl, titleId]);
+      ? `${intl.formatMessage({ id: titleId })} | ${appNameFull}`
+      : appNameFull;
+  }, [appNameFull, intl, titleId]);
 
   useEffect(() => {
     return useStore.subscribe(
@@ -134,7 +134,7 @@ const DefaultPageLayout = ({
               )}
             </>
           }
-          itemsLeft={toolbarItemsLeft || <AppLogo name={TOOL_NAME} />}
+          itemsLeft={toolbarItemsLeft || <AppLogo />}
           itemsRight={
             <>
               <HStack spacing={3} display={{ base: "none", lg: "flex" }}>
@@ -160,7 +160,7 @@ const DefaultPageLayout = ({
                 )}
                 <SettingsMenu />
               </HStack>
-              <HelpMenu appName={TOOL_NAME} cookies />
+              <HelpMenu />
               <ToolbarMenu
                 isMobile
                 variant="plain"
diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
index 75161bf9d..a94c18b7f 100644
--- a/src/components/HelpMenu.tsx
+++ b/src/components/HelpMenu.tsx
@@ -9,28 +9,25 @@ import {
   Portal,
   useDisclosure,
 } from "@chakra-ui/react";
+import { useRef } from "react";
+import { MdOutlineCookie } from "react-icons/md";
 import {
   RiExternalLinkLine,
   RiInformationLine,
   RiQuestionLine,
 } from "react-icons/ri";
-import { MdOutlineCookie } from "react-icons/md";
-import AboutDialog from "./AboutDialog";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useRef } from "react";
-import { manageCookies } from "../compliance";
 import { useDeployment } from "../deployment";
+import AboutDialog from "./AboutDialog";
 
 interface HelpMenuProps {
   isMobile?: boolean;
-  appName: string;
-  cookies?: boolean;
 }
 
 /**
  * A help button that triggers a drop-down menu with actions.
  */
-const HelpMenu = ({ isMobile, appName, cookies, ...rest }: HelpMenuProps) => {
+const HelpMenu = ({ isMobile, ...rest }: HelpMenuProps) => {
   const aboutDialogDisclosure = useDisclosure();
   const intl = useIntl();
   const MenuButtonRef = useRef(null);
@@ -39,7 +36,6 @@ const HelpMenu = ({ isMobile, appName, cookies, ...rest }: HelpMenuProps) => {
   return (
     <Box display={isMobile ? { base: "block", lg: "none" } : undefined}>
       <AboutDialog
-        appName={appName}
         isOpen={aboutDialogDisclosure.isOpen}
         onClose={aboutDialogDisclosure.onClose}
         finalFocusRef={MenuButtonRef}
@@ -90,7 +86,7 @@ const HelpMenu = ({ isMobile, appName, cookies, ...rest }: HelpMenuProps) => {
             {deployment.privacyPolicyLink && (
               <MenuItem
                 as="a"
-                href="https://microbit.org/privacy/"
+                href={deployment.privacyPolicyLink}
                 target="_blank"
                 rel="noopener"
                 icon={<RiExternalLinkLine />}
diff --git a/src/components/InfoToolTip.tsx b/src/components/InfoToolTip.tsx
index c184ed468..37f3a8fa7 100644
--- a/src/components/InfoToolTip.tsx
+++ b/src/components/InfoToolTip.tsx
@@ -2,12 +2,14 @@ import { Icon, Text, VStack } from "@chakra-ui/react";
 import { RiInformationLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import ClickableTooltip from "./ClickableTooltip";
+import { useDeployment } from "../deployment";
 
 export interface InfoToolTipProps {
   titleId: string;
   descriptionId: string;
 }
 const InfoToolTip = ({ titleId, descriptionId }: InfoToolTipProps) => {
+  const { appNameFull } = useDeployment();
   return (
     <ClickableTooltip
       hasArrow
@@ -18,7 +20,7 @@ const InfoToolTip = ({ titleId, descriptionId }: InfoToolTipProps) => {
             <FormattedMessage id={titleId} />
           </Text>
           <Text>
-            <FormattedMessage id={descriptionId} />
+            <FormattedMessage id={descriptionId} values={{ appNameFull }} />
           </Text>
         </VStack>
       }
diff --git a/src/components/MicrobitLogo.tsx b/src/components/MicrobitLogo.tsx
deleted file mode 100644
index 4c22a1639..000000000
--- a/src/components/MicrobitLogo.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-const MicrobitLogo = ({
-  alt,
-  fill = "#fff",
-  height,
-}: {
-  alt: string;
-  fill?: string;
-  height?: number;
-}) => {
-  return (
-    <svg
-      role="img"
-      aria-label={alt}
-      xmlns="http://www.w3.org/2000/svg"
-      height="40"
-      width="166.8"
-      viewBox="0 0 166.8 40"
-      style={{
-        width: "auto",
-        height: height ?? 40,
-      }}
-    >
-      <title>{alt}</title>
-      <g fill="none" fillRule="evenodd">
-        <g fill={fill} fillRule="nonzero">
-          <path d="M71.5 29.1h-3.3V20c0-2-1.2-3.5-2.8-3.5-1.6 0-2.8 1.4-2.8 3.5v9.1h-3.2V20c0-2.3-1.4-3.5-2.8-3.5-1.6 0-2.8 1.4-2.8 3.5v9.1h-3.3v-9c0-4.1 2.5-6.9 6.1-6.9 1.7 0 3.1.7 4.4 2.1 1.2-1.4 2.7-2.1 4.5-2.1 3.6 0 6 2.9 6 6.9v9zM77.5 29.1h-3.3V13.6h3.3v15.5zm-1.6-17.8c-1.2 0-2.1-.9-2.1-2.1 0-1.2.9-2.1 2.1-2.1 1.2 0 2.1.9 2.1 2.1 0 1.2-1 2.1-2.1 2.1zM88 29.5c-2.1 0-4.2-.9-5.7-2.4S80 23.6 80 21.3c0-2.2.8-4.3 2.3-5.8 1.5-1.5 3.6-2.4 5.7-2.4 2.3 0 4.3.8 5.8 2.3l.4.4-2.4 2.4-.4-.4c-1.1-1-2.2-1.5-3.4-1.5-2.6 0-4.8 2.2-4.8 4.9s2.1 4.9 4.8 4.9c1.2 0 2.3-.5 3.4-1.4l.4-.4 2.4 2.3-.5.4c-1.7 1.7-3.6 2.5-5.7 2.5zM100 29.1h-3.5v-7.8c0-5 2.2-7.4 7-7.8l.7-.1v3.3l-.5.1c-2.6.3-3.6 1.5-3.6 4.3v8h-.1zM113.2 29.5c-2.1 0-4.2-.9-5.7-2.4s-2.3-3.6-2.3-5.8c0-2.2.8-4.2 2.3-5.8 1.5-1.6 3.5-2.4 5.7-2.4 2.1 0 4.1.9 5.6 2.4s2.3 3.6 2.3 5.8c0 2.2-.8 4.3-2.3 5.8-1.5 1.6-3.5 2.4-5.6 2.4zm0-13c-2.5 0-4.6 2.2-4.6 4.9s2.1 4.9 4.6 4.9c2.6 0 4.6-2.1 4.6-4.9 0-2.8-2.1-4.9-4.6-4.9zM126.6 29.1c-1.2 0-2.3-1-2.3-2.3 0-1.3 1-2.3 2.3-2.3 1.3 0 2.3 1 2.3 2.3 0 1.3-1 2.3-2.3 2.3zM126.6 17.7c-1.2 0-2.3-1-2.3-2.3 0-1.3 1-2.3 2.3-2.3 1.3 0 2.3 1 2.3 2.3 0 1.3-1 2.3-2.3 2.3zM140 29.5c-4.7 0-8-3.7-8-8.9V6.2h3.3v8.5c1.4-1 3-1.5 4.7-1.5 2.1 0 4.1.8 5.6 2.4 1.5 1.5 2.3 3.6 2.3 5.8 0 2.2-.8 4.3-2.3 5.8-1.5 1.5-3.5 2.3-5.6 2.3zm0-13c-2.6 0-4.8 2.2-4.8 4.9s2.1 4.9 4.8 4.9c2.6 0 4.8-2.2 4.8-4.9s-2.2-4.9-4.8-4.9zM154.1 29.1h-3.3V13.6h3.3v15.5zm-1.6-17.8c-1.2 0-2.1-.9-2.1-2.1 0-1.2.9-2.1 2.1-2.1 1.2 0 2.1.9 2.1 2.1 0 1.2-1 2.1-2.1 2.1zM166.5 29.6l-.7-.1c-4.9-.9-6.7-3.3-6.7-8.6V17h-1.4v-3.2h1.4v-3.4h3.3v3.4h4.1V17h-4.1v4.4c0 2.9 1.1 4.4 3.5 4.7l.5.1v3.4h.1zM32.4 24c1.5 0 2.6-1.2 2.6-2.6 0-1.4-1.2-2.6-2.6-2.6-1.5 0-2.6 1.2-2.6 2.6 0 1.4 1.1 2.6 2.6 2.6M13.1 18.8c-1.5 0-2.6 1.2-2.6 2.6 0 1.4 1.2 2.6 2.6 2.6 1.4 0 2.6-1.2 2.6-2.6 0-1.4-1.2-2.6-2.6-2.6" />
-          <path d="M13.1 13.6c-4.3 0-7.8 3.5-7.8 7.8s3.5 7.8 7.8 7.8h19.5c4.3 0 7.8-3.5 7.8-7.8s-3.5-7.8-7.8-7.8H13.1zm19.5 20.8H13.1c-7.2 0-13-5.8-13-13s5.8-13 13-13h19.5c7.2 0 13 5.8 13 13s-5.8 13-13 13z" />
-        </g>
-      </g>
-    </svg>
-  );
-};
-export default MicrobitLogo;
diff --git a/src/components/TrainModelHelpDialog.tsx b/src/components/TrainModelHelpDialog.tsx
index 76132727d..3e1347152 100644
--- a/src/components/TrainModelHelpDialog.tsx
+++ b/src/components/TrainModelHelpDialog.tsx
@@ -16,6 +16,7 @@ import {
 import { ComponentProps, useCallback, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import trainModelImage from "../images/train_model_black.svg";
+import { useDeployment } from "../deployment";
 
 interface TrainModelHelpDialogProps
   extends Omit<ComponentProps<typeof Modal>, "children"> {
@@ -26,6 +27,7 @@ const TrainModelIntroDialog = ({
   onNext,
   ...props
 }: TrainModelHelpDialogProps) => {
+  const { appNameFull } = useDeployment();
   const [skip, setSkip] = useState<boolean>(false);
   const handleNext = useCallback(() => onNext(skip), [onNext, skip]);
 
@@ -56,7 +58,10 @@ const TrainModelIntroDialog = ({
                 />
                 <VStack gap={5}>
                   <Text textAlign="left">
-                    <FormattedMessage id="content.trainer.description" />
+                    <FormattedMessage
+                      id="content.trainer.description"
+                      values={{ appNameFull }}
+                    />
                   </Text>
                 </VStack>
               </HStack>
diff --git a/src/components/TryAgainDialog.tsx b/src/components/TryAgainDialog.tsx
index 2acb5c011..cd19e3472 100644
--- a/src/components/TryAgainDialog.tsx
+++ b/src/components/TryAgainDialog.tsx
@@ -14,6 +14,7 @@ import {
 } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
 import { ConnectionFlowStep } from "../connection-stage-hooks";
+import { useDeployment } from "../deployment";
 
 const OneLineContent = ({ textId }: { textId: string }) => {
   return (
@@ -47,13 +48,17 @@ const ReplugMicrobitContent = () => {
 };
 
 const CloseTabsContent = () => {
+  const { appNameShort } = useDeployment();
   return (
     <VStack>
       <Text textAlign="left" w="100%">
         <FormattedMessage id="connectMB.usbTryAgain.closeTabs1" />
       </Text>
       <Text textAlign="left" w="100%">
-        <FormattedMessage id="connectMB.usbTryAgain.closeTabs2" />
+        <FormattedMessage
+          id="connectMB.usbTryAgain.closeTabs2"
+          values={{ appNameShort }}
+        />
       </Text>
     </VStack>
   );
diff --git a/src/constants.ts b/src/constants.ts
deleted file mode 100644
index 76b04338b..000000000
--- a/src/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const TOOL_NAME = "AI creator";
diff --git a/src/deployment/default/index.tsx b/src/deployment/default/index.tsx
index 658d681fe..825642a25 100644
--- a/src/deployment/default/index.tsx
+++ b/src/deployment/default/index.tsx
@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { Box, BoxProps, Text, VStack } from "@chakra-ui/react";
 import { ReactNode, createContext } from "react";
 import { CookieConsent, DeploymentConfigFactory } from "..";
 import { NullLogging } from "./logging";
@@ -18,8 +19,34 @@ const stubConsentContext = createContext<CookieConsent | undefined>(
 
 const defaultDeploymentFactory: DeploymentConfigFactory = () => ({
   chakraTheme: theme,
-  // This isn't ideal as it's the branded version. You can just remove the field to remove the welcome dialog.
-  welcomeVideoYouTubeId: "mREwMW69qKc",
+  appNameFull: "ml-trainer",
+  appNameShort: "ml-trainer",
+  AppLogo: (props: BoxProps) => {
+    return (
+      <VStack
+        color="white"
+        fontWeight="bold"
+        justifyContent="center"
+        alignItems="center"
+        {...props}
+      >
+        <Text>ml-trainer</Text>
+      </VStack>
+    );
+  },
+  OrgLogo: (props: BoxProps) => {
+    return (
+      <VStack
+        color="white"
+        fontWeight="bold"
+        justifyContent="center"
+        alignItems="center"
+        {...props}
+      >
+        <Text>micro:bit</Text>
+      </VStack>
+    );
+  },
   logging: new NullLogging(),
   compliance: {
     ConsentProvider: ({ children }: { children: ReactNode }) => (
diff --git a/src/deployment/index.ts b/src/deployment/index.ts
index d0fca8491..d94fd213a 100644
--- a/src/deployment/index.ts
+++ b/src/deployment/index.ts
@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { ReactNode, useContext } from "react";
+import { ComponentType, ReactNode, useContext } from "react";
 import { Logging } from "../logging/logging";
 
 export type DeploymentConfigFactory = (
@@ -12,6 +12,7 @@ export type DeploymentConfigFactory = (
 
 // This is configured via a vite alias, defaulting to ./default
 import { default as df } from "theme-package";
+import { BoxProps } from "@chakra-ui/react";
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const deploymentFactory: DeploymentConfigFactory = df;
 export const deployment = deploymentFactory(import.meta.env);
@@ -22,9 +23,11 @@ export interface CookieConsent {
 }
 
 export interface DeploymentConfig {
+  appNameShort: string;
+  appNameFull: string;
+  AppLogo: ComponentType<BoxProps>;
+  OrgLogo?: ComponentType<BoxProps>;
   welcomeVideoYouTubeId?: string;
-  squareLogo?: ReactNode;
-  horizontalLogo?: ReactNode;
   compliance: {
     /**
      * A provider that will be used to wrap the app UI.
@@ -48,7 +51,6 @@ export interface DeploymentConfig {
   guideLink?: string;
   termsOfUseLink?: string;
   privacyPolicyLink?: string;
-  translationLink?: string;
 
   logging: Logging;
 }
diff --git a/src/images/app-name.svg b/src/images/app-name.svg
deleted file mode 100644
index 91ba31ad4..000000000
--- a/src/images/app-name.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="217" height="36" viewBox="0 0 217 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="app-name" data-name="app-name" d="M19.65 25.5L14 7.45L8.25 25.5H19.65ZM27.7 35H22.9L21.05 29.65H6.85L5.05 35H0.25L12.3 -2.38419e-06H15.6L27.7 35ZM31.8297 35V-2.38419e-06H36.5297V35H31.8297ZM77.2762 20.55H72.9262C72.7595 19.0833 72.1595 17.9 71.1262 17C70.1262 16.0667 68.7095 15.6 66.8762 15.6C64.4762 15.6 62.6595 16.3667 61.4262 17.9C60.1928 19.4333 59.5762 21.35 59.5762 23.65C59.5762 25.9833 60.1928 27.9 61.4262 29.4C62.6595 30.9 64.5095 31.65 66.9762 31.65C70.2095 31.65 72.2095 30.1667 72.9762 27.2H77.3262C76.9928 29.5667 75.9095 31.55 74.0762 33.15C72.2762 34.75 69.8595 35.55 66.8262 35.55C63.1262 35.55 60.2595 34.4 58.2262 32.1C56.2262 29.7667 55.2262 26.95 55.2262 23.65C55.2262 20.35 56.2262 17.5333 58.2262 15.2C60.2595 12.8667 63.1095 11.7 66.7762 11.7C69.9428 11.7 72.4262 12.5667 74.2262 14.3C76.0595 16 77.0762 18.0833 77.2762 20.55ZM97.491 12.3V16.3C96.7244 16.1333 96.0577 16.05 95.491 16.05C92.9243 16.05 90.991 16.85 89.691 18.45C88.4243 20.05 87.791 22.25 87.791 25.05V35H83.441V12.3H87.791V16.75C88.391 15.3167 89.391 14.1667 90.791 13.3C92.191 12.4 93.7243 11.95 95.391 11.95C96.2243 11.95 96.9243 12.0667 97.491 12.3ZM110.514 15.4C108.681 15.4 107.131 15.95 105.864 17.05C104.631 18.1167 103.998 19.6 103.964 21.5H116.964C116.964 19.6667 116.364 18.2 115.164 17.1C113.964 15.9667 112.414 15.4 110.514 15.4ZM120.964 24.8H103.914C103.914 26.8667 104.481 28.5667 105.614 29.9C106.748 31.2333 108.464 31.9 110.764 31.9C113.698 31.9 115.631 30.7 116.564 28.3H120.964C120.531 30.3333 119.414 32.05 117.614 33.45C115.814 34.85 113.531 35.55 110.764 35.55C107.164 35.55 104.381 34.4 102.414 32.1C100.448 29.7667 99.4645 26.9167 99.4645 23.55C99.4645 20.1167 100.464 17.2833 102.464 15.05C104.464 12.8167 107.114 11.7 110.414 11.7C113.548 11.7 116.114 12.6833 118.114 14.65C120.148 16.5833 121.164 19.0167 121.164 21.95C121.164 23.0167 121.098 23.9667 120.964 24.8ZM132.034 29.35C133.467 30.8833 135.317 31.65 137.584 31.65C139.851 31.65 141.684 30.8833 143.084 29.35C144.517 27.7833 145.234 25.8833 145.234 23.65C145.234 21.4167 144.517 19.5167 143.084 17.95C141.684 16.3833 139.851 15.6 137.584 15.6C135.317 15.6 133.467 16.3833 132.034 17.95C130.634 19.5167 129.934 21.4167 129.934 23.65C129.934 25.8833 130.634 27.7833 132.034 29.35ZM145.234 12.3H149.534V35H145.234V31.05C144.501 32.4167 143.417 33.5167 141.984 34.35C140.584 35.15 138.934 35.55 137.034 35.55C133.801 35.55 131.084 34.3833 128.884 32.05C126.717 29.7167 125.634 26.9167 125.634 23.65C125.634 20.3833 126.717 17.5833 128.884 15.25C131.084 12.8833 133.817 11.7 137.084 11.7C138.951 11.7 140.584 12.1167 141.984 12.95C143.417 13.75 144.501 14.8333 145.234 16.2V12.3ZM169.668 31.15V35C168.535 35.2 167.218 35.3 165.718 35.3C165.018 35.3 164.401 35.2667 163.868 35.2C163.368 35.1333 162.768 34.95 162.068 34.65C161.368 34.35 160.785 33.9333 160.318 33.4C159.851 32.8333 159.451 32.05 159.118 31.05C158.785 30.0167 158.618 28.7833 158.618 27.35V15.95H154.418V12.3H158.618V4.65H162.968V12.3H168.868V15.95H162.968V26.4C162.968 28.4333 163.268 29.7667 163.868 30.4C164.501 31.0333 165.451 31.35 166.718 31.35C167.818 31.35 168.801 31.2833 169.668 31.15ZM178.86 29.35C180.293 30.8833 182.143 31.65 184.41 31.65C186.677 31.65 188.51 30.8833 189.91 29.35C191.343 27.7833 192.06 25.8833 192.06 23.65C192.06 21.4167 191.343 19.5167 189.91 17.95C188.51 16.3833 186.677 15.6 184.41 15.6C182.143 15.6 180.293 16.3833 178.86 17.95C177.46 19.5167 176.76 21.4167 176.76 23.65C176.76 25.8833 177.46 27.7833 178.86 29.35ZM184.41 35.55C180.843 35.55 177.96 34.4 175.76 32.1C173.56 29.7667 172.46 26.95 172.46 23.65C172.46 20.3167 173.56 17.5 175.76 15.2C177.993 12.8667 180.877 11.7 184.41 11.7C187.91 11.7 190.777 12.8667 193.01 15.2C195.243 17.5333 196.36 20.35 196.36 23.65C196.36 26.95 195.243 29.7667 193.01 32.1C190.81 34.4 187.943 35.55 184.41 35.55ZM216.339 12.3V16.3C215.572 16.1333 214.905 16.05 214.339 16.05C211.772 16.05 209.839 16.85 208.539 18.45C207.272 20.05 206.639 22.25 206.639 25.05V35H202.289V12.3H206.639V16.75C207.239 15.3167 208.239 14.1667 209.639 13.3C211.039 12.4 212.572 11.95 214.239 11.95C215.072 11.95 215.772 12.0667 216.339 12.3Z"   fill="#fff"/>
-</svg>
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index b2e638afa..91e8ac368 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -12,6 +12,7 @@ import StartResumeActions from "../components/StartResumeActions";
 import addDataImage from "../images/add_data.svg";
 import testModelImage from "../images/test_model_blue.svg";
 import trainModelImage from "../images/train_model_blue.svg";
+import { useDeployment } from "../deployment";
 
 type StepId = "add-data" | "train-model" | "test-model";
 
@@ -37,6 +38,7 @@ const stepsConfig: StepConfig[] = [
 
 const HomePage = () => {
   const intl = useIntl();
+  const { appNameFull } = useDeployment();
   return (
     <DefaultPageLayout showOpenButton>
       <VStack
@@ -48,7 +50,7 @@ const HomePage = () => {
       >
         <VStack justifyItems="center" justify="center" gap={5}>
           <Heading as="h1" fontSize="4xl" fontWeight="bold">
-            <FormattedMessage id="homepage-title" />
+            {appNameFull}
           </Heading>
           <Text fontSize="xl">
             <FormattedMessage id="homepage-subtitle" />

From a5f8cc6a236cfe6728b1ca3145fbe57ff35f7a89 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 09:48:44 +0100
Subject: [PATCH 04/13] Tidying

---
 src/components/AboutDialog.tsx | 2 +-
 src/deployment/index.ts        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
index 86ee052a3..5853a1544 100644
--- a/src/components/AboutDialog.tsx
+++ b/src/components/AboutDialog.tsx
@@ -80,7 +80,7 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
                   values={{
                     link: (chunks: ReactNode) => (
                       <Link
-                        href="https://microbit.org"
+                        href="https://cctd.au.dk/"
                         target="_blank"
                         rel="noopener"
                         color="blue.600"
diff --git a/src/deployment/index.ts b/src/deployment/index.ts
index d94fd213a..c4593c3a8 100644
--- a/src/deployment/index.ts
+++ b/src/deployment/index.ts
@@ -48,7 +48,6 @@ export interface DeploymentConfig {
   chakraTheme: any;
 
   supportLink?: string;
-  guideLink?: string;
   termsOfUseLink?: string;
   privacyPolicyLink?: string;
 

From c62342c0fca9eea58ec99898b7d5724daf47d085 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 10:35:34 +0100
Subject: [PATCH 05/13] Try installing the package; fix logo size

---
 .github/workflows/build.yml | 2 +-
 src/components/AppLogo.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 6a6c1c3b2..4ec1cf510 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
+      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.1.0 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/components/AppLogo.tsx b/src/components/AppLogo.tsx
index 1ca2c3e88..793b05b2b 100644
--- a/src/components/AppLogo.tsx
+++ b/src/components/AppLogo.tsx
@@ -30,7 +30,7 @@ const AppLogo = ({
           />
         </>
       )}
-      <AppLogo />
+      <AppLogo h="18px" />
     </HStack>
   );
 };

From b08cca8ef597c9e13627db4f0018566ba885c505 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 10:37:56 +0100
Subject: [PATCH 06/13] Remove unused file, tidy imports

---
 src/compliance.tsx               | 89 --------------------------------
 src/deployment/default/index.tsx |  2 +-
 2 files changed, 1 insertion(+), 90 deletions(-)
 delete mode 100644 src/compliance.tsx

diff --git a/src/compliance.tsx b/src/compliance.tsx
deleted file mode 100644
index 1866c2863..000000000
--- a/src/compliance.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-// We use the shared-assets consent API on window, which currently lacks types.
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import {
-  ReactNode,
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-
-export interface CookieConsent {
-  analytics: boolean;
-  functional: boolean;
-}
-
-export const consentContext = createContext<CookieConsent | undefined>(
-  undefined
-);
-
-const config = {
-  ga:
-    import.meta.env.VITE_STAGE === "PRODUCTION" ||
-    import.meta.env.VITE_STAGE === "STAGING"
-      ? {}
-      : undefined,
-  custom: [
-    {
-      type: "cookie",
-      category: "essential",
-      name: "pgs-auth-jwt",
-      domain: "data.microbit.org",
-      purpose:
-        "Session information so we know what class code you are signed in as",
-    },
-    {
-      type: "local",
-      category: "essential",
-      name: "settings",
-      domain: "data.microbit.org",
-      purpose:
-        "Used to store your settings and remember which dialogs you've opted not to be shown in future",
-    },
-  ],
-};
-
-const showConsent = (
-  { userTriggered }: { userTriggered: boolean } = { userTriggered: false }
-) => {
-  const w = window as any;
-  w.commonConsent?.show({ userTriggered, config });
-};
-
-const hideConsent = () => {
-  const w = window as any;
-  w.commonConsent?.hide();
-};
-
-export const manageCookies = () => showConsent({ userTriggered: true });
-
-export const ConsentProvider = ({ children }: { children: ReactNode }) => {
-  const [value, setValue] = useState<CookieConsent | undefined>(undefined);
-  useEffect(() => {
-    const w = window as any;
-    const updateListener = (event: CustomEvent<CookieConsent>) => {
-      setValue(event.detail);
-    };
-    w.addEventListener("consentchange", updateListener);
-    if (w.commonConsent) {
-      showConsent();
-    } else {
-      w.addEventListener("consentinit", showConsent);
-    }
-    return () => {
-      w.removeEventListener("consentchange", updateListener);
-      w.removeEventListener("consentinit", showConsent);
-      hideConsent();
-    };
-  }, []);
-
-  return (
-    <consentContext.Provider value={value}>{children}</consentContext.Provider>
-  );
-};
-export const useConsent = () => {
-  return useContext(consentContext);
-};
diff --git a/src/deployment/default/index.tsx b/src/deployment/default/index.tsx
index 825642a25..588112bd8 100644
--- a/src/deployment/default/index.tsx
+++ b/src/deployment/default/index.tsx
@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps, Text, VStack } from "@chakra-ui/react";
+import { BoxProps, Text, VStack } from "@chakra-ui/react";
 import { ReactNode, createContext } from "react";
 import { CookieConsent, DeploymentConfigFactory } from "..";
 import { NullLogging } from "./logging";

From ea3b0e834717ed357c1c7b39e8d19a65b93b4da4 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 10:45:11 +0100
Subject: [PATCH 07/13] Bump theme package

---
 .github/workflows/build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 4ec1cf510..bc49eeb0e 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.1.0 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
+      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.2.0-dev.4 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From a12a7d5a58ac97da8947412a70ec2a6ed6067c44 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 10:52:29 +0100
Subject: [PATCH 08/13] Use brand not blue for links

---
 src/components/AboutDialog.tsx               | 2 +-
 src/components/BrokenFirmwareDialog.tsx      | 6 +++---
 src/components/ConnectBatteryDialog.tsx      | 4 ++--
 src/components/ErrorHandlerErrorView.tsx     | 2 +-
 src/components/ManualFlashingDialog.tsx      | 2 +-
 src/components/NotFound.tsx                  | 2 +-
 src/components/StartOverWarningDialog.tsx    | 2 +-
 src/components/UnsupportedMicrobitDialog.tsx | 4 ++--
 src/deployment/default/components/button.ts  | 2 +-
 9 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
index 5853a1544..7883b4acc 100644
--- a/src/components/AboutDialog.tsx
+++ b/src/components/AboutDialog.tsx
@@ -83,7 +83,7 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
                         href="https://cctd.au.dk/"
                         target="_blank"
                         rel="noopener"
-                        color="blue.600"
+                        color="brand.600"
                       >
                         {chunks}
                       </Link>
diff --git a/src/components/BrokenFirmwareDialog.tsx b/src/components/BrokenFirmwareDialog.tsx
index 830387f30..078e23848 100644
--- a/src/components/BrokenFirmwareDialog.tsx
+++ b/src/components/BrokenFirmwareDialog.tsx
@@ -55,7 +55,7 @@ const BrokenFirmwareDialog = ({
                     values={{
                       link: (chunks: ReactNode) => (
                         <Link
-                          color="blue.600"
+                          color="brand.600"
                           href="https://microbit.org/get-started/user-guide/firmware/"
                           target="_blank"
                           rel="noopener"
@@ -68,7 +68,7 @@ const BrokenFirmwareDialog = ({
                 </Text>
                 <Text w="100%">
                   <Link
-                    color="blue.600"
+                    color="brand.600"
                     href="https://microbit.org/get-started/user-guide/firmware/"
                     target="_blank"
                     rel="noopener"
@@ -80,7 +80,7 @@ const BrokenFirmwareDialog = ({
                     <Icon
                       as={RiExternalLinkLine}
                       boxSize={5}
-                      color="blue.600"
+                      color="brand.600"
                       position="relative"
                     />
                   </Link>
diff --git a/src/components/ConnectBatteryDialog.tsx b/src/components/ConnectBatteryDialog.tsx
index 7f2f01e55..7633e6a08 100644
--- a/src/components/ConnectBatteryDialog.tsx
+++ b/src/components/ConnectBatteryDialog.tsx
@@ -19,7 +19,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
         <Text alignSelf="left" width="100%">
           <FormattedMessage id="connectMB.connectBattery.subtitle" />
           <Link
-            color="blue.600"
+            color="brand.600"
             //TODO: Replace with real support link.
             href="https://support.microbit.org/support/home"
             target="_blank"
@@ -32,7 +32,7 @@ const ConnectBatteryDialog = ({ ...props }: ConnectBatteryDialogProps) => {
             <Icon
               as={RiExternalLinkLine}
               boxSize={5}
-              color="blue.600"
+              color="brand.600"
               position="relative"
             />
           </Link>
diff --git a/src/components/ErrorHandlerErrorView.tsx b/src/components/ErrorHandlerErrorView.tsx
index 29648e6af..e97ff4795 100644
--- a/src/components/ErrorHandlerErrorView.tsx
+++ b/src/components/ErrorHandlerErrorView.tsx
@@ -14,7 +14,7 @@ const ErrorHandlerErrorView = () => {
             values={{
               link: (chunks: ReactNode) => (
                 <Link
-                  color="blue.600"
+                  color="brand.600"
                   href="https://support.microbit.org"
                   target="_blank"
                   rel="noopener noreferrer"
diff --git a/src/components/ManualFlashingDialog.tsx b/src/components/ManualFlashingDialog.tsx
index 803e94154..e49a1b2d6 100644
--- a/src/components/ManualFlashingDialog.tsx
+++ b/src/components/ManualFlashingDialog.tsx
@@ -70,7 +70,7 @@ const ManualFlashingDialog = ({
             id="connectMB.transferHex.manualDownload"
             values={{
               link: (chunks: ReactNode) => (
-                <Text as="button" color="blue.600" onClick={handleDownload}>
+                <Text as="button" color="brand.600" onClick={handleDownload}>
                   {chunks}
                 </Text>
               ),
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index 1551333b5..6402d6fa2 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -11,7 +11,7 @@ const NotFound = ({ href }: NotFoundProps) => {
   const intl = useIntl();
   return (
     <ErrorPage title={intl.formatMessage({ id: "not-found-title" })}>
-      <Link color="blue.600" href={href ? href : createHomePageUrl()}>
+      <Link color="brand.600" href={href ? href : createHomePageUrl()}>
         <FormattedMessage id="not-found" />
       </Link>
     </ErrorPage>
diff --git a/src/components/StartOverWarningDialog.tsx b/src/components/StartOverWarningDialog.tsx
index 39cbd8e94..9ddaafe75 100644
--- a/src/components/StartOverWarningDialog.tsx
+++ b/src/components/StartOverWarningDialog.tsx
@@ -56,7 +56,7 @@ const StartOverWarningDialog = ({
                     values={{
                       link: (chunks: ReactNode) => (
                         <Link
-                          color="blue.600"
+                          color="brand.600"
                           onClick={handleSaveHex}
                           target="_blank"
                           rel="noopener"
diff --git a/src/components/UnsupportedMicrobitDialog.tsx b/src/components/UnsupportedMicrobitDialog.tsx
index 27ee15e14..5a57f2290 100644
--- a/src/components/UnsupportedMicrobitDialog.tsx
+++ b/src/components/UnsupportedMicrobitDialog.tsx
@@ -50,7 +50,7 @@ const UnsupportedMicrobitDialog = ({
                     values={{
                       link: (chunks: ReactNode) => (
                         <Link
-                          color="blue.600"
+                          color="brand.600"
                           href="https://support.microbit.org/support/solutions/articles/19000119162"
                           target="_blank"
                           rel="noopener"
@@ -70,7 +70,7 @@ const UnsupportedMicrobitDialog = ({
                       values={{
                         link: (chunks: ReactNode) => (
                           <Link
-                            color="blue.600"
+                            color="brand.600"
                             // TODO: Replace with real support link.
                             href="https://support.microbit.org/support/home"
                             target="_blank"
diff --git a/src/deployment/default/components/button.ts b/src/deployment/default/components/button.ts
index f39366c9b..8ca56341a 100644
--- a/src/deployment/default/components/button.ts
+++ b/src/deployment/default/components/button.ts
@@ -10,7 +10,7 @@ const Button: StyleConfig = {
     },
     link: () => ({
       borderWidth: "0",
-      color: "blue.600",
+      color: "brand.600",
       fontWeight: "normal",
       bg: "transparent",
     }),

From f0613cdb3b708f1826de8781d4fd2d687b5eef48 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <44397098+microbit-matt-hillsdon@users.noreply.github.com>
Date: Thu, 3 Oct 2024 11:04:17 +0100
Subject: [PATCH 09/13] Remove unused font

---
 src/deployment/default/fonts.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/deployment/default/fonts.ts b/src/deployment/default/fonts.ts
index 4d9bf9a30..417ded38d 100644
--- a/src/deployment/default/fonts.ts
+++ b/src/deployment/default/fonts.ts
@@ -6,7 +6,6 @@
 const fonts = {
   heading: "Helvetica, Arial, sans-serif",
   body: "Helvetica, Arial, sans-serif",
-  code: "Source Code Pro, monospace",
 };
 
 export default fonts;

From 360156192c3b4e151c360c0357515ebf0ed2d2b1 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 11:07:09 +0100
Subject: [PATCH 10/13] Drop the org "logo"

---
 src/deployment/default/index.tsx | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/deployment/default/index.tsx b/src/deployment/default/index.tsx
index 588112bd8..1791a5d1f 100644
--- a/src/deployment/default/index.tsx
+++ b/src/deployment/default/index.tsx
@@ -34,19 +34,7 @@ const defaultDeploymentFactory: DeploymentConfigFactory = () => ({
       </VStack>
     );
   },
-  OrgLogo: (props: BoxProps) => {
-    return (
-      <VStack
-        color="white"
-        fontWeight="bold"
-        justifyContent="center"
-        alignItems="center"
-        {...props}
-      >
-        <Text>micro:bit</Text>
-      </VStack>
-    );
-  },
+  OrgLogo: undefined,
   logging: new NullLogging(),
   compliance: {
     ConsentProvider: ({ children }: { children: ReactNode }) => (

From 59838724eea7b5337eefed03af9edb129cf35786 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 11:18:08 +0100
Subject: [PATCH 11/13] Bump theme package

---
 .github/workflows/build.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index bc49eeb0e..9810cd371 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -36,7 +36,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.2.0-dev.4 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
+      - run: npm install --no-save @microbit-foundation/ml-trainer-microbit@0.2.0-dev.5 @microbit-foundation/website-deploy-aws@0.6 @microbit-foundation/website-deploy-aws-config@0.9
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 9637ca2cce31bf7286d7f1b01f62555956514b81 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 12:49:16 +0100
Subject: [PATCH 12/13] Tidy

---
 src/components/AboutDialog.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
index 7883b4acc..3a9520932 100644
--- a/src/components/AboutDialog.tsx
+++ b/src/components/AboutDialog.tsx
@@ -42,7 +42,7 @@ interface AboutDialogProps {
  * An about dialog with version information.
  */
 const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
-  const { appNameFull } = useDeployment();
+  const { appNameFull, OrgLogo } = useDeployment();
   const versionInfo = [
     {
       name: appNameFull,
@@ -56,7 +56,6 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
     .join("\n");
 
   const { hasCopied, onCopy } = useClipboard(clipboardVersion);
-  const { OrgLogo } = useDeployment();
   const intl = useIntl();
   return (
     <Modal

From 4e0aef909134d4a330cace6d1bd3cfa415f1114d Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Thu, 3 Oct 2024 12:51:56 +0100
Subject: [PATCH 13/13] Reinstate some extra grays we use, tidy

---
 src/deployment/default/colors.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/deployment/default/colors.ts b/src/deployment/default/colors.ts
index d0173254a..a324a4350 100644
--- a/src/deployment/default/colors.ts
+++ b/src/deployment/default/colors.ts
@@ -5,8 +5,19 @@
  */
 import { theme } from "@chakra-ui/theme";
 
+const gray = {
+  10: "#fcfcfc",
+  25: "#f5f5f5",
+  ...theme.colors.gray,
+  // Brand grey
+  500: "#e5e5e5",
+  // windi css text color
+  600: "#6b7280",
+};
+
 const colors = {
   ...theme.colors,
+  gray,
   brand: theme.colors.blue,
   brand2: theme.colors.gray,
 };