diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
index 1b69e1d8c..d6c10df4f 100644
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -225,6 +225,17 @@ export default [js.configs.recommended, {
         message:
           'Use SUMI design system semantic tokens (primary, secondary, destructive, success, warning, muted, foreground, etc.) instead of Tailwind default colors. See apps/web/docs/DESIGN_TOKENS.md for token mapping. For exceptions (e.g., test files), add eslint-disable comment.',
       },
+      // Hex colors: Prevent literal hex colors in JS/TS strings (use tokens instead).
+      // Matches strings like '#7c9dd6', '#fff', '#0d0d0fAA' — anywhere in code.
+      // Use var(--sumi-*) in CSS contexts (JSX style props, template literals)
+      // OR import { ColorXxx } from '@veza/design-system/tokens-generated' for canvas/runtime.
+      // Exceptions: rgba()/hsla() (not # prefix), the design-system package itself (different rule scope).
+      {
+        selector:
+          "Literal[value=/^#[0-9a-fA-F]{3,8}$/]",
+        message:
+          'Hardcoded hex color literal. Use SUMI tokens: var(--sumi-*) for CSS strings (JSX style/className), or import {ColorVizIndigo, ColorMizuBase, ...} from \'@veza/design-system/tokens-generated\' for canvas/runtime contexts. Source of truth: packages/design-system/tokens/primitive/color.json. See CHARTE_GRAPHIQUE_TALAS.md §4.',
+      },
       // Components: Enforce Button component usage (prevent native button elements)
       // Warn on native <button> elements - use <Button> component from @/components/ui/button instead
       {