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

/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

Link the CSS: Add the main stylesheet to your <head>:
```
<link rel="stylesheet" href="css/style.css">
```
Import the JS: Add the module script before the closing </body> tag:
```
<script type="module" src="js/main.js"></script>
```
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:

New Components: Add a new file in css/5-components/_my-component.css and import it in css/style.css.
New Logic: Add a module in js/ui/ and import/init it in js/main.js.

System Status: ONLINE 💠

2.5 KiB Raw Blame History