Add comprehensive semantic design token system

Implement complete semantic layer for all design tokens including typography, spacing, motion, colors, borders, shadows, z-index, opacity, and glass effects. Each semantic token maps base design tokens to contextual usage patterns for improved maintainability and developer experience. Features: - Complete semantic typography system with font weights, sizes, line heights, and letter spacing - Comprehensive spacing tokens for components, layouts, and interactions - Full motion system with durations, easing, transitions, and hover transforms - Semantic color system with individual access to all Material Design 3 colors - Border tokens with widths, radius, and styles for all use cases - Shadow system including standard and AI-themed shadows - Z-index layering system for proper stacking context - Opacity tokens for transparency and visibility states - Glass morphism tokens with blur, opacity, and theming support All semantic tokens provide direct access to base token values while offering meaningful contextual aliases for common UI patterns. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-02 10:24:04 +10:00
parent cd3211101c
commit c803831f60
193 changed files with 23363 additions and 0 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,104 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+SSuite is an Angular workspace containing three libraries designed as a modular component system:
+
+- **shared-ui**: UI design system with comprehensive SCSS styling, design tokens, and reusable components
+- **shared-utils**: Common utilities and shared services
+- **ui-essentials**: Essential UI components and functionality
+
+## Development Commands
+
+### Building
+```bash
+# Build all libraries
+ng build
+
+# Build specific library
+ng build shared-ui
+ng build shared-utils  
+ng build ui-essentials
+
+# Watch mode for development
+ng build --watch --configuration development
+```
+
+### Testing
+```bash
+# Run all tests
+ng test
+
+# Run tests for specific library
+ng test shared-ui
+ng test shared-utils
+ng test ui-essentials
+```
+
+### Development Server
+```bash
+# Start development server (if main application exists)
+ng serve
+```
+
+## Architecture
+
+### Library Structure
+Each library follows Angular's standard structure:
+- `src/lib/` - Library source code
+- `src/public-api.ts` - Public exports
+- `ng-package.json` - Library packaging configuration
+- `package.json` - Library metadata
+
+### TypeScript Path Mapping
+Libraries are mapped in `tsconfig.json` paths:
+```json
+"paths": {
+  "shared-ui": ["./dist/shared-ui"],
+  "shared-utils": ["./dist/shared-utils"], 
+  "ui-essentials": ["./dist/ui-essentials"]
+}
+```
+
+### Design System (shared-ui)
+Contains a comprehensive SCSS architecture:
+- **Base tokens**: Colors, typography, spacing, motion, shadows
+- **Semantic tokens**: High-level design tokens built on base tokens
+- **Components**: Base buttons, cards, forms, navigation  
+- **Layouts**: Grid systems, dashboard layouts, responsive templates
+- **Utilities**: Display, layout, spacing utilities
+- **Patterns**: Content, interaction, and layout patterns
+- **Font faces**: Extensive collection of web fonts
+
+#### Style Import Options:
+```scss
+// Complete design system (includes semantic + base tokens + fonts)
+@use 'shared-ui/src/styles' as ui;
+
+// Tokens only (semantic + base tokens)
+@use 'shared-ui/src/styles/tokens' as tokens;
+
+// Semantic tokens only (includes base tokens)
+@use 'shared-ui/src/styles/semantic' as semantic;
+
+// Base tokens only
+@use 'shared-ui/src/styles/base' as base;
+
+// Components and utilities (import separately to avoid circular dependencies)
+@use 'shared-ui/src/styles/commons' as commons;
+```
+
+Entry points:
+- Main: `projects/shared-ui/src/styles/index.scss`
+- Tokens: `projects/shared-ui/src/styles/tokens.scss` 
+- Semantic: `projects/shared-ui/src/styles/semantic/index.scss`
+
+## Development Notes
+
+- All libraries use Angular 19.2+ with strict TypeScript configuration
+- Libraries must be built before being consumed by other projects
+- Use `ng generate` commands within library contexts for scaffolding
+- Libraries are publishable to npm after building to `dist/` directory
+- Testing uses Karma with Jasmine framework
--- a/angular.json
+++ b/angular.json
@@ -3,5 +3,199 @@
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
+    "shared-ui": {
+      "projectType": "library",
+      "root": "projects/shared-ui",
+      "sourceRoot": "projects/shared-ui/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/shared-ui/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/shared-ui/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/shared-ui/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/shared-ui/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    },
+    "shared-utils": {
+      "projectType": "library",
+      "root": "projects/shared-utils",
+      "sourceRoot": "projects/shared-utils/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/shared-utils/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/shared-utils/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/shared-utils/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/shared-utils/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    },
+    "ui-essentials": {
+      "projectType": "library",
+      "root": "projects/ui-essentials",
+      "sourceRoot": "projects/ui-essentials/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/ui-essentials/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ui-essentials/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ui-essentials/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "projects/ui-essentials/tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    },
+    "demo-ui-essentials": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/demo-ui-essentials",
+      "sourceRoot": "projects/demo-ui-essentials/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/demo-ui-essentials",
+            "index": "projects/demo-ui-essentials/src/index.html",
+            "browser": "projects/demo-ui-essentials/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/demo-ui-essentials/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/demo-ui-essentials/public"
+              }
+            ],
+            "styles": [
+              "projects/demo-ui-essentials/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo-ui-essentials:build:production"
+            },
+            "development": {
+              "buildTarget": "demo-ui-essentials:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/demo-ui-essentials/tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/demo-ui-essentials/public"
+              }
+            ],
+            "styles": [
+              "projects/demo-ui-essentials/src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
  }
 }
--- a/kill.sh
+++ b/kill.sh
@@ -0,0 +1 @@
+lsof -t -i tcp:4200 | xargs kill -9
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -17,11 +17,17 @@
    "@angular/platform-browser": "^19.2.0",
    "@angular/platform-browser-dynamic": "^19.2.0",
    "@angular/router": "^19.2.0",
+    "@fortawesome/angular-fontawesome": "^1.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^7.0.0",
+    "@fortawesome/free-regular-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.15",
    "@angular/cli": "^19.2.15",
    "@angular/compiler-cli": "^19.2.0",
    "@types/jasmine": "~5.1.0",
@@ -31,6 +37,7 @@
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^19.2.0",
    "typescript": "~5.7.2"
  }
 }
