diff --git a/.agents/rules/github-seo.md b/.agents/rules/github-seo.md
index 41c0032..27fca0b 100644
--- a/.agents/rules/github-seo.md
+++ b/.agents/rules/github-seo.md
@@ -56,6 +56,15 @@ Every file must start with a `# Context & Scope` section that defines:
   graph LR
     A[Component] --> B[Feature Logic]
     B --> C[Shared Layer]
+    %% 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;
+
+    class C component;
+    class A component;
+    class B component;
+
   ```
 
 ### Code Standards
diff --git a/.agents/rules/project-architecture.md b/.agents/rules/project-architecture.md
index 9e8a7d4..66bffec 100644
--- a/.agents/rules/project-architecture.md
+++ b/.agents/rules/project-architecture.md
@@ -59,6 +59,24 @@ graph TD
     
     H --> J
     I --> J
+    %% 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;
+
+    class C component;
+    class A component;
+    class E component;
+    class F component;
+    class G component;
+    class C1 component;
+    class H component;
+    class D component;
+    class J component;
+    class I component;
+    class F1 component;
+    class B component;
+
 ```
 
 ## 5. Rules for Adding New Technologies
diff --git a/.agents/rules/rules.md b/.agents/rules/rules.md
index 5051cd8..33435c6 100644
--- a/.agents/rules/rules.md
+++ b/.agents/rules/rules.md
@@ -49,6 +49,15 @@ graph TD
     class C,E review;
     class D warning;
     class F 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;
+
+    class C component;
+    class E component;
+    class B component;
+
 ```
 
 ---
diff --git a/.agents/rules/system-documentation.md b/.agents/rules/system-documentation.md
index 70ffc75..50de5ac 100644
--- a/.agents/rules/system-documentation.md
+++ b/.agents/rules/system-documentation.md
@@ -59,6 +59,19 @@ graph TD
     UpdateAgents --> Revalidate
     UpdateHub --> Revalidate
     Revalidate --> Commit[Apply System Doc Changes]
+    %% 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;
+
+    class Revalidate component;
+    class UpdateAgents component;
+    class UpdateHub component;
+    class CheckFiles component;
+    class RuleUpdate component;
+    class Commit component;
+    class UpdateSEO component;
+
 ```
 
 ---
diff --git a/.gemini/memory/github-seo.md b/.gemini/memory/github-seo.md
index 834ffdb..e2507c7 100644
--- a/.gemini/memory/github-seo.md
+++ b/.gemini/memory/github-seo.md
@@ -51,6 +51,15 @@ Every file must start with a `# Context & Scope` section that defines:
   graph LR
     A[Component] --> B[Feature Logic]
     B --> C[Shared Layer]
+    %% 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;
+
+    class C component;
+    class A component;
+    class B component;
+
   ```
 
 ### Code Standards
diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
index 365664b..aa2f955 100644
--- a/.github/CODE_OF_CONDUCT.md
+++ b/.github/CODE_OF_CONDUCT.md
@@ -60,6 +60,15 @@ graph TD
     class C,E review;
     class D warning;
     class F 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;
+
+    class C component;
+    class E component;
+    class B component;
+
 ```
 
 ---
@@ -211,6 +220,15 @@ graph TD
     class C,E review;
     class D warning;
     class F 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;
+
+    class C component;
+    class E component;
+    class B component;
+
 ```
 
 ---
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index bffb47e..dcc0b64 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -30,6 +30,11 @@ stateDiagram-v2
     Review --> Merge: Standards Met
     Review --> Writing: Remediation Required
     Merge --> [*]
+    %% 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;
+
 ```
 
 ---
@@ -160,6 +165,11 @@ stateDiagram-v2
     Review --> Merge: Стандарты соблюдены
     Review --> Writing: Требуются исправления
     Merge --> [*]
+    %% 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/.github/SECURITY.md b/.github/SECURITY.md
index f0fcf82..8c9eb30 100644
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -84,6 +84,18 @@ graph TD
     classDef safe fill:#ebffeb,stroke:#00aa00,stroke-width:2px;
     class C critical;
     class D safe;
