🌐 Quad Design System
Quad is a universal design system built for every screen — from mobile to TV. It adapts seamlessly across mobile, tablet, desktop, and TV interfaces, giving designers and developers a consistent foundation to create beautiful, scalable experiences.
🚀 Version v0.2 — Core Components Release
This version focuses on delivering the most foundational interactive elements to enable rapid development of basic UIs.
New in v0.2:
🔘 Buttons: Comprehensive Button components covering various states (e.g., primary, secondary, disabled, loading), sizes, and styles.
⌨️ Inputs: Robust Input components for text, password, and other common form fields, ensuring consistency and accessibility.
✨ Iconography: Initial integration of an essential Icon Set to support core actions and navigation within components.
🔄 Component Foundation: CSS and initial Vue component implementations for the new interactive elements.
Status (v0.1 Foundations)
✅ Core color palette (light & dark mode support)
✅ Typography foundation setup
✅ Base structure for upcoming components
🧠 Vision
Quad is built to unify design and development across all devices and platforms. Its goal is to become a flexible, open-source system that can scale from web to mobile, smart devices, and beyond.
🛠️ Tech Stack HTML & CSS (Foundations) | Vue.js (First component implementations)
Planned: React / SwiftUI / Flutter implementations
🔗 Live Demo View Quad on Vercel
💬 Author
Designed & developed by Stefan Saric
Follow the journey on https://www.linkedin.com/in/uxbystefan/
📅 Upcoming (v0.3)
• Responsive Grid System
• Navigation components (Header/Navbar, Sidebar)
• Card and list-item components
• Form validation and feedback patterns
• Full Dark Mode component support
We welcome contributions across all frameworks! Please read our Contributor Guidelines before submitting a Pull Request.
Quad Design System is MIT Licensed.