diff --git a/backend/expressjs/readme.md b/backend/expressjs/readme.md
index 007b364..e199d69 100644
--- a/backend/expressjs/readme.md
+++ b/backend/expressjs/readme.md
@@ -58,6 +58,11 @@ sequenceDiagram
         Service-->>ErrorMW: Throw Error
         ErrorMW-->>Client: Standardized Error Response
     end
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 ---## 1. Controller / Route Decoupling
 ### ❌ Bad Practice
diff --git a/backend/graphql/readme.md b/backend/graphql/readme.md
index 0c51e47..482e67f 100644
--- a/backend/graphql/readme.md
+++ b/backend/graphql/readme.md
@@ -48,6 +48,11 @@ sequenceDiagram
     D-->>L: Return flat result set
     L-->>R: Map results to specific users
     R-->>C: Return JSON response
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 
 
diff --git a/backend/microservices/readme.md b/backend/microservices/readme.md
index d2c7821..201cb82 100644
--- a/backend/microservices/readme.md
+++ b/backend/microservices/readme.md
@@ -84,6 +84,11 @@ sequenceDiagram
 
     Msg->>Notification: Consume "UserCreated" Event
     Notification-->>Notification: Send Welcome Email
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 ## 🔒 2. Security Best Practices
 
diff --git a/backend/mongodb/architecture.md b/backend/mongodb/architecture.md
index 7c50056..e112412 100644
--- a/backend/mongodb/architecture.md
+++ b/backend/mongodb/architecture.md
@@ -58,6 +58,11 @@ sequenceDiagram
     Repository-->>Service: Saved Entity
     Service-->>Controller: Domain Response
     Controller-->>Client: 201 Created (Response DTO)
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 ## 🔗 Entity Relationships
 
@@ -94,6 +99,11 @@ classDiagram
     User "1" --> "*" Post : creates
     User "1" --> "*" Comment : writes
     Post "1" --> "*" Comment : contains
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 ---
 
diff --git a/backend/mongodb/readme.md b/backend/mongodb/readme.md
index 416864e..7172d93 100644
--- a/backend/mongodb/readme.md
+++ b/backend/mongodb/readme.md
@@ -48,6 +48,11 @@ sequenceDiagram
     Mongo->>Validation: Process $jsonSchema constraints
     Validation-->>Storage: Write document
     Storage-->>App: Return success
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 
 
diff --git a/backend/nestjs/readme.md b/backend/nestjs/readme.md
index 401a0f8..737d18d 100644
--- a/backend/nestjs/readme.md
+++ b/backend/nestjs/readme.md
@@ -55,6 +55,11 @@ sequenceDiagram
     Repo-->>Service: Domain Entity
     Service-->>Controller: Result (mapped to DTO)
     Controller-->>Client: HTTP Response
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 
 ---
diff --git a/backend/postgresql/readme.md b/backend/postgresql/readme.md
index 428615a..c600c13 100644
--- a/backend/postgresql/readme.md
+++ b/backend/postgresql/readme.md
@@ -66,6 +66,11 @@ sequenceDiagram
     App->>DB: Execute Parameterized Query
     DB-->>App: Return Result Set
     App->>Pool: Release Connection
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 ## 🔒 2. Security Best Practices
 
diff --git a/backend/redis/readme.md b/backend/redis/readme.md
index 4e94a9a..2560c43 100644
--- a/backend/redis/readme.md
+++ b/backend/redis/readme.md
@@ -76,6 +76,11 @@ sequenceDiagram
         App->>Redis: SETEX Cache Key with TTL
         App-->>Client: Respond with Data
     end
+
+    %% Added Design Token Styles for Mermaid Diagrams
+    classDef default fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000;
+    classDef component fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000;
+    classDef layout fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000;
 ```
 ## 🔒 2. Security Best Practices