--- a/projects/demo-ui-essentials/public/favicon.ico
+++ b/projects/demo-ui-essentials/public/favicon.ico
--- a/projects/demo-ui-essentials/src/app/app.component.spec.ts
+++ b/projects/demo-ui-essentials/src/app/app.component.spec.ts
@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'demo-ui-essentials' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('demo-ui-essentials');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-ui-essentials');
+  });
+});
--- a/projects/demo-ui-essentials/src/app/app.component.ts
+++ b/projects/demo-ui-essentials/src/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ButtonComponent } from '../../../ui-essentials/src/public-api';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, ButtonComponent],
+  template: `
+
+  <ui-button></ui-button>
+  `
+})
+export class AppComponent {
+  title = 'demo-ui-essentials';
+}
--- a/projects/demo-ui-essentials/src/app/app.config.ts
+++ b/projects/demo-ui-essentials/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};
--- a/projects/demo-ui-essentials/src/app/app.routes.ts
+++ b/projects/demo-ui-essentials/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
--- a/projects/demo-ui-essentials/src/index.html
+++ b/projects/demo-ui-essentials/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>DemoUiEssentials</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
--- a/projects/demo-ui-essentials/src/main.ts
+++ b/projects/demo-ui-essentials/src/main.ts
@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
--- a/projects/demo-ui-essentials/src/styles.scss
+++ b/projects/demo-ui-essentials/src/styles.scss
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
--- a/projects/demo-ui-essentials/tsconfig.app.json
+++ b/projects/demo-ui-essentials/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/projects/demo-ui-essentials/tsconfig.spec.json
+++ b/projects/demo-ui-essentials/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
--- a/projects/shared-ui/README.md
+++ b/projects/shared-ui/README.md
@@ -0,0 +1,63 @@
+# SharedUi
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build shared-ui
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/shared-ui
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
--- a/projects/shared-ui/ng-package.json
+++ b/projects/shared-ui/ng-package.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/shared-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "src/styles/**/*.scss"
+  ]
+}
--- a/projects/shared-ui/package.json
+++ b/projects/shared-ui/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "shared-ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}
--- a/projects/shared-ui/src/lib/font-awesome/font-awesome.config.ts
+++ b/projects/shared-ui/src/lib/font-awesome/font-awesome.config.ts
@@ -0,0 +1,129 @@
+import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { 
+  faUser, 
+  faHome, 
+  faCog, 
+  faSearch,
+  faPlus,
+  faEdit,
+  faTrash,
+  faSave,
+  faCancel,
+  faCheck,
+  faTimes,
+  faArrowLeft,
+  faArrowRight,
+  faChevronLeft,
+  faChevronRight,
+  faChevronUp,
+  faChevronDown,
+  faBars,
+  faEllipsisV,
+  faEye,
+  faEyeSlash,
+  faDownload,
+  faUpload,
+  faRefresh,
+  faSpinner,
+  faExclamationTriangle,
+  faInfoCircle,
+  faCheckCircle,
+  faTimesCircle,
+  faEnvelope,
+  faWindowMaximize,
+  faUserCircle,
+  faCertificate,
+  faHandPointer,
+  faIdCard,
+  faTags,
+  faCheckSquare,
+  faKeyboard,
+  faThLarge,
+  faList,
+  faDotCircle,
+  faToggleOn,
+  faTable,
+  faCirclePlus
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  faHeart,
+  faBookmark,
+  faComment,
+  faThumbsUp
+} from '@fortawesome/free-regular-svg-icons';
+import {
+  faGithub,
+  faTwitter,
+  faLinkedin,
+  faGoogle
+} from '@fortawesome/free-brands-svg-icons';
+
+/**
+ * Configuration function to add commonly used Font Awesome icons to the library
+ * Call this function in your application's initialization to register icons
+ */
+export function configureFontAwesome(library: FaIconLibrary): void {
+  // Add solid icons
+  library.addIcons(
+    faUser,
+    faHome,
+    faCog,
+    faSearch,
+    faPlus,
+    faEdit,
+    faTrash,
+    faSave,
+    faCancel,
+    faCheck,
+    faTimes,
+    faArrowLeft,
+    faArrowRight,
+    faChevronLeft,
+    faChevronRight,
+    faChevronUp,
+    faChevronDown,
+    faBars,
+    faEllipsisV,
+    faEye,
+    faEyeSlash,
+    faDownload,
+    faUpload,
+    faRefresh,
+    faSpinner,
+    faExclamationTriangle,
+    faInfoCircle,
+    faCheckCircle,
+    faTimesCircle,
+    faEnvelope,
+    faWindowMaximize,
+    faUserCircle,
+    faCertificate,
+    faHandPointer,
+    faIdCard,
+    faTags,
+    faCheckSquare,
+    faKeyboard,
+    faThLarge,
+    faList,
+    faDotCircle,
+    faToggleOn,
+    faTable,
+    faCirclePlus
+  );
+
+  // Add regular icons
+  library.addIcons(
+    faHeart,
+    faBookmark,
+    faComment,
+    faThumbsUp
+  );
+
+  // Add brand icons
+  library.addIcons(
+    faGithub,
+    faTwitter,
+    faLinkedin,
+    faGoogle
+  );
+}
--- a/projects/shared-ui/src/lib/font-awesome/index.ts
+++ b/projects/shared-ui/src/lib/font-awesome/index.ts
@@ -0,0 +1,50 @@
+// Font Awesome exports
+export { FaIconComponent } from '@fortawesome/angular-fontawesome';
+export { configureFontAwesome } from './font-awesome.config';
+
+// Re-export commonly used icon definitions
+export {
+  faUser,
+  faHome,
+  faCog,
+  faSearch,
+  faPlus,
+  faEdit,
+  faTrash,
+  faSave,
+  faCancel,
+  faCheck,
+  faTimes,
+  faArrowLeft,
+  faArrowRight,
+  faChevronLeft,
+  faChevronRight,
+  faChevronUp,
+  faChevronDown,
+  faBars,
+  faEllipsisV,
+  faEye,
+  faEyeSlash,
+  faDownload,
+  faUpload,
+  faRefresh,
+  faSpinner,
+  faExclamationTriangle,
+  faInfoCircle,
+  faCheckCircle,
+  faTimesCircle
+} from '@fortawesome/free-solid-svg-icons';
+
+export {
+  faHeart,
+  faBookmark,
+  faComment,
+  faThumbsUp
+} from '@fortawesome/free-regular-svg-icons';
+
+export {
+  faGithub,
+  faTwitter,
+  faLinkedin,
+  faGoogle
+} from '@fortawesome/free-brands-svg-icons';
--- a/projects/shared-ui/src/lib/shared-ui.service.ts
+++ b/projects/shared-ui/src/lib/shared-ui.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SharedUiService {
+
+  constructor() { }
+}
--- a/projects/shared-ui/src/public-api.ts
+++ b/projects/shared-ui/src/public-api.ts
@@ -0,0 +1,22 @@
+/*
+ * Public API Surface of shared-ui
+ */
+
+export * from './lib/shared-ui.service';
+
+// Styles are available at: shared-ui/src/styles/
+// 
+// Usage examples:
+// 
+// Import complete design system:
+// @use 'shared-ui/src/styles' as ui;
+//
+// Import semantic tokens only:
+// @use 'shared-ui/src/styles/semantic' as semantic;
+//
+// Import base tokens only:  
+// @use 'shared-ui/src/styles/base' as base;
+//
+// Import specific categories:
+// @use 'shared-ui/src/styles/semantic/colors' as colors;
+// @use 'shared-ui/src/styles/commons' as commons;
--- a/projects/shared-ui/src/styles/base/_ai.scss
+++ b/projects/shared-ui/src/styles/base/_ai.scss
@@ -0,0 +1,272 @@
+// AI Enhancement Tokens
+// Generated from base-tokens.json
+
+// AI State Classes
+$base-ai-states-cognitive-thinking: 'ai-thinking';
+$base-ai-states-cognitive-analyzing: 'ai-analyzing';
+$base-ai-states-cognitive-processing: 'ai-processing';
+$base-ai-states-cognitive-deciding: 'ai-deciding';
+$base-ai-states-cognitive-learning: 'ai-learning';
+$base-ai-states-cognitive-validating: 'ai-validating';
+
+$base-ai-states-activity-loading: 'ai-loading';
+$base-ai-states-activity-working: 'ai-working';
+$base-ai-states-activity-busy: 'ai-busy';
+$base-ai-states-activity-idle: 'ai-idle';
+
+$base-ai-states-communication-listening: 'ai-listening';
+$base-ai-states-communication-speaking: 'ai-speaking';
+$base-ai-states-communication-waiting: 'ai-waiting';
+$base-ai-states-communication-responding: 'ai-responding';
+
+$base-ai-states-status-complete: 'ai-complete';
+$base-ai-states-status-success: 'ai-success';
+$base-ai-states-status-error: 'ai-has-error';
+$base-ai-states-status-warning: 'ai-has-warning';
+$base-ai-states-status-paused: 'ai-is-paused';
+$base-ai-states-status-cancelled: 'ai-is-cancelled';
+
+// AI Control Mode Classes
+$base-ai-control-modes-cooperative: 'mode-cooperative';
+$base-ai-control-modes-ai-priority: 'mode-ai-priority';
+$base-ai-control-modes-ai-exclusive: 'mode-ai-exclusive';
+$base-ai-control-modes-human-override: 'mode-human-override';
+
+$base-ai-control-locks-soft: 'ai-lock-soft';
+$base-ai-control-locks-hard: 'ai-lock-hard';
+$base-ai-control-locks-visual-only: 'ai-lock-visual-only';
+
+// AI Enhancement Colors
+$base-ai-glow-subtle-color: #8b5cf6;
+$base-ai-glow-subtle-blur: 8px;
+$base-ai-glow-subtle-spread: 2px;
+$base-ai-glow-subtle-opacity: 0.2;
+
+$base-ai-glow-standard-color: #8b5cf6;
+$base-ai-glow-standard-blur: 16px;
+$base-ai-glow-standard-spread: 4px;
+$base-ai-glow-standard-opacity: 0.3;
+
+$base-ai-glow-strong-color: #8b5cf6;
+$base-ai-glow-strong-blur: 24px;
+$base-ai-glow-strong-spread: 6px;
+$base-ai-glow-strong-opacity: 0.4;
+
+// AI Gradient Colors
+$base-ai-gradient-colors: (#8b5cf6, #06b6d4, #f59e0b);
+$base-ai-gradient-blur: 20px;
+$base-ai-gradient-spread: 4px;
+$base-ai-gradient-opacity: 0.35;
+
+// AI Status Colors
+$base-ai-status-thinking-color: #8b5cf6;
+$base-ai-status-thinking-background: var(--color-gray-100);
+$base-ai-status-thinking-indicator: #8b5cf6;
+$base-ai-status-thinking-animation: pulse 2s ease-in-out infinite;
+
+$base-ai-status-ready-color: var(--color-success);
+$base-ai-status-ready-background: #f0fdf4;
+$base-ai-status-ready-indicator: var(--color-success);
+$base-ai-status-ready-animation: none;
+
+$base-ai-status-processing-color: #06b6d4;
+$base-ai-status-processing-background: #f0f9ff;
+$base-ai-status-processing-indicator: #06b6d4;
+$base-ai-status-processing-animation: spin 1s linear infinite;
+
+$base-ai-status-error-color: var(--color-danger);
+$base-ai-status-error-background: #fef2f2;
+$base-ai-status-error-indicator: var(--color-danger);
+$base-ai-status-error-animation: none;
+
+$base-ai-status-offline-color: var(--color-gray-500);
+$base-ai-status-offline-background: var(--color-gray-50);
+$base-ai-status-offline-indicator: var(--color-gray-500);
+$base-ai-status-offline-animation: none;
+
+// AI Confidence Levels
+$base-ai-confidence-low-color: #f59e0b;
+$base-ai-confidence-low-background: #fef3c7;
+$base-ai-confidence-low-border: #f59e0b;
+$base-ai-confidence-low-glow: 0 0 8px rgba(245, 158, 11, 0.2);
+
+$base-ai-confidence-medium-color: #06b6d4;
+$base-ai-confidence-medium-background: #cffafe;
+$base-ai-confidence-medium-border: #06b6d4;
+$base-ai-confidence-medium-glow: 0 0 12px rgba(6, 182, 212, 0.3);
+
+$base-ai-confidence-high-color: var(--color-success);
+$base-ai-confidence-high-background: #d1fae5;
+$base-ai-confidence-high-border: var(--color-success);
+$base-ai-confidence-high-glow: 0 0 16px rgba(16, 185, 129, 0.4);
+
+// AI Pulse Animations
+$base-ai-pulse-thinking-duration: 2s;
+$base-ai-pulse-thinking-easing: ease-in-out;
+$base-ai-pulse-thinking-scale-from: 1;
+$base-ai-pulse-thinking-scale-to: 1.02;
+$base-ai-pulse-thinking-opacity-from: 0.8;
+$base-ai-pulse-thinking-opacity-to: 1;
+$base-ai-pulse-thinking-iteration: infinite;
+
+$base-ai-pulse-processing-duration: 1.5s;
+$base-ai-pulse-processing-easing: ease-in-out;
+$base-ai-pulse-processing-scale-from: 1;
+$base-ai-pulse-processing-scale-to: 1.05;
+$base-ai-pulse-processing-opacity-from: 0.7;
+$base-ai-pulse-processing-opacity-to: 1;
+$base-ai-pulse-processing-iteration: infinite;
+
+$base-ai-pulse-heartbeat-duration: 1s;
+$base-ai-pulse-heartbeat-easing: ease-in-out;
+$base-ai-pulse-heartbeat-scale-from: 1;
+$base-ai-pulse-heartbeat-scale-to: 1.1;
+$base-ai-pulse-heartbeat-opacity-from: 0.9;
+$base-ai-pulse-heartbeat-opacity-to: 1;
+$base-ai-pulse-heartbeat-iteration: infinite;
+
+// AI Feedback Colors
+$base-ai-feedback-success-color: var(--color-success);
+$base-ai-feedback-success-background: #d1fae5;
+$base-ai-feedback-success-border: var(--color-success);
+$base-ai-feedback-success-duration: 300ms;
+$base-ai-feedback-success-easing: ease-out;
+
+$base-ai-feedback-warning-color: #f59e0b;
+$base-ai-feedback-warning-background: #fef3c7;
+$base-ai-feedback-warning-border: #f59e0b;
+$base-ai-feedback-warning-duration: 300ms;
+$base-ai-feedback-warning-easing: ease-out;
+
+$base-ai-feedback-error-color: var(--color-danger);
+$base-ai-feedback-error-background: #fee2e2;
+$base-ai-feedback-error-border: var(--color-danger);
+$base-ai-feedback-error-duration: 300ms;
+$base-ai-feedback-error-easing: ease-out;
+
+$base-ai-feedback-info-color: var(--color-primary);
+$base-ai-feedback-info-background: #dbeafe;
+$base-ai-feedback-info-border: var(--color-primary);
+$base-ai-feedback-info-duration: 300ms;
+$base-ai-feedback-info-easing: ease-out;
+
+// AI Gradients
+$base-ai-gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+$base-ai-gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+$base-ai-gradient-tertiary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+$base-ai-gradient-thinking: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #8b5cf6 100%);
+$base-ai-gradient-processing: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #06b6d4 100%);
+$base-ai-gradient-success: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
+$base-ai-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+$base-ai-gradient-error: linear-gradient(135deg, var(--color-danger) 0%, #dc2626 100%);
+
+// AI Border Animations
+$base-ai-border-flowing-width: 2px;
+$base-ai-border-flowing-style: solid;
+$base-ai-border-flowing-colors: (#8b5cf6, #06b6d4, #f59e0b);
+$base-ai-border-flowing-animation-duration: 3s;
+$base-ai-border-flowing-animation-timing: linear;
+
+$base-ai-border-static-width: 1px;
+$base-ai-border-static-style: solid;
+$base-ai-border-static-color: #8b5cf6;
+
+$base-ai-border-processing-width: 2px;
+$base-ai-border-processing-style: dashed;
+$base-ai-border-processing-colors: (#06b6d4, #0ea5e9);
+$base-ai-border-processing-animation-duration: 1.5s;
+$base-ai-border-processing-animation-timing: ease-in-out;
+
+// AI Animation Properties
+$base-ai-animation-glow-duration: 2s;
+$base-ai-animation-glow-easing: ease-in-out;
+$base-ai-animation-glow-iterations: infinite;
+
+$base-ai-animation-pulse-duration: 1.5s;
+$base-ai-animation-pulse-easing: ease-in-out;
+$base-ai-animation-pulse-iterations: infinite;
+
+// AI Timing Values
+$base-ai-timing-selection: 150ms;
+$base-ai-timing-press: 100ms;
+$base-ai-timing-interaction: 200ms;
+
+// AI State Maps
+$base-ai-states: (
+  thinking: $base-ai-states-cognitive-thinking,
+  analyzing: $base-ai-states-cognitive-analyzing,
+  processing: $base-ai-states-cognitive-processing,
+  deciding: $base-ai-states-cognitive-deciding,
+  learning: $base-ai-states-cognitive-learning,
+  validating: $base-ai-states-cognitive-validating,
+  loading: $base-ai-states-activity-loading,
+  working: $base-ai-states-activity-working,
+  busy: $base-ai-states-activity-busy,
+  idle: $base-ai-states-activity-idle,
+  listening: $base-ai-states-communication-listening,
+  speaking: $base-ai-states-communication-speaking,
+  waiting: $base-ai-states-communication-waiting,
+  responding: $base-ai-states-communication-responding,
+  complete: $base-ai-states-status-complete,
+  success: $base-ai-states-status-success,
+  error: $base-ai-states-status-error,
+  warning: $base-ai-states-status-warning,
+  paused: $base-ai-states-status-paused,
+  cancelled: $base-ai-states-status-cancelled,
+);
+
+// AI Glow Levels Map
+$base-ai-glow-levels: (
+  subtle: (
+    color: $base-ai-glow-subtle-color,
+    blur: $base-ai-glow-subtle-blur,
+    spread: $base-ai-glow-subtle-spread,
+    opacity: $base-ai-glow-subtle-opacity,
+  ),
+  standard: (
+    color: $base-ai-glow-standard-color,
+    blur: $base-ai-glow-standard-blur,
+    spread: $base-ai-glow-standard-spread,
+    opacity: $base-ai-glow-standard-opacity,
+  ),
+  strong: (
+    color: $base-ai-glow-strong-color,
+    blur: $base-ai-glow-strong-blur,
+    spread: $base-ai-glow-strong-spread,
+    opacity: $base-ai-glow-strong-opacity,
+  ),
+);
+
+// AI Status Map
+$base-ai-status-map: (
+  thinking: (
+    color: $base-ai-status-thinking-color,
+    background: $base-ai-status-thinking-background,
+    indicator: $base-ai-status-thinking-indicator,
+    animation: $base-ai-status-thinking-animation,
+  ),
+  ready: (
+    color: $base-ai-status-ready-color,
+    background: $base-ai-status-ready-background,
+    indicator: $base-ai-status-ready-indicator,
+    animation: $base-ai-status-ready-animation,
+  ),
+  processing: (
+    color: $base-ai-status-processing-color,
+    background: $base-ai-status-processing-background,
+    indicator: $base-ai-status-processing-indicator,
+    animation: $base-ai-status-processing-animation,
+  ),
+  error: (
+    color: $base-ai-status-error-color,
+    background: $base-ai-status-error-background,
+    indicator: $base-ai-status-error-indicator,
+    animation: $base-ai-status-error-animation,
+  ),
+  offline: (
+    color: $base-ai-status-offline-color,
+    background: $base-ai-status-offline-background,
+    indicator: $base-ai-status-offline-indicator,
+    animation: $base-ai-status-offline-animation,
+  ),
+);
--- a/projects/shared-ui/src/styles/base/_borders.scss
+++ b/projects/shared-ui/src/styles/base/_borders.scss
@@ -0,0 +1,76 @@
+// Border Tokens
+// Generated from base-tokens.json
+
+// Border Widths
+$base-border-width-0: 0px;
+$base-border-width-1: 1px;
+$base-border-width-2: 2px;
+$base-border-width-3: 3px;
+$base-border-width-4: 4px;
+$base-border-width-5: 5px;
+$base-border-width-6: 6px;
+$base-border-width-7: 7px;
+$base-border-width-8: 8px;
+$base-border-width-10: 10px;
+$base-border-width-hairline: 0.5px;
+
+// Border Radius
+$base-border-radius-none: 0px;
+$base-border-radius-xs: 0.125rem;
+$base-border-radius-sm: 0.25rem;
+$base-border-radius-md: 0.375rem;
+$base-border-radius-lg: 0.5rem;
+$base-border-radius-xl: 0.75rem;
+$base-border-radius-2xl: 1rem;
+$base-border-radius-3xl: 1.5rem;
+$base-border-radius-4xl: 2rem;
+$base-border-radius-5xl: 2.5rem;
+$base-border-radius-full: 9999px;
+$base-border-radius-pill: 50rem;
+
+// Border Styles
+$base-border-style-none: none;
+$base-border-style-solid: solid;
+$base-border-style-dashed: dashed;
+$base-border-style-dotted: dotted;
+$base-border-style-double: double;
+
+// Border Width Map
+$base-border-widths: (
+  0: $base-border-width-0,
+  1: $base-border-width-1,
+  2: $base-border-width-2,
+  3: $base-border-width-3,
+  4: $base-border-width-4,
+  5: $base-border-width-5,
+  6: $base-border-width-6,
+  7: $base-border-width-7,
+  8: $base-border-width-8,
+  10: $base-border-width-10,
+  hairline: $base-border-width-hairline,
+);
+
+// Border Radius Map
+$base-border-radiuses: (
+  none: $base-border-radius-none,
+  xs: $base-border-radius-xs,
+  sm: $base-border-radius-sm,
+  md: $base-border-radius-md,
+  lg: $base-border-radius-lg,
+  xl: $base-border-radius-xl,
+  2xl: $base-border-radius-2xl,
+  3xl: $base-border-radius-3xl,
+  4xl: $base-border-radius-4xl,
+  5xl: $base-border-radius-5xl,
+  full: $base-border-radius-full,
+  pill: $base-border-radius-pill,
+);
+
+// Border Style Map
+$base-border-styles: (
+  none: $base-border-style-none,
+  solid: $base-border-style-solid,
+  dashed: $base-border-style-dashed,
+  dotted: $base-border-style-dotted,
+  double: $base-border-style-double,
+);
--- a/projects/shared-ui/src/styles/base/_breakpoints.scss
+++ b/projects/shared-ui/src/styles/base/_breakpoints.scss
@@ -0,0 +1,20 @@
+// Breakpoint Tokens
+// Generated from base-tokens.json
+
+// Breakpoint Values
+$base-breakpoint-xs: 475px;
+$base-breakpoint-sm: 640px;
+$base-breakpoint-md: 768px;
+$base-breakpoint-lg: 1024px;
+$base-breakpoint-xl: 1280px;
+$base-breakpoint-2xl: 1536px;
+
+// Breakpoint Map
+$base-breakpoints: (
+  xs: $base-breakpoint-xs,
+  sm: $base-breakpoint-sm,
+  md: $base-breakpoint-md,
+  lg: $base-breakpoint-lg,
+  xl: $base-breakpoint-xl,
+  2xl: $base-breakpoint-2xl,
+);
--- a/projects/shared-ui/src/styles/base/_colors.scss
+++ b/projects/shared-ui/src/styles/base/_colors.scss
@@ -0,0 +1,72 @@
+// ==========================================================================
+// COLOR TOKENS
+// ==========================================================================
+// Tonal color system using HCL for tones
+// Material Design 3 inspired color tokens with $base prefix
+// ==========================================================================
+
+// KEY COLORS (Material M3 HCL Seed Colors)
+$base-color-primary-key: hsl(258, 100%, 47%) !default;     // Dynamic Color - Primary
+$base-color-secondary-key: hsl(258, 29%, 16%) !default;    // Dynamic Color - Secondary
+$base-color-tertiary-key: hsl(295, 26%, 25%) !default;     // Dynamic Color - Tertiary
+$base-color-quaternary-key: hsl(76, 29%, 16%) !default;    // Dynamic Color - Quaternary
+$base-color-neutral-key: hsl(279, 14%, 11%) !default;      // Dynamic Color - Neutral
+$base-color-error-key: hsl(25, 84%, 44%) !default;         // Dynamic Color - Error
+$base-color-neutral-variant-key: hsl(287, 12%, 15%) !default; // Dynamic Color - Neutral Variant
+
+// PRIMARY COLORS (HCL Tonal Palette)
+$base-color-primary: hsl(258, 100%, 47%) !default;             // Tone 40
+$base-color-on-primary: hsl(0, 0%, 100%) !default;             // Tone 100
+$base-color-primary-container: hsl(263, 100%, 88%) !default;   // Tone 90
+$base-color-on-primary-container: hsl(260, 100%, 13%) !default; // Tone 10
+$base-color-inverse-primary: hsl(263, 100%, 78%) !default;     // Tone 80
+
+// SECONDARY COLORS (HCL Tonal Palette)
+$base-color-secondary: hsl(258, 29%, 40%) !default;            // Tone 40
+$base-color-on-secondary: hsl(0, 0%, 100%) !default;           // Tone 100
+$base-color-secondary-container: hsl(262, 25%, 84%) !default;  // Tone 90
+$base-color-on-secondary-container: hsl(256, 29%, 11%) !default; // Tone 10
+
+// TERTIARY COLORS (HCL Tonal Palette)
+$base-color-tertiary: hsl(295, 26%, 40%) !default;             // Tone 40
+$base-color-on-tertiary: hsl(0, 0%, 100%) !default;            // Tone 100
+$base-color-tertiary-container: hsl(307, 24%, 84%) !default;   // Tone 90
+$base-color-on-tertiary-container: hsl(290, 26%, 11%) !default; // Tone 10
+
+// NEUTRAL COLORS (HCL Tonal Palette)
+$base-color-neutral: hsl(279, 14%, 22%) !default;              // Tone 25
+$base-color-neutral-variant: hsl(287, 12%, 25%) !default;      // Tone 30
+
+// SURFACE COLORS (Light Theme - HCL Tonal System)
+$base-color-surface: hsl(286, 20%, 99%) !default;              // Tone 99
+$base-color-surface-bright: hsl(286, 20%, 99%) !default;       // Tone 99
+$base-color-surface-dim: hsl(285, 9%, 87%) !default;           // Tone 87
+$base-color-on-surface: hsl(279, 14%, 11%) !default;           // Tone 10
+$base-color-surface-lowest: hsl(0, 0%, 100%) !default;         // Tone 100
+$base-color-surface-low: hsl(289, 14%, 96%) !default;          // Tone 96
+$base-color-surface-container: hsl(287, 8%, 94%) !default;     // Tone 94
+$base-color-surface-high: hsl(286, 6%, 92%) !default;          // Tone 92
+$base-color-surface-highest: hsl(284, 7%, 90%) !default;       // Tone 90
+$base-color-surface-variant: hsl(289, 14%, 90%) !default;      // Tone 90
+$base-color-on-surface-variant: hsl(287, 12%, 47%) !default;   // Tone 50
+$base-color-inverse-surface: hsl(279, 14%, 20%) !default;      // Tone 20
+$base-color-inverse-on-surface: hsl(285, 15%, 95%) !default;   // Tone 95
+
+// BACKGROUND COLORS (Light Theme)
+$base-color-background: hsl(286, 20%, 99%) !default;           // Tone 99
+$base-color-on-background: hsl(279, 14%, 11%) !default;        // Tone 10
+
+// ERROR COLORS (HCL Tonal Palette)
+$base-color-error: hsl(25, 84%, 44%) !default;                 // Tone 40
+$base-color-on-error: hsl(0, 0%, 100%) !default;               // Tone 100
+$base-color-error-container: hsl(25, 100%, 92%) !default;      // Tone 90
+$base-color-on-error-container: hsl(25, 100%, 11%) !default;   // Tone 10
+
+// OUTLINE COLORS (HCL Tonal System)
+$base-color-outline: hsl(287, 12%, 59%) !default;              // Tone 50
+$base-color-outline-variant: hsl(289, 14%, 80%) !default;      // Tone 80
+
+// UTILITY COLORS (Material M3 Standards)
+$base-color-shadow: hsl(0, 0%, 0%) !default;                   // Pure black shadow
+$base-color-surface-tint: hsl(258, 100%, 47%) !default;        // Primary color for tint
+$base-color-scrim: hsl(0, 0%, 0%) !default;                    // Pure black scrim
--- a/projects/shared-ui/src/styles/base/_css-variables.scss
+++ b/projects/shared-ui/src/styles/base/_css-variables.scss
@@ -0,0 +1,220 @@
+// ==========================================================================
+// CSS CUSTOM PROPERTIES MAPPING
+// ==========================================================================
+// Maps SCSS design tokens to CSS custom properties for runtime theming
+// These variables can be dynamically updated via JavaScript
+// ==========================================================================
+@use 'colors' as colors;
+@use 'glass' as glass;
+
+:root {
+  // ==========================================================================
+  // PRIMARY COLORS - Material Design 3 Tonal Palette
+  // ==========================================================================
+  --color-primary-key: #{colors.$base-color-primary-key};
+  --color-primary: #{colors.$base-color-primary};
+  --color-on-primary: #{colors.$base-color-on-primary};
+  --color-primary-container: #{colors.$base-color-primary-container};
+  --color-on-primary-container: #{colors.$base-color-on-primary-container};
+  --color-inverse-primary: #{colors.$base-color-inverse-primary};
+
+  // ==========================================================================
+  // SECONDARY COLORS - Material Design 3 Tonal Palette
+  // ==========================================================================
+  --color-secondary-key: #{colors.$base-color-secondary-key};
+  --color-secondary: #{colors.$base-color-secondary};
+  --color-on-secondary: #{colors.$base-color-on-secondary};
+  --color-secondary-container: #{colors.$base-color-secondary-container};
+  --color-on-secondary-container: #{colors.$base-color-on-secondary-container};
+
+  // ==========================================================================
+  // TERTIARY COLORS - Material Design 3 Tonal Palette
+  // ==========================================================================
+  --color-tertiary-key: #{colors.$base-color-tertiary-key};
+  --color-tertiary: #{colors.$base-color-tertiary};
+  --color-on-tertiary: #{colors.$base-color-on-tertiary};
+  --color-tertiary-container: #{colors.$base-color-tertiary-container};
+  --color-on-tertiary-container: #{colors.$base-color-on-tertiary-container};
+
+  // ==========================================================================
+  // QUATERNARY COLORS - Extended Material Design 3
+  // ==========================================================================
+  --color-quaternary-key: #{colors.$base-color-quaternary-key};
+
+  // ==========================================================================
+  // ERROR COLORS - Material Design 3 Error System
+  // ==========================================================================
+  --color-error-key: #{colors.$base-color-error-key};
+  --color-error: #{colors.$base-color-error};
+  --color-on-error: #{colors.$base-color-on-error};
+  --color-error-container: #{colors.$base-color-error-container};
+  --color-on-error-container: #{colors.$base-color-on-error-container};
+
+  // ==========================================================================
+  // NEUTRAL COLORS - Material Design 3 Neutral System
+  // ==========================================================================
+  --color-neutral-key: #{colors.$base-color-neutral-key};
+  --color-neutral: #{colors.$base-color-neutral};
+  --color-neutral-variant-key: #{colors.$base-color-neutral-variant-key};
+  --color-neutral-variant: #{colors.$base-color-neutral-variant};
+
+  // ==========================================================================
+  // SURFACE COLORS - Material Design 3 Surface System
+  // ==========================================================================
+  --color-surface: #{colors.$base-color-surface};
+  --color-surface-bright: #{colors.$base-color-surface-bright};
+  --color-surface-dim: #{colors.$base-color-surface-dim};
+  --color-on-surface: #{colors.$base-color-on-surface};
+  --color-surface-lowest: #{colors.$base-color-surface-lowest};
+  --color-surface-low: #{colors.$base-color-surface-low};
+  --color-surface-container: #{colors.$base-color-surface-container};
+  --color-surface-high: #{colors.$base-color-surface-high};
+  --color-surface-highest: #{colors.$base-color-surface-highest};
+  --color-surface-variant: #{colors.$base-color-surface-variant};
+  --color-on-surface-variant: #{colors.$base-color-on-surface-variant};
+  --color-inverse-surface: #{colors.$base-color-inverse-surface};
+  --color-inverse-on-surface: #{colors.$base-color-inverse-on-surface};
+
+  // ==========================================================================
+  // BACKGROUND COLORS - Material Design 3 Background System
+  // ==========================================================================
+  --color-background: #{colors.$base-color-background};
+  --color-on-background: #{colors.$base-color-on-background};
+
+  // ==========================================================================
+  // OUTLINE COLORS - Material Design 3 Outline System
+  // ==========================================================================
+  --color-outline: #{colors.$base-color-outline};
+  --color-outline-variant: #{colors.$base-color-outline-variant};
+
+  // ==========================================================================
+  // UTILITY COLORS - Material Design 3 Utility Colors
+  // ==========================================================================
+  --color-shadow: #{colors.$base-color-shadow};
+  --color-surface-tint: #{colors.$base-color-surface-tint};
+  --color-scrim: #{colors.$base-color-scrim};
+
+  // ==========================================================================
+  // GLASS EFFECT VARIABLES - Default to Light Mode
+  // ==========================================================================
+  --glass-blur-xs: #{glass.$base-glass-blur-xs};
+  --glass-blur-sm: #{glass.$base-glass-blur-sm};
+  --glass-blur-md: #{glass.$base-glass-blur-md};
+  --glass-blur-lg: #{glass.$base-glass-blur-lg};
+  --glass-blur-xl: #{glass.$base-glass-blur-xl};
+  --glass-blur-2xl: #{glass.$base-glass-blur-2xl};
+  --glass-blur-3xl: #{glass.$base-glass-blur-3xl};
+
+  --glass-opacity-translucent: #{glass.$base-glass-opacity-translucent-light};
+  --glass-opacity-light: #{glass.$base-glass-opacity-light-light};
+  --glass-opacity-medium: #{glass.$base-glass-opacity-medium-light};
+  --glass-opacity-heavy: #{glass.$base-glass-opacity-heavy-light};
+  --glass-opacity-frosted: #{glass.$base-glass-opacity-frosted-light};
+
+  --glass-background-base: #{glass.$base-glass-bg-light};
+  --glass-border-color: #{glass.$base-glass-border-light};
+  --glass-shadow-color: #{glass.$base-glass-shadow-light};
+
+  --glass-duration-fast: #{glass.$base-glass-duration-fast};
+  --glass-duration-normal: #{glass.$base-glass-duration-normal};
+  --glass-duration-slow: #{glass.$base-glass-duration-slow};
+}
+
+// ==========================================================================
+// CSS VARIABLE FALLBACK SYSTEM
+// ==========================================================================
+// Fallback variables that use SCSS tokens when CSS variables are not supported
+// This ensures compatibility with older browsers
+
+// Primary system fallbacks
+$css-color-primary: var(--color-primary, #{colors.$base-color-primary}) !default;
+$css-color-on-primary: var(--color-on-primary, #{colors.$base-color-on-primary}) !default;
+$css-color-primary-container: var(--color-primary-container, #{colors.$base-color-primary-container}) !default;
+$css-color-on-primary-container: var(--color-on-primary-container, #{colors.$base-color-on-primary-container}) !default;
+$css-color-inverse-primary: var(--color-inverse-primary, #{colors.$base-color-inverse-primary}) !default;
+
+// Secondary system fallbacks
+$css-color-secondary: var(--color-secondary, #{colors.$base-color-secondary}) !default;
+$css-color-on-secondary: var(--color-on-secondary, #{colors.$base-color-on-secondary}) !default;
+$css-color-secondary-container: var(--color-secondary-container, #{colors.$base-color-secondary-container}) !default;
+$css-color-on-secondary-container: var(--color-on-secondary-container, #{colors.$base-color-on-secondary-container}) !default;
+
+// Tertiary system fallbacks
+$css-color-tertiary: var(--color-tertiary, #{colors.$base-color-tertiary}) !default;
+$css-color-on-tertiary: var(--color-on-tertiary, #{colors.$base-color-on-tertiary}) !default;
+$css-color-tertiary-container: var(--color-tertiary-container, #{colors.$base-color-tertiary-container}) !default;
+$css-color-on-tertiary-container: var(--color-on-tertiary-container, #{colors.$base-color-on-tertiary-container}) !default;
+
+// Error system fallbacks
+$css-color-error: var(--color-error, #{colors.$base-color-error}) !default;
+$css-color-on-error: var(--color-on-error, #{colors.$base-color-on-error}) !default;
+$css-color-error-container: var(--color-error-container, #{colors.$base-color-error-container}) !default;
+$css-color-on-error-container: var(--color-on-error-container, #{colors.$base-color-on-error-container}) !default;
+
+// Surface system fallbacks
+$css-color-surface: var(--color-surface, #{colors.$base-color-surface}) !default;
+$css-color-surface-bright: var(--color-surface-bright, #{colors.$base-color-surface-bright}) !default;
+$css-color-surface-dim: var(--color-surface-dim, #{colors.$base-color-surface-dim}) !default;
+$css-color-on-surface: var(--color-on-surface, #{colors.$base-color-on-surface}) !default;
+$css-color-surface-lowest: var(--color-surface-lowest, #{colors.$base-color-surface-lowest}) !default;
+$css-color-surface-low: var(--color-surface-low, #{colors.$base-color-surface-low}) !default;
+$css-color-surface-container: var(--color-surface-container, #{colors.$base-color-surface-container}) !default;
+$css-color-surface-high: var(--color-surface-high, #{colors.$base-color-surface-high}) !default;
+$css-color-surface-highest: var(--color-surface-highest, #{colors.$base-color-surface-highest}) !default;
+$css-color-surface-variant: var(--color-surface-variant, #{colors.$base-color-surface-variant}) !default;
+$css-color-on-surface-variant: var(--color-on-surface-variant, #{colors.$base-color-on-surface-variant}) !default;
+$css-color-inverse-surface: var(--color-inverse-surface, #{colors.$base-color-inverse-surface}) !default;
+$css-color-inverse-on-surface: var(--color-inverse-on-surface, #{colors.$base-color-inverse-on-surface}) !default;
+
+// Background system fallbacks
+$css-color-background: var(--color-background, #{colors.$base-color-background}) !default;
+$css-color-on-background: var(--color-on-background, #{colors.$base-color-on-background}) !default;
+
+// Outline system fallbacks
+$css-color-outline: var(--color-outline, #{colors.$base-color-outline}) !default;
+$css-color-outline-variant: var(--color-outline-variant, #{colors.$base-color-outline-variant}) !default;
+
+// Utility fallbacks
+$css-color-shadow: var(--color-shadow, #{colors.$base-color-shadow}) !default;
+$css-color-surface-tint: var(--color-surface-tint, #{colors.$base-color-surface-tint}) !default;
+$css-color-scrim: var(--color-scrim, #{colors.$base-color-scrim}) !default;
+
+// Glass effect fallbacks
+$css-glass-blur-xs: var(--glass-blur-xs, #{glass.$base-glass-blur-xs}) !default;
+$css-glass-blur-sm: var(--glass-blur-sm, #{glass.$base-glass-blur-sm}) !default;
+$css-glass-blur-md: var(--glass-blur-md, #{glass.$base-glass-blur-md}) !default;
+$css-glass-blur-lg: var(--glass-blur-lg, #{glass.$base-glass-blur-lg}) !default;
+$css-glass-blur-xl: var(--glass-blur-xl, #{glass.$base-glass-blur-xl}) !default;
+$css-glass-blur-2xl: var(--glass-blur-2xl, #{glass.$base-glass-blur-2xl}) !default;
+$css-glass-blur-3xl: var(--glass-blur-3xl, #{glass.$base-glass-blur-3xl}) !default;
+
+$css-glass-opacity-translucent: var(--glass-opacity-translucent, #{glass.$base-glass-opacity-translucent-light}) !default;
+$css-glass-opacity-light: var(--glass-opacity-light, #{glass.$base-glass-opacity-light-light}) !default;
+$css-glass-opacity-medium: var(--glass-opacity-medium, #{glass.$base-glass-opacity-medium-light}) !default;
+$css-glass-opacity-heavy: var(--glass-opacity-heavy, #{glass.$base-glass-opacity-heavy-light}) !default;
+$css-glass-opacity-frosted: var(--glass-opacity-frosted, #{glass.$base-glass-opacity-frosted-light}) !default;
+
+$css-glass-background-base: var(--glass-background-base, #{glass.$base-glass-bg-light}) !default;
+$css-glass-border-color: var(--glass-border-color, #{glass.$base-glass-border-light}) !default;
+$css-glass-shadow-color: var(--glass-shadow-color, #{glass.$base-glass-shadow-light}) !default;
+
+// ==========================================================================
+// RUNTIME THEMING MIXIN
+// ==========================================================================
+// Mixin for applying CSS custom properties to components
+// Use this to make components theme-aware
+
+@mixin theme-aware-colors($properties: ()) {
+  @each $property, $css-variable in $properties {
+    #{$property}: var(--color-#{$css-variable});
+  }
+}
+
+// Example usage:
+// .my-component {
+//   @include theme-aware-colors((
+//     'color': 'on-surface',
+//     'background-color': 'surface',
+//     'border-color': 'outline'
+//   ));
+// }
--- a/projects/shared-ui/src/styles/base/_glass.scss
+++ b/projects/shared-ui/src/styles/base/_glass.scss
@@ -0,0 +1,85 @@
+// ==========================================================================
+// GLASS EFFECT TOKENS
+// ==========================================================================
+// Base tokens for glass morphism effects including blur and opacity values
+// Supports both light and dark mode variants
+// ==========================================================================
+
+// BLUR INTENSITIES
+// Progressive blur values for different glass effect strengths
+$base-glass-blur-none: 0 !default;
+$base-glass-blur-xs: 2px !default;
+$base-glass-blur-sm: 4px !default;
+$base-glass-blur-md: 8px !default;
+$base-glass-blur-lg: 16px !default;
+$base-glass-blur-xl: 24px !default;
+$base-glass-blur-2xl: 32px !default;
+$base-glass-blur-3xl: 40px !default;
+
+// GLASS OPACITY VARIANTS - LIGHT MODE
+// 5 levels from nearly transparent to nearly opaque
+$base-glass-opacity-translucent-light: 0.1 !default;   // Nearly transparent
+$base-glass-opacity-light-light: 0.3 !default;         // Light glass
+$base-glass-opacity-medium-light: 0.5 !default;        // Medium glass
+$base-glass-opacity-heavy-light: 0.7 !default;         // Heavy glass
+$base-glass-opacity-frosted-light: 0.85 !default;      // Nearly opaque
+
+// GLASS OPACITY VARIANTS - DARK MODE
+// Adjusted for better visibility in dark environments
+$base-glass-opacity-translucent-dark: 0.05 !default;   // Nearly transparent
+$base-glass-opacity-light-dark: 0.2 !default;          // Light glass
+$base-glass-opacity-medium-dark: 0.4 !default;         // Medium glass
+$base-glass-opacity-heavy-dark: 0.6 !default;          // Heavy glass
+$base-glass-opacity-frosted-dark: 0.8 !default;        // Nearly opaque
+
+// GLASS BACKGROUND COLORS
+// Base colors for glass effects (RGB values for rgba() usage)
+$base-glass-bg-light: 255, 255, 255 !default;          // White for light mode
+$base-glass-bg-dark: 0, 0, 0 !default;                 // Black for dark mode
+
+// GLASS BORDER COLORS
+$base-glass-border-light: rgba(255, 255, 255, 0.2) !default;
+$base-glass-border-dark: rgba(255, 255, 255, 0.1) !default;
+
+// GLASS SHADOW COLORS
+$base-glass-shadow-light: rgba(0, 0, 0, 0.1) !default;
+$base-glass-shadow-dark: rgba(0, 0, 0, 0.5) !default;
+
+// GLASS ANIMATION DURATIONS
+$base-glass-duration-fast: 200ms !default;
+$base-glass-duration-normal: 300ms !default;
+$base-glass-duration-slow: 500ms !default;
+
+// GLASS ANIMATION EASINGS
+$base-glass-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$base-glass-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55) !default;
+
+// BLUR MAP FOR EASY ACCESS
+$base-glass-blurs: (
+  none: $base-glass-blur-none,
+  xs: $base-glass-blur-xs,
+  sm: $base-glass-blur-sm,
+  md: $base-glass-blur-md,
+  lg: $base-glass-blur-lg,
+  xl: $base-glass-blur-xl,
+  2xl: $base-glass-blur-2xl,
+  3xl: $base-glass-blur-3xl
+) !default;
+
+// OPACITY MAP FOR EASY ACCESS - LIGHT MODE
+$base-glass-opacities-light: (
+  translucent: $base-glass-opacity-translucent-light,
+  light: $base-glass-opacity-light-light,
+  medium: $base-glass-opacity-medium-light,
+  heavy: $base-glass-opacity-heavy-light,
+  frosted: $base-glass-opacity-frosted-light
+) !default;
+
+// OPACITY MAP FOR EASY ACCESS - DARK MODE
+$base-glass-opacities-dark: (
+  translucent: $base-glass-opacity-translucent-dark,
+  light: $base-glass-opacity-light-dark,
+  medium: $base-glass-opacity-medium-dark,
+  heavy: $base-glass-opacity-heavy-dark,
+  frosted: $base-glass-opacity-frosted-dark
+) !default;
--- a/projects/shared-ui/src/styles/base/_motion.scss
+++ b/projects/shared-ui/src/styles/base/_motion.scss
@@ -0,0 +1,124 @@
+// Motion Tokens
+// Generated from base-tokens.json
+
+// Animation Durations
+$base-motion-duration-instant: 50ms;
+$base-motion-duration-fast: 150ms;
+$base-motion-duration-normal: 300ms;
+$base-motion-duration-slow: 500ms;
+$base-motion-duration-slower: 700ms;
+$base-motion-duration-slowest: 1000ms;
+$base-motion-duration-ultra-slow: 2000ms;
+
+// Easing Functions
+$base-motion-easing-linear: linear;
+$base-motion-easing-ease: ease;
+$base-motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+$base-motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+$base-motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+$base-motion-easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+$base-motion-easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$base-motion-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
+$base-motion-easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+// Transition Properties
+$base-motion-transition-property-none: none;
+$base-motion-transition-property-all: all;
+$base-motion-transition-property-colors: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+$base-motion-transition-property-opacity: opacity;
+$base-motion-transition-property-shadow: box-shadow;
+$base-motion-transition-property-transform: transform;
+$base-motion-transition-property-spacing: margin, padding;
+$base-motion-transition-property-size: width, height;
+
+// Transition Durations
+$base-motion-transition-duration-0: 0ms;
+$base-motion-transition-duration-75: 75ms;
+$base-motion-transition-duration-100: 100ms;
+$base-motion-transition-duration-150: 150ms;
+$base-motion-transition-duration-200: 200ms;
+$base-motion-transition-duration-300: 300ms;
+$base-motion-transition-duration-500: 500ms;
+$base-motion-transition-duration-700: 700ms;
+$base-motion-transition-duration-1000: 1000ms;
+$base-motion-transition-duration-1500: 1500ms;
+$base-motion-transition-duration-2000: 2000ms;
+
+// Transition Timing Functions
+$base-motion-transition-timing-linear: linear;
+$base-motion-transition-timing-in: cubic-bezier(0.4, 0, 1, 1);
+$base-motion-transition-timing-out: cubic-bezier(0, 0, 0.2, 1);
+$base-motion-transition-timing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+$base-motion-transition-timing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+$base-motion-transition-timing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+// Transition Delays
+$base-motion-transition-delay-0: 0ms;
+$base-motion-transition-delay-75: 75ms;
+$base-motion-transition-delay-100: 100ms;
+$base-motion-transition-delay-150: 150ms;
+$base-motion-transition-delay-200: 200ms;
+$base-motion-transition-delay-300: 300ms;
+$base-motion-transition-delay-500: 500ms;
+$base-motion-transition-delay-700: 700ms;
+$base-motion-transition-delay-1000: 1000ms;
+
+// Duration Map
+$base-motion-durations: (
+  instant: $base-motion-duration-instant,
+  fast: $base-motion-duration-fast,
+  normal: $base-motion-duration-normal,
+  slow: $base-motion-duration-slow,
+  slower: $base-motion-duration-slower,
+  slowest: $base-motion-duration-slowest,
+  ultra-slow: $base-motion-duration-ultra-slow,
+);
+
+// Easing Map
+$base-motion-easings: (
+  linear: $base-motion-easing-linear,
+  ease: $base-motion-easing-ease,
+  ease-in: $base-motion-easing-ease-in,
+  ease-out: $base-motion-easing-ease-out,
+  ease-in-out: $base-motion-easing-ease-in-out,
+  spring: $base-motion-easing-spring,
+  bounce: $base-motion-easing-bounce,
+  sharp: $base-motion-easing-sharp,
+  elastic: $base-motion-easing-elastic,
+);
+
+// Hover Transform Values
+$base-motion-hover-transform-none: none;
+$base-motion-hover-transform-scale-sm: scale(1.02);
+$base-motion-hover-transform-scale-md: scale(1.05);
+$base-motion-hover-transform-scale-lg: scale(1.1);
+$base-motion-hover-transform-lift-sm: translateY(-2px);
+$base-motion-hover-transform-lift-md: translateY(-4px);
+$base-motion-hover-transform-lift-lg: translateY(-8px);
+$base-motion-hover-transform-scale-lift-sm: scale(1.02) translateY(-2px);
+$base-motion-hover-transform-scale-lift-md: scale(1.05) translateY(-4px);
+
+// Transition Property Map
+$base-motion-transition-properties: (
+  none: $base-motion-transition-property-none,
+  all: $base-motion-transition-property-all,
+  colors: $base-motion-transition-property-colors,
+  opacity: $base-motion-transition-property-opacity,
+  shadow: $base-motion-transition-property-shadow,
+  transform: $base-motion-transition-property-transform,
+  spacing: $base-motion-transition-property-spacing,
+  size: $base-motion-transition-property-size,
+);
+
+// Hover Transform Map
+$base-motion-hover-transforms: (
+  none: $base-motion-hover-transform-none,
+  scale-sm: $base-motion-hover-transform-scale-sm,
+  scale-md: $base-motion-hover-transform-scale-md,
+  scale-lg: $base-motion-hover-transform-scale-lg,
+  lift-sm: $base-motion-hover-transform-lift-sm,
+  lift-md: $base-motion-hover-transform-lift-md,
+  lift-lg: $base-motion-hover-transform-lift-lg,
+  scale-lift-sm: $base-motion-hover-transform-scale-lift-sm,
+  scale-lift-md: $base-motion-hover-transform-scale-lift-md,
+);
--- a/projects/shared-ui/src/styles/base/_opacity.scss
+++ b/projects/shared-ui/src/styles/base/_opacity.scss
@@ -0,0 +1,38 @@
+// Opacity Tokens
+// Generated from base-tokens.json
+
+// Opacity Values
+$base-opacity-0: 0;
+$base-opacity-5: 0.05;
+$base-opacity-10: 0.10;
+$base-opacity-20: 0.20;
+$base-opacity-25: 0.25;
+$base-opacity-30: 0.30;
+$base-opacity-40: 0.40;
+$base-opacity-50: 0.50;
+$base-opacity-60: 0.60;
+$base-opacity-70: 0.70;
+$base-opacity-75: 0.75;
+$base-opacity-80: 0.80;
+$base-opacity-90: 0.90;
+$base-opacity-95: 0.95;
+$base-opacity-100: 1;
+
+// Opacity Map
+$base-opacities: (
+  0: $base-opacity-0,
+  5: $base-opacity-5,
+  10: $base-opacity-10,
+  20: $base-opacity-20,
+  25: $base-opacity-25,
+  30: $base-opacity-30,
+  40: $base-opacity-40,
+  50: $base-opacity-50,
+  60: $base-opacity-60,
+  70: $base-opacity-70,
+  75: $base-opacity-75,
+  80: $base-opacity-80,
+  90: $base-opacity-90,
+  95: $base-opacity-95,
+  100: $base-opacity-100,
+);
--- a/projects/shared-ui/src/styles/base/_shadows.scss
+++ b/projects/shared-ui/src/styles/base/_shadows.scss
@@ -0,0 +1,36 @@
+// Shadow Tokens
+// Generated from base-tokens.json
+
+// Standard Shadows
+$base-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$base-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$base-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+$base-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+$base-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+$base-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+$base-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+$base-shadow-none: none;
+
+// AI Shadows
+$base-shadow-ai-glow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.1);
+$base-shadow-ai-pulse: 0 0 30px rgba(6, 182, 212, 0.4), 0 0 60px rgba(6, 182, 212, 0.2);
+$base-shadow-ai-soft: 0 0 15px rgba(139, 92, 246, 0.2), 0 0 30px rgba(139, 92, 246, 0.1);
+
+// Shadow Scale Map
+$base-shadows: (
+  xs: $base-shadow-xs,
+  sm: $base-shadow-sm,
+  md: $base-shadow-md,
+  lg: $base-shadow-lg,
+  xl: $base-shadow-xl,
+  2xl: $base-shadow-2xl,
+  inner: $base-shadow-inner,
+  none: $base-shadow-none,
+);
+
+// AI Shadow Map
+$base-shadows-ai: (
+  glow: $base-shadow-ai-glow,
+  pulse: $base-shadow-ai-pulse,
+  soft: $base-shadow-ai-soft,
+);
--- a/projects/shared-ui/src/styles/base/_sizing.scss
+++ b/projects/shared-ui/src/styles/base/_sizing.scss
@@ -0,0 +1,206 @@
+// Sizing Tokens
+// Generated from base-tokens.json
+
+// Icon Sizes
+$base-sizing-icon-xxs: 8px;
+$base-sizing-icon-xs: 12px;
+$base-sizing-icon-sm: 16px;
+$base-sizing-icon-md: 20px;
+$base-sizing-icon-lg: 24px;
+$base-sizing-icon-xl: 32px;
+$base-sizing-icon-2xl: 40px;
+$base-sizing-icon-3xl: 48px;
+$base-sizing-icon-4xl: 64px;
+$base-sizing-icon-5xl: 80px;
+
+// Avatar Sizes
+$base-sizing-avatar-xs: 24px;
+$base-sizing-avatar-sm: 32px;
+$base-sizing-avatar-md: 40px;
+$base-sizing-avatar-lg: 48px;
+$base-sizing-avatar-xl: 64px;
+$base-sizing-avatar-2xl: 80px;
+
+// Button Sizes
+$base-sizing-button-sm: 32px;
+$base-sizing-button-md: 40px;
+$base-sizing-button-lg: 48px;
+
+// Input Sizes
+$base-sizing-input-sm: 32px;
+$base-sizing-input-md: 40px;
+$base-sizing-input-lg: 48px;
+
+// Touch Target Sizes
+$base-sizing-interaction-touch-target: 44px;
+$base-sizing-interaction-min-clickable: 32px;
+
+$base-sizing-touch-minimum: 44px;
+$base-sizing-touch-comfortable: 48px;
+$base-sizing-touch-spacious: 56px;
+
+// Line Sizes
+$base-sizing-line-1: 1px;
+$base-sizing-line-2: 2px;
+$base-sizing-line-4: 4px;
+$base-sizing-line-8: 8px;
+
+// Width Values
+$base-sizing-width-0: 0px;
+$base-sizing-width-1: 0.25rem;
+$base-sizing-width-2: 0.5rem;
+$base-sizing-width-3: 0.75rem;
+$base-sizing-width-4: 1rem;
+$base-sizing-width-5: 1.25rem;
+$base-sizing-width-6: 1.5rem;
+$base-sizing-width-7: 1.75rem;
+$base-sizing-width-8: 2rem;
+$base-sizing-width-9: 2.25rem;
+$base-sizing-width-10: 2.5rem;
+$base-sizing-width-11: 2.75rem;
+$base-sizing-width-12: 3rem;
+$base-sizing-width-14: 3.5rem;
+$base-sizing-width-16: 4rem;
+$base-sizing-width-20: 5rem;
+$base-sizing-width-24: 6rem;
+$base-sizing-width-28: 7rem;
+$base-sizing-width-32: 8rem;
+$base-sizing-width-36: 9rem;
+$base-sizing-width-40: 10rem;
+$base-sizing-width-44: 11rem;
+$base-sizing-width-48: 12rem;
+$base-sizing-width-52: 13rem;
+$base-sizing-width-56: 14rem;
+$base-sizing-width-60: 15rem;
+$base-sizing-width-64: 16rem;
+$base-sizing-width-72: 18rem;
+$base-sizing-width-80: 20rem;
+$base-sizing-width-96: 24rem;
+$base-sizing-width-auto: auto;
+$base-sizing-width-full: 100%;
+$base-sizing-width-screen: 100vw;
+$base-sizing-width-min: min-content;
+$base-sizing-width-max: max-content;
+$base-sizing-width-fit: fit-content;
+
+// Height Values
+$base-sizing-height-0: 0px;
+$base-sizing-height-1: 0.25rem;
+$base-sizing-height-2: 0.5rem;
+$base-sizing-height-3: 0.75rem;
+$base-sizing-height-4: 1rem;
+$base-sizing-height-5: 1.25rem;
+$base-sizing-height-6: 1.5rem;
+$base-sizing-height-7: 1.75rem;
+$base-sizing-height-8: 2rem;
+$base-sizing-height-9: 2.25rem;
+$base-sizing-height-10: 2.5rem;
+$base-sizing-height-11: 2.75rem;
+$base-sizing-height-12: 3rem;
+$base-sizing-height-14: 3.5rem;
+$base-sizing-height-16: 4rem;
+$base-sizing-height-20: 5rem;
+$base-sizing-height-24: 6rem;
+$base-sizing-height-28: 7rem;
+$base-sizing-height-32: 8rem;
+$base-sizing-height-36: 9rem;
+$base-sizing-height-40: 10rem;
+$base-sizing-height-44: 11rem;
+$base-sizing-height-48: 12rem;
+$base-sizing-height-52: 13rem;
+$base-sizing-height-56: 14rem;
+$base-sizing-height-60: 15rem;
+$base-sizing-height-64: 16rem;
+$base-sizing-height-72: 18rem;
+$base-sizing-height-80: 20rem;
+$base-sizing-height-96: 24rem;
+$base-sizing-height-auto: auto;
+$base-sizing-height-full: 100%;
+$base-sizing-height-screen: 100vh;
+$base-sizing-height-min: min-content;
+$base-sizing-height-max: max-content;
+$base-sizing-height-fit: fit-content;
+
+// Max Width Values
+$base-sizing-max-width-0: 0px;
+$base-sizing-max-width-xs: 20rem;
+$base-sizing-max-width-sm: 24rem;
+$base-sizing-max-width-md: 28rem;
+$base-sizing-max-width-lg: 32rem;
+$base-sizing-max-width-xl: 36rem;
+$base-sizing-max-width-2xl: 42rem;
+$base-sizing-max-width-3xl: 48rem;
+$base-sizing-max-width-4xl: 56rem;
+$base-sizing-max-width-5xl: 64rem;
+$base-sizing-max-width-6xl: 72rem;
+$base-sizing-max-width-7xl: 80rem;
+$base-sizing-max-width-full: 100%;
+$base-sizing-max-width-min: min-content;
+$base-sizing-max-width-max: max-content;
+$base-sizing-max-width-fit: fit-content;
+$base-sizing-max-width-prose: 65ch;
+$base-sizing-max-width-screen-sm: 640px;
+$base-sizing-max-width-screen-md: 768px;
+$base-sizing-max-width-screen-lg: 1024px;
+$base-sizing-max-width-screen-xl: 1280px;
+$base-sizing-max-width-screen-2xl: 1536px;
+
+// Min Width/Height Values
+$base-sizing-min-width-0: 0px;
+$base-sizing-min-width-full: 100%;
+$base-sizing-min-width-min: min-content;
+$base-sizing-min-width-max: max-content;
+$base-sizing-min-width-fit: fit-content;
+
+$base-sizing-min-height-0: 0px;
+$base-sizing-min-height-full: 100%;
+$base-sizing-min-height-screen: 100vh;
+$base-sizing-min-height-min: min-content;
+$base-sizing-min-height-max: max-content;
+$base-sizing-min-height-fit: fit-content;
+
+$base-sizing-max-height-0: 0px;
+$base-sizing-max-height-full: 100%;
+$base-sizing-max-height-screen: 100vh;
+$base-sizing-max-height-min: min-content;
+$base-sizing-max-height-max: max-content;
+$base-sizing-max-height-fit: fit-content;
+
+// AI Sizing
+$base-sizing-ai-indicator: 20px;
+$base-sizing-ai-glow: 40px;
+
+// Component Size Maps
+$base-sizing-icons: (
+  xxs: $base-sizing-icon-xxs,
+  xs: $base-sizing-icon-xs,
+  sm: $base-sizing-icon-sm,
+  md: $base-sizing-icon-md,
+  lg: $base-sizing-icon-lg,
+  xl: $base-sizing-icon-xl,
+  2xl: $base-sizing-icon-2xl,
+  3xl: $base-sizing-icon-3xl,
+  4xl: $base-sizing-icon-4xl,
+  5xl: $base-sizing-icon-5xl,
+);
+
+$base-sizing-avatars: (
+  xs: $base-sizing-avatar-xs,
+  sm: $base-sizing-avatar-sm,
+  md: $base-sizing-avatar-md,
+  lg: $base-sizing-avatar-lg,
+  xl: $base-sizing-avatar-xl,
+  2xl: $base-sizing-avatar-2xl,
+);
+
+$base-sizing-buttons: (
+  sm: $base-sizing-button-sm,
+  md: $base-sizing-button-md,
+  lg: $base-sizing-button-lg,
+);
+
+$base-sizing-inputs: (
+  sm: $base-sizing-input-sm,
+  md: $base-sizing-input-md,
+  lg: $base-sizing-input-lg,
+);
--- a/projects/shared-ui/src/styles/base/_spacing.scss
+++ b/projects/shared-ui/src/styles/base/_spacing.scss
@@ -0,0 +1,115 @@
+// Spacing Tokens
+// Generated from base-tokens.json
+
+// Base Spacing Configuration
+$base-spacing-base: 1rem;
+$base-spacing-scale: 1.5;
+$base-spacing-micro-hairline: 0.5px;
+
+// Spacing Values
+$base-spacing-0: 0px;
+$base-spacing-0-5: 0.125rem;
+$base-spacing-1: 0.25rem;
+$base-spacing-1-5: 0.375rem;
+$base-spacing-2: 0.5rem;
+$base-spacing-2-5: 0.625rem;
+$base-spacing-3: 0.75rem;
+$base-spacing-3-5: 0.875rem;
+$base-spacing-4: 1rem;
+$base-spacing-5: 1.25rem;
+$base-spacing-6: 1.5rem;
+$base-spacing-7: 1.75rem;
+$base-spacing-8: 2rem;
+$base-spacing-9: 2.25rem;
+$base-spacing-10: 2.5rem;
+$base-spacing-11: 2.75rem;
+$base-spacing-12: 3rem;
+$base-spacing-14: 3.5rem;
+$base-spacing-16: 4rem;
+$base-spacing-20: 5rem;
+$base-spacing-24: 6rem;
+$base-spacing-28: 7rem;
+$base-spacing-32: 8rem;
+$base-spacing-36: 9rem;
+$base-spacing-40: 10rem;
+$base-spacing-44: 11rem;
+$base-spacing-48: 12rem;
+$base-spacing-52: 13rem;
+$base-spacing-56: 14rem;
+$base-spacing-60: 15rem;
+$base-spacing-64: 16rem;
+$base-spacing-72: 18rem;
+$base-spacing-80: 20rem;
+$base-spacing-96: 24rem;
+$base-spacing-128: 32rem;
+$base-spacing-160: 40rem;
+$base-spacing-192: 48rem;
+$base-spacing-224: 56rem;
+$base-spacing-256: 64rem;
+
+// Semantic Spacing
+$base-spacing-semantic-xs: 0.5rem;
+$base-spacing-semantic-sm: 0.75rem;
+$base-spacing-semantic-md: 1rem;
+$base-spacing-semantic-lg: 1.5rem;
+$base-spacing-semantic-xl: 2rem;
+$base-spacing-semantic-2xl: 2.5rem;
+$base-spacing-semantic-3xl: 3rem;
+$base-spacing-semantic-4xl: 4rem;
+$base-spacing-semantic-5xl: 5rem;
+
+// Spacing Scale Map
+$base-spacing-scale-map: (
+  0: $base-spacing-0,
+  0.5: $base-spacing-0-5,
+  1: $base-spacing-1,
+  1.5: $base-spacing-1-5,
+  2: $base-spacing-2,
+  2.5: $base-spacing-2-5,
+  3: $base-spacing-3,
+  3.5: $base-spacing-3-5,
+  4: $base-spacing-4,
+  5: $base-spacing-5,
+  6: $base-spacing-6,
+  7: $base-spacing-7,
+  8: $base-spacing-8,
+  9: $base-spacing-9,
+  10: $base-spacing-10,
+  11: $base-spacing-11,
+  12: $base-spacing-12,
+  14: $base-spacing-14,
+  16: $base-spacing-16,
+  20: $base-spacing-20,
+  24: $base-spacing-24,
+  28: $base-spacing-28,
+  32: $base-spacing-32,
+  36: $base-spacing-36,
+  40: $base-spacing-40,
+  44: $base-spacing-44,
+  48: $base-spacing-48,
+  52: $base-spacing-52,
+  56: $base-spacing-56,
+  60: $base-spacing-60,
+  64: $base-spacing-64,
+  72: $base-spacing-72,
+  80: $base-spacing-80,
+  96: $base-spacing-96,
+  128: $base-spacing-128,
+  160: $base-spacing-160,
+  192: $base-spacing-192,
+  224: $base-spacing-224,
+  256: $base-spacing-256,
+);
+
+// Semantic Spacing Map
+$base-spacing-semantic: (
+  xs: $base-spacing-semantic-xs,
+  sm: $base-spacing-semantic-sm,
+  md: $base-spacing-semantic-md,
+  lg: $base-spacing-semantic-lg,
+  xl: $base-spacing-semantic-xl,
+  2xl: $base-spacing-semantic-2xl,
+  3xl: $base-spacing-semantic-3xl,
+  4xl: $base-spacing-semantic-4xl,
+  5xl: $base-spacing-semantic-5xl,
+);
--- a/projects/shared-ui/src/styles/base/_typography.scss
+++ b/projects/shared-ui/src/styles/base/_typography.scss
@@ -0,0 +1,162 @@
+// Typography Tokens
+// Generated from base-tokens.json
+// Using Google Fonts: Inter, Playfair Display, JetBrains Mono
+
+// Font Families with Google Fonts
+$base-typography-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+$base-typography-font-family-serif: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+$base-typography-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Courier New', monospace;
+$base-typography-font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+
+// Font Sizes
+$base-typography-font-size-xs: 0.75rem;    // 12px
+$base-typography-font-size-sm: 0.875rem;   // 14px
+$base-typography-font-size-md: 1rem;       // 16px
+$base-typography-font-size-lg: 1.125rem;   // 18px
+$base-typography-font-size-xl: 1.25rem;    // 20px
+$base-typography-font-size-2xl: 1.5rem;    // 24px
+$base-typography-font-size-3xl: 1.875rem;  // 30px
+$base-typography-font-size-4xl: 2.25rem;   // 36px
+$base-typography-font-size-5xl: 3rem;      // 48px
+$base-typography-font-size-6xl: 3.75rem;   // 60px
+$base-typography-font-size-7xl: 4.5rem;    // 72px
+$base-typography-font-size-8xl: 6rem;      // 96px
+$base-typography-font-size-9xl: 8rem;      // 128px
+$base-typography-font-size-10xl: 10rem;    // 160px
+$base-typography-font-size-11xl: 12rem;    // 192px
+
+// Font Weights
+$base-typography-font-weight-100: 100;
+$base-typography-font-weight-200: 200;
+$base-typography-font-weight-300: 300;
+$base-typography-font-weight-400: 400;
+$base-typography-font-weight-500: 500;
+$base-typography-font-weight-600: 600;
+$base-typography-font-weight-700: 700;
+$base-typography-font-weight-800: 800;
+$base-typography-font-weight-900: 900;
+
+$base-typography-font-weight-thin: 100;
+$base-typography-font-weight-extralight: 200;
+$base-typography-font-weight-light: 300;
+$base-typography-font-weight-normal: 400;
+$base-typography-font-weight-medium: 500;
+$base-typography-font-weight-semibold: 600;
+$base-typography-font-weight-bold: 700;
+$base-typography-font-weight-extrabold: 800;
+$base-typography-font-weight-black: 900;
+
+// Line Heights
+$base-typography-line-height-none: 1;
+$base-typography-line-height-tight: 1.25;
+$base-typography-line-height-snug: 1.375;
+$base-typography-line-height-normal: 1.5;
+$base-typography-line-height-relaxed: 1.625;
+$base-typography-line-height-loose: 2;
+$base-typography-line-height-3: 0.75rem;
+$base-typography-line-height-4: 1rem;
+$base-typography-line-height-5: 1.25rem;
+$base-typography-line-height-6: 1.5rem;
+$base-typography-line-height-7: 1.75rem;
+$base-typography-line-height-8: 2rem;
+$base-typography-line-height-9: 2.25rem;
+$base-typography-line-height-10: 2.5rem;
+
+// Letter Spacing
+$base-typography-letter-spacing-tighter: -0.05em;
+$base-typography-letter-spacing-tight: -0.025em;
+$base-typography-letter-spacing-normal: 0em;
+$base-typography-letter-spacing-wide: 0.025em;
+$base-typography-letter-spacing-wider: 0.05em;
+$base-typography-letter-spacing-widest: 0.1em;
+
+// Word Spacing
+$base-typography-word-spacing-tight: -0.05em;
+$base-typography-word-spacing-normal: 0em;
+$base-typography-word-spacing-wide: 0.05em;
+$base-typography-word-spacing-wider: 0.1em;
+
+// Text Decoration
+$base-typography-text-decoration-line-none: none;
+$base-typography-text-decoration-line-underline: underline;
+$base-typography-text-decoration-line-overline: overline;
+$base-typography-text-decoration-line-line-through: line-through;
+
+$base-typography-text-decoration-style-solid: solid;
+$base-typography-text-decoration-style-double: double;
+$base-typography-text-decoration-style-dotted: dotted;
+$base-typography-text-decoration-style-dashed: dashed;
+$base-typography-text-decoration-style-wavy: wavy;
+
+$base-typography-text-decoration-thickness-auto: auto;
+$base-typography-text-decoration-thickness-from-font: from-font;
+$base-typography-text-decoration-thickness-0: 0px;
+$base-typography-text-decoration-thickness-1: 1px;
+$base-typography-text-decoration-thickness-2: 2px;
+$base-typography-text-decoration-thickness-4: 4px;
+$base-typography-text-decoration-thickness-8: 8px;
+
+$base-typography-text-decoration-offset-auto: auto;
+$base-typography-text-decoration-offset-0: 0px;
+$base-typography-text-decoration-offset-1: 1px;
+$base-typography-text-decoration-offset-2: 2px;
+$base-typography-text-decoration-offset-4: 4px;
+$base-typography-text-decoration-offset-8: 8px;
+
+// Typography Scale Map
+$base-typography-scale: (
+  xs: (
+    font-size: $base-typography-font-size-xs,
+    line-height: $base-typography-line-height-4,
+  ),
+  sm: (
+    font-size: $base-typography-font-size-sm,
+    line-height: $base-typography-line-height-5,
+  ),
+  md: (
+    font-size: $base-typography-font-size-md,
+    line-height: $base-typography-line-height-6,
+  ),
+  lg: (
+    font-size: $base-typography-font-size-lg,
+    line-height: $base-typography-line-height-7,
+  ),
+  xl: (
+    font-size: $base-typography-font-size-xl,
+    line-height: $base-typography-line-height-7,
+  ),
+  2xl: (
+    font-size: $base-typography-font-size-2xl,
+    line-height: $base-typography-line-height-8,
+  ),
+  3xl: (
+    font-size: $base-typography-font-size-3xl,
+    line-height: $base-typography-line-height-9,
+  ),
+  4xl: (
+    font-size: $base-typography-font-size-4xl,
+    line-height: $base-typography-line-height-10,
+  ),
+);
+
+// Font Family Map
+$base-typography-families: (
+  sans: $base-typography-font-family-sans,
+  serif: $base-typography-font-family-serif,
+  mono: $base-typography-font-family-mono,
+  display: $base-typography-font-family-display,
+);
+
+// Font Weight Map
+$base-typography-weights: (
+  thin: $base-typography-font-weight-thin,
+  extralight: $base-typography-font-weight-extralight,
+  light: $base-typography-font-weight-light,
+  normal: $base-typography-font-weight-normal,
+  medium: $base-typography-font-weight-medium,
+  semibold: $base-typography-font-weight-semibold,
+  bold: $base-typography-font-weight-bold,
+  extrabold: $base-typography-font-weight-extrabold,
+  black: $base-typography-font-weight-black,
+);
+
--- a/projects/shared-ui/src/styles/base/_z-index.scss
+++ b/projects/shared-ui/src/styles/base/_z-index.scss
@@ -0,0 +1,60 @@
+// Z-Index Tokens
+// Generated from base-tokens.json
+
+// Z-Index Values
+$base-z-index-neg-10: -10;
+$base-z-index-neg-1: -1;
+$base-z-index-0: 0;
+$base-z-index-10: 10;
+$base-z-index-20: 20;
+$base-z-index-30: 30;
+$base-z-index-40: 40;
+$base-z-index-50: 50;
+$base-z-index-60: 60;
+$base-z-index-70: 70;
+$base-z-index-80: 80;
+$base-z-index-90: 90;
+$base-z-index-100: 100;
+
+// Semantic Z-Index Values
+$base-z-index-dropdown: 1000;
+$base-z-index-sticky: 1020;
+$base-z-index-fixed: 1030;
+$base-z-index-modal-backdrop: 1040;
+$base-z-index-overlay: 1045;
+$base-z-index-modal: 1050;
+$base-z-index-banner: 1010;
+$base-z-index-popover: 1060;
+$base-z-index-tooltip: 1070;
+$base-z-index-toast: 1080;
+$base-z-index-max: 2147483647;
+$base-z-index-debug: 9999;
+
+// Z-Index Map
+$base-z-indexes: (
+  -10: $base-z-index-neg-10,
+  -1: $base-z-index-neg-1,
+  0: $base-z-index-0,
+  10: $base-z-index-10,
+  20: $base-z-index-20,
+  30: $base-z-index-30,
+  40: $base-z-index-40,
+  50: $base-z-index-50,
+  60: $base-z-index-60,
+  70: $base-z-index-70,
+  80: $base-z-index-80,
+  90: $base-z-index-90,
+  100: $base-z-index-100,
+  dropdown: $base-z-index-dropdown,
+  banner: $base-z-index-banner,
+  sticky: $base-z-index-sticky,
+  fixed: $base-z-index-fixed,
+  modal-backdrop: $base-z-index-modal-backdrop,
+  overlay: $base-z-index-overlay,
+  modal: $base-z-index-modal,
+  popover: $base-z-index-popover,
+  tooltip: $base-z-index-tooltip,
+  toast: $base-z-index-toast,
+  max: $base-z-index-max,
+  debug: $base-z-index-debug,
+);
--- a/projects/shared-ui/src/styles/base/index.scss
+++ b/projects/shared-ui/src/styles/base/index.scss
@@ -0,0 +1,9 @@
+// Base tokens entry point
+@forward 'colors';
+@forward 'spacing';
+@forward 'typography';
+@forward 'motion';
+@forward 'shadows';
+
+
+@forward 'css-variables';
--- a/projects/shared-ui/src/styles/commons/_index.scss
+++ b/projects/shared-ui/src/styles/commons/_index.scss
@@ -0,0 +1,11 @@
+// ==========================================================================
+// COMMONS INDEX
+// ==========================================================================
+// Import all commons modules in the correct order
+// Theme-agnostic styles that work across all themes
+// ==========================================================================
+
+@import 'layouts';
+@import 'components';
+@import 'patterns';
+@import 'utilities';
--- a/projects/shared-ui/src/styles/commons/components/_base-buttons.scss
+++ b/projects/shared-ui/src/styles/commons/components/_base-buttons.scss
@@ -0,0 +1,340 @@
+// ==========================================================================
+// BASE BUTTONS
+// ==========================================================================
+// Theme-agnostic button structures and behaviors
+// Visual styling handled by themes
+// ==========================================================================
+
+// BUTTON BASE
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--btn-gap, #{$semantic-spacing-micro-icon-gap});
+  padding: var(--btn-padding, #{$semantic-spacing-interactive-button-padding-y} #{$semantic-spacing-interactive-button-padding-x});
+  border: var(--btn-border-width, #{$semantic-border-button-width}) solid transparent;
+  border-radius: var(--btn-border-radius, #{$semantic-border-button-radius});
+  font-family: inherit;
+  font-size: var(--btn-font-size, 1rem);
+  font-weight: var(--btn-font-weight, 500);
+  line-height: var(--btn-line-height, 1.5);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--btn-transition-duration, 0.2s) var(--btn-transition-easing, ease);
+  position: relative;
+  overflow: hidden;
+
+  &:focus {
+    outline: var(--btn-focus-outline, 2px solid transparent);
+    outline-offset: var(--btn-focus-outline-offset, 2px);
+  }
+
+  &:disabled,
+  &.btn-disabled {
+    pointer-events: none;
+    opacity: var(--btn-disabled-opacity, 0.6);
+    cursor: not-allowed;
+  }
+
+  &.btn-loading {
+    pointer-events: none;
+    
+    .btn-text {
+      opacity: 0;
+    }
+    
+    .btn-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+// BUTTON SIZES - Using semantic sizing tokens
+.btn-xs {
+  --btn-padding: #{$semantic-spacing-component-padding-xs} #{$semantic-spacing-component-padding-sm};
+  --btn-font-size: 0.75rem;
+  --btn-gap: #{$base-spacing-1};
+}
+
+.btn-sm {
+  --btn-padding: #{$semantic-spacing-component-padding-sm} #{$semantic-spacing-component-padding-md};
+  --btn-font-size: 0.875rem;
+  --btn-gap: #{$semantic-spacing-micro-icon-gap};
+}
+
+.btn-lg {
+  --btn-padding: #{$semantic-spacing-component-padding-md} #{$semantic-spacing-component-padding-xl};
+  --btn-font-size: 1.125rem;
+  --btn-gap: #{$semantic-spacing-component-padding-sm};
+}
+
+.btn-xl {
+  --btn-padding: #{$semantic-spacing-component-padding-lg} #{$semantic-spacing-component-padding-xl};
+  --btn-font-size: 1.25rem;
+  --btn-gap: 16px;
+}
+
+// BUTTON SHAPES
+.btn-rounded {
+  border-radius: var(--btn-rounded-radius, 50px);
+}
+
+.btn-square {
+  border-radius: 0;
+}
+
+.btn-circle {
+  border-radius: 50%;
+  width: var(--btn-circle-size, 48px);
+  height: var(--btn-circle-size, 48px);
+  padding: 0;
+}
+
+// BUTTON WIDTHS
+.btn-block {
+  display: flex;
+  width: 100%;
+}
+
+.btn-auto {
+  width: auto;
+}
+
+// BUTTON GROUPS
+.btn-group {
+  display: inline-flex;
+  vertical-align: middle;
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--btn-border-radius, 4px);
+      border-bottom-left-radius: var(--btn-border-radius, 4px);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--btn-border-radius, 4px);
+      border-bottom-right-radius: var(--btn-border-radius, 4px);
+    }
+
+    &:not(:first-child) {
+      margin-left: calc(var(--btn-border-width, 1px) * -1);
+    }
+
+    &:hover,
+    &:focus,
+    &.btn-active {
+      z-index: 1;
+    }
+  }
+
+  &.btn-group-vertical {
+    flex-direction: column;
+
+    > .btn {
+      &:first-child {
+        border-radius: var(--btn-border-radius, 4px) var(--btn-border-radius, 4px) 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 var(--btn-border-radius, 4px) var(--btn-border-radius, 4px);
+      }
+
+      &:not(:first-child) {
+        margin-left: 0;
+        margin-top: calc(var(--btn-border-width, 1px) * -1);
+      }
+    }
+  }
+}
+
+// FLOATING ACTION BUTTON (FAB)
+.btn-fab {
+  position: fixed;
+  bottom: var(--fab-bottom, 24px);
+  right: var(--fab-right, 24px);
+  width: var(--fab-size, 56px);
+  height: var(--fab-size, 56px);
+  border-radius: 50%;
+  padding: 0;
+  z-index: var(--z-fab, 1000);
+  box-shadow: var(--fab-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  transition: all var(--fab-transition-duration, 0.3s) var(--fab-transition-easing, ease);
+
+  &:hover {
+    transform: var(--fab-hover-transform, translateY(-2px));
+    box-shadow: var(--fab-hover-shadow, 0 6px 20px rgba(0, 0, 0, 0.2));
+  }
+
+  &.btn-fab-mini {
+    --fab-size: 40px;
+    --fab-bottom: 16px;
+    --fab-right: 16px;
+  }
+
+  &.btn-fab-extended {
+    width: auto;
+    min-width: var(--fab-extended-min-width, 120px);
+    border-radius: var(--fab-extended-radius, 28px);
+    padding: var(--fab-extended-padding, 0 20px);
+    gap: var(--fab-extended-gap, 8px);
+  }
+}
+
+// BUTTON ICON HANDLING
+.btn-icon {
+  width: var(--btn-icon-size, 24px);
+  height: var(--btn-icon-size, 24px);
+  flex-shrink: 0;
+
+  &.btn-icon-start {
+    margin-right: var(--btn-icon-spacing, 8px);
+    margin-left: calc(var(--btn-icon-spacing, 8px) * -0.5);
+  }
+
+  &.btn-icon-end {
+    margin-left: var(--btn-icon-spacing, 8px);
+    margin-right: calc(var(--btn-icon-spacing, 8px) * -0.5);
+  }
+}
+
+.btn-icon-only {
+  width: var(--btn-icon-only-size, 40px);
+  height: var(--btn-icon-only-size, 40px);
+  padding: 0;
+
+  &.btn-sm {
+    --btn-icon-only-size: 32px;
+  }
+
+  &.btn-lg {
+    --btn-icon-only-size: 48px;
+  }
+
+  &.btn-xl {
+    --btn-icon-only-size: 56px;
+  }
+}
+
+// BUTTON STATES
+.btn-loading-spinner {
+  display: inline-block;
+  width: var(--spinner-size, 16px);
+  height: var(--spinner-size, 16px);
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: btn-spin var(--spinner-duration, 1s) linear infinite;
+}
+
+@keyframes btn-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// RIPPLE EFFECT (Structure only)
+.btn-ripple {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+    background: var(--btn-ripple-color, rgba(255, 255, 255, 0.3));
+  }
+
+  &:active::before {
+    width: 300px;
+    height: 300px;
+  }
+}
+
+// TOGGLE BUTTON
+.btn-toggle {
+  &.btn-toggle-active {
+    // Active state handled by theme
+  }
+
+  &[aria-pressed="true"] {
+    // Pressed state handled by theme
+  }
+}
+
+// DROPDOWN BUTTON
+.btn-dropdown {
+  .dropdown-caret {
+    margin-left: var(--dropdown-caret-spacing, 8px);
+    transition: transform var(--dropdown-transition-duration, 0.2s);
+  }
+
+  &.dropdown-open .dropdown-caret {
+    transform: rotate(180deg);
+  }
+}
+
+// RESPONSIVE BUTTON ADJUSTMENTS
+@media (max-width: 576px) {
+  .btn {
+    --btn-padding: 10px 20px;
+    --btn-font-size: 0.875rem;
+  }
+
+  .btn-block-mobile {
+    display: flex;
+    width: 100%;
+  }
+
+  .btn-fab {
+    --fab-size: 48px;
+    --fab-bottom: 16px;
+    --fab-right: 16px;
+  }
+}
+
+// ACCESSIBILITY IMPROVEMENTS
+@media (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+  }
+
+  .btn-fab {
+    transition: none;
+    
+    &:hover {
+      transform: none;
+    }
+  }
+
+  .btn-loading-spinner {
+    animation: none;
+  }
+}
+
+// HIGH CONTRAST MODE
+@media (prefers-contrast: high) {
+  .btn {
+    border-width: 2px;
+  }
+
+  .btn:focus {
+    outline: 3px solid;
+    outline-offset: 3px;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/components/_base-cards.scss
+++ b/projects/shared-ui/src/styles/commons/components/_base-cards.scss
@@ -0,0 +1,424 @@
+// ==========================================================================
+// BASE CARDS
+// ==========================================================================
+// Theme-agnostic card structures and layouts
+// Visual styling handled by themes
+// ==========================================================================
+
+// CARD BASE
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-clip: border-box;
+  border: var(--card-border-width, #{$semantic-border-card-width}) solid transparent;
+  border-radius: var(--card-border-radius, #{$semantic-border-card-radius});
+
+  &.card-interactive {
+    cursor: pointer;
+    transition: all var(--card-transition-duration, 0.2s) var(--card-transition-easing, ease);
+
+    &:hover {
+      transform: var(--card-hover-transform, translateY(-2px));
+    }
+
+    &:active {
+      transform: var(--card-active-transform, translateY(0));
+    }
+  }
+
+  &.card-clickable {
+    cursor: pointer;
+    text-decoration: none;
+
+    &:focus {
+      outline: var(--card-focus-outline, 2px solid transparent);
+      outline-offset: var(--card-focus-outline-offset, 2px);
+    }
+  }
+}
+
+// CARD COMPONENTS
+.card-header {
+  padding: var(--card-header-padding, #{$semantic-spacing-container-card-padding} #{$semantic-spacing-container-card-padding-lg});
+  border-bottom: var(--card-header-border-width, #{$semantic-border-divider-width}) solid var(--card-header-border-color, transparent);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  display: flex;
+  align-items: center;
+  gap: var(--card-header-gap, #{$semantic-spacing-component-padding-sm});
+  min-height: var(--card-header-min-height, auto);
+
+  &:first-child {
+    border-top-left-radius: var(--card-border-radius, #{$semantic-border-card-radius});
+    border-top-right-radius: var(--card-border-radius, #{$semantic-border-card-radius});
+  }
+
+  &.card-header-borderless {
+    border-bottom: none;
+  }
+
+  .card-title {
+    margin: 0;
+    font-size: var(--card-title-size, 1.125rem);
+    font-weight: var(--card-title-weight, 600);
+    line-height: var(--card-title-line-height, 1.4);
+    flex: 1;
+  }
+
+  .card-subtitle {
+    margin: var(--card-subtitle-margin, 4px 0 0 0);
+    font-size: var(--card-subtitle-size, 0.875rem);
+    opacity: var(--card-subtitle-opacity, 0.7);
+  }
+
+  .card-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--card-actions-gap, 8px);
+    margin-left: auto;
+  }
+}
+
+.card-body {
+  flex: 1 1 auto;
+  padding: var(--card-body-padding, 20px);
+
+  &.card-body-compact {
+    padding: var(--card-body-compact-padding, 12px);
+  }
+
+  &.card-body-spacious {
+    padding: var(--card-body-spacious-padding, 32px);
+  }
+
+  &.card-body-flush {
+    padding: 0;
+  }
+
+  &:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  .card-text {
+    margin: 0 0 var(--card-text-spacing, 16px) 0;
+    line-height: var(--card-text-line-height, 1.6);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.card-footer {
+  padding: var(--card-footer-padding, 12px 20px);
+  border-top: var(--card-footer-border-width, 1px) solid var(--card-footer-border-color, transparent);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--card-footer-gap, 12px);
+
+  &:last-child {
+    border-bottom-left-radius: var(--card-border-radius, 8px);
+    border-bottom-right-radius: var(--card-border-radius, 8px);
+  }
+
+  &.card-footer-borderless {
+    border-top: none;
+  }
+
+  &.card-footer-center {
+    justify-content: center;
+  }
+
+  &.card-footer-end {
+    justify-content: flex-end;
+  }
+}
+
+// CARD MEDIA
+.card-img {
+  width: 100%;
+  border-radius: inherit;
+
+  &.card-img-top {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &.card-img-bottom {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--card-overlay-padding, 20px);
+  border-radius: inherit;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+// CARD VARIANTS
+.card-horizontal {
+  flex-direction: row;
+
+  .card-img {
+    flex-shrink: 0;
+    width: var(--card-horizontal-img-width, 200px);
+    height: auto;
+    border-radius: var(--card-border-radius, 8px) 0 0 var(--card-border-radius, 8px);
+
+    &.card-img-end {
+      border-radius: 0 var(--card-border-radius, 8px) var(--card-border-radius, 8px) 0;
+      order: 2;
+    }
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .card-horizontal {
+    flex-direction: column;
+
+    .card-img {
+      width: 100%;
+      border-radius: var(--card-border-radius, 8px) var(--card-border-radius, 8px) 0 0;
+
+      &.card-img-end {
+        border-radius: 0 0 var(--card-border-radius, 8px) var(--card-border-radius, 8px);
+        order: 0;
+      }
+    }
+  }
+}
+
+// CARD SIZES
+.card-sm {
+  --card-header-padding: 12px 16px;
+  --card-body-padding: 16px;
+  --card-footer-padding: 8px 16px;
+  --card-border-radius: 6px;
+}
+
+.card-lg {
+  --card-header-padding: 24px 32px;
+  --card-body-padding: 32px;
+  --card-footer-padding: 16px 32px;
+  --card-border-radius: 12px;
+}
+
+// CARD STATES
+.card-loading {
+  pointer-events: none;
+  opacity: var(--card-loading-opacity, 0.7);
+
+  .card-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+    z-index: 1;
+  }
+}
+
+.card-disabled {
+  pointer-events: none;
+  opacity: var(--card-disabled-opacity, 0.6);
+}
+
+// CARD GROUPS
+.card-group {
+  display: flex;
+
+  > .card {
+    flex: 1 0 0%;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--card-border-radius, 8px);
+      border-bottom-left-radius: var(--card-border-radius, 8px);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--card-border-radius, 8px);
+      border-bottom-right-radius: var(--card-border-radius, 8px);
+    }
+
+    &:not(:last-child) {
+      border-right: none;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .card-group {
+    flex-direction: column;
+
+    > .card {
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: var(--card-border-radius, 8px) var(--card-border-radius, 8px) 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 var(--card-border-radius, 8px) var(--card-border-radius, 8px);
+      }
+
+      &:not(:last-child) {
+        border-right: var(--card-border-width, 1px) solid transparent;
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+// CARD DECK
+.card-deck {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-deck-gap, 24px);
+
+  @media (min-width: 576px) {
+    flex-direction: row;
+  }
+
+  > .card {
+    flex: 1 0 0%;
+  }
+}
+
+// CARD COLUMNS (Masonry-style)
+.card-columns {
+  column-count: 1;
+  column-gap: var(--card-columns-gap, 24px);
+  orphans: 1;
+  widows: 1;
+
+  @media (min-width: 576px) {
+    column-count: 2;
+  }
+
+  @media (min-width: 768px) {
+    column-count: 3;
+  }
+
+  @media (min-width: 992px) {
+    column-count: 4;
+  }
+
+  > .card {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: var(--card-columns-gap, 24px);
+    break-inside: avoid;
+  }
+}
+
+// CARD GRID
+.card-grid {
+  display: grid;
+  gap: var(--card-grid-gap, 24px);
+  grid-template-columns: 1fr;
+
+  @media (min-width: 576px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (min-width: 992px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &.card-grid-auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(var(--card-grid-min-width, 280px), 1fr));
+  }
+
+  &.card-grid-auto-fill {
+    grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min-width, 280px), 1fr));
+  }
+}
+
+// SPECIAL CARD TYPES
+.card-feature {
+  text-align: center;
+
+  .card-body {
+    padding: var(--card-feature-padding, 48px 32px);
+  }
+
+  .card-icon {
+    width: var(--card-feature-icon-size, 64px);
+    height: var(--card-feature-icon-size, 64px);
+    margin: 0 auto var(--card-feature-icon-spacing, 24px) auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--card-feature-icon-radius, 12px);
+  }
+}
+
+.card-profile {
+  text-align: center;
+
+  .card-avatar {
+    width: var(--card-avatar-size, 80px);
+    height: var(--card-avatar-size, 80px);
+    border-radius: 50%;
+    margin: calc(var(--card-avatar-size, 80px) / -2) auto var(--card-avatar-spacing, 16px) auto;
+    border: var(--card-avatar-border, 4px solid white);
+    position: relative;
+    z-index: 1;
+  }
+
+  .card-header {
+    padding-bottom: calc(var(--card-avatar-size, 80px) / 2 + var(--card-header-padding-bottom, 16px));
+  }
+}
+
+// ACCESSIBILITY
+@media (prefers-reduced-motion: reduce) {
+  .card-interactive {
+    transition: none;
+
+    &:hover {
+      transform: none;
+    }
+  }
+}
+
+@media (prefers-contrast: high) {
+  .card {
+    border-width: 2px;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/components/_base-forms.scss
+++ b/projects/shared-ui/src/styles/commons/components/_base-forms.scss
@@ -0,0 +1,475 @@
+// ==========================================================================
+// BASE FORMS
+// ==========================================================================
+// Theme-agnostic form structures and behaviors
+// Visual styling handled by themes
+// ==========================================================================
+
+// FORM CONTAINER
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-gap, 24px);
+  max-width: var(--form-max-width, 100%);
+  margin: var(--form-margin, 0);
+
+  &.form-inline {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--form-inline-gap, 16px);
+  }
+
+  &.form-compact {
+    gap: var(--form-compact-gap, 16px);
+  }
+
+  &.form-spacious {
+    gap: var(--form-spacious-gap, 32px);
+  }
+}
+
+// FIELDSET
+.fieldset {
+  border: var(--fieldset-border, 1px solid transparent);
+  border-radius: var(--fieldset-border-radius, 8px);
+  padding: var(--fieldset-padding, 24px);
+  margin: var(--fieldset-margin, 0 0 24px 0);
+
+  .fieldset-legend {
+    font-size: var(--fieldset-legend-size, 1.125rem);
+    font-weight: var(--fieldset-legend-weight, 600);
+    margin-bottom: var(--fieldset-legend-spacing, 16px);
+    padding: var(--fieldset-legend-padding, 0 8px);
+  }
+}
+
+// FORM FIELD
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-field-gap, 8px);
+  position: relative;
+
+  &.form-field-inline {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--form-field-inline-gap, 12px);
+
+    .form-label {
+      flex-shrink: 0;
+      margin-bottom: 0;
+      min-width: var(--form-label-min-width, 120px);
+    }
+
+    .form-input-wrapper {
+      flex: 1;
+    }
+  }
+
+  &.form-field-checkbox,
+  &.form-field-radio {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--form-checkbox-gap, 8px);
+
+    .form-input {
+      flex-shrink: 0;
+      margin: 0;
+    }
+
+    .form-label {
+      flex: 1;
+      margin-bottom: 0;
+      cursor: pointer;
+      line-height: var(--form-checkbox-label-line-height, 1.5);
+    }
+  }
+
+  &.form-field-error {
+    .form-input {
+      border-color: var(--form-error-color, #dc3545);
+    }
+
+    .form-label {
+      color: var(--form-error-color, #dc3545);
+    }
+  }
+
+  &.form-field-success {
+    .form-input {
+      border-color: var(--form-success-color, #28a745);
+    }
+  }
+
+  &.form-field-disabled {
+    opacity: var(--form-disabled-opacity, 0.6);
+    pointer-events: none;
+  }
+}
+
+// FORM LABEL
+.form-label {
+  font-size: var(--form-label-size, 0.875rem);
+  font-weight: var(--form-label-weight, 500);
+  line-height: var(--form-label-line-height, 1.4);
+  margin-bottom: var(--form-label-spacing, 8px);
+  cursor: pointer;
+
+  &.form-label-required::after {
+    content: var(--form-required-indicator, ' *');
+    color: var(--form-required-color, #dc3545);
+  }
+
+  &.form-label-optional::after {
+    content: var(--form-optional-indicator, ' (optional)');
+    opacity: var(--form-optional-opacity, 0.6);
+    font-weight: normal;
+  }
+}
+
+// FORM INPUTS
+.form-input {
+  width: 100%;
+  padding: var(--form-input-padding, 12px 16px);
+  border: var(--form-input-border, 1px solid #d1d5db);
+  border-radius: var(--form-input-border-radius, 6px);
+  font-family: inherit;
+  font-size: var(--form-input-font-size, 1rem);
+  line-height: var(--form-input-line-height, 1.5);
+  transition: all var(--form-input-transition-duration, 0.2s) var(--form-input-transition-easing, ease);
+  background: var(--form-input-background, transparent);
+
+  &:focus {
+    outline: var(--form-input-focus-outline, 2px solid transparent);
+    outline-offset: var(--form-input-focus-outline-offset, 2px);
+    border-color: var(--form-input-focus-border-color, #3b82f6);
+  }
+
+  &:disabled,
+  &[readonly] {
+    opacity: var(--form-input-disabled-opacity, 0.6);
+    cursor: not-allowed;
+    background: var(--form-input-disabled-background, #f9fafb);
+  }
+
+  &::placeholder {
+    color: var(--form-input-placeholder-color, #9ca3af);
+    opacity: 1;
+  }
+}
+
+// INPUT SIZES
+.form-input-sm {
+  --form-input-padding: 8px 12px;
+  --form-input-font-size: 0.875rem;
+}
+
+.form-input-lg {
+  --form-input-padding: 16px 20px;
+  --form-input-font-size: 1.125rem;
+}
+
+// TEXTAREA
+.form-textarea {
+  min-height: var(--form-textarea-min-height, 120px);
+  resize: var(--form-textarea-resize, vertical);
+  line-height: var(--form-textarea-line-height, 1.6);
+}
+
+// SELECT
+.form-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: var(--form-select-arrow, url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"));
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px 12px;
+  padding-right: var(--form-select-padding-right, 40px);
+
+  &[multiple] {
+    background-image: none;
+    padding-right: var(--form-input-padding-right, 16px);
+  }
+}
+
+// CHECKBOX & RADIO
+.form-checkbox,
+.form-radio {
+  width: var(--form-checkbox-size, 18px);
+  height: var(--form-checkbox-size, 18px);
+  margin: var(--form-checkbox-margin, 2px 0 0 0);
+  cursor: pointer;
+  appearance: none;
+  border: var(--form-checkbox-border, 2px solid #d1d5db);
+  transition: all var(--form-checkbox-transition-duration, 0.2s) var(--form-checkbox-transition-easing, ease);
+
+  &:focus {
+    outline: var(--form-checkbox-focus-outline, 2px solid transparent);
+    outline-offset: var(--form-checkbox-focus-outline-offset, 2px);
+  }
+
+  &:checked {
+    background: var(--form-checkbox-checked-background, #3b82f6);
+    border-color: var(--form-checkbox-checked-border-color, #3b82f6);
+  }
+
+  &:disabled {
+    opacity: var(--form-checkbox-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+}
+
+.form-checkbox {
+  border-radius: var(--form-checkbox-border-radius, 3px);
+
+  &:checked {
+    background-image: var(--form-checkbox-check-icon, url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z'/%3E%3C/svg%3E"));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+  }
+
+  &:indeterminate {
+    background: var(--form-checkbox-indeterminate-background, #3b82f6);
+    border-color: var(--form-checkbox-indeterminate-border-color, #3b82f6);
+    background-image: var(--form-checkbox-indeterminate-icon, url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E"));
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+  }
+}
+
+.form-radio {
+  border-radius: 50%;
+
+  &:checked {
+    background-image: var(--form-radio-dot-icon, radial-gradient(circle at center, white 4px, transparent 4px));
+  }
+}
+
+// INPUT GROUPS
+.form-input-group {
+  display: flex;
+  position: relative;
+
+  > .form-input {
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left: none;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:focus {
+      z-index: 2;
+    }
+  }
+
+  .form-input-addon,
+  .form-input-btn {
+    display: flex;
+    align-items: center;
+    padding: var(--form-input-addon-padding, 12px 16px);
+    font-size: var(--form-input-addon-font-size, 1rem);
+    border: var(--form-input-border, 1px solid #d1d5db);
+    white-space: nowrap;
+
+    &:first-child {
+      border-top-left-radius: var(--form-input-border-radius, 6px);
+      border-bottom-left-radius: var(--form-input-border-radius, 6px);
+      border-right: none;
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--form-input-border-radius, 6px);
+      border-bottom-right-radius: var(--form-input-border-radius, 6px);
+      border-left: none;
+    }
+  }
+
+  .form-input-btn {
+    cursor: pointer;
+    transition: all var(--form-input-btn-transition-duration, 0.2s);
+
+    &:hover {
+      z-index: 2;
+    }
+  }
+}
+
+// FLOATING LABELS
+.form-floating {
+  position: relative;
+
+  .form-input {
+    height: var(--form-floating-height, 56px);
+    padding: var(--form-floating-padding, 20px 16px 8px 16px);
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      padding: var(--form-floating-padding-active, 20px 16px 8px 16px);
+    }
+
+    &::placeholder {
+      opacity: 0;
+      transition: opacity var(--form-floating-transition-duration, 0.2s);
+    }
+
+    &:focus::placeholder {
+      opacity: 1;
+    }
+  }
+
+  .form-label {
+    position: absolute;
+    top: 50%;
+    left: 16px;
+    margin-bottom: 0;
+    pointer-events: none;
+    transform: translateY(-50%);
+    transition: all var(--form-floating-transition-duration, 0.2s) var(--form-floating-transition-easing, ease);
+    transform-origin: left center;
+    cursor: text;
+  }
+
+  .form-input:focus ~ .form-label,
+  .form-input:not(:placeholder-shown) ~ .form-label {
+    top: 12px;
+    transform: translateY(0) scale(0.85);
+    opacity: var(--form-floating-label-opacity, 0.7);
+  }
+}
+
+// FORM FEEDBACK
+.form-feedback {
+  font-size: var(--form-feedback-size, 0.875rem);
+  line-height: var(--form-feedback-line-height, 1.4);
+  margin-top: var(--form-feedback-spacing, 6px);
+
+  &.form-feedback-error {
+    color: var(--form-error-color, #dc3545);
+  }
+
+  &.form-feedback-success {
+    color: var(--form-success-color, #28a745);
+  }
+
+  &.form-feedback-warning {
+    color: var(--form-warning-color, #ffc107);
+  }
+
+  &.form-feedback-info {
+    color: var(--form-info-color, #17a2b8);
+  }
+}
+
+.form-help-text {
+  font-size: var(--form-help-size, 0.875rem);
+  line-height: var(--form-help-line-height, 1.4);
+  margin-top: var(--form-help-spacing, 6px);
+  opacity: var(--form-help-opacity, 0.7);
+}
+
+// FORM ACTIONS
+.form-actions {
+  display: flex;
+  gap: var(--form-actions-gap, 12px);
+  align-items: center;
+  padding-top: var(--form-actions-padding, 16px);
+  margin-top: var(--form-actions-margin, 24px);
+  border-top: var(--form-actions-border, 1px solid transparent);
+
+  &.form-actions-center {
+    justify-content: center;
+  }
+
+  &.form-actions-end {
+    justify-content: flex-end;
+  }
+
+  &.form-actions-between {
+    justify-content: space-between;
+  }
+
+  &.form-actions-stack {
+    flex-direction: column;
+
+    .btn {
+      width: 100%;
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .form-actions {
+    flex-direction: column;
+
+    .btn {
+      width: 100%;
+    }
+  }
+
+  .form-field-inline {
+    flex-direction: column;
+    align-items: stretch;
+
+    .form-label {
+      min-width: auto;
+    }
+  }
+}
+
+// FORM VALIDATION
+.was-validated {
+  .form-input {
+    &:valid {
+      border-color: var(--form-success-color, #28a745);
+
+      &:focus {
+        border-color: var(--form-success-color, #28a745);
+        box-shadow: var(--form-success-focus-shadow, 0 0 0 0.2rem rgba(40, 167, 69, 0.25));
+      }
+    }
+
+    &:invalid {
+      border-color: var(--form-error-color, #dc3545);
+
+      &:focus {
+        border-color: var(--form-error-color, #dc3545);
+        box-shadow: var(--form-error-focus-shadow, 0 0 0 0.2rem rgba(220, 53, 69, 0.25));
+      }
+    }
+  }
+}
+
+// ACCESSIBILITY
+@media (prefers-reduced-motion: reduce) {
+  .form-input,
+  .form-checkbox,
+  .form-radio,
+  .form-floating .form-label {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .form-input,
+  .form-select,
+  .form-textarea {
+    border-width: 2px;
+  }
+
+  .form-checkbox,
+  .form-radio {
+    border-width: 3px;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/components/_base-navigation.scss
+++ b/projects/shared-ui/src/styles/commons/components/_base-navigation.scss
@@ -0,0 +1,519 @@
+// ==========================================================================
+// BASE NAVIGATION
+// ==========================================================================
+// Theme-agnostic navigation structures and behaviors
+// Visual styling handled by themes
+// ==========================================================================
+
+// NAVIGATION BASE
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  gap: var(--nav-gap, 8px);
+
+  &.nav-vertical {
+    flex-direction: column;
+  }
+
+  &.nav-horizontal {
+    flex-direction: row;
+  }
+
+  &.nav-fill {
+    .nav-item {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+  }
+
+  &.nav-justified {
+    .nav-item {
+      flex-basis: 0;
+      flex-grow: 1;
+      text-align: center;
+    }
+  }
+}
+
+.nav-item {
+  display: flex;
+}
+
+.nav-link {
+  display: block;
+  padding: var(--nav-link-padding, 8px 16px);
+  text-decoration: none;
+  border: var(--nav-link-border, 1px solid transparent);
+  border-radius: var(--nav-link-border-radius, 4px);
+  transition: all var(--nav-link-transition-duration, 0.2s) var(--nav-link-transition-easing, ease);
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus {
+    outline: var(--nav-link-focus-outline, 2px solid transparent);
+    outline-offset: var(--nav-link-focus-outline-offset, 2px);
+  }
+
+  &.nav-link-active {
+    // Active state styling handled by themes
+  }
+
+  &.nav-link-disabled {
+    pointer-events: none;
+    opacity: var(--nav-link-disabled-opacity, 0.6);
+    cursor: not-allowed;
+  }
+}
+
+// NAVIGATION TABS
+.nav-tabs {
+  border-bottom: var(--nav-tabs-border, 1px solid #dee2e6);
+
+  .nav-link {
+    margin-bottom: calc(var(--nav-tabs-border-width, 1px) * -1);
+    border: var(--nav-tabs-link-border, 1px solid transparent);
+    border-top-left-radius: var(--nav-tabs-border-radius, 4px);
+    border-top-right-radius: var(--nav-tabs-border-radius, 4px);
+    border-bottom: none;
+
+    &.nav-link-active {
+      border-bottom: var(--nav-tabs-active-border-bottom, 1px solid transparent);
+    }
+  }
+}
+
+// NAVIGATION PILLS
+.nav-pills {
+  .nav-link {
+    border-radius: var(--nav-pills-border-radius, 20px);
+  }
+}
+
+// NAVBAR
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--navbar-padding, 8px 16px);
+
+  &.navbar-expand {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+
+  &.navbar-fixed-top {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: var(--z-navbar, 1030);
+  }
+
+  &.navbar-fixed-bottom {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--z-navbar, 1030);
+  }
+
+  &.navbar-sticky-top {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-navbar, 1030);
+  }
+}
+
+.navbar-brand {
+  display: inline-block;
+  padding-top: var(--navbar-brand-padding-y, 4px);
+  padding-bottom: var(--navbar-brand-padding-y, 4px);
+  margin-right: var(--navbar-brand-margin-end, 16px);
+  font-size: var(--navbar-brand-font-size, 1.25rem);
+  font-weight: var(--navbar-brand-font-weight, 600);
+  line-height: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.navbar-collapse {
+  align-items: center;
+  width: 100%;
+  flex-basis: 100%;
+  flex-grow: 1;
+
+  &.navbar-collapse-show {
+    display: flex !important;
+  }
+}
+
+.navbar-toggler {
+  padding: var(--navbar-toggler-padding, 4px 8px);
+  font-size: var(--navbar-toggler-font-size, 1.25rem);
+  line-height: 1;
+  border: var(--navbar-toggler-border, 1px solid transparent);
+  border-radius: var(--navbar-toggler-border-radius, 4px);
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--navbar-toggler-transition-duration, 0.2s);
+
+  &:focus {
+    outline: var(--navbar-toggler-focus-outline, 2px solid transparent);
+    outline-offset: var(--navbar-toggler-focus-outline-offset, 2px);
+  }
+
+  &:not(:disabled):not(.disabled):hover {
+    text-decoration: none;
+  }
+}
+
+.navbar-toggler-icon {
+  display: inline-block;
+  width: var(--navbar-toggler-icon-size, 24px);
+  height: var(--navbar-toggler-icon-size, 24px);
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+// RESPONSIVE NAVBAR
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+
+    .navbar-nav {
+      flex-direction: row;
+
+      .nav-link {
+        padding-right: var(--navbar-nav-link-padding-x, 8px);
+        padding-left: var(--navbar-nav-link-padding-x, 8px);
+      }
+    }
+
+    .navbar-collapse {
+      display: flex !important;
+      flex-basis: auto;
+    }
+
+    .navbar-toggler {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-expand-md {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+
+    .navbar-nav {
+      flex-direction: row;
+
+      .nav-link {
+        padding-right: var(--navbar-nav-link-padding-x, 8px);
+        padding-left: var(--navbar-nav-link-padding-x, 8px);
+      }
+    }
+
+    .navbar-collapse {
+      display: flex !important;
+      flex-basis: auto;
+    }
+
+    .navbar-toggler {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .navbar-expand-lg {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+
+    .navbar-nav {
+      flex-direction: row;
+
+      .nav-link {
+        padding-right: var(--navbar-nav-link-padding-x, 8px);
+        padding-left: var(--navbar-nav-link-padding-x, 8px);
+      }
+    }
+
+    .navbar-collapse {
+      display: flex !important;
+      flex-basis: auto;
+    }
+
+    .navbar-toggler {
+      display: none;
+    }
+  }
+}
+
+// BREADCRUMB
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--breadcrumb-padding, 12px 0);
+  margin-bottom: var(--breadcrumb-margin-bottom, 16px);
+  list-style: none;
+  border-radius: var(--breadcrumb-border-radius, 4px);
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+
+  + .breadcrumb-item {
+    padding-left: var(--breadcrumb-divider-padding, 8px);
+
+    &::before {
+      content: var(--breadcrumb-divider, '/');
+      padding-right: var(--breadcrumb-divider-padding, 8px);
+      opacity: var(--breadcrumb-divider-opacity, 0.6);
+    }
+  }
+
+  &.breadcrumb-item-active {
+    opacity: var(--breadcrumb-active-opacity, 0.6);
+  }
+
+  .breadcrumb-link {
+    text-decoration: none;
+    transition: all var(--breadcrumb-link-transition-duration, 0.2s);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus {
+      outline: var(--breadcrumb-link-focus-outline, 2px solid transparent);
+      outline-offset: var(--breadcrumb-link-focus-outline-offset, 2px);
+    }
+  }
+}
+
+// PAGINATION
+.pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+  border-radius: var(--pagination-border-radius, 4px);
+  gap: var(--pagination-gap, 4px);
+}
+
+.pagination-item {
+  &.pagination-item-active .pagination-link {
+    z-index: 3;
+    // Active styling handled by themes
+  }
+
+  &.pagination-item-disabled .pagination-link {
+    pointer-events: none;
+    opacity: var(--pagination-disabled-opacity, 0.6);
+    cursor: not-allowed;
+  }
+}
+
+.pagination-link {
+  position: relative;
+  display: block;
+  padding: var(--pagination-link-padding, 8px 12px);
+  text-decoration: none;
+  border: var(--pagination-link-border, 1px solid #dee2e6);
+  border-radius: var(--pagination-link-border-radius, 4px);
+  transition: all var(--pagination-link-transition-duration, 0.2s) var(--pagination-link-transition-easing, ease);
+  min-width: var(--pagination-link-min-width, 44px);
+  text-align: center;
+
+  &:hover {
+    z-index: 2;
+    text-decoration: none;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: var(--pagination-link-focus-outline, 2px solid transparent);
+    outline-offset: var(--pagination-link-focus-outline-offset, 2px);
+  }
+}
+
+// PAGINATION SIZES
+.pagination-sm {
+  .pagination-link {
+    padding: var(--pagination-sm-padding, 4px 8px);
+    font-size: var(--pagination-sm-font-size, 0.875rem);
+    min-width: var(--pagination-sm-min-width, 32px);
+  }
+}
+
+.pagination-lg {
+  .pagination-link {
+    padding: var(--pagination-lg-padding, 12px 16px);
+    font-size: var(--pagination-lg-font-size, 1.125rem);
+    min-width: var(--pagination-lg-min-width, 52px);
+  }
+}
+
+// SIDEBAR NAVIGATION
+.nav-sidebar {
+  flex-direction: column;
+  width: 100%;
+
+  .nav-item {
+    width: 100%;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    padding: var(--nav-sidebar-link-padding, 12px 16px);
+    border-radius: var(--nav-sidebar-link-border-radius, 6px);
+    margin-bottom: var(--nav-sidebar-link-margin, 4px);
+    text-decoration: none;
+    transition: all var(--nav-sidebar-link-transition-duration, 0.2s);
+    position: relative;
+    gap: var(--nav-sidebar-link-gap, 12px);
+
+    .nav-icon {
+      width: var(--nav-sidebar-icon-size, 20px);
+      height: var(--nav-sidebar-icon-size, 20px);
+      flex-shrink: 0;
+    }
+
+    .nav-text {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .nav-badge {
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+
+    .nav-arrow {
+      margin-left: auto;
+      transition: transform var(--nav-sidebar-arrow-transition-duration, 0.2s);
+      flex-shrink: 0;
+    }
+
+    &.nav-link-expandable {
+      cursor: pointer;
+
+      &.nav-link-expanded .nav-arrow {
+        transform: rotate(180deg);
+      }
+    }
+
+    &.nav-link-active {
+      // Active styling handled by themes
+      
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: var(--nav-sidebar-active-indicator-width, 4px);
+        border-radius: var(--nav-sidebar-active-indicator-radius, 0 2px 2px 0);
+        // Color handled by themes
+      }
+    }
+  }
+
+  .nav-submenu {
+    margin-left: var(--nav-sidebar-submenu-indent, 32px);
+    margin-top: var(--nav-sidebar-submenu-margin, 4px);
+    padding-left: var(--nav-sidebar-submenu-padding, 16px);
+    border-left: var(--nav-sidebar-submenu-border, 1px solid rgba(0, 0, 0, 0.1));
+
+    .nav-link {
+      padding: var(--nav-sidebar-submenu-link-padding, 8px 12px);
+      font-size: var(--nav-sidebar-submenu-font-size, 0.875rem);
+    }
+  }
+}
+
+// MOBILE NAVIGATION
+@media (max-width: 768px) {
+  .nav-sidebar {
+    .nav-link {
+      padding: var(--nav-sidebar-mobile-padding, 16px);
+      font-size: var(--nav-sidebar-mobile-font-size, 1rem);
+    }
+  }
+
+  .navbar-collapse {
+    display: none;
+
+    &.navbar-collapse-show {
+      display: block !important;
+    }
+  }
+
+  .navbar-nav {
+    .nav-item {
+      margin: var(--navbar-mobile-item-margin, 4px 0);
+    }
+
+    .nav-link {
+      padding: var(--navbar-mobile-link-padding, 12px 16px);
+    }
+  }
+}
+
+// ACCESSIBILITY
+@media (prefers-reduced-motion: reduce) {
+  .nav-link,
+  .navbar-toggler,
+  .breadcrumb-link,
+  .pagination-link,
+  .nav-sidebar .nav-arrow {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .nav-link,
+  .navbar-toggler,
+  .pagination-link {
+    border-width: 2px;
+  }
+
+  .nav-link:focus,
+  .navbar-toggler:focus,
+  .breadcrumb-link:focus,
+  .pagination-link:focus {
+    outline-width: 3px;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/components/_index.scss
+++ b/projects/shared-ui/src/styles/commons/components/_index.scss
@@ -0,0 +1,12 @@
+// ==========================================================================
+// COMMONS COMPONENTS INDEX
+// ==========================================================================
+// Import all component-related commons files
+// Theme-agnostic component structures and behaviors
+// ==========================================================================
+
+@import 'base-buttons';
+@import 'base-cards';
+@import 'base-forms';
+@import 'base-navigation';
+@import 'utility-components';
--- a/projects/shared-ui/src/styles/commons/components/_utility-components.scss
+++ b/projects/shared-ui/src/styles/commons/components/_utility-components.scss
@@ -0,0 +1,532 @@
+// ==========================================================================
+// UTILITY COMPONENTS
+// ==========================================================================
+// Small, reusable utility components
+// Theme-agnostic structures and behaviors
+// ==========================================================================
+
+// BADGES
+.badge {
+  display: inline-block;
+  padding: var(--badge-padding, 4px 8px);
+  font-size: var(--badge-font-size, 0.75rem);
+  font-weight: var(--badge-font-weight, 500);
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--badge-border-radius, 4px);
+  transition: all var(--badge-transition-duration, 0.2s);
+
+  &.badge-pill {
+    padding: var(--badge-pill-padding, 4px 12px);
+    border-radius: var(--badge-pill-border-radius, 10em);
+  }
+
+  &.badge-dot {
+    width: var(--badge-dot-size, 8px);
+    height: var(--badge-dot-size, 8px);
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  &.badge-lg {
+    padding: var(--badge-lg-padding, 8px 12px);
+    font-size: var(--badge-lg-font-size, 0.875rem);
+  }
+
+  &.badge-sm {
+    padding: var(--badge-sm-padding, 2px 6px);
+    font-size: var(--badge-sm-font-size, 0.625rem);
+  }
+}
+
+// ALERTS
+.alert {
+  position: relative;
+  padding: var(--alert-padding, 16px 20px);
+  margin-bottom: var(--alert-margin-bottom, 16px);
+  border: var(--alert-border, 1px solid transparent);
+  border-radius: var(--alert-border-radius, 6px);
+
+  .alert-title {
+    margin: 0 0 var(--alert-title-margin, 8px) 0;
+    font-size: var(--alert-title-size, 1rem);
+    font-weight: var(--alert-title-weight, 600);
+  }
+
+  .alert-content {
+    margin: 0;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .alert-actions {
+    margin-top: var(--alert-actions-margin, 12px);
+    display: flex;
+    gap: var(--alert-actions-gap, 8px);
+  }
+
+  .alert-close {
+    position: absolute;
+    top: var(--alert-close-top, 12px);
+    right: var(--alert-close-right, 12px);
+    padding: var(--alert-close-padding, 4px);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: var(--alert-close-opacity, 0.7);
+    transition: opacity var(--alert-close-transition-duration, 0.2s);
+    width: var(--alert-close-size, 24px);
+    height: var(--alert-close-size, 24px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: var(--alert-close-focus-outline, 2px solid transparent);
+      outline-offset: var(--alert-close-focus-outline-offset, 2px);
+    }
+  }
+
+  &.alert-dismissible {
+    padding-right: var(--alert-dismissible-padding-right, 48px);
+  }
+}
+
+// TOOLTIPS (Structure only - positioning handled by JS)
+.tooltip {
+  position: absolute;
+  z-index: var(--z-tooltip, 1070);
+  display: block;
+  margin: var(--tooltip-margin, 0);
+  font-size: var(--tooltip-font-size, 0.875rem);
+  line-height: var(--tooltip-line-height, 1.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--tooltip-transition-duration, 0.2s);
+
+  &.tooltip-show {
+    opacity: 1;
+  }
+
+  .tooltip-arrow {
+    position: absolute;
+    display: block;
+    width: var(--tooltip-arrow-size, 8px);
+    height: var(--tooltip-arrow-size, 8px);
+  }
+
+  .tooltip-inner {
+    max-width: var(--tooltip-max-width, 200px);
+    padding: var(--tooltip-padding, 8px 12px);
+    text-align: center;
+    border-radius: var(--tooltip-border-radius, 4px);
+  }
+}
+
+// POPOVER (Structure only - positioning handled by JS)
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--z-popover, 1060);
+  display: block;
+  max-width: var(--popover-max-width, 276px);
+  font-size: var(--popover-font-size, 0.875rem);
+  line-height: var(--popover-line-height, 1.6);
+  word-wrap: break-word;
+  border: var(--popover-border, 1px solid rgba(0, 0, 0, 0.2));
+  border-radius: var(--popover-border-radius, 6px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--popover-transition-duration, 0.2s);
+
+  &.popover-show {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .popover-arrow {
+    position: absolute;
+    display: block;
+    width: var(--popover-arrow-size, 12px);
+    height: var(--popover-arrow-size, 12px);
+  }
+
+  .popover-header {
+    padding: var(--popover-header-padding, 12px 16px);
+    margin: 0;
+    font-size: var(--popover-header-font-size, 1rem);
+    font-weight: var(--popover-header-font-weight, 600);
+    border-bottom: var(--popover-header-border, 1px solid rgba(0, 0, 0, 0.1));
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .popover-body {
+    padding: var(--popover-body-padding, 16px);
+  }
+}
+
+// DROPDOWN
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-toggle {
+  &::after {
+    display: inline-block;
+    margin-left: var(--dropdown-caret-spacing, 8px);
+    vertical-align: middle;
+    content: '';
+    border-top: var(--dropdown-caret-size, 4px) solid;
+    border-right: var(--dropdown-caret-size, 4px) solid transparent;
+    border-bottom: 0;
+    border-left: var(--dropdown-caret-size, 4px) solid transparent;
+    transition: transform var(--dropdown-caret-transition-duration, 0.2s);
+  }
+
+  &[aria-expanded="true"]::after {
+    transform: rotate(180deg);
+  }
+
+  &.dropdown-toggle-no-caret::after {
+    display: none;
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--z-dropdown, 1000);
+  display: none;
+  float: left;
+  min-width: var(--dropdown-min-width, 160px);
+  padding: var(--dropdown-padding, 8px 0);
+  margin: var(--dropdown-margin, 2px 0 0);
+  font-size: var(--dropdown-font-size, 1rem);
+  text-align: left;
+  list-style: none;
+  border: var(--dropdown-border, 1px solid rgba(0, 0, 0, 0.15));
+  border-radius: var(--dropdown-border-radius, 6px);
+  box-shadow: var(--dropdown-box-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
+  background-clip: padding-box;
+
+  &.dropdown-menu-end {
+    right: 0;
+    left: auto;
+  }
+
+  &.dropdown-menu-show {
+    display: block;
+  }
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--dropdown-item-padding, 6px 20px);
+  clear: both;
+  font-weight: normal;
+  line-height: var(--dropdown-item-line-height, 1.5);
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--dropdown-item-transition-duration, 0.2s);
+
+  &:focus {
+    outline: var(--dropdown-item-focus-outline, 2px solid transparent);
+    outline-offset: var(--dropdown-item-focus-outline-offset, -2px);
+  }
+
+  &.dropdown-item-active {
+    // Active styling handled by themes
+  }
+
+  &.dropdown-item-disabled {
+    pointer-events: none;
+    opacity: var(--dropdown-item-disabled-opacity, 0.5);
+  }
+}
+
+.dropdown-divider {
+  height: 0;
+  margin: var(--dropdown-divider-margin, 4px 0);
+  overflow: hidden;
+  border-top: 1px solid var(--dropdown-divider-color, rgba(0, 0, 0, 0.15));
+}
+
+.dropdown-header {
+  display: block;
+  padding: var(--dropdown-header-padding, 4px 20px);
+  margin-bottom: 0;
+  font-size: var(--dropdown-header-font-size, 0.875rem);
+  font-weight: var(--dropdown-header-font-weight, 600);
+  line-height: var(--dropdown-header-line-height, 1.5);
+  white-space: nowrap;
+  opacity: var(--dropdown-header-opacity, 0.6);
+}
+
+// MODAL (Structure only - overlay/backdrop handled separately)
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-modal, 1050);
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--modal-transition-duration, 0.3s) var(--modal-transition-easing, ease);
+
+  &.modal-show {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: var(--modal-margin, 16px);
+  pointer-events: none;
+  transform: translateY(-50px);
+  transition: transform var(--modal-transition-duration, 0.3s) var(--modal-transition-easing, ease);
+
+  .modal-show & {
+    transform: translateY(0);
+  }
+
+  @media (min-width: 576px) {
+    max-width: var(--modal-sm-max-width, 500px);
+    margin: var(--modal-margin-sm, 32px auto);
+  }
+
+  &.modal-sm {
+    @media (min-width: 576px) {
+      max-width: var(--modal-sm-width, 300px);
+    }
+  }
+
+  &.modal-lg {
+    @media (min-width: 992px) {
+      max-width: var(--modal-lg-width, 800px);
+    }
+  }
+
+  &.modal-xl {
+    @media (min-width: 1200px) {
+      max-width: var(--modal-xl-width, 1140px);
+    }
+  }
+
+  &.modal-fullscreen {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+
+    .modal-content {
+      height: 100%;
+      border: 0;
+      border-radius: 0;
+    }
+  }
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-clip: padding-box;
+  border: var(--modal-content-border, 1px solid rgba(0, 0, 0, 0.2));
+  border-radius: var(--modal-content-border-radius, 6px);
+  outline: 0;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-modal-backdrop, 1040);
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.5));
+  opacity: 0;
+  transition: opacity var(--modal-backdrop-transition-duration, 0.15s) linear;
+
+  &.modal-backdrop-show {
+    opacity: 1;
+  }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--modal-header-padding, 16px 24px);
+  border-bottom: var(--modal-header-border, 1px solid rgba(0, 0, 0, 0.125));
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+
+  .modal-title {
+    margin: 0;
+    line-height: var(--modal-title-line-height, 1.5);
+    font-size: var(--modal-title-font-size, 1.25rem);
+    font-weight: var(--modal-title-font-weight, 600);
+  }
+}
+
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--modal-body-padding, 24px);
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--modal-footer-gap, 8px);
+  padding: var(--modal-footer-padding, 16px 24px);
+  border-top: var(--modal-footer-border, 1px solid rgba(0, 0, 0, 0.125));
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+  &.modal-footer-center {
+    justify-content: center;
+  }
+
+  &.modal-footer-between {
+    justify-content: space-between;
+  }
+}
+
+// ACCORDION
+.accordion {
+  border-radius: var(--accordion-border-radius, 6px);
+  overflow: hidden;
+}
+
+.accordion-item {
+  border: var(--accordion-item-border, 1px solid rgba(0, 0, 0, 0.125));
+
+  &:not(:first-child) {
+    border-top: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: var(--accordion-border-radius, 6px);
+    border-top-right-radius: var(--accordion-border-radius, 6px);
+  }
+
+  &:last-child {
+    border-bottom-left-radius: var(--accordion-border-radius, 6px);
+    border-bottom-right-radius: var(--accordion-border-radius, 6px);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--accordion-button-padding, 16px 20px);
+  font-size: var(--accordion-button-font-size, 1rem);
+  font-weight: var(--accordion-button-font-weight, 500);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  overflow-anchor: none;
+  transition: all var(--accordion-button-transition-duration, 0.2s) var(--accordion-button-transition-easing, ease);
+  cursor: pointer;
+
+  &:focus {
+    z-index: 3;
+    outline: var(--accordion-button-focus-outline, 2px solid transparent);
+    outline-offset: var(--accordion-button-focus-outline-offset, -2px);
+  }
+
+  &::after {
+    flex-shrink: 0;
+    width: var(--accordion-icon-size, 16px);
+    height: var(--accordion-icon-size, 16px);
+    margin-left: auto;
+    content: '';
+    background-image: var(--accordion-button-icon, url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"));
+    background-repeat: no-repeat;
+    background-size: var(--accordion-icon-size, 16px);
+    transition: transform var(--accordion-icon-transition-duration, 0.2s) var(--accordion-icon-transition-easing, ease);
+  }
+
+  &:not(.accordion-button-collapsed)::after {
+    transform: rotate(180deg);
+  }
+}
+
+.accordion-collapse {
+  overflow: hidden;
+  transition: height var(--accordion-collapse-transition-duration, 0.3s) var(--accordion-collapse-transition-easing, ease);
+}
+
+.accordion-body {
+  padding: var(--accordion-body-padding, 16px 20px);
+}
+
+// ACCESSIBILITY
+@media (prefers-reduced-motion: reduce) {
+  .alert-close,
+  .tooltip,
+  .popover,
+  .dropdown-toggle::after,
+  .modal,
+  .modal-dialog,
+  .modal-backdrop,
+  .accordion-button,
+  .accordion-button::after,
+  .accordion-collapse {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .alert,
+  .popover,
+  .dropdown-menu,
+  .modal-content,
+  .accordion-item {
+    border-width: 2px;
+  }
+
+  .alert-close:focus,
+  .dropdown-item:focus,
+  .accordion-button:focus {
+    outline-width: 3px;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/index.scss
+++ b/projects/shared-ui/src/styles/commons/index.scss
@@ -0,0 +1,11 @@
+// ==========================================================================
+// COMMONS INDEX
+// ==========================================================================
+// Import all commons modules in the correct order
+// Theme-agnostic styles that work across all themes
+// ==========================================================================
+
+@import 'layouts';
+@import 'components';
+@import 'patterns';
+@import 'utilities';
--- a/projects/shared-ui/src/styles/commons/layouts/_content-containers.scss
+++ b/projects/shared-ui/src/styles/commons/layouts/_content-containers.scss
@@ -0,0 +1,319 @@
+// ==========================================================================
+// CONTENT CONTAINERS
+// ==========================================================================
+// Theme-agnostic content container structures
+// Focus on layout, spacing, and behavior - not visual styling
+// ==========================================================================
+
+// PAGE CONTAINERS
+.page-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  &.page-centered {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.page-top-aligned {
+    justify-content: flex-start;
+  }
+}
+
+.page-header {
+  flex-shrink: 0;
+  position: relative;
+  z-index: var(--z-page-header, 50);
+
+  &.page-header-sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  &.page-header-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.page-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.page-footer {
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+// MAIN CONTENT AREAS
+.main-content {
+  flex: 1;
+  width: 100%;
+  max-width: var(--content-max-width, none);
+  margin: 0 auto;
+  padding: var(--content-padding, 24px);
+
+  &.main-content-narrow {
+    max-width: var(--content-max-width-narrow, 768px);
+  }
+
+  &.main-content-wide {
+    max-width: var(--content-max-width-wide, 1400px);
+  }
+
+  &.main-content-full {
+    max-width: none;
+    padding: 0;
+  }
+}
+
+// CONTENT SECTIONS
+.content-section {
+  margin-bottom: var(--section-spacing, 48px);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.content-section-compact {
+    margin-bottom: var(--section-spacing-compact, 24px);
+  }
+
+  &.content-section-spacious {
+    margin-bottom: var(--section-spacing-spacious, 72px);
+  }
+}
+
+.section-header {
+  margin-bottom: var(--section-header-spacing, 24px);
+
+  .section-title {
+    margin: 0 0 var(--section-title-spacing, 8px) 0;
+    font-size: var(--section-title-size, 1.5rem);
+    font-weight: var(--section-title-weight, 600);
+  }
+
+  .section-subtitle {
+    margin: 0;
+    opacity: 0.7;
+  }
+
+  .section-actions {
+    margin-top: var(--section-actions-spacing, 16px);
+  }
+}
+
+.section-content {
+  position: relative;
+}
+
+// ARTICLE CONTAINERS
+.article-container {
+  max-width: var(--article-max-width, 65ch);
+  margin: 0 auto;
+  padding: var(--article-padding, 24px);
+
+  .article-header {
+    margin-bottom: var(--article-header-spacing, 32px);
+    text-align: center;
+
+    .article-title {
+      margin: 0 0 var(--article-title-spacing, 16px) 0;
+      font-size: var(--article-title-size, 2rem);
+      font-weight: var(--article-title-weight, 700);
+    }
+
+    .article-meta {
+      margin-bottom: var(--article-meta-spacing, 24px);
+      opacity: 0.7;
+    }
+  }
+
+  .article-content {
+    line-height: var(--article-line-height, 1.6);
+
+    > * + * {
+      margin-top: var(--article-element-spacing, 1.5em);
+    }
+  }
+
+  .article-footer {
+    margin-top: var(--article-footer-spacing, 48px);
+    padding-top: var(--article-footer-padding, 24px);
+    border-top: 1px solid var(--border-color, #e5e5e5);
+  }
+}
+
+// SIDEBAR CONTAINERS
+.content-with-sidebar {
+  display: flex;
+  gap: var(--sidebar-gap, 32px);
+  align-items: flex-start;
+
+  .main-column {
+    flex: 1;
+    min-width: 0; // Prevents flex item overflow
+  }
+
+  .sidebar-column {
+    flex-shrink: 0;
+    width: var(--sidebar-width, 300px);
+  }
+
+  &.sidebar-left {
+    flex-direction: row;
+  }
+
+  &.sidebar-right {
+    flex-direction: row-reverse;
+  }
+}
+
+@media (max-width: 768px) {
+  .content-with-sidebar {
+    flex-direction: column;
+    gap: var(--sidebar-gap-mobile, 24px);
+
+    .sidebar-column {
+      width: 100%;
+    }
+
+    &.sidebar-right {
+      flex-direction: column;
+    }
+  }
+}
+
+// CARD CONTAINERS
+.card-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  word-wrap: break-word;
+  background-clip: border-box;
+
+  .card-header {
+    flex-shrink: 0;
+    padding: var(--card-header-padding, 16px 24px);
+    border-bottom: 1px solid var(--border-color, transparent);
+
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    &.card-header-borderless {
+      border-bottom: none;
+    }
+  }
+
+  .card-body {
+    flex: 1;
+    padding: var(--card-body-padding, 24px);
+
+    &.card-body-compact {
+      padding: var(--card-body-padding-compact, 16px);
+    }
+
+    &.card-body-spacious {
+      padding: var(--card-body-padding-spacious, 32px);
+    }
+  }
+
+  .card-footer {
+    flex-shrink: 0;
+    padding: var(--card-footer-padding, 16px 24px);
+    border-top: 1px solid var(--border-color, transparent);
+
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+
+    &.card-footer-borderless {
+      border-top: none;
+    }
+  }
+}
+
+// SPLIT CONTAINERS
+.split-container {
+  display: flex;
+  min-height: 0; // Allows flex children to shrink
+
+  &.split-horizontal {
+    flex-direction: row;
+  }
+
+  &.split-vertical {
+    flex-direction: column;
+  }
+
+  .split-pane {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+  }
+
+  .split-resizer {
+    flex-shrink: 0;
+    background: var(--resizer-background, transparent);
+    position: relative;
+    z-index: var(--z-resizer, 10);
+
+    &.split-resizer-horizontal {
+      width: var(--resizer-size, 4px);
+      cursor: ew-resize;
+    }
+
+    &.split-resizer-vertical {
+      height: var(--resizer-size, 4px);
+      cursor: ns-resize;
+    }
+
+    &:hover {
+      background: var(--resizer-background-hover, rgba(0, 0, 0, 0.1));
+    }
+  }
+}
+
+// SCROLLABLE CONTAINERS
+.scrollable {
+  overflow: auto;
+
+  &.scrollable-x {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &.scrollable-y {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  &.scrollable-hidden {
+    overflow: hidden;
+  }
+}
+
+// CENTERED CONTAINERS
+.centered-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--centered-min-height, 400px);
+
+  &.centered-full-height {
+    min-height: 100vh;
+  }
+
+  &.centered-content {
+    text-align: center;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/layouts/_dashboard-layouts.scss
+++ b/projects/shared-ui/src/styles/commons/layouts/_dashboard-layouts.scss
@@ -0,0 +1,323 @@
+// ==========================================================================
+// DASHBOARD LAYOUTS
+// ==========================================================================
+// Theme-agnostic dashboard layout structures
+// Visual styling handled by themes
+// ==========================================================================
+
+@use '../../semantic' as semantic;
+
+// DASHBOARD CONTAINER
+.dashboard-container {
+  display: grid;
+  grid-template-areas: 
+    "sidebar header"
+    "sidebar content";
+  grid-template-columns: var(--sidebar-width, #{semantic.$semantic-sizing-sidebar-expanded}) 1fr;
+  grid-template-rows: var(--header-height, #{semantic.$semantic-sizing-navbar-height}) 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+// DASHBOARD HEADER
+.dashboard-header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--header-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
+  z-index: var(--z-header, 100);
+  position: relative;
+
+  .header-title {
+    font-size: var(--header-title-size, 1.25rem);
+    font-weight: var(--header-title-weight, 600);
+    margin: 0;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--header-actions-gap, #{semantic.$semantic-spacing-component-padding-md});
+  }
+}
+
+// DASHBOARD SIDEBAR
+.dashboard-sidebar {
+  grid-area: sidebar;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  z-index: var(--z-sidebar, 90);
+  position: relative;
+
+  .sidebar-header {
+    padding: var(--sidebar-header-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
+    flex-shrink: 0;
+  }
+
+  .sidebar-nav {
+    flex: 1;
+    padding: 0 var(--sidebar-nav-padding, #{semantic.$semantic-spacing-component-padding-md});
+    overflow-y: auto;
+  }
+
+  .sidebar-footer {
+    padding: var(--sidebar-footer-padding, #{semantic.$semantic-spacing-component-padding-md});
+    flex-shrink: 0;
+  }
+
+  // Sidebar state classes
+  &.sidebar-is-collapsed {
+    width: var(--sidebar-width-collapsed, #{semantic.$semantic-sizing-sidebar-collapsed});
+    
+    .sidebar-text,
+    .sidebar-nav-text {
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--transition-duration, 0.2s) var(--transition-easing, ease);
+    }
+
+    .sidebar-nav-item {
+      justify-content: center;
+      padding: #{semantic.$semantic-spacing-component-padding-sm};
+    }
+  }
+
+  &.sidebar-overlay-mode {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--sidebar-width, #{semantic.$semantic-sizing-sidebar-expanded});
+    z-index: var(--z-sidebar-overlay, 1000);
+    transform: translateX(-100%);
+    transition: transform var(--transition-duration, 0.3s) var(--transition-easing, ease);
+
+    &.sidebar-open {
+      transform: translateX(0);
+    }
+  }
+
+  &.sidebar-fixed-position {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+// DASHBOARD CONTENT
+.dashboard-content {
+  grid-area: content;
+  overflow-y: auto;
+  padding: var(--content-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
+  position: relative;
+
+  &.dashboard-content-full {
+    padding: 0;
+  }
+
+  &.dashboard-content-constrained {
+    max-width: var(--content-max-width, #{semantic.$semantic-sizing-content-wide});
+    margin: 0 auto;
+  }
+
+  // Content state classes
+  &.content-with-padding {
+    padding: var(--content-padding, #{semantic.$semantic-spacing-container-card-padding-lg});
+  }
+
+  &.content-is-scrollable {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: calc(100vh - var(--header-height, #{semantic.$semantic-sizing-navbar-height}));
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);
+
+    // Webkit scrollbar styling
+    &::-webkit-scrollbar {
+      width: #{$base-spacing-2}; // 8px
+      height: #{$base-spacing-2};
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--scrollbar-track, transparent);
+      border-radius: #{$base-border-radius-sm};
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
+      border-radius: #{$base-border-radius-sm};
+      border: 1px solid var(--scrollbar-thumb-border, transparent);
+
+      &:hover {
+        background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
+      }
+
+      &:active {
+        background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
+      }
+    }
+
+    // Invisible scrollbar variant
+    &.scrollbar-invisible {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &.content-is-centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &.content-has-breadcrumbs {
+    .content-breadcrumbs {
+      margin-bottom: #{semantic.$semantic-spacing-content-paragraph};
+      padding-bottom: #{semantic.$semantic-spacing-component-padding-sm};
+      border-bottom: #{semantic.$semantic-border-divider-width} solid var(--content-breadcrumb-border, transparent);
+    }
+  }
+
+  // Content header styling
+  .content-header {
+    margin-bottom: #{semantic.$semantic-spacing-layout-section-sm};
+
+    .content-title {
+      font-size: var(--content-title-size, 2rem);
+      font-weight: var(--content-title-weight, 600);
+      margin: 0 0 #{semantic.$semantic-spacing-component-padding-sm} 0;
+      line-height: var(--content-title-line-height, 1.2);
+    }
+
+    .content-subtitle {
+      font-size: var(--content-subtitle-size, 1.125rem);
+      color: var(--content-subtitle-color, rgba(0, 0, 0, 0.6));
+      margin: 0;
+      line-height: var(--content-subtitle-line-height, 1.4);
+    }
+  }
+
+  // Content actions styling
+  .content-actions {
+    margin-top: #{semantic.$semantic-spacing-layout-section-sm};
+    padding-top: #{semantic.$semantic-spacing-component-padding-md};
+    border-top: #{semantic.$semantic-border-divider-width} solid var(--content-actions-border, transparent);
+    display: flex;
+    gap: #{semantic.$semantic-spacing-component-padding-sm};
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
+
+// COLLAPSIBLE SIDEBAR VARIANT
+.dashboard-container.sidebar-collapsed {
+  grid-template-columns: var(--sidebar-width-collapsed, 72px) 1fr;
+
+  .dashboard-sidebar {
+    .sidebar-text {
+      display: none;
+    }
+  }
+}
+
+// RESPONSIVE DASHBOARD
+@media (max-width: 768px) {
+  .dashboard-container {
+    grid-template-areas: 
+      "header"
+      "content";
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--header-height, 64px) 1fr;
+  }
+
+  .dashboard-sidebar {
+    position: fixed;
+    top: var(--header-height, 64px);
+    left: 0;
+    bottom: 0;
+    width: var(--sidebar-width, 280px);
+    transform: translateX(-100%);
+    transition: transform var(--transition-duration, 0.3s) var(--transition-easing, ease);
+    z-index: var(--z-sidebar-mobile, 1000);
+
+    &.sidebar-open {
+      transform: translateX(0);
+    }
+  }
+
+  .dashboard-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-duration, 0.3s) var(--transition-easing, ease);
+    z-index: var(--z-overlay, 999);
+    pointer-events: none;
+
+    &.overlay-active {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: all;
+    }
+  }
+}
+
+// DASHBOARD GRID LAYOUTS
+.dashboard-grid {
+  display: grid;
+  gap: var(--dashboard-grid-gap, 24px);
+  
+  &.grid-2-cols {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  &.grid-3-cols {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  &.grid-4-cols {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &.grid-auto-fill {
+    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width, 300px), 1fr));
+  }
+
+  &.grid-auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-width, 300px), 1fr));
+  }
+}
+
+// RESPONSIVE GRID
+@media (max-width: 1200px) {
+  .dashboard-grid.grid-4-cols {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .dashboard-grid.grid-3-cols,
+  .dashboard-grid.grid-4-cols {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .dashboard-grid.grid-2-cols,
+  .dashboard-grid.grid-3-cols,
+  .dashboard-grid.grid-4-cols {
+    grid-template-columns: 1fr;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/layouts/_grid-systems.scss
+++ b/projects/shared-ui/src/styles/commons/layouts/_grid-systems.scss
@@ -0,0 +1,304 @@
+// ==========================================================================
+// GRID SYSTEMS
+// ==========================================================================
+// Flexible grid system supporting 12-column, CSS Grid, and Flexbox layouts
+// Theme-agnostic structural definitions
+// ==========================================================================
+
+// CSS VARIABLES - Using base design tokens
+:root {
+  --grid-columns: 12;
+  --grid-gap: #{$base-spacing-6};        // 24px -> 1.5rem
+  --grid-gap-sm: #{$base-spacing-4};     // 16px -> 1rem
+  --grid-gap-lg: #{$base-spacing-8};     // 32px -> 2rem
+  --grid-max-width: #{$base-sizing-max-width-screen-xl}; // 1280px
+  --grid-padding: #{$base-spacing-6};    // 24px -> 1.5rem
+}
+
+// CONTAINER SYSTEM
+.container {
+  width: 100%;
+  max-width: var(--grid-max-width);
+  margin: 0 auto;
+  padding: 0 var(--grid-padding);
+
+  &.container-fluid {
+    max-width: none;
+  }
+
+  &.container-sm {
+    max-width: #{$base-breakpoint-sm};
+  }
+
+  &.container-md {
+    max-width: #{$base-breakpoint-md};
+  }
+
+  &.container-lg {
+    max-width: #{$base-breakpoint-lg};
+  }
+
+  &.container-xl {
+    max-width: #{$base-breakpoint-xl};
+  }
+
+  &.container-xxl {
+    max-width: #{$base-breakpoint-2xl};
+  }
+
+  // Container state classes
+  &.container-is-fluid {
+    max-width: none;
+    width: 100%;
+  }
+
+  &.container-no-gutters {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.container-max-sm,
+  &.container-max-md,
+  &.container-max-lg,
+  &.container-max-xl,
+  &.container-max-xxl {
+    // These classes are applied dynamically by the component
+    // and use the existing container-* classes above
+  }
+}
+
+// FLEXBOX GRID SYSTEM
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(var(--grid-gap) / -2);
+
+  &.row-no-gutters {
+    margin: 0;
+    
+    > .col,
+    > [class*="col-"] {
+      padding: 0;
+    }
+  }
+
+  &.row-gap-sm {
+    margin: calc(var(--grid-gap-sm) / -2);
+  }
+
+  &.row-gap-lg {
+    margin: calc(var(--grid-gap-lg) / -2);
+  }
+
+  // Row state classes from components
+  &.row-without-gutters {
+    margin: 0;
+    
+    > .col,
+    > [class*="col-"] {
+      padding: 0;
+    }
+  }
+
+  &.row-justify-start { justify-content: flex-start; }
+  &.row-justify-center { justify-content: center; }
+  &.row-justify-end { justify-content: flex-end; }
+  &.row-justify-around { justify-content: space-around; }
+  &.row-justify-between { justify-content: space-between; }
+  &.row-justify-evenly { justify-content: space-evenly; }
+
+  &.row-align-start { align-items: flex-start; }
+  &.row-align-center { align-items: center; }
+  &.row-align-end { align-items: flex-end; }
+  &.row-align-stretch { align-items: stretch; }
+  &.row-align-baseline { align-items: baseline; }
+}
+
+.col {
+  flex: 1 0 0%;
+  padding: calc(var(--grid-gap) / 2);
+}
+
+// RESPONSIVE COLUMNS
+@for $i from 1 through 12 {
+  .col-#{$i} {
+    flex: 0 0 auto;
+    width: percentage($i / 12);
+    padding: calc(var(--grid-gap) / 2);
+  }
+}
+
+// BREAKPOINT-SPECIFIC COLUMNS
+@media (min-width: 576px) {
+  @for $i from 1 through 12 {
+    .col-sm-#{$i} {
+      flex: 0 0 auto;
+      width: percentage($i / 12);
+    }
+  }
+  .col-sm {
+    flex: 1 0 0%;
+  }
+}
+
+@media (min-width: 768px) {
+  @for $i from 1 through 12 {
+    .col-md-#{$i} {
+      flex: 0 0 auto;
+      width: percentage($i / 12);
+    }
+  }
+  .col-md {
+    flex: 1 0 0%;
+  }
+}
+
+@media (min-width: 992px) {
+  @for $i from 1 through 12 {
+    .col-lg-#{$i} {
+      flex: 0 0 auto;
+      width: percentage($i / 12);
+    }
+  }
+  .col-lg {
+    flex: 1 0 0%;
+  }
+}
+
+@media (min-width: 1200px) {
+  @for $i from 1 through 12 {
+    .col-xl-#{$i} {
+      flex: 0 0 auto;
+      width: percentage($i / 12);
+    }
+  }
+  .col-xl {
+    flex: 1 0 0%;
+  }
+}
+
+// CSS GRID SYSTEM
+.grid {
+  display: grid;
+  gap: var(--grid-gap);
+
+  &.grid-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  &.grid-auto {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+
+  &.grid-auto-fill {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+}
+
+// GRID SPANS
+@for $i from 1 through 12 {
+  .span-#{$i} {
+    grid-column: span #{$i};
+  }
+}
+
+// GRID POSITIONING
+@for $i from 1 through 12 {
+  .col-start-#{$i} {
+    grid-column-start: #{$i};
+  }
+  
+  .col-end-#{$i} {
+    grid-column-end: #{$i};
+  }
+  
+  .row-start-#{$i} {
+    grid-row-start: #{$i};
+  }
+  
+  .row-end-#{$i} {
+    grid-row-end: #{$i};
+  }
+}
+
+// RESPONSIVE GRID SPANS
+@media (min-width: 576px) {
+  @for $i from 1 through 12 {
+    .span-sm-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  @for $i from 1 through 12 {
+    .span-md-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  @for $i from 1 through 12 {
+    .span-lg-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  @for $i from 1 through 12 {
+    .span-xl-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+}
+
+// ALIGNMENT UTILITIES
+.justify-start { justify-content: start; }
+.justify-end { justify-content: end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+.align-start { align-content: start; }
+.align-end { align-content: end; }
+.align-center { align-content: center; }
+.align-between { align-content: space-between; }
+.align-around { align-content: space-around; }
+.align-evenly { align-content: space-evenly; }
+
+.items-start { align-items: start; }
+.items-end { align-items: end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
+
+.self-start { align-self: start; }
+.self-end { align-self: end; }
+.self-center { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch { align-self: stretch; }
+
+// RESPONSIVE CONTAINERS
+@media (max-width: 575px) {
+  .container {
+    padding: 0 16px;
+  }
+}
+
+@media (max-width: 767px) {
+  .row {
+    margin: calc(var(--grid-gap-sm) / -2);
+  }
+  
+  .col,
+  [class*="col-"] {
+    padding: calc(var(--grid-gap-sm) / 2);
+  }
+  
+  .grid {
+    gap: var(--grid-gap-sm);
+  }
+}
--- a/projects/shared-ui/src/styles/commons/layouts/_index.scss
+++ b/projects/shared-ui/src/styles/commons/layouts/_index.scss
@@ -0,0 +1,13 @@
+// ==========================================================================
+// COMMONS LAYOUTS INDEX
+// ==========================================================================
+// Import all layout-related commons files
+// Theme-agnostic structural definitions
+// ==========================================================================
+
+@import 'dashboard-layouts';
+@import 'grid-systems';
+@import 'content-containers';
+@import 'page-templates';
+@import 'responsive-layouts';
+@import 'layout-system';
--- a/projects/shared-ui/src/styles/commons/layouts/_layout-system.scss
+++ b/projects/shared-ui/src/styles/commons/layouts/_layout-system.scss
@@ -0,0 +1,187 @@
+// ==========================================================================
+// LAYOUT SYSTEM
+// ==========================================================================
+// Core layout utilities and patterns for the application shell
+// ==========================================================================
+
+// Layout variables
+:root {
+  --header-height: 64px;
+  --sidenav-width-expanded: 240px;
+  --sidenav-width-rail: 64px;
+  --sidenav-width-hidden: 0px;
+}
+
+// ==========================================================================
+// LAYOUT CONTAINERS
+// ==========================================================================
+
+.layout-container {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--header-height);
+  z-index: 1000;
+  background-color: var(--surface-elevated, #ffffff);
+  border-bottom: 1px solid var(--border-secondary, #e5e5e5);
+}
+
+.layout-body {
+  flex: 1;
+  display: flex;
+  margin-top: var(--header-height);
+  overflow: hidden;
+}
+
+.layout-sidebar {
+  flex-shrink: 0;
+  height: 100%;
+  background-color: var(--surface-elevated, #ffffff);
+  border-right: 1px solid var(--border-secondary, #e5e5e5);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &.sidebar-expanded {
+    width: var(--sidenav-width-expanded);
+  }
+  
+  &.sidebar-rail {
+    width: var(--sidenav-width-rail);
+  }
+  
+  &.sidebar-hidden {
+    width: var(--sidenav-width-hidden);
+  }
+}
+
+.layout-main {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-content {
+  flex: 1;
+  overflow: auto;
+  padding: 1.5rem;
+  background-color: var(--surface-primary, #fafafa);
+}
+
+// ==========================================================================
+// RESPONSIVE LAYOUT UTILITIES
+// ==========================================================================
+
+@media (max-width: 768px) {
+  .layout-sidebar {
+    position: fixed;
+    top: var(--header-height);
+    left: 0;
+    height: calc(100vh - var(--header-height));
+    z-index: 900;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &.sidebar-visible {
+      transform: translateX(0);
+      width: 280px;
+      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+    }
+  }
+  
+  .layout-main {
+    margin-left: 0 !important;
+  }
+  
+  .layout-content {
+    padding: 1rem;
+  }
+}
+
+// ==========================================================================
+// LAYOUT STATE UTILITIES
+// ==========================================================================
+
+.layout-no-scroll {
+  overflow: hidden;
+}
+
+.layout-with-sidebar-expanded .layout-main {
+  margin-left: var(--sidenav-width-expanded);
+}
+
+.layout-with-sidebar-rail .layout-main {
+  margin-left: var(--sidenav-width-rail);
+}
+
+.layout-with-sidebar-hidden .layout-main {
+  margin-left: var(--sidenav-width-hidden);
+}
+
+// ==========================================================================
+// LAYOUT ANIMATIONS
+// ==========================================================================
+
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutToLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.layout-animation-enter {
+  animation: slideInFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.layout-animation-leave {
+  animation: slideOutToLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+// ==========================================================================
+// LAYOUT FOCUS MANAGEMENT
+// ==========================================================================
+
+.layout-focus-trap {
+  position: relative;
+}
+
+.layout-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 800;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease-in-out;
+  
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/layouts/_page-templates.scss
+++ b/projects/shared-ui/src/styles/commons/layouts/_page-templates.scss
@@ -0,0 +1,352 @@
+// ==========================================================================
+// PAGE TEMPLATES
+// ==========================================================================
+// Common page layout templates for different application pages
+// Structural definitions without visual theming
+// ==========================================================================
+
+// LANDING PAGE TEMPLATE
+.landing-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  .landing-hero {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--hero-min-height, 60vh);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+
+    .hero-content {
+      max-width: var(--hero-content-max-width, 800px);
+      padding: var(--hero-content-padding, 48px 24px);
+      z-index: 2;
+      position: relative;
+    }
+
+    .hero-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+  }
+
+  .landing-features {
+    flex-shrink: 0;
+    padding: var(--features-padding, 80px 24px);
+
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: var(--features-gap, 48px);
+      max-width: var(--features-max-width, 1200px);
+      margin: 0 auto;
+    }
+  }
+
+  .landing-cta {
+    flex-shrink: 0;
+    text-align: center;
+    padding: var(--cta-padding, 80px 24px);
+  }
+}
+
+// DASHBOARD PAGE TEMPLATE
+.dashboard-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .dashboard-nav {
+    flex-shrink: 0;
+    z-index: var(--z-nav, 100);
+  }
+
+  .dashboard-body {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .dashboard-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+// PROFILE PAGE TEMPLATE
+.profile-page {
+  max-width: var(--profile-max-width, 1000px);
+  margin: 0 auto;
+  padding: var(--profile-padding, 24px);
+
+  .profile-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--profile-header-gap, 24px);
+    margin-bottom: var(--profile-header-spacing, 48px);
+
+    .profile-avatar {
+      flex-shrink: 0;
+      width: var(--profile-avatar-size, 120px);
+      height: var(--profile-avatar-size, 120px);
+      border-radius: var(--profile-avatar-radius, 50%);
+      overflow: hidden;
+    }
+
+    .profile-info {
+      flex: 1;
+      min-width: 0;
+
+      .profile-name {
+        margin: 0 0 var(--profile-name-spacing, 8px) 0;
+        font-size: var(--profile-name-size, 2rem);
+        font-weight: var(--profile-name-weight, 600);
+      }
+
+      .profile-bio {
+        margin: 0 0 var(--profile-bio-spacing, 16px) 0;
+        opacity: 0.7;
+      }
+
+      .profile-actions {
+        display: flex;
+        gap: var(--profile-actions-gap, 12px);
+        flex-wrap: wrap;
+      }
+    }
+  }
+
+  .profile-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: var(--profile-content-gap, 48px);
+    align-items: flex-start;
+
+    .profile-main {
+      min-width: 0;
+    }
+
+    .profile-sidebar {
+      min-width: 0;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .profile-page {
+    .profile-header {
+      flex-direction: column;
+      text-align: center;
+
+      .profile-info {
+        text-align: center;
+      }
+    }
+
+    .profile-content {
+      grid-template-columns: 1fr;
+      gap: var(--profile-content-gap-mobile, 32px);
+    }
+  }
+}
+
+// SETTINGS PAGE TEMPLATE
+.settings-page {
+  max-width: var(--settings-max-width, 800px);
+  margin: 0 auto;
+  padding: var(--settings-padding, 24px);
+
+  .settings-nav {
+    margin-bottom: var(--settings-nav-spacing, 32px);
+
+    .nav-tabs {
+      display: flex;
+      gap: var(--nav-tabs-gap, 24px);
+      border-bottom: 1px solid var(--border-color, #e5e5e5);
+
+      .nav-tab {
+        padding: var(--nav-tab-padding, 12px 0);
+        border-bottom: 2px solid transparent;
+        cursor: pointer;
+        transition: all var(--transition-duration, 0.2s);
+
+        &.nav-tab-active {
+          border-bottom-color: var(--primary-color, #007bff);
+        }
+      }
+    }
+  }
+
+  .settings-content {
+    .settings-section {
+      margin-bottom: var(--settings-section-spacing, 48px);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .section-title {
+        margin: 0 0 var(--section-title-spacing, 24px) 0;
+        font-size: var(--section-title-size, 1.25rem);
+        font-weight: var(--section-title-weight, 600);
+      }
+
+      .section-description {
+        margin: 0 0 var(--section-description-spacing, 24px) 0;
+        opacity: 0.7;
+      }
+
+      .setting-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: var(--setting-item-padding, 16px 0);
+        border-bottom: 1px solid var(--border-color-light, #f0f0f0);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .setting-info {
+          flex: 1;
+          margin-right: var(--setting-info-spacing, 24px);
+
+          .setting-label {
+            margin: 0 0 var(--setting-label-spacing, 4px) 0;
+            font-weight: var(--setting-label-weight, 500);
+          }
+
+          .setting-description {
+            margin: 0;
+            opacity: 0.7;
+            font-size: var(--setting-description-size, 0.875rem);
+          }
+        }
+
+        .setting-control {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+}
+
+// ERROR PAGE TEMPLATE
+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  text-align: center;
+  padding: var(--error-page-padding, 24px);
+
+  .error-content {
+    max-width: var(--error-content-max-width, 600px);
+
+    .error-code {
+      font-size: var(--error-code-size, 6rem);
+      font-weight: var(--error-code-weight, 700);
+      line-height: 1;
+      margin: 0 0 var(--error-code-spacing, 24px) 0;
+    }
+
+    .error-title {
+      font-size: var(--error-title-size, 2rem);
+      font-weight: var(--error-title-weight, 600);
+      margin: 0 0 var(--error-title-spacing, 16px) 0;
+    }
+
+    .error-message {
+      margin: 0 0 var(--error-message-spacing, 32px) 0;
+      opacity: 0.7;
+    }
+
+    .error-actions {
+      display: flex;
+      justify-content: center;
+      gap: var(--error-actions-gap, 16px);
+      flex-wrap: wrap;
+    }
+  }
+}
+
+// AUTH PAGE TEMPLATE
+.auth-page {
+  display: flex;
+  min-height: 100vh;
+
+  .auth-visual {
+    flex: 1;
+    display: none;
+    position: relative;
+    overflow: hidden;
+
+    @media (min-width: 768px) {
+      display: flex;
+    }
+
+    .auth-visual-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      z-index: 2;
+    }
+
+    .auth-visual-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+  }
+
+  .auth-form-container {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: var(--auth-form-max-width, 480px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--auth-form-padding, 48px 24px);
+
+    .auth-form {
+      width: 100%;
+      max-width: var(--auth-form-width, 400px);
+
+      .auth-header {
+        text-align: center;
+        margin-bottom: var(--auth-header-spacing, 48px);
+
+        .auth-title {
+          margin: 0 0 var(--auth-title-spacing, 16px) 0;
+          font-size: var(--auth-title-size, 2rem);
+          font-weight: var(--auth-title-weight, 600);
+        }
+
+        .auth-subtitle {
+          margin: 0;
+          opacity: 0.7;
+        }
+      }
+
+      .auth-footer {
+        text-align: center;
+        margin-top: var(--auth-footer-spacing, 32px);
+      }
+    }
+  }
+}
--- a/projects/shared-ui/src/styles/commons/layouts/_responsive-layouts.scss
+++ b/projects/shared-ui/src/styles/commons/layouts/_responsive-layouts.scss
@@ -0,0 +1,356 @@
+// ==========================================================================
+// RESPONSIVE LAYOUTS
+// ==========================================================================
+// Responsive layout utilities and patterns
+// Mobile-first approach with progressive enhancement
+// ==========================================================================
+
+// RESPONSIVE BREAKPOINTS (from base/_breakpoints.scss)
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
+// RESPONSIVE UTILITIES
+.d-none { display: none !important; }
+.d-block { display: block !important; }
+.d-flex { display: flex !important; }
+.d-grid { display: grid !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-inline-flex { display: inline-flex !important; }
+
+// RESPONSIVE DISPLAY UTILITIES
+@media (max-width: 575px) {
+  .d-xs-none { display: none !important; }
+  .d-xs-block { display: block !important; }
+  .d-xs-flex { display: flex !important; }
+  .d-xs-grid { display: grid !important; }
+  .d-xs-inline { display: inline !important; }
+  .d-xs-inline-block { display: inline-block !important; }
+  .d-xs-inline-flex { display: inline-flex !important; }
+}
+
+@media (min-width: 576px) {
+  .d-sm-none { display: none !important; }
+  .d-sm-block { display: block !important; }
+  .d-sm-flex { display: flex !important; }
+  .d-sm-grid { display: grid !important; }
+  .d-sm-inline { display: inline !important; }
+  .d-sm-inline-block { display: inline-block !important; }
+  .d-sm-inline-flex { display: inline-flex !important; }
+}
+
+@media (min-width: 768px) {
+  .d-md-none { display: none !important; }
+  .d-md-block { display: block !important; }
+  .d-md-flex { display: flex !important; }
+  .d-md-grid { display: grid !important; }
+  .d-md-inline { display: inline !important; }
+  .d-md-inline-block { display: inline-block !important; }
+  .d-md-inline-flex { display: inline-flex !important; }
+}
+
+@media (min-width: 992px) {
+  .d-lg-none { display: none !important; }
+  .d-lg-block { display: block !important; }
+  .d-lg-flex { display: flex !important; }
+  .d-lg-grid { display: grid !important; }
+  .d-lg-inline { display: inline !important; }
+  .d-lg-inline-block { display: inline-block !important; }
+  .d-lg-inline-flex { display: inline-flex !important; }
+}
+
+@media (min-width: 1200px) {
+  .d-xl-none { display: none !important; }
+  .d-xl-block { display: block !important; }
+  .d-xl-flex { display: flex !important; }
+  .d-xl-grid { display: grid !important; }
+  .d-xl-inline { display: inline !important; }
+  .d-xl-inline-block { display: inline-block !important; }
+  .d-xl-inline-flex { display: inline-flex !important; }
+}
+
+// RESPONSIVE FLEX DIRECTION
+.flex-column { flex-direction: column !important; }
+.flex-row { flex-direction: row !important; }
+.flex-column-reverse { flex-direction: column-reverse !important; }
+.flex-row-reverse { flex-direction: row-reverse !important; }
+
+@media (max-width: 575px) {
+  .flex-xs-column { flex-direction: column !important; }
+  .flex-xs-row { flex-direction: row !important; }
+  .flex-xs-column-reverse { flex-direction: column-reverse !important; }
+  .flex-xs-row-reverse { flex-direction: row-reverse !important; }
+}
+
+@media (min-width: 576px) {
+  .flex-sm-column { flex-direction: column !important; }
+  .flex-sm-row { flex-direction: row !important; }
+  .flex-sm-column-reverse { flex-direction: column-reverse !important; }
+  .flex-sm-row-reverse { flex-direction: row-reverse !important; }
+}
+
+@media (min-width: 768px) {
+  .flex-md-column { flex-direction: column !important; }
+  .flex-md-row { flex-direction: row !important; }
+  .flex-md-column-reverse { flex-direction: column-reverse !important; }
+  .flex-md-row-reverse { flex-direction: row-reverse !important; }
+}
+
+// RESPONSIVE LAYOUT PATTERNS
+.mobile-stack {
+  @media (max-width: 767px) {
+    flex-direction: column !important;
+    
+    > * {
+      width: 100% !important;
+      margin-bottom: var(--mobile-stack-gap, 16px);
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.tablet-stack {
+  @media (max-width: 991px) {
+    flex-direction: column !important;
+    
+    > * {
+      width: 100% !important;
+      margin-bottom: var(--tablet-stack-gap, 20px);
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// RESPONSIVE SPACING
+.p-responsive {
+  padding: var(--spacing-mobile, 16px);
+  
+  @media (min-width: 768px) {
+    padding: var(--spacing-tablet, 24px);
+  }
+  
+  @media (min-width: 1200px) {
+    padding: var(--spacing-desktop, 32px);
+  }
+}
+
+.m-responsive {
+  margin: var(--spacing-mobile, 16px);
+  
+  @media (min-width: 768px) {
+    margin: var(--spacing-tablet, 24px);
+  }
+  
+  @media (min-width: 1200px) {
+    margin: var(--spacing-desktop, 32px);
+  }
+}
+
+// RESPONSIVE TEXT ALIGNMENT
+.text-center { text-align: center !important; }
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+
+@media (max-width: 575px) {
+  .text-xs-center { text-align: center !important; }
+  .text-xs-left { text-align: left !important; }
+  .text-xs-right { text-align: right !important; }
+}
+
+@media (min-width: 576px) {
+  .text-sm-center { text-align: center !important; }
+  .text-sm-left { text-align: left !important; }
+  .text-sm-right { text-align: right !important; }
+}
+
+@media (min-width: 768px) {
+  .text-md-center { text-align: center !important; }
+  .text-md-left { text-align: left !important; }
+  .text-md-right { text-align: right !important; }
+}
+
+// RESPONSIVE LAYOUT COMPONENTS
+.responsive-sidebar {
+  display: flex;
+  gap: var(--sidebar-gap, 32px);
+  
+  .sidebar-main {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  .sidebar-aside {
+    flex-shrink: 0;
+    width: var(--sidebar-width, 300px);
+  }
+  
+  @media (max-width: 991px) {
+    flex-direction: column;
+    gap: var(--sidebar-gap-mobile, 24px);
+    
+    .sidebar-aside {
+      width: 100%;
+      order: -1; // Move sidebar to top on mobile
+    }
+    
+    &.sidebar-bottom {
+      .sidebar-aside {
+        order: 1; // Keep sidebar at bottom
+      }
+    }
+  }
+}
+
+.responsive-cards {
+  display: grid;
+  gap: var(--cards-gap, 24px);
+  grid-template-columns: 1fr;
+  
+  @media (min-width: 576px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  @media (min-width: 1200px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  &.cards-auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width, 280px), 1fr));
+  }
+  
+  &.cards-2-max {
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  
+  &.cards-3-max {
+    @media (min-width: 1200px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+}
+
+.responsive-hero {
+  padding: var(--hero-padding-mobile, 48px 16px);
+  text-align: center;
+  
+  @media (min-width: 768px) {
+    padding: var(--hero-padding-tablet, 80px 24px);
+  }
+  
+  @media (min-width: 1200px) {
+    padding: var(--hero-padding-desktop, 120px 32px);
+  }
+  
+  .hero-title {
+    font-size: var(--hero-title-mobile, 2rem);
+    
+    @media (min-width: 768px) {
+      font-size: var(--hero-title-tablet, 3rem);
+    }
+    
+    @media (min-width: 1200px) {
+      font-size: var(--hero-title-desktop, 4rem);
+    }
+  }
+  
+  .hero-subtitle {
+    font-size: var(--hero-subtitle-mobile, 1rem);
+    
+    @media (min-width: 768px) {
+      font-size: var(--hero-subtitle-tablet, 1.25rem);
+    }
+    
+    @media (min-width: 1200px) {
+      font-size: var(--hero-subtitle-desktop, 1.5rem);
+    }
+  }
+}
+
+// RESPONSIVE NAVIGATION
+.responsive-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--nav-padding, 16px 24px);
+  
+  .nav-brand {
+    flex-shrink: 0;
+  }
+  
+  .nav-menu {
+    display: flex;
+    align-items: center;
+    gap: var(--nav-menu-gap, 24px);
+    
+    @media (max-width: 767px) {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      flex-direction: column;
+      justify-content: center;
+      background: var(--nav-mobile-bg, white);
+      transform: translateX(-100%);
+      transition: transform 0.3s ease;
+      z-index: var(--z-nav-mobile, 1000);
+      
+      &.nav-menu-open {
+        transform: translateX(0);
+      }
+    }
+  }
+  
+  .nav-toggle {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    
+    @media (max-width: 767px) {
+      display: flex;
+    }
+    
+    .nav-toggle-bar {
+      width: 24px;
+      height: 2px;
+      background: currentColor;
+      transition: all 0.3s ease;
+    }
+    
+    &.nav-toggle-active {
+      .nav-toggle-bar:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px);
+      }
+      
+      .nav-toggle-bar:nth-child(2) {
+        opacity: 0;
+      }
+      
+      .nav-toggle-bar:nth-child(3) {
+        transform: rotate(-45deg) translate(7px, -6px);
+      }
+    }
+  }
+}
--- a/projects/shared-ui/src/styles/commons/patterns/_content-patterns.scss
+++ b/projects/shared-ui/src/styles/commons/patterns/_content-patterns.scss
--- a/projects/shared-ui/src/styles/commons/patterns/_index.scss
+++ b/projects/shared-ui/src/styles/commons/patterns/_index.scss
@@ -0,0 +1,10 @@
+// ==========================================================================
+// COMMONS PATTERNS INDEX
+// ==========================================================================
+// Import all pattern-related commons files
+// Theme-agnostic patterns and behaviors
+// ==========================================================================
+
+@import 'content-patterns';
+@import 'interaction-patterns';
+@import 'layout-patterns';
--- a/projects/shared-ui/src/styles/commons/patterns/_interaction-patterns.scss
+++ b/projects/shared-ui/src/styles/commons/patterns/_interaction-patterns.scss
@@ -0,0 +1,452 @@
+// ==========================================================================
+// INTERACTION PATTERNS
+// ==========================================================================
+// Common interaction and state patterns
+// Theme-agnostic behavioral styles
+// ==========================================================================
+
+// HOVER EFFECTS
+.hover-lift {
+  transition: transform var(--hover-transition-duration, 0.2s) var(--hover-transition-easing, ease);
+
+  &:hover {
+    transform: var(--hover-lift-transform, translateY(-4px));
+  }
+}
+
+.hover-scale {
+  transition: transform var(--hover-transition-duration, 0.2s) var(--hover-transition-easing, ease);
+
+  &:hover {
+    transform: var(--hover-scale-transform, scale(1.05));
+  }
+}
+
+.hover-glow {
+  transition: box-shadow var(--hover-transition-duration, 0.2s) var(--hover-transition-easing, ease);
+
+  &:hover {
+    box-shadow: var(--hover-glow-shadow, 0 0 20px rgba(0, 0, 0, 0.15));
+  }
+}
+
+.hover-fade {
+  transition: opacity var(--hover-transition-duration, 0.2s) var(--hover-transition-easing, ease);
+
+  &:hover {
+    opacity: var(--hover-fade-opacity, 0.8);
+  }
+}
+
+.hover-brighten {
+  transition: filter var(--hover-transition-duration, 0.2s) var(--hover-transition-easing, ease);
+
+  &:hover {
+    filter: brightness(var(--hover-brighten-value, 1.1));
+  }
+}
+
+.hover-darken {
+  transition: filter var(--hover-transition-duration, 0.2s) var(--hover-transition-easing, ease);
+
+  &:hover {
+    filter: brightness(var(--hover-darken-value, 0.9));
+  }
+}
+
+// FOCUS STATES
+.focus-ring {
+  &:focus,
+  &:focus-visible {
+    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #007bff);
+    outline-offset: var(--focus-ring-offset, 2px);
+  }
+}
+
+.focus-ring-inset {
+  &:focus,
+  &:focus-visible {
+    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #007bff);
+    outline-offset: var(--focus-ring-inset-offset, -2px);
+  }
+}
+
+.focus-glow {
+  &:focus,
+  &:focus-visible {
+    box-shadow: var(--focus-glow-shadow, 0 0 0 3px rgba(0, 123, 255, 0.25));
+    outline: none;
+  }
+}
+
+// ACTIVE STATES
+.active-press {
+  transition: transform var(--active-transition-duration, 0.1s) var(--active-transition-easing, ease);
+
+  &:active {
+    transform: var(--active-press-transform, scale(0.98));
+  }
+}
+
+.active-sink {
+  transition: transform var(--active-transition-duration, 0.1s) var(--active-transition-easing, ease);
+
+  &:active {
+    transform: var(--active-sink-transform, translateY(2px));
+  }
+}
+
+// LOADING STATES
+.loading {
+  position: relative;
+  pointer-events: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--loading-spinner-size, 20px);
+    height: var(--loading-spinner-size, 20px);
+    margin-top: calc(var(--loading-spinner-size, 20px) / -2);
+    margin-left: calc(var(--loading-spinner-size, 20px) / -2);
+    border: 2px solid var(--loading-spinner-color, rgba(0, 0, 0, 0.3));
+    border-top-color: var(--loading-spinner-active-color, #007bff);
+    border-radius: 50%;
+    animation: loading-spin var(--loading-spin-duration, 1s) linear infinite;
+    z-index: 1;
+  }
+
+  &.loading-overlay::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--loading-overlay-bg, rgba(255, 255, 255, 0.8));
+    z-index: 0;
+  }
+}
+
+@keyframes loading-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-pulse {
+  animation: loading-pulse var(--loading-pulse-duration, 2s) infinite;
+}
+
+@keyframes loading-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: var(--loading-pulse-opacity, 0.5); }
+}
+
+.loading-skeleton {
+  background: var(--skeleton-bg, #f0f0f0);
+  background-image: linear-gradient(
+    90deg,
+    var(--skeleton-bg, #f0f0f0),
+    var(--skeleton-highlight, #e0e0e0),
+    var(--skeleton-bg, #f0f0f0)
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  animation: loading-shimmer var(--skeleton-duration, 1.5s) infinite;
+  border-radius: var(--skeleton-border-radius, 4px);
+}
+
+@keyframes loading-shimmer {
+  0% { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}
+
+// DISABLED STATES
+.disabled,
+[disabled] {
+  opacity: var(--disabled-opacity, 0.6);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.disabled-loading {
+  opacity: var(--disabled-loading-opacity, 0.8);
+  pointer-events: none;
+  cursor: wait;
+}
+
+// SUCCESS STATES
+.success-flash {
+  animation: success-flash var(--success-flash-duration, 0.5s) ease-in-out;
+}
+
+@keyframes success-flash {
+  0%, 100% { background-color: transparent; }
+  50% { background-color: var(--success-flash-color, rgba(40, 167, 69, 0.2)); }
+}
+
+.success-checkmark {
+  position: relative;
+
+  &::after {
+    content: '✓';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--success-color, #28a745);
+    font-size: var(--success-checkmark-size, 1.5rem);
+    font-weight: bold;
+    animation: success-checkmark-appear var(--success-checkmark-duration, 0.3s) ease-in-out;
+  }
+}
+
+@keyframes success-checkmark-appear {
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
+  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+// ERROR STATES
+.error-shake {
+  animation: error-shake var(--error-shake-duration, 0.5s) ease-in-out;
+}
+
+@keyframes error-shake {
+  0%, 20%, 40%, 60%, 80%, 100% { transform: translateX(0); }
+  10%, 50%, 90% { transform: translateX(-5px); }
+  30%, 70% { transform: translateX(5px); }
+}
+
+.error-flash {
+  animation: error-flash var(--error-flash-duration, 0.5s) ease-in-out;
+}
+
+@keyframes error-flash {
+  0%, 100% { background-color: transparent; }
+  50% { background-color: var(--error-flash-color, rgba(220, 53, 69, 0.2)); }
+}
+
+// WARNING STATES
+.warning-pulse {
+  animation: warning-pulse var(--warning-pulse-duration, 2s) infinite;
+}
+
+@keyframes warning-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: var(--warning-pulse-opacity, 0.7); }
+}
+
+// DRAG AND DROP STATES
+.draggable {
+  cursor: grab;
+  user-select: none;
+  transition: transform var(--draggable-transition-duration, 0.2s) var(--draggable-transition-easing, ease);
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &.dragging {
+    cursor: grabbing;
+    opacity: var(--dragging-opacity, 0.8);
+    transform: var(--dragging-transform, rotate(5deg));
+    z-index: var(--z-dragging, 1000);
+  }
+}
+
+.drop-zone {
+  transition: all var(--drop-zone-transition-duration, 0.2s) var(--drop-zone-transition-easing, ease);
+  border: 2px dashed transparent;
+  border-radius: var(--drop-zone-border-radius, 8px);
+  padding: var(--drop-zone-padding, 20px);
+
+  &.drop-zone-active {
+    border-color: var(--drop-zone-active-border, #007bff);
+    background-color: var(--drop-zone-active-bg, rgba(0, 123, 255, 0.05));
+  }
+
+  &.drop-zone-invalid {
+    border-color: var(--drop-zone-invalid-border, #dc3545);
+    background-color: var(--drop-zone-invalid-bg, rgba(220, 53, 69, 0.05));
+  }
+}
+
+// SELECTION STATES
+.selectable {
+  cursor: pointer;
+  transition: all var(--selectable-transition-duration, 0.2s) var(--selectable-transition-easing, ease);
+  border: var(--selectable-border-width, 2px) solid transparent;
+  border-radius: var(--selectable-border-radius, 4px);
+
+  &:hover {
+    border-color: var(--selectable-hover-border, rgba(0, 123, 255, 0.5));
+  }
+
+  &.selected {
+    border-color: var(--selectable-selected-border, #007bff);
+    background-color: var(--selectable-selected-bg, rgba(0, 123, 255, 0.05));
+  }
+
+  &.selecting {
+    opacity: var(--selecting-opacity, 0.7);
+    transform: var(--selecting-transform, scale(0.98));
+  }
+}
+
+// EXPANDABLE CONTENT
+.expandable {
+  overflow: hidden;
+  transition: height var(--expandable-transition-duration, 0.3s) var(--expandable-transition-easing, ease);
+
+  &.expanding {
+    transition: height var(--expanding-transition-duration, 0.3s) var(--expanding-transition-easing, ease-out);
+  }
+
+  &.collapsing {
+    transition: height var(--collapsing-transition-duration, 0.3s) var(--collapsing-transition-easing, ease-in);
+  }
+}
+
+.expandable-trigger {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--expandable-trigger-gap, 8px);
+
+  .expand-icon {
+    transition: transform var(--expand-icon-transition-duration, 0.2s) var(--expand-icon-transition-easing, ease);
+  }
+
+  &.expanded .expand-icon {
+    transform: var(--expand-icon-expanded-transform, rotate(180deg));
+  }
+}
+
+// SORTABLE LISTS
+.sortable {
+  .sortable-item {
+    cursor: move;
+    user-select: none;
+    transition: all var(--sortable-transition-duration, 0.2s) var(--sortable-transition-easing, ease);
+
+    &.sortable-ghost {
+      opacity: var(--sortable-ghost-opacity, 0.5);
+      background: var(--sortable-ghost-bg, rgba(0, 123, 255, 0.1));
+    }
+
+    &.sortable-chosen {
+      opacity: var(--sortable-chosen-opacity, 0.8);
+      transform: var(--sortable-chosen-transform, scale(1.02));
+    }
+  }
+
+  .sortable-handle {
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--sortable-handle-padding, 8px);
+    opacity: var(--sortable-handle-opacity, 0.6);
+    transition: opacity var(--sortable-handle-transition-duration, 0.2s);
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+// RIPPLE EFFECT
+.ripple-effect {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: var(--ripple-color, rgba(255, 255, 255, 0.3));
+    transform: translate(-50%, -50%);
+    transition: width var(--ripple-duration, 0.6s), height var(--ripple-duration, 0.6s);
+    pointer-events: none;
+  }
+
+  &.ripple-active::before {
+    width: var(--ripple-size, 200px);
+    height: var(--ripple-size, 200px);
+  }
+}
+
+// FLOATING ELEMENTS
+.floating {
+  animation: floating var(--floating-duration, 3s) ease-in-out infinite;
+}
+
+@keyframes floating {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(var(--floating-distance, -10px)); }
+}
+
+.bob {
+  animation: bob var(--bob-duration, 2s) ease-in-out infinite;
+}
+
+@keyframes bob {
+  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(var(--bob-distance, -10px)); }
+  60% { transform: translateY(var(--bob-distance-small, -5px)); }
+}
+
+// ACCESSIBILITY ENHANCEMENTS
+@media (prefers-reduced-motion: reduce) {
+  .hover-lift,
+  .hover-scale,
+  .hover-glow,
+  .hover-fade,
+  .hover-brighten,
+  .hover-darken,
+  .active-press,
+  .active-sink,
+  .expandable,
+  .expandable-trigger .expand-icon,
+  .sortable .sortable-item,
+  .ripple-effect,
+  .floating,
+  .bob {
+    transition: none;
+    animation: none;
+  }
+
+  .loading::after {
+    animation: none;
+  }
+
+  .loading-pulse,
+  .loading-skeleton,
+  .warning-pulse {
+    animation: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .focus-ring:focus,
+  .focus-ring:focus-visible {
+    outline-width: 3px;
+  }
+
+  .selectable {
+    border-width: 3px;
+  }
+
+  .drop-zone {
+    border-width: 3px;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/patterns/_layout-patterns.scss
+++ b/projects/shared-ui/src/styles/commons/patterns/_layout-patterns.scss
@@ -0,0 +1,556 @@
+// ==========================================================================
+// LAYOUT PATTERNS
+// ==========================================================================
+// Common layout patterns and organizational structures
+// Theme-agnostic layout behaviors
+// ==========================================================================
+
+// STACK LAYOUT PATTERN
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stack-gap, 16px);
+
+  &.stack-sm {
+    gap: var(--stack-gap-sm, 8px);
+  }
+
+  &.stack-lg {
+    gap: var(--stack-gap-lg, 24px);
+  }
+
+  &.stack-xl {
+    gap: var(--stack-gap-xl, 32px);
+  }
+
+  &.stack-horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &.stack-center {
+    align-items: center;
+  }
+
+  &.stack-end {
+    align-items: flex-end;
+  }
+
+  &.stack-stretch {
+    align-items: stretch;
+  }
+}
+
+// CLUSTER LAYOUT PATTERN (Flexbox wrap)
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-gap, 16px);
+  align-items: center;
+
+  &.cluster-start {
+    justify-content: flex-start;
+  }
+
+  &.cluster-center {
+    justify-content: center;
+  }
+
+  &.cluster-end {
+    justify-content: flex-end;
+  }
+
+  &.cluster-between {
+    justify-content: space-between;
+  }
+
+  &.cluster-around {
+    justify-content: space-around;
+  }
+
+  &.cluster-evenly {
+    justify-content: space-evenly;
+  }
+
+  &.cluster-baseline {
+    align-items: baseline;
+  }
+
+  &.cluster-stretch {
+    align-items: stretch;
+  }
+}
+
+// SIDEBAR LAYOUT PATTERN
+.sidebar-layout {
+  display: flex;
+  gap: var(--sidebar-gap, 32px);
+  align-items: flex-start;
+
+  .sidebar {
+    flex-shrink: 0;
+    width: var(--sidebar-width, 250px);
+    min-width: var(--sidebar-min-width, 200px);
+  }
+
+  .main-content {
+    flex: 1;
+    min-width: 0; // Prevents flex overflow
+  }
+
+  &.sidebar-right {
+    flex-direction: row-reverse;
+  }
+
+  &.sidebar-sticky {
+    .sidebar {
+      position: sticky;
+      top: var(--sidebar-sticky-top, 20px);
+      align-self: flex-start;
+    }
+  }
+
+  // Responsive behavior
+  &.sidebar-collapse-md {
+    @media (max-width: 768px) {
+      flex-direction: column;
+      gap: var(--sidebar-gap-mobile, 24px);
+
+      .sidebar {
+        width: 100%;
+        position: static;
+      }
+    }
+  }
+
+  &.sidebar-collapse-lg {
+    @media (max-width: 992px) {
+      flex-direction: column;
+      gap: var(--sidebar-gap-mobile, 24px);
+
+      .sidebar {
+        width: 100%;
+        position: static;
+      }
+    }
+  }
+}
+
+// SWITCHER LAYOUT PATTERN (Responsive stack/row)
+.switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--switcher-gap, 16px);
+
+  > * {
+    flex-grow: 1;
+    flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
+    min-width: var(--switcher-min-width, 250px);
+  }
+
+  &.switcher-no-grow > * {
+    flex-grow: 0;
+  }
+}
+
+// COVER LAYOUT PATTERN (Centered content)
+.cover {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--cover-min-height, 100vh);
+  padding: var(--cover-padding, 24px);
+
+  > * {
+    margin-top: var(--cover-spacing, 16px);
+    margin-bottom: var(--cover-spacing, 16px);
+  }
+
+  > :first-child:not(.cover-centered) {
+    margin-top: 0;
+  }
+
+  > :last-child:not(.cover-centered) {
+    margin-bottom: 0;
+  }
+
+  .cover-centered {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+}
+
+// IMPOSTER LAYOUT PATTERN (Absolute positioning)
+.imposter {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  &.imposter-contain {
+    max-width: calc(100% - var(--imposter-margin, 32px));
+    max-height: calc(100% - var(--imposter-margin, 32px));
+    overflow: auto;
+  }
+
+  &.imposter-fixed {
+    position: fixed;
+  }
+
+  &.imposter-top {
+    top: var(--imposter-offset, 20px);
+    transform: translate(-50%, 0);
+  }
+
+  &.imposter-bottom {
+    top: auto;
+    bottom: var(--imposter-offset, 20px);
+    transform: translate(-50%, 0);
+  }
+
+  &.imposter-left {
+    left: var(--imposter-offset, 20px);
+    transform: translate(0, -50%);
+  }
+
+  &.imposter-right {
+    left: auto;
+    right: var(--imposter-offset, 20px);
+    transform: translate(0, -50%);
+  }
+}
+
+// GRID LAYOUT PATTERNS
+.auto-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-width, 250px), 1fr));
+  gap: var(--auto-grid-gap, 24px);
+
+  &.auto-grid-fill {
+    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-width, 250px), 1fr));
+  }
+
+  &.auto-grid-dense {
+    grid-auto-flow: dense;
+  }
+}
+
+.reel {
+  display: flex;
+  overflow-x: auto;
+  gap: var(--reel-gap, 16px);
+  padding-bottom: var(--reel-scrollbar-space, 8px);
+
+  > * {
+    flex-shrink: 0;
+    width: var(--reel-item-width, 250px);
+  }
+
+  &.reel-auto-width > * {
+    width: auto;
+    min-width: var(--reel-min-width, 200px);
+  }
+
+  // Snap scrolling
+  &.reel-snap {
+    scroll-snap-type: x mandatory;
+
+    > * {
+      scroll-snap-align: start;
+    }
+  }
+
+  // Hide scrollbar
+  &.reel-no-scrollbar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+// HOLY GRAIL LAYOUT
+.holy-grail {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "nav main aside"
+    "footer footer footer";
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: var(--nav-width, 200px) 1fr var(--aside-width, 200px);
+  min-height: 100vh;
+  gap: var(--holy-grail-gap, 0);
+
+  .header {
+    grid-area: header;
+  }
+
+  .nav {
+    grid-area: nav;
+  }
+
+  .main {
+    grid-area: main;
+    min-width: 0;
+  }
+
+  .aside {
+    grid-area: aside;
+  }
+
+  .footer {
+    grid-area: footer;
+  }
+
+  // Responsive collapse
+  @media (max-width: 768px) {
+    grid-template-areas:
+      "header"
+      "nav"
+      "main"
+      "aside"
+      "footer";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr auto auto;
+  }
+}
+
+// PANCAKE STACK LAYOUT (Header, flexible content, footer)
+.pancake-stack {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: var(--pancake-min-height, 100vh);
+
+  .header {
+    /* Header content */
+  }
+
+  .main {
+    /* Main content - grows to fill space */
+  }
+
+  .footer {
+    /* Footer content */
+  }
+}
+
+// MASONRY LAYOUT
+.masonry {
+  columns: var(--masonry-columns, 3);
+  column-gap: var(--masonry-gap, 24px);
+
+  > * {
+    break-inside: avoid;
+    margin-bottom: var(--masonry-gap, 24px);
+  }
+
+  &.masonry-2 {
+    columns: 2;
+  }
+
+  &.masonry-4 {
+    columns: 4;
+  }
+
+  &.masonry-5 {
+    columns: 5;
+  }
+
+  // Responsive columns
+  @media (max-width: 768px) {
+    columns: 1;
+  }
+
+  @media (min-width: 769px) and (max-width: 1024px) {
+    columns: 2;
+  }
+}
+
+// FLEX EQUAL HEIGHT PATTERN
+.equal-height {
+  display: flex;
+  
+  > * {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.equal-height-baseline {
+    align-items: baseline;
+  }
+
+  &.equal-height-center {
+    align-items: center;
+  }
+
+  &.equal-height-end {
+    align-items: flex-end;
+  }
+}
+
+// STICKY FOOTER PATTERN
+.sticky-footer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  .content {
+    flex: 1;
+  }
+
+  .footer {
+    margin-top: auto;
+  }
+}
+
+// ASPECT RATIO CONTAINERS
+.aspect-ratio {
+  position: relative;
+  width: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    padding-top: var(--aspect-ratio, 56.25%); /* 16:9 default */
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &.aspect-1-1 {
+    --aspect-ratio: 100%; /* 1:1 */
+  }
+
+  &.aspect-4-3 {
+    --aspect-ratio: 75%; /* 4:3 */
+  }
+
+  &.aspect-3-2 {
+    --aspect-ratio: 66.67%; /* 3:2 */
+  }
+
+  &.aspect-16-9 {
+    --aspect-ratio: 56.25%; /* 16:9 */
+  }
+
+  &.aspect-21-9 {
+    --aspect-ratio: 42.86%; /* 21:9 */
+  }
+}
+
+// INTRINSIC RATIO (modern aspect-ratio support)
+@supports (aspect-ratio: 16 / 9) {
+  .intrinsic-ratio {
+    aspect-ratio: var(--intrinsic-ratio, 16 / 9);
+    
+    &.intrinsic-1-1 {
+      aspect-ratio: 1 / 1;
+    }
+
+    &.intrinsic-4-3 {
+      aspect-ratio: 4 / 3;
+    }
+
+    &.intrinsic-3-2 {
+      aspect-ratio: 3 / 2;
+    }
+
+    &.intrinsic-16-9 {
+      aspect-ratio: 16 / 9;
+    }
+
+    &.intrinsic-21-9 {
+      aspect-ratio: 21 / 9;
+    }
+  }
+}
+
+// QUANTITY QUERIES (Layout based on number of items)
+.quantity-query {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--quantity-gap, 16px);
+
+  /* Single item - full width */
+  &:has(> :nth-child(1):nth-last-child(1)) > * {
+    flex-basis: 100%;
+  }
+
+  /* Two items - 50% each */
+  &:has(> :nth-child(2):nth-last-child(1)) > * {
+    flex-basis: calc(50% - var(--quantity-gap, 16px) / 2);
+  }
+
+  /* Three items - 33% each */
+  &:has(> :nth-child(3):nth-last-child(1)) > * {
+    flex-basis: calc(33.333% - var(--quantity-gap, 16px) * 2 / 3);
+  }
+
+  /* Four or more items - 25% each */
+  &:has(> :nth-child(4)) > * {
+    flex-basis: calc(25% - var(--quantity-gap, 16px) * 3 / 4);
+  }
+}
+
+// RESPONSIVE UTILITIES FOR PATTERNS
+@media (max-width: 576px) {
+  .stack-horizontal-mobile {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .stack-vertical-mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cluster-stack-mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+@media (max-width: 768px) {
+  .equal-height {
+    flex-direction: column;
+  }
+
+  .switcher {
+    flex-direction: column;
+  }
+}
+
+// ACCESSIBILITY IMPROVEMENTS
+@media (prefers-reduced-motion: reduce) {
+  .sticky-footer,
+  .cover,
+  .imposter {
+    transition: none;
+  }
+}
+
+// PRINT OPTIMIZATIONS
+@media print {
+  .reel {
+    display: block;
+    overflow: visible;
+  }
+
+  .masonry {
+    columns: 1;
+  }
+
+  .holy-grail {
+    display: block;
+  }
+}
--- a/projects/shared-ui/src/styles/commons/utilities/_display-utilities.scss
+++ b/projects/shared-ui/src/styles/commons/utilities/_display-utilities.scss
@@ -0,0 +1,348 @@
+// ==========================================================================
+// DISPLAY UTILITIES
+// ==========================================================================
+// Utility classes for display, visibility, and text formatting
+// Theme-agnostic display and layout helpers
+// ==========================================================================
+
+// TEXT ALIGNMENT
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+.text-center { text-align: center !important; }
+.text-justify { text-align: justify !important; }
+.text-start { text-align: left !important; }
+.text-end { text-align: right !important; }
+
+// Responsive text alignment - Using base breakpoint tokens
+@media (max-width: #{$base-breakpoint-xs - 1px}) {
+  .text-xs-left { text-align: left !important; }
+  .text-xs-right { text-align: right !important; }
+  .text-xs-center { text-align: center !important; }
+  .text-xs-start { text-align: left !important; }
+  .text-xs-end { text-align: right !important; }
+}
+
+@media (min-width: #{$base-breakpoint-sm}) {
+  .text-sm-left { text-align: left !important; }
+  .text-sm-right { text-align: right !important; }
+  .text-sm-center { text-align: center !important; }
+  .text-sm-start { text-align: left !important; }
+  .text-sm-end { text-align: right !important; }
+}
+
+@media (min-width: #{$base-breakpoint-md}) {
+  .text-md-left { text-align: left !important; }
+  .text-md-right { text-align: right !important; }
+  .text-md-center { text-align: center !important; }
+  .text-md-start { text-align: left !important; }
+  .text-md-end { text-align: right !important; }
+}
+
+@media (min-width: #{$base-breakpoint-lg}) {
+  .text-lg-left { text-align: left !important; }
+  .text-lg-right { text-align: right !important; }
+  .text-lg-center { text-align: center !important; }
+  .text-lg-start { text-align: left !important; }
+  .text-lg-end { text-align: right !important; }
+}
+
+// TEXT TRANSFORM
+.text-lowercase { text-transform: lowercase !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+.text-normal-case { text-transform: none !important; }
+
+// FONT WEIGHT
+.fw-light { font-weight: 300 !important; }
+.fw-lighter { font-weight: lighter !important; }
+.fw-normal { font-weight: 400 !important; }
+.fw-medium { font-weight: 500 !important; }
+.fw-semibold { font-weight: 600 !important; }
+.fw-bold { font-weight: 700 !important; }
+.fw-bolder { font-weight: bolder !important; }
+
+// FONT STYLE
+.fst-italic { font-style: italic !important; }
+.fst-normal { font-style: normal !important; }
+
+// TEXT DECORATION
+.text-decoration-none { text-decoration: none !important; }
+.text-decoration-underline { text-decoration: underline !important; }
+.text-decoration-line-through { text-decoration: line-through !important; }
+
+// LINE HEIGHT
+.lh-1 { line-height: 1 !important; }
+.lh-sm { line-height: 1.25 !important; }
+.lh-base { line-height: 1.5 !important; }
+.lh-lg { line-height: 2 !important; }
+
+// TEXT WRAP
+.text-wrap { white-space: normal !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-pre { white-space: pre !important; }
+.text-pre-line { white-space: pre-line !important; }
+.text-pre-wrap { white-space: pre-wrap !important; }
+
+// TEXT OVERFLOW
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+// WORD BREAK
+.text-break-all { word-break: break-all !important; }
+.text-break-keep { word-break: keep-all !important; }
+
+// VERTICAL ALIGNMENT
+.align-baseline { vertical-align: baseline !important; }
+.align-top { vertical-align: top !important; }
+.align-middle { vertical-align: middle !important; }
+.align-bottom { vertical-align: bottom !important; }
+.align-text-bottom { vertical-align: text-bottom !important; }
+.align-text-top { vertical-align: text-top !important; }
+
+// LIST STYLES
+.list-unstyled {
+  padding-left: 0 !important;
+  list-style: none !important;
+}
+
+.list-inline {
+  padding-left: 0 !important;
+  list-style: none !important;
+
+  .list-inline-item {
+    display: inline-block !important;
+
+    &:not(:last-child) {
+      margin-right: var(--list-inline-gap, 8px) !important;
+    }
+  }
+}
+
+// OPACITY
+.opacity-0 { opacity: 0 !important; }
+.opacity-25 { opacity: 0.25 !important; }
+.opacity-50 { opacity: 0.5 !important; }
+.opacity-75 { opacity: 0.75 !important; }
+.opacity-100 { opacity: 1 !important; }
+
+// BORDERS
+.border { border: var(--border-width, 1px) solid var(--border-color, #dee2e6) !important; }
+.border-0 { border: 0 !important; }
+.border-top { border-top: var(--border-width, 1px) solid var(--border-color, #dee2e6) !important; }
+.border-top-0 { border-top: 0 !important; }
+.border-end { border-right: var(--border-width, 1px) solid var(--border-color, #dee2e6) !important; }
+.border-end-0 { border-right: 0 !important; }
+.border-bottom { border-bottom: var(--border-width, 1px) solid var(--border-color, #dee2e6) !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-start { border-left: var(--border-width, 1px) solid var(--border-color, #dee2e6) !important; }
+.border-start-0 { border-left: 0 !important; }
+
+// BORDER RADIUS - Using base border radius tokens
+.rounded { border-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-0 { border-radius: #{$base-border-radius-none} !important; }
+.rounded-1 { border-radius: var(--border-radius-sm, #{$base-border-radius-sm}) !important; }
+.rounded-2 { border-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-3 { border-radius: var(--border-radius-lg, #{$base-border-radius-lg}) !important; }
+.rounded-4 { border-radius: var(--border-radius-xl, #{$base-border-radius-xl}) !important; }
+.rounded-5 { border-radius: var(--border-radius-xxl, #{$base-border-radius-2xl}) !important; }
+.rounded-circle { border-radius: #{$base-border-radius-full} !important; }
+.rounded-pill { border-radius: var(--rounded-pill, #{$base-border-radius-pill}) !important; }
+
+// Individual border radius
+.rounded-top { border-top-left-radius: var(--border-radius, #{$base-border-radius-md}) !important; border-top-right-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-end { border-top-right-radius: var(--border-radius, #{$base-border-radius-md}) !important; border-bottom-right-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-bottom { border-bottom-right-radius: var(--border-radius, #{$base-border-radius-md}) !important; border-bottom-left-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-start { border-bottom-left-radius: var(--border-radius, #{$base-border-radius-md}) !important; border-top-left-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+
+.rounded-top-start { border-top-left-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-top-end { border-top-right-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-bottom-end { border-bottom-right-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+.rounded-bottom-start { border-bottom-left-radius: var(--border-radius, #{$base-border-radius-md}) !important; }
+
+// WIDTH AND HEIGHT
+.w-25 { width: 25% !important; }
+.w-50 { width: 50% !important; }
+.w-75 { width: 75% !important; }
+.w-100 { width: 100% !important; }
+.w-auto { width: auto !important; }
+
+.mw-100 { max-width: 100% !important; }
+.mw-75 { max-width: 75% !important; }
+.mw-50 { max-width: 50% !important; }
+.mw-25 { max-width: 25% !important; }
+
+.h-25 { height: 25% !important; }
+.h-50 { height: 50% !important; }
+.h-75 { height: 75% !important; }
+.h-100 { height: 100% !important; }
+.h-auto { height: auto !important; }
+
+.mh-100 { max-height: 100% !important; }
+.mh-75 { max-height: 75% !important; }
+.mh-50 { max-height: 50% !important; }
+.mh-25 { max-height: 25% !important; }
+
+// Min width/height
+.min-w-0 { min-width: 0 !important; }
+.min-w-100 { min-width: 100% !important; }
+.min-h-0 { min-height: 0 !important; }
+.min-h-100 { min-height: 100% !important; }
+
+// Viewport dimensions
+.vw-100 { width: 100vw !important; }
+.min-vw-100 { min-width: 100vw !important; }
+
+.vh-100 { height: 100vh !important; }
+.min-vh-100 { min-height: 100vh !important; }
+
+// SHADOWS - Using base shadow tokens
+.shadow-none { box-shadow: #{$base-shadow-none} !important; }
+.shadow-sm { box-shadow: var(--shadow-sm, #{$base-shadow-sm}) !important; }
+.shadow { box-shadow: var(--shadow, #{$base-shadow-md}) !important; }
+.shadow-md { box-shadow: var(--shadow-md, #{$base-shadow-lg}) !important; }
+.shadow-lg { box-shadow: var(--shadow-lg, #{$base-shadow-xl}) !important; }
+.shadow-xl { box-shadow: var(--shadow-xl, #{$base-shadow-2xl}) !important; }
+
+// FOCUS UTILITIES
+.focus\:outline-none:focus {
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+}
+
+.focus\:ring:focus {
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+  box-shadow: var(--focus-ring-shadow, 0 0 0 3px rgba(59, 130, 246, 0.5)) !important;
+}
+
+.focus\:ring-2:focus {
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+  box-shadow: var(--focus-ring-shadow, 0 0 0 2px rgba(59, 130, 246, 0.5)) !important;
+}
+
+.focus\:ring-4:focus {
+  outline: 2px solid transparent !important;
+  outline-offset: 2px !important;
+  box-shadow: var(--focus-ring-shadow, 0 0 0 4px rgba(59, 130, 246, 0.5)) !important;
+}
+
+// SCREEN READER ONLY
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.sr-only-focusable:focus {
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+  padding: inherit !important;
+  margin: inherit !important;
+  overflow: visible !important;
+  clip: auto !important;
+  white-space: normal !important;
+}
+
+// PRINT UTILITIES
+@media print {
+  .d-print-none { display: none !important; }
+  .d-print-inline { display: inline !important; }
+  .d-print-inline-block { display: inline-block !important; }
+  .d-print-block { display: block !important; }
+  .d-print-flex { display: flex !important; }
+  .d-print-inline-flex { display: inline-flex !important; }
+  .d-print-grid { display: grid !important; }
+  .d-print-table { display: table !important; }
+  .d-print-table-row { display: table-row !important; }
+  .d-print-table-cell { display: table-cell !important; }
+}
+
+// IMAGE UTILITIES
+.img-fluid {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+.img-thumbnail {
+  padding: var(--img-thumbnail-padding, 4px) !important;
+  background-color: var(--img-thumbnail-bg, white) !important;
+  border: var(--img-thumbnail-border-width, 1px) solid var(--img-thumbnail-border-color, #dee2e6) !important;
+  border-radius: var(--img-thumbnail-border-radius, 6px) !important;
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+// FIGURE
+.figure {
+  display: inline-block !important;
+
+  .figure-img {
+    margin-bottom: var(--figure-caption-margin-top, 8px) !important;
+    line-height: 1 !important;
+  }
+
+  .figure-caption {
+    font-size: var(--figure-caption-font-size, 0.875em) !important;
+    color: var(--figure-caption-color, rgba(0, 0, 0, 0.6)) !important;
+  }
+}
+
+// TABLE UTILITIES
+.table-responsive {
+  overflow-x: auto !important;
+
+  .table {
+    margin-bottom: 0 !important;
+  }
+}
+
+@media (max-width: #{$base-breakpoint-xs - 1px}) {
+  .table-responsive-sm {
+    overflow-x: auto !important;
+  }
+}
+
+@media (max-width: #{$base-breakpoint-md - 1px}) {
+  .table-responsive-md {
+    overflow-x: auto !important;
+  }
+}
+
+@media (max-width: #{$base-breakpoint-lg - 1px}) {
+  .table-responsive-lg {
+    overflow-x: auto !important;
+  }
+}
+
+@media (max-width: #{$base-breakpoint-xl - 1px}) {
+  .table-responsive-xl {
+    overflow-x: auto !important;
+  }
+}
+
+// STRETCHED LINK
+.stretched-link::after {
+  position: absolute !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  z-index: 1 !important;
+  content: "" !important;
+}
--- a/projects/shared-ui/src/styles/commons/utilities/_index.scss
+++ b/projects/shared-ui/src/styles/commons/utilities/_index.scss
@@ -0,0 +1,11 @@
+// ==========================================================================
+// COMMONS UTILITIES INDEX
+// ==========================================================================
+// Import all utility-related commons files
+// Theme-agnostic utility classes
+// ==========================================================================
+
+@import 'layout-utilities';
+@import 'spacing-utilities';
+@import 'display-utilities';
+@import 'scrollbar-utilities';
--- a/projects/shared-ui/src/styles/commons/utilities/_layout-utilities.scss
+++ b/projects/shared-ui/src/styles/commons/utilities/_layout-utilities.scss
@@ -0,0 +1,392 @@
+// ==========================================================================
+// LAYOUT UTILITIES
+// ==========================================================================
+// Utility classes for common layout needs
+// Theme-agnostic layout helpers
+// ==========================================================================
+
+// DISPLAY UTILITIES
+.d-none { display: none !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-block { display: block !important; }
+.d-flex { display: flex !important; }
+.d-inline-flex { display: inline-flex !important; }
+.d-grid { display: grid !important; }
+.d-inline-grid { display: inline-grid !important; }
+.d-table { display: table !important; }
+.d-table-cell { display: table-cell !important; }
+
+// RESPONSIVE DISPLAY UTILITIES - Using base breakpoint tokens
+@media (max-width: #{$base-breakpoint-xs - 1px}) {
+  .d-xs-none { display: none !important; }
+  .d-xs-inline { display: inline !important; }
+  .d-xs-inline-block { display: inline-block !important; }
+  .d-xs-block { display: block !important; }
+  .d-xs-flex { display: flex !important; }
+  .d-xs-inline-flex { display: inline-flex !important; }
+  .d-xs-grid { display: grid !important; }
+  .d-xs-inline-grid { display: inline-grid !important; }
+}
+
+@media (min-width: #{$base-breakpoint-sm}) {
+  .d-sm-none { display: none !important; }
+  .d-sm-inline { display: inline !important; }
+  .d-sm-inline-block { display: inline-block !important; }
+  .d-sm-block { display: block !important; }
+  .d-sm-flex { display: flex !important; }
+  .d-sm-inline-flex { display: inline-flex !important; }
+  .d-sm-grid { display: grid !important; }
+  .d-sm-inline-grid { display: inline-grid !important; }
+}
+
+@media (min-width: #{$base-breakpoint-md}) {
+  .d-md-none { display: none !important; }
+  .d-md-inline { display: inline !important; }
+  .d-md-inline-block { display: inline-block !important; }
+  .d-md-block { display: block !important; }
+  .d-md-flex { display: flex !important; }
+  .d-md-inline-flex { display: inline-flex !important; }
+  .d-md-grid { display: grid !important; }
+  .d-md-inline-grid { display: inline-grid !important; }
+}
+
+@media (min-width: #{$base-breakpoint-lg}) {
+  .d-lg-none { display: none !important; }
+  .d-lg-inline { display: inline !important; }
+  .d-lg-inline-block { display: inline-block !important; }
+  .d-lg-block { display: block !important; }
+  .d-lg-flex { display: flex !important; }
+  .d-lg-inline-flex { display: inline-flex !important; }
+  .d-lg-grid { display: grid !important; }
+  .d-lg-inline-grid { display: inline-grid !important; }
+}
+
+@media (min-width: #{$base-breakpoint-xl}) {
+  .d-xl-none { display: none !important; }
+  .d-xl-inline { display: inline !important; }
+  .d-xl-inline-block { display: inline-block !important; }
+  .d-xl-block { display: block !important; }
+  .d-xl-flex { display: flex !important; }
+  .d-xl-inline-flex { display: inline-flex !important; }
+  .d-xl-grid { display: grid !important; }
+  .d-xl-inline-grid { display: inline-grid !important; }
+}
+
+// POSITION UTILITIES
+.position-static { position: static !important; }
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed { position: fixed !important; }
+.position-sticky { position: sticky !important; }
+
+// POSITIONING
+.top-0 { top: 0 !important; }
+.top-50 { top: 50% !important; }
+.top-100 { top: 100% !important; }
+.bottom-0 { bottom: 0 !important; }
+.bottom-50 { bottom: 50% !important; }
+.bottom-100 { bottom: 100% !important; }
+.start-0 { left: 0 !important; }
+.start-50 { left: 50% !important; }
+.start-100 { left: 100% !important; }
+.end-0 { right: 0 !important; }
+.end-50 { right: 50% !important; }
+.end-100 { right: 100% !important; }
+
+// TRANSLATE UTILITIES
+.translate-middle { transform: translate(-50%, -50%) !important; }
+.translate-middle-x { transform: translateX(-50%) !important; }
+.translate-middle-y { transform: translateY(-50%) !important; }
+
+// OVERFLOW UTILITIES
+.overflow-auto { overflow: auto !important; }
+.overflow-hidden { overflow: hidden !important; }
+.overflow-visible { overflow: visible !important; }
+.overflow-scroll { overflow: scroll !important; }
+.overflow-x-auto { overflow-x: auto !important; }
+.overflow-x-hidden { overflow-x: hidden !important; }
+.overflow-x-visible { overflow-x: visible !important; }
+.overflow-x-scroll { overflow-x: scroll !important; }
+.overflow-y-auto { overflow-y: auto !important; }
+.overflow-y-hidden { overflow-y: hidden !important; }
+.overflow-y-visible { overflow-y: visible !important; }
+.overflow-y-scroll { overflow-y: scroll !important; }
+
+// Z-INDEX UTILITIES
+.z-n1 { z-index: -1 !important; }
+.z-0 { z-index: 0 !important; }
+.z-1 { z-index: 1 !important; }
+.z-2 { z-index: 2 !important; }
+.z-3 { z-index: 3 !important; }
+.z-10 { z-index: 10 !important; }
+.z-20 { z-index: 20 !important; }
+.z-30 { z-index: 30 !important; }
+.z-40 { z-index: 40 !important; }
+.z-50 { z-index: 50 !important; }
+.z-100 { z-index: 100 !important; }
+.z-1000 { z-index: 1000 !important; }
+.z-1010 { z-index: 1010 !important; }
+.z-1020 { z-index: 1020 !important; }
+.z-1030 { z-index: 1030 !important; }
+.z-1040 { z-index: 1040 !important; }
+.z-1050 { z-index: 1050 !important; }
+.z-1060 { z-index: 1060 !important; }
+.z-1070 { z-index: 1070 !important; }
+
+// FLEXBOX UTILITIES
+// Direction
+.flex-row { flex-direction: row !important; }
+.flex-column { flex-direction: column !important; }
+.flex-row-reverse { flex-direction: row-reverse !important; }
+.flex-column-reverse { flex-direction: column-reverse !important; }
+
+// Responsive flex direction
+@media (max-width: 575px) {
+  .flex-xs-row { flex-direction: row !important; }
+  .flex-xs-column { flex-direction: column !important; }
+  .flex-xs-row-reverse { flex-direction: row-reverse !important; }
+  .flex-xs-column-reverse { flex-direction: column-reverse !important; }
+}
+
+@media (min-width: 576px) {
+  .flex-sm-row { flex-direction: row !important; }
+  .flex-sm-column { flex-direction: column !important; }
+  .flex-sm-row-reverse { flex-direction: row-reverse !important; }
+  .flex-sm-column-reverse { flex-direction: column-reverse !important; }
+}
+
+@media (min-width: 768px) {
+  .flex-md-row { flex-direction: row !important; }
+  .flex-md-column { flex-direction: column !important; }
+  .flex-md-row-reverse { flex-direction: row-reverse !important; }
+  .flex-md-column-reverse { flex-direction: column-reverse !important; }
+}
+
+// Wrap
+.flex-wrap { flex-wrap: wrap !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
+
+// Justify content
+.justify-content-start { justify-content: flex-start !important; }
+.justify-content-end { justify-content: flex-end !important; }
+.justify-content-center { justify-content: center !important; }
+.justify-content-between { justify-content: space-between !important; }
+.justify-content-around { justify-content: space-around !important; }
+.justify-content-evenly { justify-content: space-evenly !important; }
+
+// Align items
+.align-items-start { align-items: flex-start !important; }
+.align-items-end { align-items: flex-end !important; }
+.align-items-center { align-items: center !important; }
+.align-items-baseline { align-items: baseline !important; }
+.align-items-stretch { align-items: stretch !important; }
+
+// Align content
+.align-content-start { align-content: flex-start !important; }
+.align-content-end { align-content: flex-end !important; }
+.align-content-center { align-content: center !important; }
+.align-content-between { align-content: space-between !important; }
+.align-content-around { align-content: space-around !important; }
+.align-content-stretch { align-content: stretch !important; }
+
+// Align self
+.align-self-auto { align-self: auto !important; }
+.align-self-start { align-self: flex-start !important; }
+.align-self-end { align-self: flex-end !important; }
+.align-self-center { align-self: center !important; }
+.align-self-baseline { align-self: baseline !important; }
+.align-self-stretch { align-self: stretch !important; }
+
+// Flex grow/shrink
+.flex-fill { flex: 1 1 auto !important; }
+.flex-grow-0 { flex-grow: 0 !important; }
+.flex-grow-1 { flex-grow: 1 !important; }
+.flex-shrink-0 { flex-shrink: 0 !important; }
+.flex-shrink-1 { flex-shrink: 1 !important; }
+
+// ORDER
+.order-first { order: -1 !important; }
+.order-0 { order: 0 !important; }
+.order-1 { order: 1 !important; }
+.order-2 { order: 2 !important; }
+.order-3 { order: 3 !important; }
+.order-4 { order: 4 !important; }
+.order-5 { order: 5 !important; }
+.order-last { order: 6 !important; }
+
+// GRID UTILITIES
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
+.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
+
+.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) !important; }
+.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
+.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
+.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) !important; }
+.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) !important; }
+.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) !important; }
+
+// Grid column spans
+.col-span-1 { grid-column: span 1 / span 1 !important; }
+.col-span-2 { grid-column: span 2 / span 2 !important; }
+.col-span-3 { grid-column: span 3 / span 3 !important; }
+.col-span-4 { grid-column: span 4 / span 4 !important; }
+.col-span-5 { grid-column: span 5 / span 5 !important; }
+.col-span-6 { grid-column: span 6 / span 6 !important; }
+.col-span-full { grid-column: 1 / -1 !important; }
+
+// Grid row spans
+.row-span-1 { grid-row: span 1 / span 1 !important; }
+.row-span-2 { grid-row: span 2 / span 2 !important; }
+.row-span-3 { grid-row: span 3 / span 3 !important; }
+.row-span-4 { grid-row: span 4 / span 4 !important; }
+.row-span-5 { grid-row: span 5 / span 5 !important; }
+.row-span-6 { grid-row: span 6 / span 6 !important; }
+.row-span-full { grid-row: 1 / -1 !important; }
+
+// Grid column start/end
+.col-start-1 { grid-column-start: 1 !important; }
+.col-start-2 { grid-column-start: 2 !important; }
+.col-start-3 { grid-column-start: 3 !important; }
+.col-start-4 { grid-column-start: 4 !important; }
+.col-start-5 { grid-column-start: 5 !important; }
+.col-start-6 { grid-column-start: 6 !important; }
+.col-start-auto { grid-column-start: auto !important; }
+
+.col-end-1 { grid-column-end: 1 !important; }
+.col-end-2 { grid-column-end: 2 !important; }
+.col-end-3 { grid-column-end: 3 !important; }
+.col-end-4 { grid-column-end: 4 !important; }
+.col-end-5 { grid-column-end: 5 !important; }
+.col-end-6 { grid-column-end: 6 !important; }
+.col-end-auto { grid-column-end: auto !important; }
+
+// Grid row start/end
+.row-start-1 { grid-row-start: 1 !important; }
+.row-start-2 { grid-row-start: 2 !important; }
+.row-start-3 { grid-row-start: 3 !important; }
+.row-start-4 { grid-row-start: 4 !important; }
+.row-start-5 { grid-row-start: 5 !important; }
+.row-start-6 { grid-row-start: 6 !important; }
+.row-start-auto { grid-row-start: auto !important; }
+
+.row-end-1 { grid-row-end: 1 !important; }
+.row-end-2 { grid-row-end: 2 !important; }
+.row-end-3 { grid-row-end: 3 !important; }
+.row-end-4 { grid-row-end: 4 !important; }
+.row-end-5 { grid-row-end: 5 !important; }
+.row-end-6 { grid-row-end: 6 !important; }
+.row-end-auto { grid-row-end: auto !important; }
+
+// Grid auto flow
+.grid-flow-row { grid-auto-flow: row !important; }
+.grid-flow-col { grid-auto-flow: column !important; }
+.grid-flow-dense { grid-auto-flow: dense !important; }
+.grid-flow-row-dense { grid-auto-flow: row dense !important; }
+.grid-flow-col-dense { grid-auto-flow: column dense !important; }
+
+// FLOAT UTILITIES
+.float-start { float: left !important; }
+.float-end { float: right !important; }
+.float-none { float: none !important; }
+
+// CLEAR UTILITIES
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+// OBJECT FIT UTILITIES
+.object-contain { object-fit: contain !important; }
+.object-cover { object-fit: cover !important; }
+.object-fill { object-fit: fill !important; }
+.object-scale { object-fit: scale-down !important; }
+.object-none { object-fit: none !important; }
+
+// OBJECT POSITION UTILITIES
+.object-top { object-position: top !important; }
+.object-bottom { object-position: bottom !important; }
+.object-center { object-position: center !important; }
+.object-left { object-position: left !important; }
+.object-left-bottom { object-position: left bottom !important; }
+.object-left-top { object-position: left top !important; }
+.object-right { object-position: right !important; }
+.object-right-bottom { object-position: right bottom !important; }
+.object-right-top { object-position: right top !important; }
+
+// VISIBILITY UTILITIES
+.visible { visibility: visible !important; }
+.invisible { visibility: hidden !important; }
+
+// INTERACTION UTILITIES
+.user-select-all { user-select: all !important; }
+.user-select-auto { user-select: auto !important; }
+.user-select-none { user-select: none !important; }
+
+.pointer-events-none { pointer-events: none !important; }
+.pointer-events-auto { pointer-events: auto !important; }
+
+// CURSOR UTILITIES
+.cursor-auto { cursor: auto !important; }
+.cursor-default { cursor: default !important; }
+.cursor-pointer { cursor: pointer !important; }
+.cursor-wait { cursor: wait !important; }
+.cursor-text { cursor: text !important; }
+.cursor-move { cursor: move !important; }
+.cursor-help { cursor: help !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+.cursor-grab { cursor: grab !important; }
+.cursor-grabbing { cursor: grabbing !important; }
+
+// RESIZE UTILITIES
+.resize-none { resize: none !important; }
+.resize-y { resize: vertical !important; }
+.resize-x { resize: horizontal !important; }
+.resize { resize: both !important; }
+
+// BOX SIZING UTILITIES
+.box-border { box-sizing: border-box !important; }
+.box-content { box-sizing: content-box !important; }
+
+// ASPECT RATIO UTILITIES (Modern)
+@supports (aspect-ratio: 1 / 1) {
+  .aspect-auto { aspect-ratio: auto !important; }
+  .aspect-square { aspect-ratio: 1 / 1 !important; }
+  .aspect-video { aspect-ratio: 16 / 9 !important; }
+  .aspect-4-3 { aspect-ratio: 4 / 3 !important; }
+  .aspect-3-2 { aspect-ratio: 3 / 2 !important; }
+  .aspect-21-9 { aspect-ratio: 21 / 9 !important; }
+}
+
+// CLIP PATH UTILITIES
+.clip-ellipse { clip-path: ellipse(50% 50% at 50% 50%) !important; }
+.clip-circle { clip-path: circle(50% at 50% 50%) !important; }
+.clip-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important; }
+.clip-none { clip-path: none !important; }
+
+// TRANSFORM UTILITIES
+.transform { transform: var(--tw-transform) !important; }
+.transform-none { transform: none !important; }
+
+.rotate-0 { --tw-rotate: 0deg; transform: rotate(var(--tw-rotate)) !important; }
+.rotate-45 { --tw-rotate: 45deg; transform: rotate(var(--tw-rotate)) !important; }
+.rotate-90 { --tw-rotate: 90deg; transform: rotate(var(--tw-rotate)) !important; }
+.rotate-180 { --tw-rotate: 180deg; transform: rotate(var(--tw-rotate)) !important; }
+
+.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-75 { --tw-scale-x: 0.75; --tw-scale-y: 0.75; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-90 { --tw-scale-x: 0.9; --tw-scale-y: 0.9; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
+.scale-150 { --tw-scale-x: 1.5; --tw-scale-y: 1.5; transform: scale(var(--tw-scale-x), var(--tw-scale-y)) !important; }
--- a/projects/shared-ui/src/styles/commons/utilities/_scrollbar-utilities.scss
+++ b/projects/shared-ui/src/styles/commons/utilities/_scrollbar-utilities.scss
@@ -0,0 +1,408 @@
+// ==========================================================================
+// SCROLLBAR UTILITIES
+// ==========================================================================
+// Scrollbar styling utilities with visibility options
+// Theme-agnostic scrollbar controls
+// ==========================================================================
+
+// SCROLLBAR VISIBILITY OPTIONS
+.scrollbar-visible {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);
+
+  // Webkit scrollbar styling (Chrome, Safari, Edge)
+  &::-webkit-scrollbar {
+    width: #{$base-spacing-2}; // 8px
+    height: #{$base-spacing-2};
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--scrollbar-track, transparent);
+    border-radius: #{$base-border-radius-sm};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
+    border-radius: #{$base-border-radius-sm};
+    border: 1px solid var(--scrollbar-thumb-border, transparent);
+
+    &:hover {
+      background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
+    }
+
+    &:active {
+      background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: var(--scrollbar-corner, transparent);
+  }
+}
+
+.scrollbar-invisible {
+  // Firefox
+  scrollbar-width: none;
+  
+  // Internet Explorer and Edge
+  -ms-overflow-style: none;
+
+  // Webkit browsers (Chrome, Safari, newer Edge)
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+// SCROLLBAR SIZING OPTIONS
+.scrollbar-thin {
+  scrollbar-width: thin;
+  
+  &::-webkit-scrollbar {
+    width: #{$base-spacing-1}; // 4px
+    height: #{$base-spacing-1};
+  }
+}
+
+.scrollbar-thick {
+  scrollbar-width: auto;
+  
+  &::-webkit-scrollbar {
+    width: #{$base-spacing-3}; // 12px
+    height: #{$base-spacing-3};
+  }
+}
+
+// SCROLLBAR BEHAVIOR OPTIONS
+.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+.scroll-auto {
+  scroll-behavior: auto;
+}
+
+// OVERFLOW UTILITIES WITH SCROLLBAR CONTROL
+.overflow-auto-visible {
+  overflow: auto;
+  @extend .scrollbar-visible;
+}
+
+.overflow-auto-invisible {
+  overflow: auto;
+  @extend .scrollbar-invisible;
+}
+
+.overflow-scroll-visible {
+  overflow: scroll;
+  @extend .scrollbar-visible;
+}
+
+.overflow-scroll-invisible {
+  overflow: scroll;
+  @extend .scrollbar-invisible;
+}
+
+.overflow-y-auto-visible {
+  overflow-y: auto;
+  overflow-x: hidden;
+  @extend .scrollbar-visible;
+}
+
+.overflow-y-auto-invisible {
+  overflow-y: auto;
+  overflow-x: hidden;
+  @extend .scrollbar-invisible;
+}
+
+.overflow-x-auto-visible {
+  overflow-x: auto;
+  overflow-y: hidden;
+  @extend .scrollbar-visible;
+}
+
+.overflow-x-auto-invisible {
+  overflow-x: auto;
+  overflow-y: hidden;
+  @extend .scrollbar-invisible;
+}
+
+// HOVER-BASED SCROLLBAR VISIBILITY
+.scrollbar-hover {
+  // Hide by default
+  @extend .scrollbar-invisible;
+  
+  // Show on hover
+  &:hover {
+    @extend .scrollbar-visible;
+  }
+}
+
+// FOCUS-BASED SCROLLBAR VISIBILITY
+.scrollbar-focus {
+  // Hide by default
+  @extend .scrollbar-invisible;
+  
+  // Show on focus-within
+  &:focus-within {
+    @extend .scrollbar-visible;
+  }
+}
+
+// SCROLLBAR THEME VARIANTS
+.scrollbar-light {
+  --scrollbar-track: rgba(255, 255, 255, 0.1);
+  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
+  --scrollbar-thumb-active: rgba(255, 255, 255, 0.7);
+  --scrollbar-thumb-border: rgba(255, 255, 255, 0.1);
+}
+
+.scrollbar-dark {
+  --scrollbar-track: rgba(0, 0, 0, 0.1);
+  --scrollbar-thumb: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
+  --scrollbar-thumb-active: rgba(0, 0, 0, 0.7);
+  --scrollbar-thumb-border: rgba(0, 0, 0, 0.1);
+}
+
+// SCROLLBAR POSITION UTILITIES
+.scroll-padding-block-start {
+  scroll-padding-block-start: var(--scroll-padding-block-start, #{$semantic-spacing-layout-section-sm});
+}
+
+.scroll-padding-block-end {
+  scroll-padding-block-end: var(--scroll-padding-block-end, #{$semantic-spacing-layout-section-sm});
+}
+
+.scroll-padding-inline-start {
+  scroll-padding-inline-start: var(--scroll-padding-inline-start, #{$semantic-spacing-component-padding-lg});
+}
+
+.scroll-padding-inline-end {
+  scroll-padding-inline-end: var(--scroll-padding-inline-end, #{$semantic-spacing-component-padding-lg});
+}
+
+// SCROLL SNAP UTILITIES
+.scroll-snap-x {
+  scroll-snap-type: x mandatory;
+  
+  > * {
+    scroll-snap-align: start;
+  }
+}
+
+.scroll-snap-y {
+  scroll-snap-type: y mandatory;
+  
+  > * {
+    scroll-snap-align: start;
+  }
+}
+
+.scroll-snap-both {
+  scroll-snap-type: both mandatory;
+  
+  > * {
+    scroll-snap-align: start;
+  }
+}
+
+.scroll-snap-proximity {
+  scroll-snap-type: y proximity;
+  
+  > * {
+    scroll-snap-align: start;
+  }
+}
+
+.scroll-snap-center {
+  > * {
+    scroll-snap-align: center;
+  }
+}
+
+.scroll-snap-end {
+  > * {
+    scroll-snap-align: end;
+  }
+}
+
+// MOMENTUM SCROLLING (iOS)
+.scroll-momentum {
+  -webkit-overflow-scrolling: touch;
+}
+
+// CUSTOM SCROLLBAR COMPONENT CLASSES
+.custom-scrollbar {
+  // Base scrollbar with custom styling
+  @extend .scrollbar-visible;
+  
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, 
+      var(--scrollbar-gradient-start, #667eea), 
+      var(--scrollbar-gradient-end, #764ba2)
+    );
+    border-radius: #{$base-border-radius-lg};
+    border: 2px solid var(--scrollbar-border, transparent);
+    
+    &:hover {
+      transform: scale(1.1);
+      transition: transform 0.2s ease;
+    }
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-custom, rgba(0, 0, 0, 0.05));
+    border-radius: #{$base-border-radius-lg};
+    margin: #{$base-spacing-1};
+  }
+}
+
+// DEVELOPER CHOICE MIXINS - For programmatic scrollbar control
+@mixin scrollbar-choice($visible: true) {
+  @if $visible {
+    @extend .scrollbar-visible;
+  } @else {
+    @extend .scrollbar-invisible;
+  }
+}
+
+// Utility classes for Angular component integration
+.scrollbar-auto-visible {
+  @include scrollbar-choice(true);
+}
+
+.scrollbar-auto-invisible {
+  @include scrollbar-choice(false);
+}
+
+// RESPONSIVE SCROLLBAR UTILITIES
+@media (max-width: #{$base-breakpoint-md}) {
+  .scrollbar-mobile-invisible {
+    // Firefox
+    scrollbar-width: none;
+    
+    // Internet Explorer and Edge
+    -ms-overflow-style: none;
+
+    // Webkit browsers (Chrome, Safari, newer Edge)
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+  
+  .scrollbar-mobile-visible {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);
+
+    // Webkit scrollbar styling (Chrome, Safari, Edge)
+    &::-webkit-scrollbar {
+      width: #{$base-spacing-2}; // 8px
+      height: #{$base-spacing-2};
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--scrollbar-track, transparent);
+      border-radius: #{$base-border-radius-sm};
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
+      border-radius: #{$base-border-radius-sm};
+      border: 1px solid var(--scrollbar-thumb-border, transparent);
+
+      &:hover {
+        background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
+      }
+
+      &:active {
+        background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
+      }
+    }
+
+    &::-webkit-scrollbar-corner {
+      background: var(--scrollbar-corner, transparent);
+    }
+  }
+}
+
+@media (min-width: #{$base-breakpoint-md}) {
+  .scrollbar-desktop-invisible {
+    // Firefox
+    scrollbar-width: none;
+    
+    // Internet Explorer and Edge
+    -ms-overflow-style: none;
+
+    // Webkit browsers (Chrome, Safari, newer Edge)
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+  
+  .scrollbar-desktop-visible {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);
+
+    // Webkit scrollbar styling (Chrome, Safari, Edge)
+    &::-webkit-scrollbar {
+      width: #{$base-spacing-2}; // 8px
+      height: #{$base-spacing-2};
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--scrollbar-track, transparent);
+      border-radius: #{$base-border-radius-sm};
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
+      border-radius: #{$base-border-radius-sm};
+      border: 1px solid var(--scrollbar-thumb-border, transparent);
+
+      &:hover {
+        background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
+      }
+
+      &:active {
+        background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
+      }
+    }
+
+    &::-webkit-scrollbar-corner {
+      background: var(--scrollbar-corner, transparent);
+    }
+  }
+}
+
+// ACCESSIBILITY CONSIDERATIONS
+.scrollbar-high-contrast {
+  --scrollbar-thumb: var(--color-text, #000);
+  --scrollbar-thumb-hover: var(--color-text-emphasis, #333);
+  --scrollbar-track: var(--color-border, #ccc);
+}
+
+.scrollbar-reduced-motion {
+  scroll-behavior: auto;
+  
+  &::-webkit-scrollbar-thumb {
+    transition: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scrollbar-visible,
+  .custom-scrollbar {
+    scroll-behavior: auto;
+    
+    &::-webkit-scrollbar-thumb {
+      transition: none;
+    }
+  }
+}
--- a/projects/shared-ui/src/styles/commons/utilities/_spacing-utilities.scss
+++ b/projects/shared-ui/src/styles/commons/utilities/_spacing-utilities.scss
@@ -0,0 +1,455 @@
+// ==========================================================================
+// SPACING UTILITIES
+// ==========================================================================
+// Utility classes for margin and padding
+// Uses CSS custom properties for consistent spacing scale
+// ==========================================================================
+
+// SPACING SCALE - Using base design tokens
+:root {
+  --space-0: #{$base-spacing-0};
+  --space-1: #{$base-spacing-1};
+  --space-2: #{$base-spacing-2};
+  --space-3: #{$base-spacing-3};
+  --space-4: #{$base-spacing-4};
+  --space-5: #{$base-spacing-5};
+  --space-6: #{$base-spacing-6};
+  --space-7: #{$base-spacing-7};
+  --space-8: #{$base-spacing-8};
+  --space-9: #{$base-spacing-9};
+  --space-10: #{$base-spacing-10};
+  --space-11: #{$base-spacing-11};
+  --space-12: #{$base-spacing-12};
+  --space-14: #{$base-spacing-14};
+  --space-16: #{$base-spacing-16};
+  --space-20: #{$base-spacing-20};
+  --space-24: #{$base-spacing-24};
+  --space-28: #{$base-spacing-28};
+  --space-32: #{$base-spacing-32};
+  --space-36: #{$base-spacing-36};
+  --space-40: #{$base-spacing-40};
+  --space-44: #{$base-spacing-44};
+  --space-48: #{$base-spacing-48};
+  --space-52: #{$base-spacing-52};
+  --space-56: #{$base-spacing-56};
+  --space-60: #{$base-spacing-60};
+  --space-64: #{$base-spacing-64};
+  --space-72: #{$base-spacing-72};
+  --space-80: #{$base-spacing-80};
+  --space-96: #{$base-spacing-96};
+  
+  // Negative spacing
+  --space--1: -#{$base-spacing-1};
+  --space--2: -#{$base-spacing-2};
+  --space--3: -#{$base-spacing-3};
+  --space--4: -#{$base-spacing-4};
+  --space--5: -#{$base-spacing-5};
+  --space--6: -#{$base-spacing-6};
+  --space--7: -#{$base-spacing-7};
+  --space--8: -#{$base-spacing-8};
+  --space--9: -#{$base-spacing-9};
+  --space--10: -#{$base-spacing-10};
+  --space--11: -#{$base-spacing-11};
+  --space--12: -#{$base-spacing-12};
+  --space--14: -#{$base-spacing-14};
+  --space--16: -#{$base-spacing-16};
+  --space--20: -#{$base-spacing-20};
+  --space--24: -#{$base-spacing-24};
+  --space--28: -#{$base-spacing-28};
+  --space--32: -#{$base-spacing-32};
+}
+
+// MARGIN UTILITIES
+// All margins
+.m-0 { margin: var(--space-0) !important; }
+.m-1 { margin: var(--space-1) !important; }
+.m-2 { margin: var(--space-2) !important; }
+.m-3 { margin: var(--space-3) !important; }
+.m-4 { margin: var(--space-4) !important; }
+.m-5 { margin: var(--space-5) !important; }
+.m-6 { margin: var(--space-6) !important; }
+.m-7 { margin: var(--space-7) !important; }
+.m-8 { margin: var(--space-8) !important; }
+.m-9 { margin: var(--space-9) !important; }
+.m-10 { margin: var(--space-10) !important; }
+.m-11 { margin: var(--space-11) !important; }
+.m-12 { margin: var(--space-12) !important; }
+.m-14 { margin: var(--space-14) !important; }
+.m-16 { margin: var(--space-16) !important; }
+.m-20 { margin: var(--space-20) !important; }
+.m-24 { margin: var(--space-24) !important; }
+.m-28 { margin: var(--space-28) !important; }
+.m-32 { margin: var(--space-32) !important; }
+.m-36 { margin: var(--space-36) !important; }
+.m-40 { margin: var(--space-40) !important; }
+.m-44 { margin: var(--space-44) !important; }
+.m-48 { margin: var(--space-48) !important; }
+.m-52 { margin: var(--space-52) !important; }
+.m-56 { margin: var(--space-56) !important; }
+.m-60 { margin: var(--space-60) !important; }
+.m-64 { margin: var(--space-64) !important; }
+.m-72 { margin: var(--space-72) !important; }
+.m-80 { margin: var(--space-80) !important; }
+.m-96 { margin: var(--space-96) !important; }
+
+// Auto margin
+.m-auto { margin: auto !important; }
+
+// Negative margins
+.m-n1 { margin: var(--space--1) !important; }
+.m-n2 { margin: var(--space--2) !important; }
+.m-n3 { margin: var(--space--3) !important; }
+.m-n4 { margin: var(--space--4) !important; }
+.m-n5 { margin: var(--space--5) !important; }
+.m-n6 { margin: var(--space--6) !important; }
+.m-n8 { margin: var(--space--8) !important; }
+.m-n10 { margin: var(--space--10) !important; }
+.m-n12 { margin: var(--space--12) !important; }
+.m-n16 { margin: var(--space--16) !important; }
+.m-n20 { margin: var(--space--20) !important; }
+.m-n24 { margin: var(--space--24) !important; }
+
+// Margin X (horizontal)
+.mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
+.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
+.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
+.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
+.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
+.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
+.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
+.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
+.mx-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }
+.mx-12 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
+.mx-16 { margin-left: var(--space-16) !important; margin-right: var(--space-16) !important; }
+.mx-20 { margin-left: var(--space-20) !important; margin-right: var(--space-20) !important; }
+.mx-24 { margin-left: var(--space-24) !important; margin-right: var(--space-24) !important; }
+.mx-32 { margin-left: var(--space-32) !important; margin-right: var(--space-32) !important; }
+
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+
+// Margin Y (vertical)
+.my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
+.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
+.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
+.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
+.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
+.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
+.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
+.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
+.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
+.my-12 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
+.my-16 { margin-top: var(--space-16) !important; margin-bottom: var(--space-16) !important; }
+.my-20 { margin-top: var(--space-20) !important; margin-bottom: var(--space-20) !important; }
+.my-24 { margin-top: var(--space-24) !important; margin-bottom: var(--space-24) !important; }
+.my-32 { margin-top: var(--space-32) !important; margin-bottom: var(--space-32) !important; }
+
+.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
+
+// Individual margins
+.mt-0 { margin-top: var(--space-0) !important; }
+.mt-1 { margin-top: var(--space-1) !important; }
+.mt-2 { margin-top: var(--space-2) !important; }
+.mt-3 { margin-top: var(--space-3) !important; }
+.mt-4 { margin-top: var(--space-4) !important; }
+.mt-5 { margin-top: var(--space-5) !important; }
+.mt-6 { margin-top: var(--space-6) !important; }
+.mt-8 { margin-top: var(--space-8) !important; }
+.mt-10 { margin-top: var(--space-10) !important; }
+.mt-12 { margin-top: var(--space-12) !important; }
+.mt-16 { margin-top: var(--space-16) !important; }
+.mt-20 { margin-top: var(--space-20) !important; }
+.mt-24 { margin-top: var(--space-24) !important; }
+.mt-32 { margin-top: var(--space-32) !important; }
+.mt-auto { margin-top: auto !important; }
+
+.mb-0 { margin-bottom: var(--space-0) !important; }
+.mb-1 { margin-bottom: var(--space-1) !important; }
+.mb-2 { margin-bottom: var(--space-2) !important; }
+.mb-3 { margin-bottom: var(--space-3) !important; }
+.mb-4 { margin-bottom: var(--space-4) !important; }
+.mb-5 { margin-bottom: var(--space-5) !important; }
+.mb-6 { margin-bottom: var(--space-6) !important; }
+.mb-8 { margin-bottom: var(--space-8) !important; }
+.mb-10 { margin-bottom: var(--space-10) !important; }
+.mb-12 { margin-bottom: var(--space-12) !important; }
+.mb-16 { margin-bottom: var(--space-16) !important; }
+.mb-20 { margin-bottom: var(--space-20) !important; }
+.mb-24 { margin-bottom: var(--space-24) !important; }
+.mb-32 { margin-bottom: var(--space-32) !important; }
+.mb-auto { margin-bottom: auto !important; }
+
+.ms-0 { margin-left: var(--space-0) !important; }
+.ms-1 { margin-left: var(--space-1) !important; }
+.ms-2 { margin-left: var(--space-2) !important; }
+.ms-3 { margin-left: var(--space-3) !important; }
+.ms-4 { margin-left: var(--space-4) !important; }
+.ms-5 { margin-left: var(--space-5) !important; }
+.ms-6 { margin-left: var(--space-6) !important; }
+.ms-8 { margin-left: var(--space-8) !important; }
+.ms-10 { margin-left: var(--space-10) !important; }
+.ms-12 { margin-left: var(--space-12) !important; }
+.ms-16 { margin-left: var(--space-16) !important; }
+.ms-20 { margin-left: var(--space-20) !important; }
+.ms-24 { margin-left: var(--space-24) !important; }
+.ms-32 { margin-left: var(--space-32) !important; }
+.ms-auto { margin-left: auto !important; }
+
+.me-0 { margin-right: var(--space-0) !important; }
+.me-1 { margin-right: var(--space-1) !important; }
+.me-2 { margin-right: var(--space-2) !important; }
+.me-3 { margin-right: var(--space-3) !important; }
+.me-4 { margin-right: var(--space-4) !important; }
+.me-5 { margin-right: var(--space-5) !important; }
+.me-6 { margin-right: var(--space-6) !important; }
+.me-8 { margin-right: var(--space-8) !important; }
+.me-10 { margin-right: var(--space-10) !important; }
+.me-12 { margin-right: var(--space-12) !important; }
+.me-16 { margin-right: var(--space-16) !important; }
+.me-20 { margin-right: var(--space-20) !important; }
+.me-24 { margin-right: var(--space-24) !important; }
+.me-32 { margin-right: var(--space-32) !important; }
+.me-auto { margin-right: auto !important; }
+
+// PADDING UTILITIES
+// All padding
+.p-0 { padding: var(--space-0) !important; }
+.p-1 { padding: var(--space-1) !important; }
+.p-2 { padding: var(--space-2) !important; }
+.p-3 { padding: var(--space-3) !important; }
+.p-4 { padding: var(--space-4) !important; }
+.p-5 { padding: var(--space-5) !important; }
+.p-6 { padding: var(--space-6) !important; }
+.p-7 { padding: var(--space-7) !important; }
+.p-8 { padding: var(--space-8) !important; }
+.p-9 { padding: var(--space-9) !important; }
+.p-10 { padding: var(--space-10) !important; }
+.p-11 { padding: var(--space-11) !important; }
+.p-12 { padding: var(--space-12) !important; }
+.p-14 { padding: var(--space-14) !important; }
+.p-16 { padding: var(--space-16) !important; }
+.p-20 { padding: var(--space-20) !important; }
+.p-24 { padding: var(--space-24) !important; }
+.p-28 { padding: var(--space-28) !important; }
+.p-32 { padding: var(--space-32) !important; }
+.p-36 { padding: var(--space-36) !important; }
+.p-40 { padding: var(--space-40) !important; }
+.p-44 { padding: var(--space-44) !important; }
+.p-48 { padding: var(--space-48) !important; }
+
+// Padding X (horizontal)
+.px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
+.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
+.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
+.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
+.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
+.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
+.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
+.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
+.px-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
+.px-12 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }
+.px-16 { padding-left: var(--space-16) !important; padding-right: var(--space-16) !important; }
+.px-20 { padding-left: var(--space-20) !important; padding-right: var(--space-20) !important; }
+.px-24 { padding-left: var(--space-24) !important; padding-right: var(--space-24) !important; }
+.px-32 { padding-left: var(--space-32) !important; padding-right: var(--space-32) !important; }
+
+// Padding Y (vertical)
+.py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
+.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
+.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
+.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
+.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
+.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
+.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
+.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
+.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
+.py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
+.py-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
+.py-20 { padding-top: var(--space-20) !important; padding-bottom: var(--space-20) !important; }
+.py-24 { padding-top: var(--space-24) !important; padding-bottom: var(--space-24) !important; }
+.py-32 { padding-top: var(--space-32) !important; padding-bottom: var(--space-32) !important; }
+
+// Individual padding
+.pt-0 { padding-top: var(--space-0) !important; }
+.pt-1 { padding-top: var(--space-1) !important; }
+.pt-2 { padding-top: var(--space-2) !important; }
+.pt-3 { padding-top: var(--space-3) !important; }
+.pt-4 { padding-top: var(--space-4) !important; }
+.pt-5 { padding-top: var(--space-5) !important; }
+.pt-6 { padding-top: var(--space-6) !important; }
+.pt-8 { padding-top: var(--space-8) !important; }
+.pt-10 { padding-top: var(--space-10) !important; }
+.pt-12 { padding-top: var(--space-12) !important; }
+.pt-16 { padding-top: var(--space-16) !important; }
+.pt-20 { padding-top: var(--space-20) !important; }
+.pt-24 { padding-top: var(--space-24) !important; }
+.pt-32 { padding-top: var(--space-32) !important; }
+
+.pb-0 { padding-bottom: var(--space-0) !important; }
+.pb-1 { padding-bottom: var(--space-1) !important; }
+.pb-2 { padding-bottom: var(--space-2) !important; }
+.pb-3 { padding-bottom: var(--space-3) !important; }
+.pb-4 { padding-bottom: var(--space-4) !important; }
+.pb-5 { padding-bottom: var(--space-5) !important; }
+.pb-6 { padding-bottom: var(--space-6) !important; }
+.pb-8 { padding-bottom: var(--space-8) !important; }
+.pb-10 { padding-bottom: var(--space-10) !important; }
+.pb-12 { padding-bottom: var(--space-12) !important; }
+.pb-16 { padding-bottom: var(--space-16) !important; }
+.pb-20 { padding-bottom: var(--space-20) !important; }
+.pb-24 { padding-bottom: var(--space-24) !important; }
+.pb-32 { padding-bottom: var(--space-32) !important; }
+
+.ps-0 { padding-left: var(--space-0) !important; }
+.ps-1 { padding-left: var(--space-1) !important; }
+.ps-2 { padding-left: var(--space-2) !important; }
+.ps-3 { padding-left: var(--space-3) !important; }
+.ps-4 { padding-left: var(--space-4) !important; }
+.ps-5 { padding-left: var(--space-5) !important; }
+.ps-6 { padding-left: var(--space-6) !important; }
+.ps-8 { padding-left: var(--space-8) !important; }
+.ps-10 { padding-left: var(--space-10) !important; }
+.ps-12 { padding-left: var(--space-12) !important; }
+.ps-16 { padding-left: var(--space-16) !important; }
+.ps-20 { padding-left: var(--space-20) !important; }
+.ps-24 { padding-left: var(--space-24) !important; }
+.ps-32 { padding-left: var(--space-32) !important; }
+
+.pe-0 { padding-right: var(--space-0) !important; }
+.pe-1 { padding-right: var(--space-1) !important; }
+.pe-2 { padding-right: var(--space-2) !important; }
+.pe-3 { padding-right: var(--space-3) !important; }
+.pe-4 { padding-right: var(--space-4) !important; }
+.pe-5 { padding-right: var(--space-5) !important; }
+.pe-6 { padding-right: var(--space-6) !important; }
+.pe-8 { padding-right: var(--space-8) !important; }
+.pe-10 { padding-right: var(--space-10) !important; }
+.pe-12 { padding-right: var(--space-12) !important; }
+.pe-16 { padding-right: var(--space-16) !important; }
+.pe-20 { padding-right: var(--space-20) !important; }
+.pe-24 { padding-right: var(--space-24) !important; }
+.pe-32 { padding-right: var(--space-32) !important; }
+
+// GAP UTILITIES (for flexbox and grid)
+.gap-0 { gap: var(--space-0) !important; }
+.gap-1 { gap: var(--space-1) !important; }
+.gap-2 { gap: var(--space-2) !important; }
+.gap-3 { gap: var(--space-3) !important; }
+.gap-4 { gap: var(--space-4) !important; }
+.gap-5 { gap: var(--space-5) !important; }
+.gap-6 { gap: var(--space-6) !important; }
+.gap-8 { gap: var(--space-8) !important; }
+.gap-10 { gap: var(--space-10) !important; }
+.gap-12 { gap: var(--space-12) !important; }
+.gap-16 { gap: var(--space-16) !important; }
+.gap-20 { gap: var(--space-20) !important; }
+.gap-24 { gap: var(--space-24) !important; }
+.gap-32 { gap: var(--space-32) !important; }
+
+.gap-x-0 { column-gap: var(--space-0) !important; }
+.gap-x-1 { column-gap: var(--space-1) !important; }
+.gap-x-2 { column-gap: var(--space-2) !important; }
+.gap-x-3 { column-gap: var(--space-3) !important; }
+.gap-x-4 { column-gap: var(--space-4) !important; }
+.gap-x-5 { column-gap: var(--space-5) !important; }
+.gap-x-6 { column-gap: var(--space-6) !important; }
+.gap-x-8 { column-gap: var(--space-8) !important; }
+.gap-x-10 { column-gap: var(--space-10) !important; }
+.gap-x-12 { column-gap: var(--space-12) !important; }
+.gap-x-16 { column-gap: var(--space-16) !important; }
+.gap-x-20 { column-gap: var(--space-20) !important; }
+.gap-x-24 { column-gap: var(--space-24) !important; }
+.gap-x-32 { column-gap: var(--space-32) !important; }
+
+.gap-y-0 { row-gap: var(--space-0) !important; }
+.gap-y-1 { row-gap: var(--space-1) !important; }
+.gap-y-2 { row-gap: var(--space-2) !important; }
+.gap-y-3 { row-gap: var(--space-3) !important; }
+.gap-y-4 { row-gap: var(--space-4) !important; }
+.gap-y-5 { row-gap: var(--space-5) !important; }
+.gap-y-6 { row-gap: var(--space-6) !important; }
+.gap-y-8 { row-gap: var(--space-8) !important; }
+.gap-y-10 { row-gap: var(--space-10) !important; }
+.gap-y-12 { row-gap: var(--space-12) !important; }
+.gap-y-16 { row-gap: var(--space-16) !important; }
+.gap-y-20 { row-gap: var(--space-20) !important; }
+.gap-y-24 { row-gap: var(--space-24) !important; }
+.gap-y-32 { row-gap: var(--space-32) !important; }
+
+// RESPONSIVE SPACING UTILITIES
+@media (min-width: 576px) {
+  .m-sm-0 { margin: var(--space-0) !important; }
+  .m-sm-1 { margin: var(--space-1) !important; }
+  .m-sm-2 { margin: var(--space-2) !important; }
+  .m-sm-3 { margin: var(--space-3) !important; }
+  .m-sm-4 { margin: var(--space-4) !important; }
+  .m-sm-6 { margin: var(--space-6) !important; }
+  .m-sm-8 { margin: var(--space-8) !important; }
+  .m-sm-12 { margin: var(--space-12) !important; }
+  .m-sm-16 { margin: var(--space-16) !important; }
+  .m-sm-20 { margin: var(--space-20) !important; }
+  .m-sm-24 { margin: var(--space-24) !important; }
+  
+  .p-sm-0 { padding: var(--space-0) !important; }
+  .p-sm-1 { padding: var(--space-1) !important; }
+  .p-sm-2 { padding: var(--space-2) !important; }
+  .p-sm-3 { padding: var(--space-3) !important; }
+  .p-sm-4 { padding: var(--space-4) !important; }
+  .p-sm-6 { padding: var(--space-6) !important; }
+  .p-sm-8 { padding: var(--space-8) !important; }
+  .p-sm-12 { padding: var(--space-12) !important; }
+  .p-sm-16 { padding: var(--space-16) !important; }
+  .p-sm-20 { padding: var(--space-20) !important; }
+  .p-sm-24 { padding: var(--space-24) !important; }
+}
+
+@media (min-width: 768px) {
+  .m-md-0 { margin: var(--space-0) !important; }
+  .m-md-1 { margin: var(--space-1) !important; }
+  .m-md-2 { margin: var(--space-2) !important; }
+  .m-md-3 { margin: var(--space-3) !important; }
+  .m-md-4 { margin: var(--space-4) !important; }
+  .m-md-6 { margin: var(--space-6) !important; }
+  .m-md-8 { margin: var(--space-8) !important; }
+  .m-md-12 { margin: var(--space-12) !important; }
+  .m-md-16 { margin: var(--space-16) !important; }
+  .m-md-20 { margin: var(--space-20) !important; }
+  .m-md-24 { margin: var(--space-24) !important; }
+  
+  .p-md-0 { padding: var(--space-0) !important; }
+  .p-md-1 { padding: var(--space-1) !important; }
+  .p-md-2 { padding: var(--space-2) !important; }
+  .p-md-3 { padding: var(--space-3) !important; }
+  .p-md-4 { padding: var(--space-4) !important; }
+  .p-md-6 { padding: var(--space-6) !important; }
+  .p-md-8 { padding: var(--space-8) !important; }
+  .p-md-12 { padding: var(--space-12) !important; }
+  .p-md-16 { padding: var(--space-16) !important; }
+  .p-md-20 { padding: var(--space-20) !important; }
+  .p-md-24 { padding: var(--space-24) !important; }
+}
+
+@media (min-width: 992px) {
+  .m-lg-0 { margin: var(--space-0) !important; }
+  .m-lg-1 { margin: var(--space-1) !important; }
+  .m-lg-2 { margin: var(--space-2) !important; }
+  .m-lg-3 { margin: var(--space-3) !important; }
+  .m-lg-4 { margin: var(--space-4) !important; }
+  .m-lg-6 { margin: var(--space-6) !important; }
+  .m-lg-8 { margin: var(--space-8) !important; }
+  .m-lg-12 { margin: var(--space-12) !important; }
+  .m-lg-16 { margin: var(--space-16) !important; }
+  .m-lg-20 { margin: var(--space-20) !important; }
+  .m-lg-24 { margin: var(--space-24) !important; }
+  
+  .p-lg-0 { padding: var(--space-0) !important; }
+  .p-lg-1 { padding: var(--space-1) !important; }
+  .p-lg-2 { padding: var(--space-2) !important; }
+  .p-lg-3 { padding: var(--space-3) !important; }
+  .p-lg-4 { padding: var(--space-4) !important; }
+  .p-lg-6 { padding: var(--space-6) !important; }
+  .p-lg-8 { padding: var(--space-8) !important; }
+  .p-lg-12 { padding: var(--space-12) !important; }
+  .p-lg-16 { padding: var(--space-16) !important; }
+  .p-lg-20 { padding: var(--space-20) !important; }
+  .p-lg-24 { padding: var(--space-24) !important; }
+}
--- a/projects/shared-ui/src/styles/fontfaces/_aileron.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_aileron.scss
@@ -0,0 +1,48 @@
+$aileron-font-path: "/fonts/aileron/" !default;
+
+
+/*** Aileron**/
+@font-face {
+    font-family: 'Aileron Bold';
+    src: url("#{$aileron-font-path}Aileron-Bold-webfont.ttf") format("truetype"),
+         url('#{$aileron-font-path}Aileron-Bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
+         url('#{$aileron-font-path}Aileron-Bold-webfont.woff') format('woff'); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Aileron Semi Bold';
+    src: url("#{$aileron-font-path}Aileron-SemiBold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+  font-family: 'Aileron Heavy';
+    src: url("#{$aileron-font-path}Aileron-Heavy-webfont.ttf") format("truetype"),
+         url('#{$aileron-font-path}Aileron-Heavy-webfont.woff2') format('woff2'), /* Super Modern Browsers */
+         url('#{$aileron-font-path}Aileron-Heavy-webfont.woff') format('woff'); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+  font-family: 'Aileron Light';
+    src: url("#{$aileron-font-path}Aileron-Light.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+  font-family: 'Aileron Regular';
+    src: url("#{$aileron-font-path}Aileron-Regular-webfont.ttf") format("truetype"),
+         url('#{$aileron-font-path}Aileron-Regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
+         url('#{$aileron-font-path}Aileron-Regular-webfont.woff') format('woff'); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+.aileron {
+  font-family: 'Aileron Regular';
+}
+.aileron-heavy {
+  font-family: 'Aileron Heavy';
+}
--- a/projects/shared-ui/src/styles/fontfaces/_alegreya.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_alegreya.scss
@@ -0,0 +1,10 @@
+$alegreya-font-path: "/fonts/alegreya/" !default;
+
+@font-face {
+    font-family: 'Alegreya';
+    src: url("#{$alegreya-font-path}Alegreya-VariableFont_wght.ttf") format("truetype");
+}
+@font-face {
+    font-family: 'Alegreya Italic';
+    src: url("#{$alegreya-font-path}Alegreya-Italic-VariableFont_wght.ttf") format("truetype");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_all-fontfaces.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_all-fontfaces.scss
@@ -0,0 +1,74 @@
+/* You can add global styles to this file, and also import other style files */
+ //////////////////////////////////////////////////////////////////////
+// Fontfaces  ./
+//////////////////////////////////////////////////////////////////////
+@import './alegreya';
+@import './amarante';
+@import './archivo';
+@import './architectsdaughter.scss';
+@import './averiaseriflibre';
+@import './bebasneue';
+@import './blinker';
+@import './bonheurroyale';
+@import './bonveno';
+@import './cabin';
+@import './cinzel';
+@import './comfortaa';
+@import './commissioner';
+@import './crimson-text';
+@import './dellarespira';
+@import './dmsans';
+@import './ebgaramond';
+@import './epilogue';
+@import './exo2';
+@import './figtree';
+@import './fraunces';
+@import './iceland';
+@import './geist';
+@import './glassantiqua';
+@import './inter';
+@import './josefin_sans';
+@import './karla';
+@import './lato';
+@import './leaguespartan';
+@import './lexend';
+@import './librebaskerville';
+@import './limelight';
+@import './lora';
+@import './manrope';
+@import './monasans';
+@import './metropolis';
+@import './merriweather';
+@import './montserrat';
+@import './opensans';
+@import './outfit';
+@import './overused';
+@import './nacelle';
+@import './notosans';
+@import './nunito';
+@import './oswald';
+@import './playfair_display';
+@import './plusjakatasans';
+@import './poppins';
+@import './questrial';
+@import './quicksand';
+@import './raleway';
+@import './roboto';
+@import './robotomono';
+@import './robotoslab';
+@import './rubik';
+@import './sacramento';
+@import './satoshi';
+@import './sifonn';
+@import './sixcaps';
+@import './sourcesanspro';
+@import './sora';
+@import './sourcesanspro';
+@import './spacegrotesk';
+@import './spacemono';
+@import './unbounded';
+@import './urbanist';
+@import './vollkorn';
+@import './whisper';
+@import './worksans';
+@import './zillaslab';
--- a/projects/shared-ui/src/styles/fontfaces/_amarante.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_amarante.scss
@@ -0,0 +1,8 @@
+$amarante-font-path: "/fonts/amarante/" !default;
+
+@font-face {
+    font-family: 'Amarante Regular';
+    src: url("#{$amarante-font-path}Amarante-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_architectsdaughter.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_architectsdaughter.scss
@@ -0,0 +1,9 @@
+$architectsdaughter-font-path: "/fonts/architectsdaughter/" !default;
+
+@font-face {
+    font-family: 'Architects Daughter';
+    src: url("#{$architectsdaughter-font-path}ArchitectsDaughter-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
--- a/projects/shared-ui/src/styles/fontfaces/_archivo.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_archivo.scss
@@ -0,0 +1,12 @@
+$archivo-font-path: "/fonts/archivo/" !default;
+
+
+@font-face {
+    font-family: 'Archivo';
+    src: url("#{$archivo-font-path}Archivo-VariableFont_wdth,wght.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'Archivo';
+    src: url("#{$archivo-font-path}Archivo-Italic-VariableFont_wght.ttf") format("truetype");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_archivonarrow.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_archivonarrow.scss
@@ -0,0 +1,9 @@
+$archivonarrow-font-path: "/fonts/archivonarrow/" !default;
+
+
+@font-face {
+    font-family: "Archivo Narrow Regular";
+    src: local(Archivo Narrow Regular), url('#{$archivonarrow-font-path}ArchivoNarrow-Regular.ttf');
+    src: url("#{$archivonarrow-font-path}ArchivoNarrow-Regular.ttf") format("truetype");
+    font-weight: 500;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_averiaseriflibre.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_averiaseriflibre.scss
@@ -0,0 +1,33 @@
+$averia-font-path: "/fonts/averiaseriflibre/" !default;
+
+
+@font-face {
+    font-family: 'Averia Regular';
+    src: url("#{$averia-font-path}AveriaSerifLibre-Regular.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'Averia Bold';
+    src: url("#{$averia-font-path}AveriaSerifLibre-Bold.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'Averia Bold Italic';
+    src: url("#{$averia-font-path}AveriaSerifLibre-BoldItalic.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'Averia Italic';
+    src: url("#{$averia-font-path}AveriaSerifLibre-talic.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'Averia Light';
+    src: url("#{$averia-font-path}AveriaSerifLibre-Light.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'Averia Light Italic';
+    src: url("#{$averia-font-path}AveriaSerifLibre-LightItalic.ttf") format("truetype");
+}
+
--- a/projects/shared-ui/src/styles/fontfaces/_bebasneue.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_bebasneue.scss
@@ -0,0 +1,16 @@
+$bebasneue-font-path: "/fonts/bebasneue/" !default;
+
+/*** Bebas Neue ***/
+@font-face {
+    font-family: 'Bebas Neue Regular';
+    src: url("#{$bebasneue-font-path}bebasneue-regular-webfont.ttf") format("truetype"),
+         url('#{$bebasneue-font-path}bebasneue-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
+         url('#{$bebasneue-font-path}bebasneue-regular-webfont.woff') format('woff'); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+.bebas-neue {
+  font-family: 'bebas_neueregular';
+}
--- a/projects/shared-ui/src/styles/fontfaces/_blinker.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_blinker.scss
@@ -0,0 +1,36 @@
+$blinker-font-path: "/fonts/blinker/" !default;
+
+
+/*** Blinker**/
+@font-face {
+    font-family: 'Blinker Bold';
+    src: url("#{$blinker-font-path}Blinker-Bold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Blinker Semi Bold';
+    src: url("#{$blinker-font-path}Blinker-SemiBold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+  font-family: 'Blinker Light';
+    src: url("#{$blinker-font-path}Blinker-Light.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+  font-family: 'Blinker Regular';
+    src: url("#{$blinker-font-path}Blinker-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+  font-family: 'Blinker Thin';
+    src: url("#{$blinker-font-path}Blinker-Thin.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_bonheurroyale.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_bonheurroyale.scss
@@ -0,0 +1,8 @@
+$bonheurroyale-font-path: "/fonts/bonheurroyale/" !default;
+
+@font-face {
+    font-family: 'Bonheur Royale Regular';
+    src: url("#{$bonheurroyale-font-path}BonheurRoyale-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_bonveno.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_bonveno.scss
@@ -0,0 +1,9 @@
+$bonvenocf-font-path: "/fonts/bonvenocf/" !default;
+
+
+@font-face {
+    font-family: "BonvenoCFLight";
+    src: url("#{$bonvenocf-font-path}BonvenoCF-Light.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_cabin.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_cabin.scss
@@ -0,0 +1,13 @@
+$cabin-font-path: "/fonts/cabin/" !default;
+
+
+@font-face {
+    font-family: "Cabin";
+    src: url("#{$cabin-font-path}Cabin-VariableFont_wdth,wght.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Cabin Italic";
+    src: url("#{$cabin-font-path}Cabin-Italic-VariableFont_wdth,wght.ttf") format("truetype");
+}
+
--- a/projects/shared-ui/src/styles/fontfaces/_cinzel.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_cinzel.scss
@@ -0,0 +1,8 @@
+$cinzel-font-path: "/fonts/cinzel/" !default;
+
+
+@font-face {
+    font-family: "Cinzel";
+    src: url("#{$cinzel-font-path}Cinzel-VariableFont_wght.ttf") format("truetype");
+}
+
--- a/projects/shared-ui/src/styles/fontfaces/_comfortaa.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_comfortaa.scss
@@ -0,0 +1,9 @@
+$comfortaa-font-path: "/fonts/comfortaa/" !default;
+
+
+@font-face {
+    font-family: 'Comfortaa';
+    src: url("#{$comfortaa-font-path}Comfortaa-VariableFont_wght.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_commissioner.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_commissioner.scss
@@ -0,0 +1,6 @@
+$commissioner-font-path: "/fonts/commissioner/" !default;
+
+@font-face {
+    font-family: 'Commissioner';
+    src: url("#{$commissioner-font-path}Commissioner-VariableFont_FLAR,VOLM,slnt,wght.ttf") format("truetype");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_cooperhewitt.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_cooperhewitt.scss
@@ -0,0 +1,100 @@
+$cooperhewitt-font-path: "/fonts/cooperhewitt/" !default;
+
+/*** Cooper Hewitt ***/
+@font-face {
+    font-family: 'Cooper Hewitt Bold';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-Bold.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Bold Italic';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-BoldItalic.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Book';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-Book.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Book Italic';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-BookItalic.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Heavy';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-Heavy.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Heavy Italic';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-HeavyItalic.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Light';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-Light.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Light Italic';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-LightItalic.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Medium';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-Medium.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Medium Italic';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-MediumItalic.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Semibold';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-Semibold.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Semibold Italic';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-SemiboldItalic.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Thin';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-Thin.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt Thin Italic';
+    src: url('#{$cooperhewitt-font-path}CooperHewitt-ThinItalic.woff') format('woff'); /* Super Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_crimson-text.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_crimson-text.scss
@@ -0,0 +1,39 @@
+$crimsontext-font-path: "/fonts/crimson_text/" !default;
+
+
+@font-face {
+    font-family: "Crimson Text Bold";
+    src: local(Crimson Text Bold), url('#{$crimsontext-font-path}CrimsonText-Bold.ttf');
+    src: url("#{$crimsontext-font-path}CrimsonText-Bold.ttf") format("truetype");
+    font-weight: 700;
+}
+@font-face {
+    font-family: "Crimson Text Bold Italic";
+    src: local(Crimson Text Bold Italic), url('#{$crimsontext-font-path}CrimsonText-BoldItalic.ttf');
+    src: url("#{$crimsontext-font-path}CrimsonText-BoldItalic.ttf") format("truetype");
+    font-weight: 700;
+}
+@font-face {
+    font-family: "Crimson Text Italic";
+    src: local(Crimson Text Italic), url('#{$crimsontext-font-path}CrimsonText-Italic.ttf');
+    src: url("#{$crimsontext-font-path}CrimsonText-Italic.ttf") format("truetype");
+    font-weight: 400;
+}
+@font-face {
+    font-family: "Crimson Text Regular";
+    src: local(Crimson Text Regular), url('#{$crimsontext-font-path}CrimsonText-Regular.ttf');
+    src: url("#{$crimsontext-font-path}CrimsonText-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+@font-face {
+    font-family: "Crimson Text Semi Bold";
+    src: local(Crimson Text Semi Bold), url('#{$crimsontext-font-path}CrimsonText-SemiBold.ttf');
+    src: url("#{$crimsontext-font-path}CrimsonText-SemiBold.ttf") format("truetype");
+    font-weight: 600;
+}
+@font-face {
+    font-family: "Crimson Text Semi Bold Italic";
+    src: local(Crimson Text Semi Bold Italic), url('#{$crimsontext-font-path}CrimsonText-SemiBoldItalic.ttf');
+    src: url("#{$crimsontext-font-path}CrimsonText-SemiBoldItalic.ttf") format("truetype");
+    font-weight: 600;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_dancingscript.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_dancingscript.scss
@@ -0,0 +1,14 @@
+$dancingscript-font-path: "/fonts/dancingscript/" !default;
+
+/*** Poppins ***/
+@font-face {
+    font-family: "Dancing Script";
+    src: local(Dancing Script), url('#{$dancingscript-font-path}DancingScript-Regular.ttf');
+    src: url("#{$dancingscript-font-path}DancingScript-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+
+
+.dancing-script {
+  font-family: "Dancing Script";
+}
--- a/projects/shared-ui/src/styles/fontfaces/_dellarespira.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_dellarespira.scss
@@ -0,0 +1,9 @@
+$dellarespira-font-path: "/fonts/dellarespira/" !default;
+
+@font-face {
+    font-family: 'Della Respira';
+    src: url("#{$dellarespira-font-path}DellaRespira-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
--- a/projects/shared-ui/src/styles/fontfaces/_dmsans.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_dmsans.scss
@@ -0,0 +1,12 @@
+$dmsans-font-path: "/fonts/dmsans/" !default;
+
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url("#{$dmsans-font-path}DMSans-VariableFont_opsz,wght.ttf") format("truetype")
+}
+
+@font-face {
+  font-family: 'DM Sans Italic';
+  src: url("#{$dmsans-font-path}DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype")
+}
--- a/projects/shared-ui/src/styles/fontfaces/_ebgaramond.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_ebgaramond.scss
@@ -0,0 +1,73 @@
+$ebgaramond-font-path: "/fonts/ebgaramond/" !default;
+
+
+@font-face {
+    font-family: 'EBGaramond';
+    src: url("#{$ebgaramond-font-path}EBGaramond-VariableFont_wght.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'EBGaramond Italic';
+    src: url("#{$ebgaramond-font-path}EBGaramond-Italic-VariableFont_wght.ttf") format("truetype");
+}
+
+/*
+@font-face {
+    font-family: 'EBGaramond Bold';
+    src: url("#{$ebgaramond-font-path}EBGaramond-Bold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'EBGaramond Bold Italic';
+    src: url("#{$ebgaramond-font-path}EBGaramond-BoldItalic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'EBGaramond Extra Bold';
+    src: url("#{$ebgaramond-font-path}EBGaramond-ExtraBold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'EBGaramond Extra Bold Italic';
+    src: url("#{$ebgaramond-font-path}EBGaramond-ExtraBoldItalic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'EBGaramond Semi Bold';
+    src: url("#{$ebgaramond-font-path}EBGaramond-SemiBold.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'EBGaramond Semi Bold Italic';
+    src: url("#{$ebgaramond-font-path}EBGaramond-SemiBoldItalic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+  font-family: 'EBGaramond Medium';
+    src: url("#{$ebgaramond-font-path}EBGaramond-Medium.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+  font-family: 'EBGaramond Medium Italic';
+    src: url("#{$ebgaramond-font-path}EBGaramond-MediumItalic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+  font-family: 'EBGaramond Regular';
+    src: url("#{$ebgaramond-font-path}EBGaramond-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+*/
--- a/projects/shared-ui/src/styles/fontfaces/_epilogue.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_epilogue.scss
@@ -0,0 +1,12 @@
+$epilogue-font-path: "/fonts/epilogue/" !default;
+
+
+/*** Aileron**/
+@font-face {
+    font-family: 'Epilogue';
+    src: url("#{$epilogue-font-path}Epilogue-VariableFont_wght.ttf") format("truetype");
+}
+@font-face {
+    font-family: 'Epilogue Italic';
+    src: url("#{$epilogue-font-path}Epilogue-Italic-VariableFont_wght.ttf") format("truetype");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_exo2.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_exo2.scss
@@ -0,0 +1,16 @@
+$exo2-font-path: "/fonts/exo_2/" !default;
+
+
+@font-face {
+    font-family: 'Exo2';
+    src: url("#{$exo2-font-path}Exo2-VariableFont_wght.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Exo2 Italic';
+    src: url("#{$exo2-font-path}Exo2-Italic-VariableFont_wght.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_figtree.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_figtree.scss
@@ -0,0 +1,12 @@
+$figtree-font-path: "/fonts/figtree/" !default;
+
+
+@font-face {
+    font-family: 'Figtree';
+    src: url("#{$figtree-font-path}Figtree-VariableFont_wght.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: 'Figtree Italic';
+    src: url("#{$figtree-font-path}Figtree-Italic-VariableFont_wght.ttf") format("truetype");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_fraunces.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_fraunces.scss
@@ -0,0 +1,8 @@
+$fraunces-font-path: "/fonts/fraunces/" !default;
+
+@font-face {
+    font-family: 'Fraunces';
+    src: url("#{$fraunces-font-path}Fraunces-VariableFontt.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_geist.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_geist.scss
@@ -0,0 +1,7 @@
+$geist-font-path: "/fonts/geist/" !default;
+
+
+@font-face {
+    font-family: 'Geist';
+    src: url("#{$geist-font-path}Geist-VariableFont_wght.ttf") format("truetype");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_glassantiqua.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_glassantiqua.scss
@@ -0,0 +1,8 @@
+$glassantiqua-font-path: "/fonts/glassantiqua/" !default;
+
+@font-face {
+    font-family: 'Glass Antiqua';
+    src: url("#{$glassantiqua-font-path}GlassAntiqua-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_iceland.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_iceland.scss
@@ -0,0 +1,8 @@
+$iceland-font-path: "/fonts/iceland/" !default;
+
+@font-face {
+    font-family: "Iceland Regular";
+    src: local(Lato Regular), url('#{$iceland-font-path}Iceland-Regular.ttf');
+    src: url("#{$iceland-font-path}Iceland-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_inter.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_inter.scss
@@ -0,0 +1,164 @@
+$inter-font-path: "/fonts/inter/" !default;
+
+/*
+@font-face {
+    font-family: 'Inter';
+    src: urlll("#{$inter-font-path}Inter-V.otf") format("otf");
+    font-weight: normal;
+    font-style: normal;
+}
+*/
+
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-Thin.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-Thin.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-ThinItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-ThinItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-ExtraLight.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-ExtraLight.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-ExtraLightItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-ExtraLightItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-Light.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-Light.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-LightItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-LightItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-Regular.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-Italic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-Medium.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-MediumItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-SemiBold.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-SemiBold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-SemiBoldItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-SemiBoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-Bold.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-BoldItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-ExtraBold.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-ExtraBold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-ExtraBoldItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-ExtraBoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-Black.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-Black.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("#{$inter-font-path}Inter-BlackItalic.woff2") format("woff2"),
+       url("#{$inter-font-path}Inter-BlackItalic.woff") format("woff");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_josefin_sans.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_josefin_sans.scss
@@ -0,0 +1,16 @@
+$josefin-font-path: "/fonts/josefin/" !default;
+
+
+@font-face {
+    font-family: "Josefin Sans";
+    src: local(Julius Sans One), url('#{$josefin-font-path}JosefinSans-VariableFont_wght.ttf');
+    src: url("#{$josefin-font-path}JosefinSans-VariableFont_wght.ttf") format("truetype");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Josefin Sans Italic";
+    src: local(Julius Sans One), url('#{$josefin-font-path}JosefinSans-Italic-VariableFont_wght.ttf');
+    src: url("#{$josefin-font-path}JosefinSans-Italic-VariableFont_wght.ttf") format("truetype");
+    font-weight: 500;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_juliussansone.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_juliussansone.scss
@@ -0,0 +1,9 @@
+$juliussansone-font-path: "/fonts/juliussansone/" !default;
+
+
+@font-face {
+    font-family: "Julius Sans One";
+    src: local(Julius Sans One), url('#{$juliussansone-font-path}JuliusSansOne-Regular.ttf');
+    src: url("#{$juliussansone-font-path}JuliusSansOne-Regular.ttf") format("truetype");
+    font-weight: 500;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_karla.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_karla.scss
@@ -0,0 +1,10 @@
+$karla-font-path: "/fonts/karla/" !default;
+
+@font-face {
+    font-family: 'Karla';
+    src: url("#{$karla-font-path}Karla-VariableFont_wght.ttf") format("truetype");
+}
+@font-face {
+    font-family: 'Karla Italic';
+    src: url("#{$karla-font-path}Karla-Italic-VariableFont_wght.ttf") format("truetype");
+}
--- a/projects/shared-ui/src/styles/fontfaces/_kollektif.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_kollektif.scss
@@ -0,0 +1,29 @@
+$kollektif-font-path: "/fonts/kollektif-webfont/" !default;
+
+
+/*** Kollektif**/
+@font-face {
+    font-family: 'Kollektif Bold';
+    src: url("#{$kollektif-font-path}kollektif-bold-webfont.ttf") format("truetype"),
+         url('#{$kollektif-font-path}kollektif-bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
+         url('#{$kollektif-font-path}kollektif-bold-webfont.woff') format('woff'); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Kollektif Regular';
+    src: url("#{$kollektif-font-path}kollektif-webfont.ttf") format("truetype"),
+         url('#{$kollektif-font-path}kollektif-webfont.woff2') format('woff2'), /* Super Modern Browsers */
+         url('#{$kollektif-font-path}kollektif-webfont.woff') format('woff'); /* Modern Browsers */
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+.kollektif-bold {
+  font-family: 'kollektifbold';
+}
+
+.kollektif {
+  font-family: 'kollektifregular';
+}
--- a/projects/shared-ui/src/styles/fontfaces/_lato.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_lato.scss
@@ -0,0 +1,30 @@
+$lato-font-path: "/fonts/lato/" !default;
+
+
+@font-face {
+    font-family: "Lato Black";
+    src: local(Lato Black), url('#{$lato-font-path}Lato-Black.ttf');
+    src: url("#{$lato-font-path}Lato-Black.ttf") format("truetype");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "Lato Regular";
+    src: local(Lato Regular), url('#{$lato-font-path}Lato-Regular.ttf');
+    src: url("#{$lato-font-path}Lato-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+@font-face {
+  font-family: "Lato Medium";
+  src: local(Lato Regular), url('#{$lato-font-path}Lato-Medium.ttf');
+  src: url("#{$lato-font-path}Lato-Medium.ttf") format("truetype");
+  font-weight: 500;
+}
+
+
+.lato-black {
+  font-family: "Lato Black";
+}
+
+.lato-regular {
+  font-family: "Lato Regular";
+}
--- a/projects/shared-ui/src/styles/fontfaces/_leaguespartan.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_leaguespartan.scss
@@ -0,0 +1,8 @@
+$leaguespartan-font-path: "/fonts/leaguespartan/" !default;
+
+
+@font-face {
+    font-family: "League Spartan";
+    src: url("#{$leaguespartan-font-path}LeagueSpartan-VariableFont_wght.ttf") format("truetype");
+}
+
--- a/projects/shared-ui/src/styles/fontfaces/_lexend.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_lexend.scss
@@ -0,0 +1,9 @@
+$lexend-font-path: "/fonts/lexend/" !default;
+
+
+@font-face {
+    font-family: 'Lexend';
+    src: url("#{$lexend-font-path}Lexend-VariableFont_wght.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_librebaskerville.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_librebaskerville.scss
@@ -0,0 +1,21 @@
+$librebaskerville-font-path: "/fonts/librebaskerville/" !default;
+
+@font-face {
+    font-family: "Libre Baskerville Bold";
+    src: local(Lato Black), url('#{$librebaskerville-font-path}LibreBaskerville-Bold.ttf');
+    src: url("#{$librebaskerville-font-path}LibreBaskerville-Bold.ttf") format("truetype");
+    font-weight: 500;
+}
+@font-face {
+  font-family: "Libre Baskerville Italic";
+    src: local(Lato Regular), url('#{$librebaskerville-font-path}LibreBaskerville-Bold.ttf');
+    src: url("#{$librebaskerville-font-path}LibreBaskerville-Bold.ttf") format("truetype");
+    font-weight: 400;
+}
+
+@font-face {
+  font-family: "Libre Baskerville Regular";
+    src: local(Lato Regular), url('#{$librebaskerville-font-path}LibreBaskerville-Regular.ttf');
+    src: url("#{$librebaskerville-font-path}LibreBaskerville-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_limelight.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_limelight.scss
@@ -0,0 +1,8 @@
+$limelight-font-path: "/fonts/limelight/" !default;
+
+@font-face {
+    font-family: 'Limelight';
+    src: url("#{$limelight-font-path}Limelight-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
--- a/projects/shared-ui/src/styles/fontfaces/_lora.scss
+++ b/projects/shared-ui/src/styles/fontfaces/_lora.scss
@@ -0,0 +1,11 @@
+$lora-font-path: "/fonts/lora/" !default;
+
+@font-face {
+    font-family: "Lora";
+    src: url("#{$lora-font-path}Lora-VariableFont_wght.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Lora Italic";
+    src: url("#{$lora-font-path}Lora-Italic-VariableFont_wght.ttf") format("truetype");
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`/* You can add global styles to this file, and also import other style files */`