diff --git a/2-tokens/2-generated/color.css b/2-tokens/2-generated/color.css
index c65261a..5e89774 100644
--- a/2-tokens/2-generated/color.css
+++ b/2-tokens/2-generated/color.css
@@ -1,10 +1,18 @@
 :root {
     --color-primary: #9CC975;
+    --color-on-primary: #000001;
     --color-secondary: #122135;
+    --color-on-secondary: #FFFFFF;
     --color-success: #7CBB53;
+    --color-on-success: #000000;
     --color-danger: #C71C22;
+    --color-on-danger: #FFFFFF;
     --color-warning: #DD5600;
+    --color-on-warning: #FFFFFF;
     --color-info: #354282;
+    --color-on-info: #FFFFFF;
     --color-dark: #09101AFF;
+    --color-on-dark: #FFFFFF;
     --color-light: #f8f9fa;
+    --color-on-light: #09101AFF;
 }
diff --git a/2-tokens/overrides.contract.css b/2-tokens/overrides.contract.css
index 4c5c8be..66d8e33 100644
--- a/2-tokens/overrides.contract.css
+++ b/2-tokens/overrides.contract.css
@@ -1,11 +1,19 @@
 :root {
     /* runtime-only variables, injected by host app */
     --ingeli-primary-override: ;
+    --ingeli-on-primary-override: ;
     --ingeli-secondary-override: ;
+    --ingeli-on-secondary-override: ;
     --ingeli-success-override: ;
+    --ingeli-on-success-override: ;
     --ingeli-warning-override: ;
+    --ingeli-on-warning-override: ;
     --ingeli-danger-override: ;
+    --ingeli-on-danger-override: ;
     --ingeli-info-override: ;
+    --ingeli-on-info-override: ;
     --ingeli-dark-override: ;
+    --ingeli-on-dark-override: ;
     --ingeli-light-override: ;
+    --ingeli-on-light-override: ;
 }
\ No newline at end of file
diff --git a/2-tokens/overrides.css b/2-tokens/overrides.css
index 0dcfbe2..59e00ab 100644
--- a/2-tokens/overrides.css
+++ b/2-tokens/overrides.css
@@ -1,10 +1,18 @@
 :root {
     --color-primary-runtime: var(--ingeli-primary-override, var(--color-primary));
+    --color-on-primary-runtime: var(--ingeli-on-primary-override, var(--color-on-primary));
     --color-secondary-runtime: var(--ingeli-secondary-override, var(--color-secondary));
+    --color-on-secondary-runtime: var(--ingeli-on-secondary-override, var(--color-on-secondary));
     --color-success-runtime: var(--ingeli-success-override, var(--color-success));
+    --color-on-success-runtime: var(--ingeli-on-success-override, var(--color-on-success));
     --color-warning-runtime: var(--ingeli-warning-override, var(--color-warning));
+    --color-on-warning-runtime: var(--ingeli-on-warning-override, var(--color-on-warning));
     --color-danger-runtime: var(--ingeli-danger-override, var(--color-danger));
+    --color-on-danger-runtime: var(--ingeli-on-danger-override, var(--color-on-danger));
     --color-info-runtime: var(--ingeli-info-override, var(--color-info));
+    --color-on-info-runtime: var(--ingeli-on-info-override, var(--color-on-info));
     --color-dark-runtime: var(--ingeli-dark-override, var(--color-dark));
+    --color-on-dark-runtime: var(--ingeli-on-dark-override, var(--color-on-dark));
     --color-light-runtime: var(--ingeli-light-override, var(--color-light));
+    --color-on-light-runtime: var(--ingeli-on-light-override, var(--color-on-light));
 }
\ No newline at end of file
diff --git a/3-styles/ingeli-std/1-behaviors/color.behavior.css b/3-styles/ingeli-std/1-behaviors/color.behavior.css
index fd744ae..f8e6d00 100644
--- a/3-styles/ingeli-std/1-behaviors/color.behavior.css
+++ b/3-styles/ingeli-std/1-behaviors/color.behavior.css
@@ -9,6 +9,6 @@
 [class^="istd-color-"]:not(.istd-sty-outline),
 [class*=" istd-color-"]:not(.istd-sty-outline) {
     --button-bg: var(--_color);
-    --button-text: color-contrast(var(--_color) vs black, white);
+    --button-text: var(--_on-color);
     --button-border: color-mix(in srgb, var(--_color) 80%, black);
 }
