feat(ui): adopt approved brand and foundation tokens

.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/nextjs-vite';
 import React from 'react';
+import '../src/app/globals.css';
 
 const preview: Preview = {
   parameters: {
@@ -9,33 +10,38 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-
     layout: 'centered',
-
+    backgrounds: {
+      default: 'Ink Navy',
+      values: [
+        { name: 'Ink Navy', value: '#070A12' },
+        { name: 'Frost White', value: '#F7F9FC' },
+      ],
+    },
     a11y: {
-      // 'error' - fail CI on a11y violations
-      // 'todo' - show violations in test UI only
-      // 'off' - skip a11y checks entirely
       test: 'error',
     },
   },
   decorators: [
-    // Add decorator to wrap components with necessary providers
     (Story) =>
       React.createElement(
         'div',
         {
+          className: 'dark',
+          'data-theme': 'dark',
           style: {
             minWidth: '320px',
             maxWidth: '100%',
-            padding: '24px',
-            background: '#ffffff',
-            borderRadius: '8px',
+            padding: 'var(--tb-space-6)',
+            color: 'var(--tb-text)',
+            background: 'var(--tb-canvas)',
+            border: '1px solid var(--tb-border)',
+            borderRadius: 'var(--tb-radius-lg)',
           },
         },
         React.createElement(Story, null),
       ),
   ],
 };
 
-export default preview;
+export default preview;

docs/ux/DESIGN_SYSTEM.md

@@ -120,3 +120,24 @@ Storybook coverage: `src/components/ui/primitives/StatusBadge.stories.tsx`.
 - disabled buttons without an accessible explanation;
 - raw wallet/RPC errors shown directly to users;
 - importing test mocks into production modules.
+
+
+## Approved V2 brand foundation (UI-FE-001)
+
+The production token layer now follows Protocol PRs #17 and #18. The canonical
+Evidence Shield assets live in `public/brand` and are addressed through
+`src/lib/brand.ts`; consumers must not redraw, distort, split, or recolour the
+mark. Geist is loaded before landscape lockups render.
+
+- Signal Cyan `#22D3EE`: evidence and focus.
+- Proof Blue `#4F7CFF`: primary actions and resolved context.
+- Ink Navy `#070A12` and Deep Slate `#101522`: dark-first canvas and surfaces.
+- Frost White `#F7F9FC`: primary dark-theme text and light canvas.
+- Bounty Gold `#F5B942`: rewards and staking only.
+- Green, amber, red and information blue retain distinct state semantics.
+
+The compatibility variables used by existing components remain available, but
+are rebound to the approved palette. Purple and lavender are not active V2
+identity tokens. Spacing, control heights, radii and motion durations follow the
+approved machine-readable foundation, and reduced-motion preferences collapse
+non-essential animation to 1 ms.