From d6bf4d3a091851a8e628795816dd25daedf79b96 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 25 Mar 2026 09:35:13 +0000
Subject: [PATCH] docs: update mermaid diagrams with UI/UX design tokens
 styling

Applies standard design token class definitions (default, component, layout)
using soft pastel colors and clear dark text across valid Mermaid diagrams
(graphs and flowcharts) in all Markdown files, improving visual clarity as per UI/UX rules.

Co-authored-by: beginwebdev2002 <102213457+beginwebdev2002@users.noreply.github.com>
---
 .agents/rules/github-seo.md                   |   9 ++
 .agents/rules/project-architecture.md         |  18 +++
 .agents/rules/rules.md                        |   9 ++
 .agents/rules/system-documentation.md         |  13 +++
 .gemini/memory/github-seo.md                  |   9 ++
 .github/CODE_OF_CONDUCT.md                    |  18 +++
 .github/CONTRIBUTING.md                       |  10 ++
 .github/SECURITY.md                           |  24 ++++
 .jules/rules/architecture.md                  |   8 ++
 .jules/rules/daily-content-generator.md       |   9 ++
 .jules/rules/design.md                        |   7 ++
 .jules/rules/frontend.md                      |  12 ++
 .jules/rules/performance.md                   |  12 ++
 .jules/rules/security.md                      |   5 +
 .jules/rules/system-docs-manager.md           |  13 +++
 .jules/rules/ui-ux-design.md                  |   7 ++
 README.md                                     |  58 ++++++++++
 agents.md                                     |  16 +++
 architectures/model-view-controller/readme.md |  12 ++
 architectures/readme.md                       | 106 ++++++++++++++++++
 docs/cursor-memory-structures.md              |  11 ++
 21 files changed, 386 insertions(+)

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/performance.md b/.jules/rules/performance.md
index 4ad81c3..0b33633 100644
--- a/.jules/rules/performance.md
+++ b/.jules/rules/performance.md
@@ -36,6 +36,18 @@ graph TD
     style A fill:#f9f,stroke:#333,stroke-width:2px
     style B fill:#bbf,stroke:#333,stroke-width:2px
     style C fill:#bfb,stroke:#333,stroke-width:2px
+    %% 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 B1 component;
+    class C1 component;
+    class B3 component;
+    class C3 component;
+    class C2 component;
+    class B2 component;
+
 ```
 
 > [!WARNING]
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