diff --git a/apps/web/src/components/player/VisualizerSettingsModal.tsx b/apps/web/src/components/player/VisualizerSettingsModal.tsx
index 5453a3946..8ffa009ec 100644
--- a/apps/web/src/components/player/VisualizerSettingsModal.tsx
+++ b/apps/web/src/components/player/VisualizerSettingsModal.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import { X, Activity } from 'lucide-react';
 import { useAudio, VisualizerSettings } from '../../context/AudioContext';
+import {
+  ColorVizIndigo,
+  ColorVizNeutral,
+  ColorVizSage,
+  ColorVizGold,
+  ColorVizVermillion,
+} from '@veza/design-system/tokens-generated';
 
 interface VisualizerSettingsModalProps {
   onClose: () => void;
@@ -15,7 +22,8 @@ export const VisualizerSettingsModal: React.FC<
     setVisualizerSettings({ ...visualizerSettings, [key]: value });
   };
 
-  const colors = ['#7c9dd6', '#a8a4a0', '#7a9e6c', '#c9a84c', '#d4634a'];
+  // Data viz pigments (charte §4.5) — stored as hex in user prefs.
+  const colors = [ColorVizIndigo, ColorVizNeutral, ColorVizSage, ColorVizGold, ColorVizVermillion];
 
   return (
     <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-72 bg-card rounded-xl shadow-[0_8px_32px_rgba(26,26,30,0.18)] z-50 animate-fadeIn overflow-hidden">
diff --git a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
index 56ce0d732..2739cf1b4 100644
--- a/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
+++ b/apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
@@ -19,12 +19,22 @@ import { userService } from '@/services/userService';
 import { usePWA } from '@/hooks/usePWA';
 import { Download } from 'lucide-react';
 
+// Theme accent picker — exposes data viz pigments as personal accent overrides.
+// Note: per CHARTE_GRAPHIQUE §4.4 rule 3, the canonical brand accent is Mizu cyan.
+// These presets are user-personalisation only (stored in user.preferences).
+import {
+  ColorVizIndigo,
+  ColorVizSage,
+  ColorVizVermillion,
+  ColorVizGold,
+} from '@veza/design-system/tokens-generated';
+
 const ACCENT_PRESETS = [
-  { id: 'indigo', hue: 220, hex: '#7c9dd6' },
-  { id: 'sage', hue: 120, hex: '#7a9e6c' },
-  { id: 'vermillion', hue: 15, hex: '#d4634a' },
-  { id: 'gold', hue: 45, hex: '#c9a84c' },
-  { id: 'sakura', hue: 340, hex: '#e0a0b8' },
+  { id: 'indigo',     hue: 220, hex: ColorVizIndigo },
+  { id: 'sage',       hue: 120, hex: ColorVizSage },
+  { id: 'vermillion', hue: 15,  hex: ColorVizVermillion },
+  { id: 'gold',       hue: 45,  hex: ColorVizGold },
+  { id: 'sakura',     hue: 340, hex: '#e0a0b8' },
 ];
 
 export const AppearanceSettingsView: React.FC = () => {
diff --git a/apps/web/src/components/ui/DesignTokens.stories.tsx b/apps/web/src/components/ui/DesignTokens.stories.tsx
index 42dde496b..e7857029c 100644
--- a/apps/web/src/components/ui/DesignTokens.stories.tsx
+++ b/apps/web/src/components/ui/DesignTokens.stories.tsx
@@ -33,34 +33,53 @@ function DesignTokensShowcase() {
   return (
     <div className="space-y-8 p-4">
       <div>
-        <h2 className="text-2xl font-heading font-bold mb-1">SUMI Design System v2.0</h2>
-        <p className="text-muted-foreground">"L'encre et la lumière" — Ink and Light</p>
+        <h2 className="text-2xl font-heading font-bold mb-1">SUMI Design System v3.0</h2>
+        <p className="text-muted-foreground">"Lavis d'encre" — Ink wash. Source : packages/design-system/tokens/.</p>
       </div>
 
-      <TokenSection title="Pigments">
-        <ColorSwatch name="Accent (Indigo)" value="#7c9dd6" cssVar="--sumi-accent" />
-        <ColorSwatch name="Accent Hover" value="#93afe0" cssVar="--sumi-accent-hover" />
-        <ColorSwatch name="Vermillion" value="#d4634a" cssVar="--sumi-vermillion" />
-        <ColorSwatch name="Sage" value="#7a9e6c" cssVar="--sumi-sage" />
-        <ColorSwatch name="Gold" value="#c9a84c" cssVar="--sumi-gold" />
-        <ColorSwatch name="Live" value="#e05a5a" cssVar="--sumi-live" />
+      <TokenSection title="Brand accent (Mizu — UI sole accent per charte §4.4)">
+        <ColorSwatch name="Accent (Mizu cyan)" value="#0098B5" cssVar="--sumi-accent" />
+        <ColorSwatch name="Accent Hover"       value="#00B4D8" cssVar="--sumi-accent-hover" />
+        <ColorSwatch name="Accent Active"      value="#007A94" cssVar="--sumi-accent-active" />
+        <ColorSwatch name="Accent Emphasis"    value="#006B7F" cssVar="--sumi-accent-emphasis" />
       </TokenSection>
 
-      <TokenSection title="Backgrounds">
-        <ColorSwatch name="Void" value="#0c0c0f" cssVar="--sumi-bg-void" />
-        <ColorSwatch name="Base" value="#121215" cssVar="--sumi-bg-base" />
-        <ColorSwatch name="Raised" value="#1a1a1f" cssVar="--sumi-bg-raised" />
-        <ColorSwatch name="Overlay" value="#222228" cssVar="--sumi-bg-overlay" />
-        <ColorSwatch name="Hover" value="#2a2a31" cssVar="--sumi-bg-hover" />
-        <ColorSwatch name="Active" value="#32323a" cssVar="--sumi-bg-active" />
+      <TokenSection title="Data viz palette (charts/waveforms ONLY — charte §4.5)">
+        <ColorSwatch name="Indigo"     value="#7c9dd6" cssVar="--sumi-viz-indigo" />
+        <ColorSwatch name="Vermillion" value="#d4634a" cssVar="--sumi-viz-vermillion" />
+        <ColorSwatch name="Sage"       value="#7a9e6c" cssVar="--sumi-viz-sage" />
+        <ColorSwatch name="Gold"       value="#c9a84c" cssVar="--sumi-viz-gold" />
+        <ColorSwatch name="Neutral"    value="#a8a4a0" cssVar="--sumi-viz-neutral" />
+      </TokenSection>
+
+      <TokenSection title="Functional (always diluted, max 60% opacity)">
+        <ColorSwatch name="Sage (success)"  value="rgba(90,140,100, 0.60)"  cssVar="--sumi-sage" />
+        <ColorSwatch name="Brick (error)"   value="rgba(180,80,70, 0.55)"   cssVar="--sumi-error" />
+        <ColorSwatch name="Amber (warning)" value="rgba(190,150,60, 0.55)"  cssVar="--sumi-gold" />
+        <ColorSwatch name="Live"            value="rgba(180,80,70, 0.55)"   cssVar="--sumi-live" />
+      </TokenSection>
+
+      <TokenSection title="Kin (gold leaf — decorative)">
+        <ColorSwatch name="Kin"        value="#b8860b" cssVar="--sumi-kin" />
+        <ColorSwatch name="Vermillion" value="#a04050" cssVar="--sumi-vermillion" />
+      </TokenSection>
+
+      <TokenSection title="Backgrounds (墨の濃淡 — dark theme)">
+        <ColorSwatch name="Void"    value="#0A0A0C" cssVar="--sumi-bg-void" />
+        <ColorSwatch name="Base"    value="#0D0D0F" cssVar="--sumi-bg-base" />
+        <ColorSwatch name="Raised"  value="#141416" cssVar="--sumi-bg-raised" />
+        <ColorSwatch name="Overlay" value="#1A1A1E" cssVar="--sumi-bg-overlay" />
+        <ColorSwatch name="Hover"   value="#222226" cssVar="--sumi-bg-hover" />
+        <ColorSwatch name="Active"  value="#2A2A2F" cssVar="--sumi-bg-active" />
       </TokenSection>
 
       <TokenSection title="Text">
-        <ColorSwatch name="Primary" value="#f0ede8" cssVar="--sumi-text-primary" />
-        <ColorSwatch name="Secondary" value="#a8a4a0" cssVar="--sumi-text-secondary" />
-        <ColorSwatch name="Tertiary" value="#706c68" cssVar="--sumi-text-tertiary" />
-        <ColorSwatch name="Disabled" value="#4a4844" cssVar="--sumi-text-disabled" />
-        <ColorSwatch name="Link" value="#8baade" cssVar="--sumi-text-link" />
+        <ColorSwatch name="Primary"   value="#E8E3DB" cssVar="--sumi-text-primary" />
+        <ColorSwatch name="Secondary" value="#9A958D" cssVar="--sumi-text-secondary" />
+        <ColorSwatch name="Tertiary"  value="#6B6660" cssVar="--sumi-text-tertiary" />
+        <ColorSwatch name="Disabled"  value="#3D3A35" cssVar="--sumi-text-disabled" />
+        <ColorSwatch name="Inverse"   value="#F2EDE6" cssVar="--sumi-text-inverse" />
+        <ColorSwatch name="Link"      value="#0098B5" cssVar="--sumi-text-link" />
       </TokenSection>
 
       <div className="space-y-3">
diff --git a/apps/web/src/context/audio-context/useAudioContextValue.ts b/apps/web/src/context/audio-context/useAudioContextValue.ts
index 3db8ed5ee..6407170fc 100644
--- a/apps/web/src/context/audio-context/useAudioContextValue.ts
+++ b/apps/web/src/context/audio-context/useAudioContextValue.ts
@@ -2,10 +2,11 @@ import { useState, useEffect, useRef } from 'react';
 import type { Track } from '@/types';
 import type { VisualizerSettings } from './types';
 import { mockTracks } from './mockTracks';
+import { ColorVizIndigo } from '@veza/design-system/tokens-generated';
 
 const defaultVisualizer: VisualizerSettings = {
   mode: 'waveform',
-  color: '#7c9dd6',
+  color: ColorVizIndigo,
   sensitivity: 50,
 };