Docs and colour updates (minor)

.storybook/storybook.css

@@ -14,7 +14,7 @@
   --sb-ds-background: #f6f6f9;
   --sb-ds-surface: #ffffff;
   --sb-ds-surface-container: #eef1f5;
-  --sb-ds-surface-container-high: #e6e9f0;
+  --sb-ds-surface-container-high: #eaedf3;
 
   --sb-ds-on-surface: #1a1c23;
   --sb-ds-on-surface-variant: #505563;
@@ -27,7 +27,7 @@
   --sb-ds-success: #24a148;
   --sb-ds-warning: #f1c21b;
   --sb-ds-danger: #da1e28;
-  --sb-ds-info: #3d1380;
+  --sb-ds-info: #355ec9;
   --sb-ds-brand: #202945;
 }
 

src/storybook/PracticalGuidance.mdx

@@ -84,16 +84,18 @@ styles.
 
 Build with existing components and patterns before creating new ones.
 
-Components should keep interfaces predictable, readable, and consistent.
+Components should keep interfaces <strong>predictable, efficient, readable, and consistent</strong>. Users should be able to understand how an interface behaves, complete common tasks with minimal effort, and recognise the meaning of visual cues without additional explanation.
 
 <div className="ds-dos">
   <div className="ds-card">
     <h3>✅ Do</h3>
     <ul>
-      <li>Reuse established layouts and behaviours.</li>
+      <li>Reuse established layouts, behaviours, and interaction patterns.</li>
       <li>Use standard component variants consistently.</li>
-      <li>Keep disabled and error states visually clear.</li>
-      <li>Use spacing and typography for hierarchy.</li>
+      <li>Minimise unnecessary steps for common tasks.</li>
+      <li>Use spacing, typography, and colour to create clear hierarchy.</li>
+      <li>Keep disabled, read-only, selected, and error states visually distinct.</li>
+      <li>Use visual styling that matches the meaning being communicated.</li>
     </ul>
   </div>
 
@@ -103,6 +105,8 @@ Components should keep interfaces predictable, readable, and consistent.
       <li>Don’t restyle components screen by screen.</li>
       <li>Don’t introduce custom colours unnecessarily.</li>
       <li>Don’t create multiple patterns for the same interaction.</li>
+      <li>Don't require extra interactions when a direct action would be expected.</li>
+      <li>Don't use error or warning styling for normal states.</li>
       <li>Don’t override the theme without a reusable reason.</li>
     </ul>
   </div>

src/styles/diamondDS/DiamondDSTokens.css

@@ -2,7 +2,7 @@
   /* Neutral primitives */
   --ds-grey-50: #f8f8fa;
   --ds-grey-100: #eef1f5;
-  --ds-grey-200: #e6e9f0;
+  --ds-grey-200: #eaedf3;
   --ds-grey-300: #dde1e8;
   --ds-grey-400: #bcc2cd;
   --ds-grey-500: #a5acb8;
@@ -55,8 +55,6 @@
   --ds-elevation-23: #eef1f5;
   --ds-elevation-24: #eef1f5;
 
-
-
   /* Neutral roles */
   --ds-background: #f6f6f9;
   --ds-background-channel: 246 246 249;
@@ -297,7 +295,6 @@
   --ds-elevation-23: #2a3140;
   --ds-elevation-24: #2c3140;
 
-
   /* Neutral roles */
   --ds-background: var(--ds-grey-dark-800);
   --ds-background-channel: 14 16 23;