+    %% 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;
+
+    class E component;
+    class F component;
+    class G component;
+    class H component;
+    class I component;
+    class B component;
+
 ```
 
 ---
@@ -186,6 +198,18 @@ graph TD
     classDef safe fill:#ebffeb,stroke:#00aa00,stroke-width:2px;
     class C critical;
     class D safe;
+    %% 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;
+
+    class E component;
+    class F component;
+    class G component;
+    class H component;
+    class I component;
+    class B component;
+
 ```
 
 ---
diff --git a/.jules/rules/architecture.md b/.jules/rules/architecture.md
index 7aebc2f..a70a86e 100644
--- a/.jules/rules/architecture.md
+++ b/.jules/rules/architecture.md
@@ -34,6 +34,14 @@ graph TD
     
     style Domain fill:#4caf50,stroke:#388e3c,stroke-width:2px,color:#fff
     style Logic fill:#2196f3,stroke:#1976d2,stroke-width:2px,color:#fff
+    %% 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;
+
+    class UI component;
+    class Adapters component;
+
 ```
 
 ### Architecture Comparison for Selection
diff --git a/.jules/rules/daily-content-generator.md b/.jules/rules/daily-content-generator.md
index f75f74d..8429592 100644
--- a/.jules/rules/daily-content-generator.md
+++ b/.jules/rules/daily-content-generator.md
@@ -32,6 +32,15 @@ graph LR
     D --> E[Add to /docs/ folder]
     
     style C fill:#ff9800,stroke:#f57c00,stroke-width:2px,color:#fff
+    %% 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;
+
+    class A component;
+    class E component;
+    class D component;
+
 ```
 
 ### Interest Areas for Generation
diff --git a/.jules/rules/design.md b/.jules/rules/design.md
index a358d08..281fcc5 100644
--- a/.jules/rules/design.md
+++ b/.jules/rules/design.md
@@ -36,6 +36,13 @@ graph TD
     style Tokens fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000
     style Elements fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000
     style Components fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000
+    %% 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;
+
+    class Layouts component;
+
 ```
 
 ---
diff --git a/.jules/rules/frontend.md b/.jules/rules/frontend.md
index a744d97..b8feddf 100644
--- a/.jules/rules/frontend.md
+++ b/.jules/rules/frontend.md
@@ -34,6 +34,18 @@ graph TD
     Widgets --> Features[4. Features / User Actions]
     Features --> Entities[5. Entities / Business Data]
     Entities --> Shared[6. Shared / UI Library, Utils]
+    %% 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;
+
+    class Shared component;
+    class Features component;
+    class Pages component;
+    class App component;
+    class Entities component;
+    class Widgets component;
+
 ```
 
 | Layer | Description | Examples |
diff --git a/.jules/rules/security.md b/.jules/rules/security.md
index 465fdab..b6087ab 100644
--- a/.jules/rules/security.md
+++ b/.jules/rules/security.md
@@ -52,6 +52,11 @@ graph TD
     style E fill:#f00,stroke:#333,stroke-width:2px,color:#fff
     style F fill:#ccc,stroke:#333,stroke-width:2px
     style G fill:#ddd,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5
+    %% 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;
+
 ```
 
 | Security Layer | Pattern/Standard | Jules Requirement |
diff --git a/.jules/rules/system-docs-manager.md b/.jules/rules/system-docs-manager.md
index d189565..fa7bbf8 100644
--- a/.jules/rules/system-docs-manager.md
+++ b/.jules/rules/system-docs-manager.md
@@ -59,6 +59,19 @@ graph TD
     UpdateAgents --> Revalidate
     UpdateHub --> Revalidate
     Revalidate --> Commit[Apply System Doc Changes]
+    %% 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;
+
+    class Revalidate component;
+    class UpdateAgents component;
+    class UpdateHub component;
+    class CheckFiles component;
+    class RuleUpdate component;
+    class Commit component;
+    class UpdateSEO component;
+
 ```
 
 ---
