diff --git a/apps/web/all_components.txt b/apps/web/all_components.txt
index cba95e468..14eb9356a 100644
--- a/apps/web/all_components.txt
+++ b/apps/web/all_components.txt
@@ -181,7 +181,6 @@ src/components/ui/HelpText.tsx
 src/components/ui/ImageCropper.tsx
 src/components/ui/ImageViewerModal.tsx
 src/components/ui/input.tsx
-src/components/ui/KodoEmptyState.tsx
 src/components/ui/label.tsx
 src/components/ui/LazyComponent.tsx
 src/components/ui/loading-spinner.tsx
diff --git a/apps/web/covered_components.txt b/apps/web/covered_components.txt
index 847a6b487..8a657a81b 100644
--- a/apps/web/covered_components.txt
+++ b/apps/web/covered_components.txt
@@ -50,7 +50,6 @@ src/components/ui/HelpText.tsx
 src/components/ui/ImageCropper.tsx
 src/components/ui/ImageViewerModal.tsx
 src/components/ui/Input.tsx
-src/components/ui/KodoEmptyState.tsx
 src/components/ui/Label.tsx
 src/components/ui/LoadingSpinner.tsx
 src/components/ui/LoadingState.tsx
diff --git a/apps/web/docs/EMPTY_ERROR_PATTERNS.md b/apps/web/docs/EMPTY_ERROR_PATTERNS.md
index 6e4926f15..78e0676ca 100644
--- a/apps/web/docs/EMPTY_ERROR_PATTERNS.md
+++ b/apps/web/docs/EMPTY_ERROR_PATTERNS.md
@@ -38,7 +38,6 @@ Style : même espacement (padding généreux), même hiérarchie (titre en `text
 | Composant | Usage typique | Fichier |
 |-----------|----------------|---------|
 | **EmptyState** | Liste générique (titre, description, action optionnelle) | `@/components/ui/empty-state` |
-| **KodoEmptyState** | Page ou bloc vide style Kodo (icône, titre, description, bouton) | `@/components/ui/KodoEmptyState` |
 | **TrackListEmpty** | Liste de pistes vide (no-tracks, no-results, error) | `@/features/tracks/components/TrackListEmpty` |
 | **PlaylistListEmpty** | Liste de playlists (no_playlists, no_search_results) | `@/features/playlists/components/playlist-list/PlaylistListEmpty` |
 | **PlaylistTrackListEmpty** | Pistes d’une playlist vide | `@/features/playlists/components/playlist-track-list/PlaylistTrackListEmpty` |
@@ -47,7 +46,7 @@ Style : même espacement (padding généreux), même hiérarchie (titre en `text
 
 ### Quand utiliser lequel
 
-- **Page ou section entière vide** (ex. Library vide, aucun résultat recherche) → `KodoEmptyState` ou `EmptyState` avec titre + description + CTA.
+- **Page ou section entière vide** (ex. Library vide, aucun résultat recherche) → `EmptyState` avec titre + description + CTA.
 - **Liste de pistes** → `TrackListEmpty` (gère no-tracks, no-results, error avec retry).
 - **Liste de playlists** → `PlaylistListEmpty` avec la variante adaptée.
 - **Pistes d’une playlist** → `PlaylistTrackListEmpty`.
diff --git a/apps/web/src/components/COMPONENT_USAGE.md b/apps/web/src/components/COMPONENT_USAGE.md
index fda1d1490..83f835664 100644
--- a/apps/web/src/components/COMPONENT_USAGE.md
+++ b/apps/web/src/components/COMPONENT_USAGE.md
@@ -1,5 +1,7 @@
 # Component Usage Guide
 
+> **Note**: Some examples reference legacy Kodo tokens. Prefer Sumi tokens (`text-primary`, `bg-background`, `text-muted-foreground`) — see [DESIGN_TOKENS.md](../../docs/DESIGN_TOKENS.md).
+
 **Last Updated**: 2025-01-27  
 **Purpose**: Guide for when and how to use design system components
 
diff --git a/apps/web/src/stories/Welcome.mdx b/apps/web/src/stories/Welcome.mdx
index 5f3b7313d..2b1680633 100644
--- a/apps/web/src/stories/Welcome.mdx
+++ b/apps/web/src/stories/Welcome.mdx
@@ -29,14 +29,16 @@ Located in `Features/` - complex components organized by feature area:
 - **Settings**: User preference panels
 - **Streaming**: Playback analytics, bitrate controls
 
-## 🎨 Design Tokens
+## 🎨 Design Tokens (SUMI)
 
-Our design system uses the **Kodo** theme with these key colors:
-- `kodo-lime` - Primary accent (success, CTAs)
-- `kodo-cyan` - Secondary accent (links, info)
-- `kodo-red` - Danger (errors, warnings)
-- `kodo-steel` - Neutral (borders, muted text)
-- `kodo-ink` - Background (dark mode)
+Our design system uses the **Sumi** theme with these key tokens:
+- `--sumi-accent` - Primary accent (links, focus, CTAs)
+- `--sumi-sage` - Success (online, validated)
+- `--sumi-vermillion` - Danger (errors, destructive)
+- `--sumi-gold` - Warnings (achievements, premium)
+- `--sumi-bg-base` / `--sumi-bg-raised` - Backgrounds
+
+Use semantic Tailwind classes: `text-primary`, `text-muted-foreground`, `bg-background`, `border-border`. See [DESIGN_TOKENS.md](../docs/DESIGN_TOKENS.md).
 
 ## ⌨️ Keyboard Shortcuts
 
diff --git a/apps/web/src/styles/COLOR_USAGE.md b/apps/web/src/styles/COLOR_USAGE.md
index fd37e4f17..ed2f7ae2c 100644
--- a/apps/web/src/styles/COLOR_USAGE.md
+++ b/apps/web/src/styles/COLOR_USAGE.md
@@ -1,7 +1,9 @@
 # Color Usage Guide - Kodo Design System
 
+> **DEPRECATED**: This document describes the legacy Kodo design system. Use [DESIGN_TOKENS.md](../../docs/DESIGN_TOKENS.md) and the **Sumi** design system (`--sumi-*` tokens) for all new development.
+
 **Last Updated**: 2025-01-27  
-**Purpose**: Document when and how to use each color in the Kodo design system
+**Purpose**: Document when and how to use each color in the Kodo design system (legacy reference)
 
 ## Overview