diff --git a/3-styles/ingeli-std/1-behaviors/color.values.css b/3-styles/ingeli-std/1-behaviors/color.values.css
index 1e4054e..8874afb 100644
--- a/3-styles/ingeli-std/1-behaviors/color.values.css
+++ b/3-styles/ingeli-std/1-behaviors/color.values.css
@@ -1,8 +1,40 @@
-.istd-color-primary   { --_color: var(--color-primary-runtime); }
-.istd-color-secondary { --_color: var(--color-secondary-runtime); }
-.istd-color-success   { --_color: var(--color-success-runtime); }
-.istd-color-warning   { --_color: var(--color-warning-runtime); }
-.istd-color-danger    { --_color: var(--color-danger-runtime); }
-.istd-color-info      { --_color: var(--color-info-runtime); }
-.istd-color-dark      { --_color: var(--color-dark-runtime); }
-.istd-color-light     { --_color: var(--color-light-runtime); }
+.istd-color-primary {
+    --_color: var(--color-primary-runtime);
+    --_color-600: color-mix(in srgb, var(--color-primary-runtime) 80%, black);
+    --_on-color: var(--color-on-primary-runtime);
+}
+.istd-color-secondary {
+    --_color: var(--color-secondary-runtime);
+    --_on-color: var(--color-on-secondary-runtime);
+    --_color-600: color-mix(in srgb, var(--color-secondary-runtime) 80%, black);
+}
+.istd-color-success {
+    --_color: var(--color-success-runtime);
+    --_on-color: var(--color-on-success-runtime);
+    --_color-600: color-mix(in srgb, var(--color-success-runtime) 80%, black);
+}
+.istd-color-warning {
+    --_color: var(--color-warning-runtime);
+    --_on-color: var(--color-on-warning-runtime);
+    --_color-600: color-mix(in srgb, var(--color-warning-runtime) 80%, black);
+}
+.istd-color-danger {
+    --_color: var(--color-danger-runtime);
+    --_on-color: var(--color-on-danger-runtime);
+    --_color-600: color-mix(in srgb, var(--color-danger-runtime) 80%, black);
+}
+.istd-color-info {
+    --_color: var(--color-info-runtime);
+    --_on-color: var(--color-on-info-runtime);
+    --_color-600: color-mix(in srgb, var(--color-info-runtime) 80%, black);
+}
+.istd-color-dark {
+    --_color: var(--color-dark-runtime);
+    --_on-color: var(--color-on-dark-runtime);
+    --_color-600: color-mix(in srgb, var(--color-dark-runtime) 80%, black);
+}
+.istd-color-light {
+    --_color: var(--color-light-runtime);
+    --_on-color: var(--color-on-light-runtime);
+    --_color-600: color-mix(in srgb, var(--color-light-runtime) 80%, black);
+}
diff --git a/3-styles/ingeli-std/1-behaviors/style.behavior.css b/3-styles/ingeli-std/1-behaviors/style.behavior.css
index 4e02d84..0e67b27 100644
--- a/3-styles/ingeli-std/1-behaviors/style.behavior.css
+++ b/3-styles/ingeli-std/1-behaviors/style.behavior.css
@@ -11,7 +11,7 @@
     --button-text: var(--_color);
     --button-border: var(--_color);
 
-    --button-bg-hover: var(--_color);
-    --button-text-hover: color-contrast(var(--_color) vs white, black);
+    --button-bg-hover: var(--_color-600);
+    --button-text-hover: var(--_on-color);
     --button-border-hover: var(--_color);
 }
