From 7adef654e956bd324bbb9ddd24a5e7de2eaad9be Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 18 Sep 2026 09:56:40 -0600
Subject: [PATCH 01/12] Update colour variables to match Bolt + also mark
 -neutral and -danger as deprecated since the name used in design land is
 -surface and -critical.

Also removed the -apmt, -send and -service specific colours.
---
 src/assets/styles/colours.css | 204 +++++++++-------------------------
 1 file changed, 52 insertions(+), 152 deletions(-)

diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index 976f62a..3b28295 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -1,29 +1,10 @@
 html {
   /*
-   * Bolt Colours
    * Reference: https://bolt.thunderbird.net/8b179dbfd/p/61e4c7-color
    */
-  --colour-user-red: #e53935;
-  --colour-user-orange: #ff8c00;
-  --colour-user-yellow: #f4c430;
-  --colour-user-graphite: #b0b0b0;
-  --colour-user-green: #34c759;
-  --colour-user-blue: #0a84ff;
-  --colour-user-purple: #7753cc;
-  --colour-user-pink: #e91e63;
 
   /*
-   * Reference:  https://www.figma.com/design/3pWlMatoNdA2BT3BPVziFL/
-   */
-
-  /*
-   * Generic Colours
-   * Prefer the named colours over these!
-   */
-  --colour-neutral-900: #26272a;
-
-  /*
-   * Neutral
+   * Neutral (DEPRECATED, superseeded by Surface) – Delete me once we're sure no one else is using it.
    * Applied frequently for backgrounds, surfaces, dividers, and outlines.
    */
   --colour-neutral-base: #feffff;
@@ -33,6 +14,18 @@ html {
   --colour-neutral-border: #e4e4e7;
   --colour-neutral-border-intense: #777580;
 
+  /*
+   * Surface
+   * Applied frequently for backgrounds, surfaces, dividers, and outlines.
+   */
+  --colour-surface-base: #FCFCFD;
+  --colour-surface-raised: #FFFFFF;
+  --colour-surface-lower: #F7F7F8;
+  --colour-surface-subtle: #EFEFF1;
+  --colour-surface-deep: #E4E4E7;
+  --colour-surface-border: #D9D9DE;
+  --colour-surface-border-intense: #A1A1AA;
+
   /*
    * Primary
    * Applied frequently to surfaces highlight actions & information.
@@ -45,15 +38,6 @@ html {
   --colour-primary-hover-light: #175fb6; /* No override */
   --colour-primary-pressed: #19518f;
 
-  /*
-   * Secondary
-   * Applied sparingly to highlight information.
-   */
-  --colour-secondary-soft: #faf5ff;
-  --colour-secondary-default: #6b21a8;
-  --colour-secondary-hover: #571c87;
-  --colour-secondary-pressed: #3a0764;
-
   /*
    * Success
    * Applied sparingly to show positive feedback/status.
@@ -74,7 +58,7 @@ html {
   --colour-warning-pressed: #caa204;
 
   /*
-   * Danger
+   * Danger (DEPRECATED, superseeded by Critical) – Delete me once we're sure no one else is using it.
    * Applied sparingly to show negative feedback/status or dangerous actions.
    * Errors
    */
@@ -83,19 +67,32 @@ html {
   --colour-danger-hover: #7f1d1d;
   --colour-danger-pressed: #450a0a;
 
+  /*
+   * Critical
+   * Applied sparingly to show negative feedback/status or dangerous actions.
+   * Errors
+   */
+  --colour-critical-soft: #fef2f2;
+  --colour-critical-default: #991b1b;
+  --colour-critical-hover: #7f1d1d;
+  --colour-critical-pressed: #450a0a;
+
   /*
    * Text+Icon
    * Applied frequently for text and icons.
    */
-  --colour-ti-base: #1a202c;
-  --colour-ti-base-light: #1a202c; /* No override */
+  --colour-ti-base: #18181B;
+  --colour-ti-base-light: #18181B; /* No override */
   --colour-ti-base-dark: #eeeef0; /* No override */
-  --colour-ti-secondary: #4c4d58;
-  --colour-ti-muted: #737584;
+  --colour-ti-base-inverted: #FCFCFD;
+  --colour-ti-secondary: #52525B;
+  --colour-ti-muted: #71717A;
+  --colour-ti-disabled: #A1A1AA;
+  --colour-ti-brand: #0B5CBD;
   --colour-ti-highlight: #1373d9;
   --colour-ti-warning: #713f12;
-  --colour-ti-critical: #dc2626;
-  --colour-ti-success: #1d783b;
+  --colour-ti-critical: #B91C1C;
+  --colour-ti-success: #1C5F32;
 
   /*
    * Accent Colours
@@ -103,47 +100,24 @@ html {
    * *Do not use with text
    */
   --colour-accent-teal: #25a6a0;
-  --colour-accent-blue: #37adf9;
-  --colour-accent-purple: #ae55f7;
+  --colour-accent-blue: #58C9FF;
+  --colour-accent-purple: #AE55F7;
   --colour-accent-orange: #ea7308;
   --colour-accent-pink: #e247c4;
   --colour-accent-gray: #6e6f9b;
 
-  /*
-   * Brand Colours
-   * Appointment
-   */
-  --colour-apmt-soft: #f3f9fc;
-  --colour-apmt-primary: #008080;
-  --colour-apmt-primary-hover: #066769;
-  --colour-apmt-primary-pressed: #0a5757;
-  --colour-apmt-secondary: #81d4b5;
-  --colour-apmt-accent-1: #a3ece3;
-  --colour-apmt-accent-2: #03afd7;
-
-  /*
-   * Brand Colours
-   * Send
-   */
-  --colour-send-soft: #fef7ec;
-  --colour-send-primary: #f09d38;
-  --colour-send-primary-hover: #f09d38;
-  --colour-send-primary-pressed: #f09d38;
-  --colour-send-primary-secondary: #aa6000;
-  --colour-send-primary-accent-1: #1f8ddb;
-  --colour-send-primary-accent-2: #1f8ddb;
-
   &.dark {
     /*
      * Neutral
      * Applied frequently for backgrounds, surfaces, dividers, and outlines.
      */
-    --colour-neutral-base: #1a202c;
-    --colour-neutral-lower: #18181b;
-    --colour-neutral-raised: #262d3b;
-    --colour-neutral-subtle: var(--colour-neutral-raised);
-    --colour-neutral-border: #303a4a;
-    --colour-neutral-border-intense: #3d4d67;
+    --colour-neutral-base: #18181B;
+    --colour-neutral-raised: #2B2B2F;
+    --colour-neutral-lower: #111113;
+    --colour-neutral-subtle: #232326;
+    --colour-neutral-deep: #3F3F46;
+    --colour-neutral-border: #52525B;
+    --colour-neutral-border-intense: #71717A;
 
     /*
      * Primary
@@ -155,15 +129,6 @@ html {
     --colour-primary-pressed: #1b90f5;
     /*--primary-text: #1A202C; // No matching light-mode variable! */
 
-    /*
-     * Secondary
-     * Applied sparingly to highlight information.
-     */
-    --colour-secondary-soft: #3a0764;
-    --colour-secondary-default: #f5e8ff;
-    --colour-secondary-hover: #ecd5ff;
-    --colour-secondary-pressed: #ddb4fe;
-
     /*
      * Success
      * Applied sparingly to show positive feedback/status.
@@ -171,7 +136,7 @@ html {
     --colour-success-soft: #082b16;
     --colour-success-default: #defae7;
     --colour-success-hover: #c0f2cf;
-    --colour-success-pressed: #8ee7aa;
+    --colour-success-pressed: #81D4B5;
 
     /*
      * Warning
@@ -189,20 +154,22 @@ html {
      * Errors
      */
     --colour-danger-soft: #7f1d1d;
-    --colour-danger-default: #fee2e2;
-    --colour-danger-hover: #fecaca;
-    --colour-danger-pressed: #fca5a5;
+    --colour-danger-default: #FCA5A5;
+    --colour-danger-hover: #F87171;
+    --colour-danger-pressed: #F05252;
 
     /*
      * Text+Icon
      * Applied frequently for text and icons.
      */
-    --colour-ti-base: #eeeef0;
-    --colour-ti-secondary: #d9d9de;
-    --colour-ti-muted: #7f94ac;
+    --colour-ti-base: #F7F7F8;
+    --colour-ti-secondary: #D4D4D8;
+    --colour-ti-muted: #A1A1AA;
+    --colour-ti-disabled: #71717A;
+    --colour-ti-brand: #5FA6E8;
     --colour-ti-highlight: #58c9ff;
     --colour-ti-warning: #fee78a;
-    --colour-ti-critical: #ef4444;
+    --colour-ti-critical: #F87171;
     --colour-ti-success: #55d37e;
 
     /*
@@ -216,72 +183,5 @@ html {
     --colour-accent-orange: #fec18a;
     --colour-accent-pink: #fbd3f6;
     --colour-accent-gray: #c3cade;
-
-    /*
-     * Brand Colours
-     * Appointment
-     */
-    --colour-apmt-soft: #152f3c;
-    --colour-apmt-primary: #a3ece3;
-    --colour-apmt-primary-hover: #6ddbd1;
-    --colour-apmt-primary-pressed: #3ec3ba;
-    --colour-apmt-secondary: #25a6a0;
-    --colour-apmt-accent-1: #a3ece3;
-    --colour-apmt-accent-2: #58c9ff;
-
-    /*
-     * Brand Colours
-     * Send
-     */
-    --colour-send-soft: #411107;
-    --colour-send-primary: #f09d38;
-    --colour-send-primary-hover: #f09d38;
-    --colour-send-primary-pressed: #f09d38;
-    --colour-send-primary-secondary: #aa6000;
-    --colour-send-primary-accent-1: #1f8ddb;
-    --colour-send-primary-accent-2: #1f8ddb;
-  }
-
-  /*
-  * Brand Colours
-  * Thunderbird
-  * The fallback if no service is set.
-  */
-  --colour-service-soft: var(--colour-primary-soft);
-  --colour-service-primary: var(--colour-primary-default);
-  --colour-service-primary-hover: var(--colour-primary-hover);
-  --colour-service-primary-pressed: var(--colour-primary-pressed);
-  --colour-service-secondary: var(--colour-secondary-default);
-  --colour-service-accent-1: var(--colour-accent-purple);
-  --colour-service-accent-2: var(--colour-accent-teal);
-
-  &[data-tbpro-service='apmt'] {
-    --colour-service-soft: var(--colour-apmt-soft);
-    --colour-service-primary: var(--colour-apmt-primary);
-    --colour-service-primary-hover: var(--colour-apmt-primary-hover);
-    --colour-service-primary-pressed: var(--colour-apmt-primary-pressed);
-    --colour-service-secondary: var(--colour-apmt-secondary);
-    --colour-service-accent-1: var(--colour-apmt-accent-1);
-    --colour-service-accent-2: var(--colour-apmt-accent-2);
-  }
-  &[data-tbpro-service='send'] {
-    --colour-service-soft: var(--colour-primary-soft);
-    --colour-service-primary: var(--colour-primary-default);
-    --colour-service-primary-hover: var(--colour-primary-hover);
-    --colour-service-primary-pressed: var(--colour-primary-pressed);
-    --colour-service-secondary: var(--colour-neutral-subtle);
-    --colour-service-accent-1: var(--colour-send-primary-accent-1);
-    --colour-service-accent-2: var(--colour-send-primary-accent-2);
-  }
-  /*
-  &[data-tbpro-service='send'] {
-    --colour-service-soft: var(--colour-send-soft);
-    --colour-service-primary: var(--colour-send-primary);
-    --colour-service-primary-hover: var(--colour-send-primary-hover);
-    --colour-service-primary-pressed: var(--colour-send-primary-pressed);
-    --colour-service-secondary: var(--colour-send-primary-secondary);
-    --colour-service-accent-1: var(--colour-send-primary-accent-1);
-    --colour-service-accent-2: var(--colour-send-primary-accent-2);
   }
-  */
 }

From c5f080e97fcd8b54a624f2727fd3ba0b6b7842c7 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 18 Sep 2026 09:56:55 -0600
Subject: [PATCH 02/12] Update Storybook preview to have only light / dark
 themes

---
 .storybook/preview.ts | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 006aa63..924249f 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,31 +1,19 @@
 import type { Preview } from '@storybook/vue3-vite';
 import '@/assets/styles/fonts.css';
 import '@/assets/styles/main.css';
-import { withThemeByClassName, withThemeByDataAttribute } from '@storybook/addon-themes';
+import { withThemeByClassName } from '@storybook/addon-themes';
 import { setup } from '@storybook/vue3-vite';
 import i18ninstance from '@/composable/i18n';
 
 export const decorators = [
   withThemeByClassName({
     themes: {
-      lightApmt: '',
-      darkApmt: 'dark',
-      lightSend: '',
-      darkSend: 'dark',
+      light: '',
+      dark: 'dark',
     },
-    defaultTheme: 'lightApmt',
+    defaultTheme: 'light',
     parentSelector: 'html',
   }),
-  withThemeByDataAttribute({
-    themes: {
-      lightApmt: 'apmt',
-      darkApmt: 'apmt',
-      lightSend: 'send',
-      darkSend: 'send',
-    },
-    defaultTheme: 'lightApmt',
-    attributeName: 'data-tbpro-service',
-  }),
 ];
 
 const preview: Preview = {

From ce7ed9c08efe5f1e92f51916720681180ffe48a1 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 18 Sep 2026 10:01:48 -0600
Subject: [PATCH 03/12] Add Colour stories + ColourPalette helper component

---
 src/foundation/Colours.stories.ts | 100 ++++++++++++++++++++++++
 src/stories/ColourPalette.vue     | 122 ++++++++++++++++++++++++++++++
 2 files changed, 222 insertions(+)
 create mode 100644 src/foundation/Colours.stories.ts
 create mode 100644 src/stories/ColourPalette.vue

diff --git a/src/foundation/Colours.stories.ts b/src/foundation/Colours.stories.ts
new file mode 100644
index 0000000..6eea96b
--- /dev/null
+++ b/src/foundation/Colours.stories.ts
@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import ColourPalette, { type ColourGroup } from '@/stories/ColourPalette.vue';
+
+// Keep in sync with src/assets/styles/colours.css, use the theme switcher to preview dark mode.
+// Reference: https://bolt.thunderbird.net/8b179dbfd/p/61e4c7-color
+const tokens = (prefix: string, names: string[]) => names.map((name) => `--colour-${prefix}-${name}`);
+const states = ['soft', 'default', 'hover', 'pressed'];
+
+const surface: ColourGroup = {
+  name: 'Surface',
+  description: 'Applied frequently for backgrounds, surfaces, dividers, and outlines.',
+  tokens: tokens('surface', ['base', 'raised', 'lower', 'subtle', 'deep', 'border', 'border-intense']),
+};
+
+const primary: ColourGroup = {
+  name: 'Primary',
+  description: 'Applied frequently to surfaces highlight actions & information.',
+  tokens: tokens('primary', [...states, 'default-light', 'default-dark', 'hover-light']),
+};
+
+const success: ColourGroup = {
+  name: 'Success',
+  description: 'Applied sparingly to show positive feedback/status.',
+  tokens: tokens('success', states),
+};
+
+const warning: ColourGroup = {
+  name: 'Warning',
+  description: 'Applied sparingly to show warning feedback/status. Notifications/messaging.',
+  tokens: tokens('warning', states),
+};
+
+const critical: ColourGroup = {
+  name: 'Critical',
+  description: 'Applied sparingly to show negative feedback/status or dangerous actions. Errors.',
+  tokens: tokens('critical', states),
+};
+
+const textAndIcon: ColourGroup = {
+  name: 'Text+Icon',
+  description: 'Applied frequently for text and icons.',
+  tokens: tokens('ti', [
+    'base',
+    'base-light',
+    'base-dark',
+    'base-inverted',
+    'secondary',
+    'muted',
+    'disabled',
+    'brand',
+    'highlight',
+    'warning',
+    'critical',
+    'success',
+  ]),
+};
+
+const accent: ColourGroup = {
+  name: 'Accent Colours',
+  description: 'Used for accents, gradients, highlights. Do not use with text.',
+  tokens: tokens('accent', ['teal', 'blue', 'purple', 'orange', 'pink', 'gray']),
+};
+
+const neutral: ColourGroup = {
+  name: 'Neutral',
+  description: 'Superseded by Surface.',
+  deprecated: true,
+  tokens: tokens('neutral', ['base', 'lower', 'raised', 'subtle', 'border', 'border-intense']),
+};
+
+const danger: ColourGroup = {
+  name: 'Danger',
+  description: 'Superseded by Critical.',
+  deprecated: true,
+  tokens: tokens('danger', states),
+};
+
+const meta: Meta<typeof ColourPalette> = {
+  title: 'Foundational Items/Colours',
+  component: ColourPalette,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const All: Story = {
+  args: { groups: [surface, primary, success, warning, critical, textAndIcon, accent, neutral, danger] },
+};
+
+export const Surface: Story = { args: { groups: [surface] } };
+export const Primary: Story = { args: { groups: [primary] } };
+export const Success: Story = { args: { groups: [success] } };
+export const Warning: Story = { args: { groups: [warning] } };
+export const Critical: Story = { args: { groups: [critical] } };
+export const TextAndIcon: Story = { args: { groups: [textAndIcon] } };
+export const Accent: Story = { args: { groups: [accent] } };
+export const DeprecatedNeutral: Story = { args: { groups: [neutral] } };
+export const DeprecatedDanger: Story = { args: { groups: [danger] } };
diff --git a/src/stories/ColourPalette.vue b/src/stories/ColourPalette.vue
new file mode 100644
index 0000000..8fae9cd
--- /dev/null
+++ b/src/stories/ColourPalette.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+/**
+ * Storybook-only helper to show the colour blocks
+ * Colours use the live CSS variables, so they follow the theme picked in the Storybook toolbar
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export interface ColourGroup {
+  name: string;
+  description: string;
+  tokens: string[];
+  deprecated?: boolean;
+}
+
+const props = defineProps<{ groups: ColourGroup[] }>();
+
+// Resolved hex values for the active theme
+const values = ref<Record<string, string>>({});
+
+function readValues() {
+  const style = getComputedStyle(document.documentElement);
+  for (const token of props.groups.flatMap((group) => group.tokens)) {
+    values.value[token] = style.getPropertyValue(token).trim();
+  }
+}
+
+// Storybook's theme switcher toggles a class on <html>
+const observer = new MutationObserver(readValues);
+onMounted(() => {
+  readValues();
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+});
+
+onBeforeUnmount(() => observer.disconnect());
+</script>
+
+<template>
+  <div class="palette">
+    <section v-for="group in groups" :key="group.name">
+      <h2>
+        {{ group.name }}
+        <span v-if="group.deprecated" class="deprecated">Deprecated</span>
+      </h2>
+      <p class="description">{{ group.description }}</p>
+      <ul class="swatches">
+        <li v-for="token in group.tokens" :key="token">
+          <div class="chip" :style="{ backgroundColor: `var(${token})` }"></div>
+          <code>{{ token }}</code>
+          <span class="value">{{ values[token] }}</span>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.palette {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--colour-neutral-base);
+  color: var(--colour-ti-base);
+}
+
+h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0 0 0.25rem;
+  font-size: 1.25rem;
+}
+
+.deprecated {
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--colour-ti-critical);
+  border-radius: 1rem;
+  color: var(--colour-ti-critical);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.description {
+  margin: 0 0 1rem;
+  color: var(--colour-ti-secondary);
+}
+
+.swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip {
+  height: 4rem;
+  margin-bottom: 0.25rem;
+  border: 1px solid var(--colour-neutral-border);
+  border-radius: 0.5rem;
+}
+
+.swatches li {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+code {
+  font-size: 0.75rem;
+  word-break: break-all;
+}
+
+.value {
+  color: var(--colour-ti-secondary);
+  font-family: monospace;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+</style>

From f1cce05675321f305a25f6f4e69f945da96b76e5 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 18 Sep 2026 10:38:14 -0600
Subject: [PATCH 04/12] Add missing dark mode colours

---
 src/assets/styles/colours.css | 92 ++++++++++++++++++++++-------------
 1 file changed, 57 insertions(+), 35 deletions(-)

diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index 3b28295..2debc24 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -18,13 +18,13 @@ html {
    * Surface
    * Applied frequently for backgrounds, surfaces, dividers, and outlines.
    */
-  --colour-surface-base: #FCFCFD;
-  --colour-surface-raised: #FFFFFF;
-  --colour-surface-lower: #F7F7F8;
-  --colour-surface-subtle: #EFEFF1;
-  --colour-surface-deep: #E4E4E7;
-  --colour-surface-border: #D9D9DE;
-  --colour-surface-border-intense: #A1A1AA;
+  --colour-surface-base: #fcfcfd;
+  --colour-surface-raised: #ffffff;
+  --colour-surface-lower: #f7f7f8;
+  --colour-surface-subtle: #efeff1;
+  --colour-surface-deep: #e4e4e7;
+  --colour-surface-border: #d9d9de;
+  --colour-surface-border-intense: #a1a1aa;
 
   /*
    * Primary
@@ -81,18 +81,18 @@ html {
    * Text+Icon
    * Applied frequently for text and icons.
    */
-  --colour-ti-base: #18181B;
-  --colour-ti-base-light: #18181B; /* No override */
+  --colour-ti-base: #18181b;
+  --colour-ti-base-light: #18181b; /* No override */
   --colour-ti-base-dark: #eeeef0; /* No override */
-  --colour-ti-base-inverted: #FCFCFD;
-  --colour-ti-secondary: #52525B;
-  --colour-ti-muted: #71717A;
-  --colour-ti-disabled: #A1A1AA;
-  --colour-ti-brand: #0B5CBD;
+  --colour-ti-base-inverted: #fcfcfd;
+  --colour-ti-secondary: #52525b;
+  --colour-ti-muted: #71717a;
+  --colour-ti-disabled: #a1a1aa;
+  --colour-ti-brand: #0b5cbd;
   --colour-ti-highlight: #1373d9;
   --colour-ti-warning: #713f12;
-  --colour-ti-critical: #B91C1C;
-  --colour-ti-success: #1C5F32;
+  --colour-ti-critical: #b91c1c;
+  --colour-ti-success: #1c5f32;
 
   /*
    * Accent Colours
@@ -100,24 +100,36 @@ html {
    * *Do not use with text
    */
   --colour-accent-teal: #25a6a0;
-  --colour-accent-blue: #58C9FF;
-  --colour-accent-purple: #AE55F7;
+  --colour-accent-blue: #58c9ff;
+  --colour-accent-purple: #ae55f7;
   --colour-accent-orange: #ea7308;
   --colour-accent-pink: #e247c4;
   --colour-accent-gray: #6e6f9b;
 
   &.dark {
     /*
-     * Neutral
+     * Neutral (DEPRECATED, superseeded by Surface) – Delete me once we're sure no one else is using it.
      * Applied frequently for backgrounds, surfaces, dividers, and outlines.
      */
-    --colour-neutral-base: #18181B;
-    --colour-neutral-raised: #2B2B2F;
+    --colour-neutral-base: #18181b;
+    --colour-neutral-raised: #2b2b2f;
     --colour-neutral-lower: #111113;
     --colour-neutral-subtle: #232326;
-    --colour-neutral-deep: #3F3F46;
-    --colour-neutral-border: #52525B;
-    --colour-neutral-border-intense: #71717A;
+    --colour-neutral-deep: #3f3f46;
+    --colour-neutral-border: #52525b;
+    --colour-neutral-border-intense: #71717a;
+
+    /*
+     * Surface
+     * Applied frequently for backgrounds, surfaces, dividers, and outlines.
+     */
+    --colour-surface-base: #18181b;
+    --colour-surface-raised: #2b2b2f;
+    --colour-surface-lower: #111113;
+    --colour-surface-subtle: #232326;
+    --colour-surface-deep: #3f3f46;
+    --colour-surface-border: #52525b;
+    --colour-surface-border-intense: #71717a;
 
     /*
      * Primary
@@ -136,7 +148,7 @@ html {
     --colour-success-soft: #082b16;
     --colour-success-default: #defae7;
     --colour-success-hover: #c0f2cf;
-    --colour-success-pressed: #81D4B5;
+    --colour-success-pressed: #81d4b5;
 
     /*
      * Warning
@@ -149,27 +161,37 @@ html {
     --colour-warning-pressed: #fdd847;
 
     /*
-     * Danger
+     * Danger (DEPRECATED, superseeded by Critical) – Delete me once we're sure no one else is using it.
      * Applied sparingly to show negative feedback/status or dangerous actions.
      * Errors
      */
     --colour-danger-soft: #7f1d1d;
-    --colour-danger-default: #FCA5A5;
-    --colour-danger-hover: #F87171;
-    --colour-danger-pressed: #F05252;
+    --colour-danger-default: #fca5a5;
+    --colour-danger-hover: #f87171;
+    --colour-danger-pressed: #f05252;
+
+    /*
+     * Critical
+     * Applied sparingly to show negative feedback/status or dangerous actions.
+     * Errors
+    */
+   --colour-critical-soft: #7f1d1d;
+   --colour-critical-default: #fca5a5;
+   --colour-critical-hover: #f87171;
+   --colour-critical-pressed: #f05252;
 
     /*
      * Text+Icon
      * Applied frequently for text and icons.
      */
-    --colour-ti-base: #F7F7F8;
-    --colour-ti-secondary: #D4D4D8;
-    --colour-ti-muted: #A1A1AA;
-    --colour-ti-disabled: #71717A;
-    --colour-ti-brand: #5FA6E8;
+    --colour-ti-base: #f7f7f8;
+    --colour-ti-secondary: #d4d4d8;
+    --colour-ti-muted: #a1a1aa;
+    --colour-ti-disabled: #71717a;
+    --colour-ti-brand: #5fa6e8;
     --colour-ti-highlight: #58c9ff;
     --colour-ti-warning: #fee78a;
-    --colour-ti-critical: #F87171;
+    --colour-ti-critical: #f87171;
     --colour-ti-success: #55d37e;
 
     /*

From 2c1617a81195eda5a0cc1a3574c171e0302eba7c Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Fri, 18 Sep 2026 10:38:32 -0600
Subject: [PATCH 05/12] Update SegmentedControl colours for contrast

---
 src/components/SegmentedControl.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/SegmentedControl.vue b/src/components/SegmentedControl.vue
index 794fa29..1a03ce6 100644
--- a/src/components/SegmentedControl.vue
+++ b/src/components/SegmentedControl.vue
@@ -138,7 +138,8 @@ const setOption = (option: SelectOption<string | number>) => {
         height: 1.5rem;
         min-width: 1.5rem;
         border-radius: 1.5rem;
-        background-color: rgba(19, 115, 217, 0.4); /* TODO: One off color from Zeplin */
+        background-color: var(--colour-surface-subtle);
+        color: var(--colour-ti-secondary);
         padding: 0 0.5rem;
         box-sizing: border-box;
 

From 54d51f4ad5ea233950894dc861f55dfcdb85fa5c Mon Sep 17 00:00:00 2001
From: Davi Nakano <114549747+davinotdavid@users.noreply.github.com>
Date: Mon, 21 Sep 2026 09:39:14 -0600
Subject: [PATCH 06/12] Update src/assets/styles/colours.css

Co-authored-by: Andreas <mail@devmount.de>
---
 src/assets/styles/colours.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index 2debc24..680ad17 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -174,11 +174,11 @@ html {
      * Critical
      * Applied sparingly to show negative feedback/status or dangerous actions.
      * Errors
-    */
-   --colour-critical-soft: #7f1d1d;
-   --colour-critical-default: #fca5a5;
-   --colour-critical-hover: #f87171;
-   --colour-critical-pressed: #f05252;
+     */
+    --colour-critical-soft: #7f1d1d;
+    --colour-critical-default: #fca5a5;
+    --colour-critical-hover: #f87171;
+    --colour-critical-pressed: #f05252;
 
     /*
      * Text+Icon

From 6247a3205f796b49941ad97b69df50e92f66b86d Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 21 Sep 2026 09:43:04 -0600
Subject: [PATCH 07/12] Remove deprecated --colour-neutral-deep

---
 src/assets/styles/colours.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index 680ad17..57d78b4 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -115,7 +115,6 @@ html {
     --colour-neutral-raised: #2b2b2f;
     --colour-neutral-lower: #111113;
     --colour-neutral-subtle: #232326;
-    --colour-neutral-deep: #3f3f46;
     --colour-neutral-border: #52525b;
     --colour-neutral-border-intense: #71717a;
 

From 10248cfbd1f247f90816c1c39ab287ef402f96b9 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 21 Sep 2026 09:43:43 -0600
Subject: [PATCH 08/12] Update typo in superseeded -> superseded

---
 src/assets/styles/colours.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index 57d78b4..1a7a1ac 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -4,7 +4,7 @@ html {
    */
 
   /*
-   * Neutral (DEPRECATED, superseeded by Surface) – Delete me once we're sure no one else is using it.
+   * Neutral (DEPRECATED, superseded by Surface) – Delete me once we're sure no one else is using it.
    * Applied frequently for backgrounds, surfaces, dividers, and outlines.
    */
   --colour-neutral-base: #feffff;
@@ -58,7 +58,7 @@ html {
   --colour-warning-pressed: #caa204;
 
   /*
-   * Danger (DEPRECATED, superseeded by Critical) – Delete me once we're sure no one else is using it.
+   * Danger (DEPRECATED, superseded by Critical) – Delete me once we're sure no one else is using it.
    * Applied sparingly to show negative feedback/status or dangerous actions.
    * Errors
    */
@@ -108,7 +108,7 @@ html {
 
   &.dark {
     /*
-     * Neutral (DEPRECATED, superseeded by Surface) – Delete me once we're sure no one else is using it.
+     * Neutral (DEPRECATED, superseded by Surface) – Delete me once we're sure no one else is using it.
      * Applied frequently for backgrounds, surfaces, dividers, and outlines.
      */
     --colour-neutral-base: #18181b;
@@ -160,7 +160,7 @@ html {
     --colour-warning-pressed: #fdd847;
 
     /*
-     * Danger (DEPRECATED, superseeded by Critical) – Delete me once we're sure no one else is using it.
+     * Danger (DEPRECATED, superseded by Critical) – Delete me once we're sure no one else is using it.
      * Applied sparingly to show negative feedback/status or dangerous actions.
      * Errors
      */

From 27d2786bc41be49b08be44af9239be17f9230584 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 21 Sep 2026 09:46:49 -0600
Subject: [PATCH 09/12] Hide ShowCode from Colours stories

---
 src/foundation/Colours.stories.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/foundation/Colours.stories.ts b/src/foundation/Colours.stories.ts
index 6eea96b..8d4e3ed 100644
--- a/src/foundation/Colours.stories.ts
+++ b/src/foundation/Colours.stories.ts
@@ -80,6 +80,9 @@ const meta: Meta<typeof ColourPalette> = {
   title: 'Foundational Items/Colours',
   component: ColourPalette,
   tags: ['autodocs'],
+  parameters: {
+    docs: { canvas: { sourceState: 'none' } },
+  },
 };
 
 export default meta;

From 0a490f3168e735e4bdedecf521a54e32da3040e6 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 21 Sep 2026 09:52:24 -0600
Subject: [PATCH 10/12] Replacing old usages of --colour-service-* and
 --colour-user-* with equivalent colours

---
 src/components/BaseButton.vue      | 2 +-
 src/components/LoadingSkeleton.vue | 4 ++--
 src/components/SyncCard.vue        | 4 ++--
 src/components/UserAvatar.vue      | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index b2b84a9..2936311 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -322,7 +322,7 @@ button:hover > .tooltip {
 
   background-color: transparent;
   /* color-mix darkens the text just enough to meet 4.5:1 contrast */
-  color: color-mix(in srgb, var(--colour-service-primary) 92%, black);
+  color: color-mix(in srgb, var(--colour-primary-default) 92%, black);
   text-decoration: underline;
   box-shadow: none !important;
   border: none !important;
diff --git a/src/components/LoadingSkeleton.vue b/src/components/LoadingSkeleton.vue
index 606f5e3..a6325fb 100644
--- a/src/components/LoadingSkeleton.vue
+++ b/src/components/LoadingSkeleton.vue
@@ -47,7 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
 
   &.scan {
     background: var(--colour-ti-base-dark)
-      linear-gradient(90deg, transparent 25%, var(--colour-user-graphite) 50%, transparent 75%);
+      linear-gradient(90deg, transparent 25%, var(--colour-surface-border-intense) 50%, transparent 75%);
     background-size: 1000% 1000%;
 
     @media (prefers-reduced-motion: no-preference) {
@@ -89,7 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 @keyframes pulse-animation {
   50% {
-    box-shadow: 0 0 0 0 var(--colour-user-graphite);
+    box-shadow: 0 0 0 0 var(--colour-surface-border-intense);
   }
   100% {
     box-shadow: 0 0 0 20px transparent;
diff --git a/src/components/SyncCard.vue b/src/components/SyncCard.vue
index c5ed34a..901b7d7 100644
--- a/src/components/SyncCard.vue
+++ b/src/components/SyncCard.vue
@@ -60,7 +60,7 @@ withDefaults(defineProps<Props>(), {
 }
 
 .wrapper {
-  --colour-highlight: var(--colour-service-primary);
+  --colour-highlight: var(--colour-primary-default);
   border-radius: 0.5625rem;
   border: 0.0625rem solid var(--colour-neutral-border);
   background: var(--colour-neutral-base);
@@ -71,7 +71,7 @@ withDefaults(defineProps<Props>(), {
 
 .dark {
   .wrapper {
-    --colour-highlight: var(--colour-service-secondary);
+    --colour-highlight: var(--colour-primary-default-dark);
   }
 }
 
diff --git a/src/components/UserAvatar.vue b/src/components/UserAvatar.vue
index 8536849..5ab9e74 100644
--- a/src/components/UserAvatar.vue
+++ b/src/components/UserAvatar.vue
@@ -49,9 +49,9 @@ const usernameInitial = computed(() => {
   justify-content: center;
   align-items: center;
 
-  border: solid 1px var(--colour-user-blue);
+  border: solid 1px var(--colour-primary-default);
   border-radius: 100%;
-  background-color: rgba(10, 132, 255, 0.15);
+  background-color: color-mix(in srgb, var(--colour-primary-default) 15%, transparent);
 
   .img {
     width: 100%;

From 0a2d450f4b3d3b5707ca8fcd9b760aa6cedb4272 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 21 Sep 2026 10:00:12 -0600
Subject: [PATCH 11/12] Deprecated --colour-neutral-* should follow
 --colour-surface-*

---
 src/assets/styles/colours.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index 1a7a1ac..3098040 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -7,12 +7,12 @@ html {
    * Neutral (DEPRECATED, superseded by Surface) – Delete me once we're sure no one else is using it.
    * Applied frequently for backgrounds, surfaces, dividers, and outlines.
    */
-  --colour-neutral-base: #feffff;
-  --colour-neutral-lower: #f7f7f7;
-  --colour-neutral-raised: var(--colour-neutral-base);
-  --colour-neutral-subtle: var(--colour-neutral-lower);
-  --colour-neutral-border: #e4e4e7;
-  --colour-neutral-border-intense: #777580;
+  --colour-neutral-base: #fcfcfd;
+  --colour-neutral-raised: #ffffff;
+  --colour-neutral-lower: #f7f7f8;
+  --colour-neutral-subtle: #efeff1;
+  --colour-neutral-border: #d9d9de;
+  --colour-neutral-border-intense: #a1a1aa;
 
   /*
    * Surface

From 8ccb45e900a8d94cdd32919bb7be4403691a61c2 Mon Sep 17 00:00:00 2001
From: Davi Nakano <davinakanoca@gmail.com>
Date: Mon, 21 Sep 2026 12:26:28 -0600
Subject: [PATCH 12/12] Add --bolt-design-synced CSS var

---
 src/assets/styles/colours.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index 3098040..d4def6e 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -3,6 +3,8 @@ html {
    * Reference: https://bolt.thunderbird.net/8b179dbfd/p/61e4c7-color
    */
 
+  --bolt-design-synced: "2026-09";
+
   /*
    * Neutral (DEPRECATED, superseded by Surface) – Delete me once we're sure no one else is using it.
    * Applied frequently for backgrounds, surfaces, dividers, and outlines.