# VEZA Design System v5.0 (Gold Master)
Welcome to the **Veza Design System**, a modular, cyberpunk-inspired UI framework built for the next generation of decentralized applications.
## 🌟 Overview
This system uses a highly scalable architecture designed for maintainability and performance.
- **Aesthetic**: Neon Ronin (Cyberpunk, Glitch, Glassmorphism)
- **Architecture**: ITCSS (CSS) & ES Modules (JS)
- **Structure**: Hub & Spoke (Documentation Hub -> Page Templates)
## 📂 Project Structure
```bash
/design
├── index.html # Documentation Hub & Atom Library
├── templates/ # Production-ready Layouts
│ ├── auth.html # Login / Register / 2FA
│ ├── nexus.html # User Profile / Stats
│ ├── social.html # Feed / Chat / Stories
│ ├── market.html # Shop / Cart / Checkout
│ └── studio.html # Dashboard / Analytics
├── css/ # ITCSS Styled Architecture
│ ├── 1-settings/ # Tokens (Colors, Fonts)
│ ├── 2-generic/ # Resets
│ ├── 4-objects/ # Animations
│ ├── 5-components/ # Atoms (Buttons, Cards)
│ ├── 6-modules/ # Organisms (Auth, Chat)
│ ├── 7-utilities/ # Helpers
│ └── style.css # Main Manifest (Import this!)
└── js/ # ES Modules
├── core/ # Boot, Theme
├── ui/ # Navigation, Search
└── main.js # Entry Point
```
## 🚀 Getting Started
1. **Link the CSS**:
Add the main stylesheet to your ``:
```html
```
2. **Import the JS**:
Add the module script before the closing `` tag:
```html
```
3. **Use a Template**:
Copy any file from `templates/` to start a new page with the grid layout pre-configured.
## 🎨 Key Features
* **Theming**: Native Light/Dark mode support (switching via `js/core/theme.js`).
* **Glitch Effects**: CSS-only text glitches using `.glitch` class and `data-text` attribute.
* **Glassmorphism**: Utility classes for backdrop blurs and translucent panels.
* **Modular**: Load only what you need, or use the pre-bundled `style.css`.
## 🛠Development
To extend the system:
1. **New Components**: Add a new file in `css/5-components/_my-component.css` and import it in `css/style.css`.
2. **New Logic**: Add a module in `js/ui/` and import/init it in `js/main.js`.
---
*System Status: ONLINE* ðŸ’