Ashish ArdeshanaCreate a complete modern design system for the latest and modern ui design **Role:** Act as a Senior UI/UX Designer and Front-end Expert. **Task:** Generate a complete Design System and UI layout for a **create a landing page for education coaching classes online**. Include: 1. Grid System: * 12-column responsive grid * Container width: 1200px * Gutter: 16px * Margin: 16px * Responsive breakpoints (mobile, tablet, desktop) 2. Spacing System: * Base spacing unit: 16px * Define spacing scale (4, 8, 16, 24, 32, 48, 64) 3. Color Palette: * Primary, secondary, success, warning, error * Neutral grayscale (light to dark) * Background and surface colors 4. Typography: * Font family (modern sans-serif) * Heading (H1âH6), body, caption * Font sizes, weights, line heights 5. UI Components: * Buttons (primary, secondary, outline, disabled, hover states) * Form elements (input, dropdown, checkbox, radio, error states) * Cards and containers * Navigation (sidebar, topbar) 6. Design Tokens: * Colors, spacing, typography tokens * Border radius, shadows, elevation Style: * Clean, modern, minimal * Inspired by Material UI * Light theme with optional dark mode * Accessible contrast Output: * Structured, reusable design system
Sign in to leave a comment
Master in-demand skills with expert-led courses, interactive projects, and a community that propels you forward. Your transformation starts here.
Navigate through our constellation of courses. Each star represents a unique learning journey â hover to discover, click to explore.
Handpicked by our team of expert educators â each course is designed to accelerate your career with practical, project-based learning.
IntermediateMaster React, Node.js, and cloud deployment with hands-on projects and real-world applications.
Learn More
AdvancedFrom Python fundamentals to neural networks â build predictive models that solve real problems.
Learn More
BeginnerLearn user research, wireframing, prototyping, and design systems used by top product teams.
Learn More
AdvancedDesign scalable, fault-tolerant systems on AWS with hands-on labs and certification prep.
Learn MoreHear from learners who transformed their careers through our interactive, galaxy-scale education platform.
Real transformations from students who took the leap. Their journeys inspire what's possible with the right guidance.
Your journey from curiosity to certification in four simple steps.
Browse our galaxy of expert-led courses and find the perfect path for your career goals.
Engage with industry professionals through live sessions, video lectures, and interactive workshops.
Solidify your knowledge with hands-on projects, quizzes, and real-world assignments.
Complete your course and receive a verified certificate to showcase your new expertise.
Choose the plan that fits your learning goals. Upgrade, downgrade, or cancel anytime â no hidden fees.
30-day money-back guarantee on all paid plans
Join our community of learners and start your journey today.
No comments yet. Be the first!