turbo-design

byAshish Ardeshana

Create 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