# 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)
…
