# Context
We’re beginning the implementation phase of our **Custom Advanced Design System**.
Our goal in this step is to generate all **Design Tokens** — color palette, typography, spacing, shadow, blur, radius, and transitions — that will serve as the visual foundation for the entire system.
These tokens must reflect a **premium, dark, iOS-style glass aesthetic**, with clean contrast, natural lighting, and tactile motion.
---
## Task
Generate a complete **Design Tokens configuration** for TailwindCSS or JSON format, ready to integrate into a React or Next.js project.
Every token should be thoughtfully crafted for **precision, realism, and elegance**.
### Token Categories
#### 🎨 Colors
Define a complete palette for:
- **Background Layers:** `bg-glass-1`, `bg-glass-2`, `bg-surface`, `bg-depth` (transparent dark gradients)
- **Text Colors:** `text-primary`, `text-secondary`, `text-muted`
- **Accents:** `accent-blue`, `accent-violet`, `accent-cyan`, `accent-green`
- **Status Toke…
We are building a **complete advanced Design System** for a modern web application.
The goal is to create all UI components (around 63+) with an **Awwwards-level visual quality**, inspired by **iOS 16/26**, **Glassmorphism**, and **dark premium design** aesthetics.
This Design System will serve as the foundation for all future pages and features.
Every component must be consistent, pixel-perfect, and built with a unified visual language.
## Task
Design and build a **comprehensive, reusable Design System** that includes every major UI component (listed below).
Each component should follow a single, cohesive theme — futuristic, minimal, luxurious, and inspired by Apple's iOS system with soft lighting and glass-like depth.
The design system must include:
- Colors
- Typography scale
- Shadows and elevation tokens
- Border radius and corner treatments
- Blur levels and transparency settings
- Animation timing and microinteractions
- Component states (hover, focus, active, disabled)
…
We already have a completed project that functions correctly.
Now we want to **redesign its entire UI** to achieve a premium, award-winning aesthetic inspired by **Awwwards-quality designs**, **iOS 16/26 style**, and **modern glassmorphism** principles.
This task focuses exclusively on visual improvement and perfection in every design detail.
## Task
Redesign the whole interface using a **dark mode, glass-style design system** with ultra-high precision.
Create a **unified Design System** that defines all reusable styles (colors, shadows, borders, blur levels, typography, spacings, and states).
The result must look polished, smooth, and consistent across every screen, with pixel-perfect precision and no visual bugs.
### Guidelines
- Follow the **dark, elegant, iOS-inspired style** with soft glass layers, gradients, and depth effects.
- Apply **subtle transparency, light reflections, and blurred surfaces** to achieve a modern “glass UI” look.
- Pay extreme attention to ever…