diff --git a/.jules/rules/ui-ux-design.md b/.jules/rules/ui-ux-design.md
index b49070f..5b399f9 100644
--- a/.jules/rules/ui-ux-design.md
+++ b/.jules/rules/ui-ux-design.md
@@ -48,6 +48,13 @@ graph TD
     style Tokens fill:#f3e5f5,stroke:#9c27b0,stroke-width:2px,color:#000
     style Elements fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px,color:#000
     style Components fill:#e8f5e9,stroke:#4caf50,stroke-width:2px,color:#000
+    %% 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;
+
+    class Layouts component;
+
 ```
 
 ---
diff --git a/README.md b/README.md
index 716ea00..578a80a 100644
--- a/README.md
+++ b/README.md
@@ -73,6 +73,16 @@ graph LR
     A[Best-Practise Library] --> B[Select Technology .md]
     B --> C[Copy to Local .ide-folder/]
     C --> D[AI Agent Activation]
+    %% 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;
+
+    class C component;
+    class A component;
+    class D component;
+    class B component;
+
 ```
 
 ### Folder Mapping Table
@@ -136,6 +146,25 @@ graph TD
     class B,C1,C2,C3 domain;
     class D1,D2,D3 tech;
     class E1,E2,E3,E4,E5,E6 spec;
+    %% 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;
+
+    class E1 component;
+    class E5 component;
+    class E3 component;
+    class E6 component;
+    class D3 component;
+    class C1 component;
+    class E2 component;
+    class D1 component;
+    class D2 component;
+    class E4 component;
+    class C2 component;
+    class C3 component;
+    class B component;
+
 ```
 ## 🌴 Folder Tree
 
@@ -262,6 +291,16 @@ graph LR
     A[Best-Practise Library] --> B[Select Technology .md]
     B --> C[Copy to Local .ide-folder/]
     C --> D[AI Agent Activation]
+    %% 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;
+
+    class C component;
+    class A component;
+    class D component;
+    class B component;
+
 ```
 
 ### Таблица: Маппинг директорий
@@ -326,6 +365,25 @@ graph TD
     class B,C1,C2,C3 domain;
     class D1,D2,D3 tech;
     class E1,E2,E3,E4,E5,E6 spec;
+    %% 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;
+
+    class E1 component;
+    class E5 component;
+    class E3 component;
+    class E6 component;
+    class D3 component;
+    class C1 component;
+    class E2 component;
+    class D1 component;
+    class D2 component;
+    class E4 component;
+    class C2 component;
+    class C3 component;
+    class B component;
+
 ```
 ## 🌴 Folder Tree
 
diff --git a/agents.md b/agents.md
index d602ecc..84bc5b8 100644
--- a/agents.md
+++ b/agents.md
@@ -35,6 +35,22 @@ graph TD
     BE --> Express[Express]
 
     style Global fill:#f9f,stroke:#333,stroke-width:4px
+    %% 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;
+
+    class BE component;
+    class Tech component;
+    class MVC component;
+    class TS component;
+    class Angular component;
+    class FSD component;
+    class FE component;
+    class Express component;
+    class Arch component;
+    class Nest component;
+
 ```
 
 ### Resource Directory
diff --git a/architectures/model-view-controller/readme.md b/architectures/model-view-controller/readme.md
index 9cbe18d..ba9df4b 100644
--- a/architectures/model-view-controller/readme.md
+++ b/architectures/model-view-controller/readme.md
@@ -42,6 +42,18 @@ graph TD
     
     classDef infra fill:#f9f9f9,stroke:#333,stroke-width:2px;
     class Controller,Model,View infra;