\ No newline at end of file
diff --git a/3-styles/ingeli-std/2-layouts/default-layout.css b/3-styles/ingeli-std/2-layouts/default-layout.css
new file mode 100644
index 0000000..53879e8
--- /dev/null
+++ b/3-styles/ingeli-std/2-layouts/default-layout.css
@@ -0,0 +1,45 @@
+/* Default application layout (browser) */
+.istd-layout-default {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Sidebar */
+.istd-layout-default .istd-main-layout-side-bar {
+    width: var(--layout-sidebar-width, 260px);
+    flex-shrink: 0;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Sidebar scroll */
+.istd-layout-default .istd-nav-menu {
+    flex: 1;
+    overflow-y: auto;
+}
+
+/* Main frame */
+.istd-layout-default .istd-main-layout-main-frame {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Toolbar */
+.istd-layout-default .istd-main-layout-toolbar {
+    height: var(--layout-toolbar-height, 56px);
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+}
+
+/* Main content */
+.istd-layout-default .istd-main-layout-body {
+    flex: 1;
+    overflow-y: auto;
+}
diff --git a/3-styles/ingeli-std/2-components/button.css b/3-styles/ingeli-std/3-components/button.css
similarity index 100%
rename from 3-styles/ingeli-std/2-components/button.css
rename to 3-styles/ingeli-std/3-components/button.css
diff --git a/5-build/build-css.js b/5-build/build-css.js
index c469c6d..1cb3f46 100644
--- a/5-build/build-css.js
+++ b/5-build/build-css.js
@@ -27,16 +27,19 @@ const SOURCES = [
 
     // 2. Framework
     "3-styles/ingeli-std/1-behaviors",
-    "3-styles/ingeli-std/2-components",
-    "3-styles/ingeli-std/utilities",
+    "3-styles/ingeli-std/2-layouts",
+    "3-styles/ingeli-std/3-components",
+    "3-styles/ingeli-std/4-pages",
 
     "3-styles/ingeli-ils/1-behaviors",
-    "3-styles/ingeli-ils/2-components",
-    "3-styles/ingeli-ils/utilities",
+    "3-styles/ingeli-ils/2-layouts",
+    "3-styles/ingeli-ils/3-components",
+    "3-styles/ingeli-ils/4-pages",
 
     "3-styles/cloud-engine/1-behaviors",
-    "3-styles/cloud-engine/2-components",
-    "3-styles/cloud-engine/utilities",
+    "3-styles/cloud-engine/2-layouts",
+    "3-styles/cloud-engine/3-components",
+    "3-styles/cloud-engine/4-pages",
 
     // 3. Client commons
     `4-clients/${clientName}/1-commons/styles`,
diff --git a/5-build/deploy-one.js b/5-build/deploy-one.js
index d157378..5b9d890 100644
--- a/5-build/deploy-one.js
+++ b/5-build/deploy-one.js
@@ -2,10 +2,11 @@
 import path from "path";
 import { stripBOM } from "./utils/fs-utils.js";
 
-const [ , , clientName, appName, variantName ] = process.argv;
+const [,, clientName, appName, variantName, ...flags] = process.argv;
+const touchVersion = flags.includes("--touch");
 
 if (!clientName || !appName || !variantName) {
-    console.error("❌ Usage: node deploy-one.js <client> <application> <variant>");
+    console.error("❌ Usage: node deploy-one.js <client> <application> <variant> [--touch]");
     process.exit(1);
 }
 
@@ -68,6 +69,12 @@ console.log(`   Variant     : ${variantName}`);
 console.log(`   From        : ${DIST_DIR}`);
 console.log(`   To          : ${TARGET_DIR}`);
 
+/* 1️⃣ Clean target directory */
+if (fs.existsSync(TARGET_DIR)) {
+    fs.rmSync(TARGET_DIR, { recursive: true, force: true });
+    console.log("   🧹 Target directory cleaned");
+}
+
 fs.mkdirSync(TARGET_DIR, { recursive: true });
 
 for (const file of fs.readdirSync(DIST_DIR)) {
diff --git a/5-build/live-dev.js b/5-build/live-dev.js
index 53f7e7b..6a0520c 100644
--- a/5-build/live-dev.js
+++ b/5-build/live-dev.js
@@ -1,5 +1,6 @@
 import chokidar from "chokidar";
 import { execSync } from "child_process";
+import WebSocket, { WebSocketServer } from "ws";
 
 const [ , , clientName, appName, variantName ] = process.argv;
 
@@ -21,6 +22,23 @@ const WATCH_PATHS = [
 
 let timeout = null;
 
+// Port DEV uniquement
+const WS_PORT = 24601;
+
+// Serveur WebSocket
+const wss = new WebSocketServer({ port: WS_PORT });
+
+console.log(`🔌 LiveDev WebSocket listening on ws://localhost:${WS_PORT}`);
+
+function notifyReload() {
+    console.log("📢 Notify browser: reload CSS");
+    wss.clients.forEach(client => {
+        if (client.readyState === WebSocket.OPEN) {
+            client.send("reload-css");
+        }
+    });
+}
+
 function rebuild() {
     console.log("\n🔄 Change detected");
 
@@ -34,10 +52,12 @@ function rebuild() {
             `node 5-build/deploy-one.js ${clientName} ${appName} ${variantName}`,
             { stdio: "inherit" }
         );
+        notifyReload();
 
         console.log("✅ Rebuild + deploy done");
     } catch (err) {
         console.error("❌ Error during rebuild/deploy");
+        console.error(err);
     }
 }
 
diff --git a/package.json b/package.json
index 2ca60d3..0c48185 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,4 @@
-{
+{
   "name": "ingeli-design-system",
   "private": true,
   "version": "0.1.0",
@@ -13,6 +13,7 @@
     "deploy all demo": "node 5-build/deploy-all.js 1-demo"
   },
   "devDependencies": {
-    "chokidar": "^3.6.0"
+    "chokidar": "^3.6.0",
+    "ws": "^8.19.0"
   }
-}
\ No newline at end of file
+}
diff --git a/readme.md b/readme.md
index bf61022..6fd9f3f 100644
--- a/readme.md
+++ b/readme.md
@@ -18,13 +18,18 @@
 │   │   │   ├── color.behavior.css         mapping behavior → tokens
 │   │   │   └── color.values.css
 │   │   │
-│   │   ├── 2-components/
+│   │   ├── 2-layouts/
+│   │   │   ├── default.css
+│   │   │   ├── browser.css
+│   │   │   └── mobile.css
+│   │   │
+│   │   ├── 3-components/
 │   │   │   ├── panel.css
 │   │   │   ├── button.css
 │   │   │   ├── alert.css
 │   │   │   └── tabs.css
 │   │   │
-│   │   ├── 3-pages/
+│   │   ├── 4-pages/
 │   │   │   └── (optionnel)
 │   │   │
 │   │   └── utilities/