━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 ZEBA ACADEMY DESIGN SYSTEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📦 Flutter Design System Package 🔷 Version: 1.0.0 📜 License: GNU GPL v3.0

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 👨‍💻 ABOUT THE AUTHOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

🌐 Website: https://sufyanism.com
💼 LinkedIn: https://www.linkedin.com/in/sufyanism

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 ZEBA ACADEMY ECOSYSTEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🚀 Explore coding, tech, and development learning resources:

🌍 https://zeba.academy
💻 https://code.zeba.academy
📺 https://www.youtube.com/@zeba.academy
📸 https://www.instagram.com/zeba.academy/

💡 Empowering developers with real-world skills, projects, and curated learning paths.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📦 ABOUT THIS PACKAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Zeba Academy Design System is a scalable Flutter UI framework designed for building consistent and maintainable applications.

It provides:

🎨 Design Tokens
📏 Spacing System
🔤 Typography System
🎯 Color System
🧩 Reusable Components
🌗 Theme Management
📐 UI Guidelines

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✔ Centralized Design Tokens
✔ Light & Dark Theme Support
✔ Reusable UI Components
✔ Consistent Spacing System
✔ Accessible UI Guidelines
✔ Clean Architecture Friendly
✔ Flutter 100% Compatible

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📁 PACKAGE STRUCTURE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

lib/ ├── tokens/ │ ├── colors.dart │ ├── spacing.dart │ ├── radius.dart │ ├── typography.dart │ ├── theme/ │ ├── zeba_theme.dart │ ├── theme_controller.dart │ ├── components/ │ ├── z_button.dart │ ├── z_card.dart │ ├── z_textfield.dart │ ├── guidelines/ │ ├── ui_guidelines.dart

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧠 USAGE GUIDE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📌 Import Package

import 'package:zeba_academy_design_system/zeba_academy_design_system.dart';

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 DESIGN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Container( padding: const EdgeInsets.all(ZebaSpacing.md), color: ZebaColors.background, child: Text( "Zeba Academy", style: ZebaTypography.h2, ), );

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧩 COMPONENTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔘 BUTTON

ZButton( text: "Get Started", onPressed: () {}, );

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🧾 CARD

ZCard( child: Text("Reusable UI Card"), );

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✏ TEXTFIELD

ZTextField( hint: "Enter text", controller: TextEditingController(), );

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🌗 THEME SETUP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

MaterialApp( theme: ZebaTheme.light(), darkTheme: ZebaTheme.dark(), home: MyHomePage(), );

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔄 THEME CONTROLLER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

final controller = ZebaThemeController(); controller.toggleTheme();

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📐 DESIGN RULES (IMPORTANT) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✔ Always use design tokens
✔ Never hardcode spacing or colors
✔ Prefer Zeba components over Material widgets
✔ Maintain spacing system:

xs = 4
sm = 8
md = 16
lg = 24

✔ Keep UI minimal, consistent, and accessible

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📜 LICENSE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This project is licensed under:

GNU GENERAL PUBLIC LICENSE v3.0 (GPL-3.0)

🔗 https://www.gnu.org/licenses/gpl-3.0.html

✔ You may:

• Use
• Modify
• Distribute

❗ But must:

• Keep it open-source under GPL
• Credit original author

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ⭐ SUPPORT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

If you like this project: ⭐ Star the repository
📢 Share with developers
🛠 Contribute improvements

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 END OF DOCUMENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━