+    %% 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;
+
+    class DB component;
+    class Controller component;
+    class View component;
+    class Response component;
+    class Model component;
+    class Router component;
+
 ```
 
 ---
diff --git a/architectures/readme.md b/architectures/readme.md
index 8ff430a..4d6c193 100644
--- a/architectures/readme.md
+++ b/architectures/readme.md
@@ -64,6 +64,18 @@ graph TD
     Widgets --> Features[features]
     Features --> Entities[entities]
     Entities --> Shared[shared]
+    %% 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;
+
+    class Shared component;
+    class Features component;
+    class Pages component;
+    class App component;
+    class Entities component;
+    class Widgets component;
+
 ```
 
 ```text
@@ -95,6 +107,16 @@ graph TD
     Infrastructure[Infrastructure] --> InterfaceAdapters[Interface Adapters]
     InterfaceAdapters --> UseCases[Use Cases]
     UseCases --> Domain[Domain Entities]
+    %% 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;
+
+    class Infrastructure component;
+    class InterfaceAdapters component;
+    class UseCases component;
+    class Domain component;
+
 ```
 
 ```text
@@ -125,6 +147,16 @@ graph LR
     Controller --> Model
     Model --> View
     View --> User
+    %% 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;
+
+    class View component;
+    class Controller component;
+    class User component;
+    class Model component;
+
 ```
 
 ```text
@@ -155,6 +187,18 @@ graph TD
     Gateway --> Order[Order Service]
     Gateway --> Pay[Payment Service]
     Gateway --> Notif[Notification Service]
+    %% 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;
+
+    class Order component;
+    class Client component;
+    class Auth component;
+    class Notif component;
+    class Gateway component;
+    class Pay component;
+
 ```
 
 ```text
@@ -186,6 +230,17 @@ graph TD
     PortsIN --> Domain[Core Domain]
     Domain --> PortsOUT[Ports: Output]
     PortsOUT --> Secondary[Secondary Adapters]
+    %% 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;
+
+    class PortsOUT component;
+    class PortsIN component;
+    class Primary component;
+    class Domain component;
+    class Secondary component;
+
 ```
 
 ```text
@@ -216,6 +271,16 @@ graph TD
     Context1[Identity & Access] --> C1Domain[Domain]
     Context1 --> C1App[Application]
     Context1 --> C1Infra[Infrastructure]
+    %% 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;
+
+    class C1Infra component;
+    class C1Domain component;
+    class Context1 component;
+    class C1App component;
+
 ```
 
 ```text
@@ -247,6 +312,16 @@ graph LR
     Pub[Publisher] --> Broker[Message Broker]
     Broker --> Sub1[Subscriber 1]
     Broker --> Sub2[Subscriber 2]
+    %% 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;
+
+    class Sub1 component;
+    class Sub2 component;
+    class Broker component;
+    class Pub component;
+
 ```
 
 ```text
@@ -274,6 +349,16 @@ src/
 graph TD
     Trigger[Event Trigger] --> Func1[Function 1]
     Trigger2[HTTP Request] --> Func2[Function 2]
+    %% 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;
+
+    class Func1 component;
+    class Trigger component;
+    class Func2 component;
+    class Trigger2 component;
+
 ```
 
 ```text
@@ -303,6 +388,16 @@ graph TD
     Project[Monolithic App] --> UI[Public / UI]
     Project --> Logic[Business Logic]
     Project --> Data[Database]
+    %% 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;
+
+    class Logic component;
+    class Data component;
+    class UI component;
+    class Project component;
+
 ```
 
 ```text
@@ -333,6 +428,17 @@ graph LR
     UI --> Query[Query]
     Query --> ReadDB[(Read DB)]
     WriteDB -. sync .-> ReadDB
+    %% 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;
+
+    class WriteDB component;
+    class Query component;
+    class ReadDB component;
+    class Command component;
+    class UI component;
+
 ```
 
 ```text
diff --git a/docs/cursor-memory-structures.md b/docs/cursor-memory-structures.md
index 2f4edda..61fc328 100644
--- a/docs/cursor-memory-structures.md
+++ b/docs/cursor-memory-structures.md
@@ -24,6 +24,17 @@ graph TD
 
     style UserPrompt fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
     style ContextWindow fill:#ff9800,stroke:#f57c00,stroke-width:2px,color:#fff
+    %% 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;
+
+    class AIGeneration component;
+    class ShortTerm component;
+    class Embedding component;
+    class LongTerm component;
+    class Codebase component;
+
 ```
 
 ## 📊 3. Types of Memory in Cursor